September 28 th, 2009

Visual 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 Similarity Shape Similarity

Gestalt Principle - Similarity  If two things are the same shape, size, color or orientation, users will associate them together Color Similarity Orientation 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… 

Gestalt Principle - Closure

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?

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 2 nd 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

 2 nd 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 Layout

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: , 4, 5 = Simple. GUI: 640x480, 800x600, 1024x768  3 x 5 Rectangles: 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: Wider than 3x5 rectangles, it accentuates the longer dimension GUIs that feature this ratio often seem wide open on 3x4 screen resolution