LAYOUT OF PAGE ELEMENTS September 24 th, 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 Hierarchy 2) Visual Flow 3) Grouping and Alignment 4) Dynamic Displays 5) Putting it all together

ELEMENT 1: VISUAL HIERARCHY A 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 FLOW A 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 ALIGNMENT Human 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 Alignment Gestalt 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 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 - Similarity  If two things are the same shape, size, color or orientation, users will associate them together Shape Similarity Shape Similarity + Anomaly

Gestalt Principle – Similarity Screen Examples

Gestalt Principle - Continuity  Our eyes want to see continuous lines and curves formed by the alignment of smaller elements

Gestalt Principle – Continuity Screen 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… 

Gestalt Principle - Closure

Gestalt Principle – Closure Screen Example