Visual Hierarchy, Visual Flow, Grouping and Alignment
Slide 3
Visual Hierarchy The most important content should stand out
the most, the least important the least Consider titles, secondary
content, footnotes, etc. Each should look like what they represent
A user should be able to deduce informational structure of the page
from its layout
Slide 4
Visual Flow Paths users eye moment follows as they scan the
page Related to Visual Hierarchy in that when the VH is well
designed focal points will draw users attention in an appropriate
order Focal points are the spots that a user has trouble avoiding,
its natural to find them The fewer the focal points the better
Slide 5
Visual Flow Visual disconnect for right to left languages The
views eye movement wants to move in the wrong direction given the
screen flow.
Slide 6
Visual Flow Correct text flow given a western language The
views eye movement goes with the flow and text
Slide 7
Grouping and Alignment Grouping and Alignment like focal points
are necessary in forming a clear visual hierarchy They also help
visual flow as they may guide users eyes from group to group Human
nature desires visual order, making larger forms from smaller forms
You can take advantage of this by grouping and aligning things into
distinct groups and using whitespace appropriately
Slide 8
Gestalt Principle - Proximity Users will associate things that
are close together 9 separate items 1 group
Slide 9
Gestalt Principle - Similarity If two things are the same
shape, size, color or orientation, users will associate them
together Shape and Size Similarity Shape Similarity
Slide 10
Gestalt Principle - Similarity If two things are the same
shape, size, color or orientation, users will associate them
together Color Similarity Orientation Similarity
Slide 11
Gestalt Principle - Continuity Our eyes want to see continuous
lines and curves formed by the alignment of smaller elements
Slide 12
Gestalt Principle - Closure People want to see simple closed
forms, like rectangles and blobs of whitespace implicitly 1, 3, 5,
__, 9 Th prchas of a hme s lkely th sngle mst mprtant fnancl dcisn
yll evr mke Ofur recso nad venes eyasr gao
http://vimeo.com/5732745
Slide 13
Gestalt Principle - Closure
Slide 14
The power of power of the allows us to deduce information from
images and layout. We are the ultimate super computer.
Slide 15
Where are the Lions?
Slide 16
From where should the Lions attack?
Slide 17
In depth examples
Slide 18
Good Grouping and Alignment Poor Visual Hierarchy Poor Visual
Flow
Slide 19
Poor Navigation
Slide 20
Same site, new look Good hierarchy Good Flow Great Navigation
Great Grouping and Alignment
Slide 21
Avg-Good Hierarchy focal points may not be as intended Good
Diagonal and Overall Balance Average Flow Clear path, but against
human nature Poor Navigation Color Scheme = Analogic base color,
neighbor color, complementary color Purple, blue, orange Used to
draw attention to 2 nd two colors, neighbor will be more subtle
than complementary
Slide 22
Start on Home"
Slide 23
Click on Design it Note loss of context
Slide 24
Click on Our Software Return of Context
Slide 25
Click on Build it Loss of context again Visually two levels of
nested navigation. In reality, two separate navigation systems
Slide 26
Poor Visual Hierarchy Poor Visual Flow Good Grouping and
Alignment Poor Navigation Poor implementation of a complementary
color scheme, ruins hierarchy and flow Navigation scheme suffers
from same pitfalls as the last example
Slide 27
Average Hierarchy Poor Flow Good Grouping/Alignment Poor
Navigation Too many fonts Inconsistent font direction Inconsistent
image direction Primarily slow image direction Inconsistent product
image perspective Least important content occupies center Color
Scheme = Accented Analogic Base, neighbor, comp, base comp (accent)
Incorrect usage. Orange, Red, Yellow are analogic, so blue is the
accent color. Its used as the base.
Slide 28
Good Visual Hierarchy Good Visual Flow Great Grouping &
Alignment Great Navigation
Slide 29
Top of Hierarchy
Slide 30
2 nd Tier of Hierarchy
Slide 31
3rd Tier of Hierarchy Hierarchy = Flow in this screen
Slide 32
Strong grouping and alignment using Titled panels Good use of
sub hierarchy to distinguish titles from text/links and footer
information
Slide 33
Poor/No Visual Hierarchy No Visual Flow Poor Grouping and
Alignment Poor/No Navigation
Slide 34
Slide 35
Slide 36
Average Hierarchy Good Grouping & Alignment Good Navigation
Avg - Poor Visual Flow
Slide 37
Slide 38
Abstract technique to conceptualize your visual hierarchy, flow
and grouping & alignment What is the hierarchy? Possible page
flows?
Slide 39
Possible Flow #1
Slide 40
Possible Flow #2
Slide 41
Possible Flow #3
Slide 42
Primary Visual Hierarchy through Grouping
Slide 43
Secondary Visual Hierarchy
Slide 44
Great on all fronts! Which hierarchy principles are used? What
is the flow? Which Gastalt principles?
Slide 45
Visual Hierarchy Site Image Font Weight, Size and Color
Slide 46
Possible Flow #1
Slide 47
Possible Flow #2
Slide 48
Possible Flow #3 All good!
Slide 49
Grouping and Alignment - Proximity
Slide 50
Grouping and Alignment - Similarity
Slide 51
Grouping and Alignment - Closure
Slide 52
Good Visual Hierarchy Good Flow Good Grouping & Alignment
Good Navigation Color Scheme ruins the flow/usability
Slide 53
A minor change to background color cleans this up
Slide 54
Poor Visual Hierarchy Poor Flow Good Grouping & Alignment
Average Navigation Color Scheme kills it all
Slide 55
Only unifying the color scheme no layout changes
Slide 56
Almost great. What can be improved?
Slide 57
User follows the blue initially
Slide 58
Better, but the right side of the page may still draw user and
there seems to be a lack of balance
Slide 59
Subtle Option
Slide 60
Subtle, more balanced option. Also brings presence to the
center column with drop shadow
Slide 61
Whats not wrong with this?
Slide 62
Slide 63
Duplicated Domain Search/Buy Entry Points
Slide 64
Duplicated Account/Login Information
Slide 65
Orange and Red make these focal points
Slide 66
= The only real use of whitespace
Slide 67
Site name and tag line are lost in the noise
Slide 68
Blur test. Failed.
Slide 69
How much whitespace? ~70% for optimum usability
Slide 70
Slide 71
Slide 72
Slide 73
Size and Position Ive followed all the Visual Hierarchy, Visual
Flow, Grouping and Alignment principles Ive even implemented
several the Gestalt principles Something still looks off What can I
check next?
Slide 74
Golden Section Natures perfect ratio: geometry of a pinecone,
spiral of a sea shell, seeds of a sunflower, rotation of the leaves
of some plants Its been used in art, architecture, music for
centuries The ratio of the whole to the greater is the ratio of the
greater to the lesser Pythagoras Based on Fibonacci series: 0, 1,
1, 2, 3, 5, 8, 13, 21, 34 Mathematically: ~1:1.619
Slide 75
Golden Section in Screen Layout 745 1 32 6
Slide 76
Multiple Panel Window
Slide 77
Rule of Thirds 0,1,1,2,3,5 3/2 = 1.5 . close to 1.619
Slide 78
Other Visual Interesting or Common Ratios Square-Root-of-2
Rectangles. 1:414 A rectangle of this proportion when divided in
half results in 2 rectangles that are also square-root-of-2
rectangles 3 x 4 Rectangles: 1:1.333 3, 4, 5 = Simple. GUI:
640x480, 800x600, 1024x768 3 x 5 Rectangles: 1.6667 Close to golden
section but the rectangles are perceptively different due to the
extra width. Can create a heavier, more stable impression
Square-Root-of-3 Rectangles: 1.1732 Wider than 3x5 rectangles, it
accentuates the longer dimension GUIs that feature this ratio often
seem wide open on 3x4 screen resolution
