LAYOUT AND NAVIGATION PUTTING IT ALL TOGETHER
September 28th, 2009
QUICK REVIEWVisual Hierarchy, Visual Flow, Grouping and Alignment
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 it’s layout
Visual Flow Paths user’s eye moment follows as they
scan the page Related to Visual Hierarchy in that when the
VH is well designed focal points will draw user’s attention in an appropriate order
Focal points are the spots that a user has trouble avoiding, it’s natural to find them
The fewer the focal points the better
Visual Flow Visual disconnect for
right to left languages The view’s eye
movement wants to move in the wrong direction given the screen flow.
Visual Flow Correct text flow given
a western language The view’s eye
movement goes with the flow and text
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
user’s 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
Gestalt Principle - Proximity Users will associate things that are close together
9 separate items
1 group
Gestalt Principle - Similarity If two things are the same shape, size, color or
orientation, users will associate them together
Shape and Size SimilarityShape Similarity
Gestalt Principle - Similarity If two things are the same shape, size, color or
orientation, users will associate them together
Color SimilarityOrientation Similarity
Gestalt Principle - Continuity Our eyes want to see continuous lines and curves
formed by the alignment of smaller elements
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 y’ll evr mke Ofur recso nad venes eyasr gao… http://vimeo.com/5732745
Gestalt Principle - Closure
HUMAN INTELLIGENCE
The power of power of the allows us to deduce information from images and layout. We are the ultimate super computer.
Where are the Lions?
From where should the Lions attack?
LAYOUT AND NAVIGATION PUTTING IT ALL TOGETHER
In depth examples
Good Grouping and Alignment
Poor Visual Hierarchy
Poor Visual Flow
Poor Navigation
Same site, new look
Good hierarchy Good Flow Great
Navigation Great Grouping
and Alignment
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
2nd two colors, neighbor will be more subtle than complementary
Start on “Home"
Click on “Design it”
Note loss of context
Click on “Our Software”
Return of Context
Click on “Build it”
Loss of context again
Visually two levels of nested navigation.
In reality, two separate navigation systems
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
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. It’s used as the base.
Good Visual Hierarchy
Good Visual Flow
Great Grouping & Alignment
Great Navigation
Top of Hierarchy
2nd Tier of Hierarchy
3rd Tier of Hierarchy
Hierarchy = Flow in this screen
Strong grouping and alignment using Titled panels Good use of sub hierarchy to distinguish titles from
text/links and footer information
Poor/No Visual Hierarchy No Visual Flow Poor Grouping and Alignment Poor/No Navigation
Average Hierarchy
Good Grouping & Alignment
Good Navigation
Avg - Poor Visual Flow
Abstract technique to conceptualize your visual hierarchy, flow and grouping & alignment
What is the hierarchy?
Possible page flows?
Possible Flow #1
Possible Flow #2
Possible Flow #3
Primary Visual Hierarchy through Grouping
Secondary Visual Hierarchy
Great on all fronts! Which hierarchy principles are used? What is the flow? Which Gastalt principles?
Visual Hierarchy Site Image Font Weight , Size and Color
Possible Flow #1
Possible Flow #2
Possible Flow #3 – All good!
Grouping and Alignment - Proximity
Grouping and Alignment - Similarity
Grouping and Alignment - Closure
Good Visual Hierarchy
Good Flow Good Grouping &
Alignment Good Navigation
Color Scheme ruins the flow/usability
A minor change to background color cleans this up
Poor Visual Hierarchy
Poor Flow Good Grouping &
Alignment Average Navigation
Color Scheme kills it all
Only unifying the color scheme – no layout changes
Almost great…. What can be improved?
User follows the blue initially
Better, but the right side of the page may still draw user and there seems to be a lack of balance
Subtle Option
Subtle, more balanced option. Also brings presence to the center column with drop shadow
What’s not wrong with this?
Duplicated Domain Search/Buy Entry Points
Duplicated Account/Login Information
Orange and Red make these focal points
=
The only real use of whitespace
Site name and tag line are lost in the noise
Blur test…. Failed.
How much whitespace? ~70% for optimum usability
Size and Position I’ve followed all the Visual Hierarchy, Visual
Flow, Grouping and Alignment principles I’ve even implemented several the Gestalt
principles Something still looks off… What can I check
next?
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 It’s 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
Golden Section in Screen Layout7 4 5
1
3 2
6
Multiple Panel Window
Rule of Thirds
0,1,1,2,3,5… 3/2 = 1.5 …. close to 1.619
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