UX Lesson 6: Visual Hierarchy
25 likes14,672 views
The document discusses visual hierarchy in UI design. It explains that visual hierarchy involves influencing users to understand and interact with website content in the ideal order. This is achieved through techniques like size, proximity, color, and position to prioritize important information. Establishing an effective visual hierarchy instantly communicates utility, usability and desirability to users.
More Related Content
What's hot (20)
Similar to UX Lesson 6: Visual Hierarchy (20)
Recently uploaded (20)
UX Lesson 6: Visual Hierarchy
- 1. by Joan Lumanauw | June, 2015 Session6: VISUAL HIERARCHY
- 2. UX Team Design Team UI System User Context Brand Alignment Visual Content
- 3. UX Team Design Team Content Hierarchy Content Elements/Features Interaction Readability Colours Font Identity Design Trends Layout Icons/Images Navigations Usability
- 4. Visual Hierarchy One of the most important aspect of UI design
- 5. Visual Hierarchy A hierarchy is essentially an order of items, goals, ideas, and/or needs. Hierarchy in web design is centrally about influencing a user to understand and embrace the principal goals of a website and interact with the material in the ideal order to facilitate a smooth and pleasant experience with the website. What is Visual Hierarchy = Information Prioritization
- 6. What is this? How do I use it? Why should I care? A visual hierarchy instantly communicate to the users Utility Usability Desirability http://www.slideshare.net/lukew/web-application-page-hierarchy?qid=8914a932-4b25-4127-b1fa-b2dc80555c37&v=default&b=&from_search=5
- 7. How do we implement visual hierarchy? Group PRIORITIZECollect
- 8. How we make sense of what we see Firstly, lets understand visual communication We recognise similarities and differences. We look for patterns. We create relationships between the things we see. Content inspired by Luke Wroblewski: http://www.slideshare.net/lukew/web-application-page-hierarchy?qid=8914a932-4b25-4127-b1fa-b2dc80555c37&v=default&b=&from_search=5
- 9. Content inspired by Luke Wroblewski: http://www.slideshare.net/lukew/web-application-page-hierarchy?qid=8914a932-4b25-4127-b1fa-b2dc80555c37&v=default&b=&from_search=5 How we group visual information Proximity Similarity Continuance Closure Gestalt Laws
- 10. How do we establish hierarchy? Now that we know how to group information
- 11. Page scanning patterns The predictable human eye VS F-Pattern Z-Pattern http://www.webdesignerdepot.com/2015/03/how-eye-scanning-impacts-visual-hierarchy-in-ux-design/
- 12. Page scanning patterns F-Pattern THINGS TO REMEMBER The F-Pattern is the sight trend that emerges on pages that are heavily laden with text, typically blogs, news sources, articles, etc When faced with a block of words, most readers will 鍖rst scan a vertical line down the left side of the text, typically looking for keywords or points of interest in the paragraphs initial sentences. Eventually the reader 鍖nds something they like, and begin to read normally, forming horizontal lines F-Pattern is not a template, its a loose guide. It works best on text-laden website design Research have shown that the F pattern loses shape after the user hits below the fold http://www.webdesignerdepot.com/2015/03/how-eye-scanning-impacts-visual-hierarchy-in-ux-design/
- 13. Page scanning patterns Z-Pattern THINGS TO REMEMBER Additionally, the Z-Pattern is the simplest and most universal pattern, popularly used on any webpage thats based around image. The reader 鍖rst scans horizontally across the top, darts down and back to the left-side, then scans horizontally again across the bottom. Its beauty is in its simplicity, and an ideal layout for sites focused around a call-to-action. Z-pattern can be repeated further down into the page It works best on singular CTA website design Z-pattern might be too simple for websites with more complex or excessive content. http://www.webdesignerdepot.com/2015/03/how-eye-scanning-impacts-visual-hierarchy-in-ux-design/
- 14. Page scanning patterns Layout Example http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
- 15. F- Layout in Action
- 16. Z- Layout in Action
- 17. Size People read/see bigger things first. http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
- 18. Space & Texture This kind of texture refers to the overall arrangement or pattern of space, text and other detail on a page. This example illustrates the concept nicely: The word Sports is higher in the hierarchy than badminton due to being higher, bigger and bolder. In the second image, the two words are about equivalent, thanks to a black rectangle that highlights badminton and sets it into its own space. In the third image, a background scribble interrupts the space of Sports but not badminton, and consequently results in a reversal where badminton is highest in the hierarchy. http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
- 20. Color and tint Bright colors stand out from muted colors or grayscale, while lighter tints appear more distant and thus fall lower on the hierarchy than richer, darker ones. http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
- 21. YOU READ THIS FIRST You will read this when skimming You will probably not read this on a skim You will not read this. unless a phrase is bolded http://sixrevisions.com/web_design/using-power-structure-and-gestalt-for-visual-hierarchy/
- 22. YOU READ THIS FIRST You will read this when skimming You will probably not read this on a skim You will not read this. unless a phrase is bolded This is called an anomaly Which means breaking the 鍖ow of the hierarchy http://sixrevisions.com/web_design/using-power-structure-and-gestalt-for-visual-hierarchy/
- 23. A designer should seek to build a design that guides the users eye from one object to the next. The most simple example of continuation is a well-placed arrow towards the next item Visual Direction http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
- 24. Visual Direction And now the baby is looking at the content. Notice the increase in people looking at the headline and text. Eye-tracking heat map of a baby looking directly at us http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
- 25. Why is visual hierarchy important? Business objectives Visual Hierarchy USER translates to Guidance Communication
- 26. MIRUM AGENCY 2014 ANY QUESTIONS? Thank you
- 27. Visual Hierarchy In pairs, rank the visual hierarchy of the williams- sonoma website. Exercise 5.1