1 / 33

Layout of Page Elements

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.

dieter
Download Presentation

Layout of Page Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related