LAYOUT OF PAGE ELEMENTSSeptember 24th, 2009

Importance of Layout

“Page layout is the art of manipulating the user’s attention on a page to convey meaning, sequence, and points of interaction”

Not just an art, clear design principles and rationality exists

5 Major Elements of Screen Layout

1) Visual Hierarchy2) Visual Flow3) Grouping and Alignment4) Dynamic Displays5) Putting it all together

ELEMENT 1: VISUAL HIERARCHYA user should be able to deduce informational structure of the page from it’s layout

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

Example of No Visual Hierarchy

Visual Hierarchy

- Visual Weight (Font size, weight)- Spatial Positioning- Shape and position

Mechanisms for Good Visual Hierarchy

Upper-left-corner preference Whitespace Contrasting fonts: Bigger/Bolder for important

information Contrasting foreground and background colors Positioning, alignment, indenting Graphics: Lines, boxes, colored bars, group boxes,

etc

ELEMENT 2: VISUAL FLOWA user’s eye moment will follow a path created by the designer as they scan the screen

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 – Focal Point Methods

Whitespace High Contrast Big Fonts Spots of interesting color Converging lines Hard edges Faces Motion Arrows Sequential Images or Text

Perspective Gradients Size Changes Curves Faces – Especially the

eyes Difference between these

and Visual Hierarchy? Over Use of these

concepts?

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

Visual Flow

Visual flow is slowed down because the image is right to left and the text is left to right

Western cultures associate a visual direction of left to right as fast

This can be used to your benefit or against you by mistake

Visual Flow

Now the race is really on!

Visual Flow

Common mistake, the eyes look away from the content Human nature gives this a bad connotation due to the body

language. It’s as if the woman show does not like the content or doesn’t care

Visual Flow

Research shows a user’s eye movement will follow the eyes of the picture shown above

It’s proven that the user will be more likely to choose one of the links instead of going somewhere else or going back

Visual Flow Summary

Top-to-bottom & left-to-right is the default visual flow

Strong focal points will draw the eye first, then the weaker ones

Flow gives perceived screen meaning and will influence where the user chooses to look

ELEMENT 3: GROUPING AND ALIGNMENTHuman nature desires visual order, making larger forms from smaller forms

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

Grouping and AlignmentGestalt Principles

Proximity Similarity Continuity Closure

Gestalt Principle - Proximity

Users will associate things that are close together

9 separate items

1 group

Gestalt Principle – Proximity Screen Examples

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

If two things are the same shape, size, color or orientation, users will associate them together

Shape Similarity

Shape Similarity + Anomaly

Gestalt Principle – SimilarityScreen Examples

Gestalt Principle - Continuity

Our eyes want to see continuous lines and curves formed by the alignment of smaller elements

Gestalt Principle – ContinuityScreen Example

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

Gestalt Principle – ClosureScreen Example

Gestalt Principle – ClosureScreen Example