Layout of Page Elements

1. Layout of Page Elements September 24th, 2009

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

3. 5 Major Elements of Screen Layout • Visual Hierarchy • Visual Flow • Grouping and Alignment • Dynamic Displays • Putting it all together

4. Element 1: Visual Hierarchy A user should be able to deduce informational structure of the page from it’s layout

5. 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

6. Example of No Visual Hierarchy

7. Visual Hierarchy • Visual Weight (Font size, weight) • Spatial Positioning • Shape and position

8. 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

9. Element 2: Visual Flow A user’s eye moment will follow a path created by the designer as they scan the screen

10. 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

11. 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?

12. 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.

13. Visual Flow • Correct text flow given a western language • The view’s eye movement goes with the flow and text

14. 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

15. Visual Flow • Now the race is really on!

16. 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

17. 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

18. 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

19. Element 3: Grouping and Alignment Human nature desires visual order, making larger forms from smaller forms

20. 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

21. Grouping and AlignmentGestalt Principles • Proximity • Similarity • Continuity • Closure

22. Gestalt Principle - Proximity • Users will associate things that are close together 9 separate items 1 group

23. Gestalt Principle – Proximity Screen Examples

24. Gestalt Principle - Similarity • If two things are the same shape, size, color or orientation, users will associate them together Shape Similarity Shape and Size Similarity

25. Gestalt Principle - Similarity • If two things are the same shape, size, color or orientation, users will associate them together Orientation Similarity Color Similarity

26. Gestalt Principle - Similarity • If two things are the same shape, size, color or orientation, users will associate them together Shape Similarity + Anomaly Shape Similarity

27. Gestalt Principle – SimilarityScreen Examples

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

29. Gestalt Principle – ContinuityScreen Example

30. Gestalt Principle - Closure • People want to see simple closed forms, like rectangles and blobs of whitespace – implicitly • 1, 3, 5, __, 9 • Thprchas of a hme s lkelythsnglemstmprtantfnancldcisny’llevrmke • Ofurrecsonadveneseyasrgao… • http://vimeo.com/5732745

31. Gestalt Principle - Closure

32. Gestalt Principle – ClosureScreen Example

33. Gestalt Principle – ClosureScreen Example