September 28 th, 2009. Visual Hierarchy, Visual Flow, Grouping and Alignment
Preview:
Citation preview
- Slide 1
- September 28 th, 2009
- Slide 2
- 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