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