Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
by Joan Lumanauw | June, 2015
Session6:
VISUAL HIERARCHY
UX Team Design Team
UI
System
User
Context
Brand
Alignment
Visual
Content
UX Team Design Team
Content Hierarchy
Content Elements/Features
Interaction
Readability
Colours
Font
Identity
Design Trend...
Visual Hierarchy
One of the most important aspect of UI design
Visual Hierarchy
A hierarchy is essentially an order of items,
goals, ideas, and/or needs.
Hierarchy in web design is cent...
What is this?
How do I use it?
Why should I care?
A visual hierarchy instantly communicate to the users
Utility
Usability
...
How do we implement visual hierarchy?
Group PRIORITIZECollect
How we make sense of what we see
Firstly, let’s understand visual communication
• We recognise similarities and difference...
Content inspired by Luke Wroblewski: http://www.slideshare.net/lukew/web-application-page-hierarchy?qid=8914a932-4b25-4127...
How do we establish hierarchy?
Now that we know how to group information
Page scanning patterns
The predictable human eye
VS
F-Pattern Z-Pattern
http://www.webdesignerdepot.com/2015/03/how-eye-sc...
Page scanning patterns
F-Pattern
THINGS TO REMEMBER
The F-Pattern is the sight trend that emerges on pages that are
heavil...
Page scanning patterns
Z-Pattern
THINGS TO REMEMBER
Additionally, the Z-Pattern is the simplest and most universal
pattern...
Page scanning patterns
Layout Example
http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
F- Layout in Action
Z- Layout in Action
Size
People read/see bigger things first.
http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
Space & Texture
This kind of “texture” refers to the overall arrangement or pattern of space, text and
other detail on a p...
Typeface weight
http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
Color and tint
Bright colors stand out from muted colors or grayscale, while lighter tints appear
more “distant” and thus ...
YOU READ THIS FIRST
You will read this when skimming
You will probably not read this on a skim
You will not read this. unl...
YOU READ THIS FIRST
You will read this when skimming
You will probably not read this on a skim
You will not read this. unl...
A designer should seek to build a design that
guides the user’s eye from one object to the
next. The most simple example o...
Visual Direction
And now the baby is looking at the content.
Notice the increase in people looking at the
headline and tex...
Why is visual hierarchy important?
Business
objectives
Visual
Hierarchy
USER
translates to
Guidance
Communication
MIRUM AGENCY 2014
ANY QUESTIONS?
Thank you
Visual Hierarchy
In pairs, rank the visual hierarchy of the williams-
sonoma website.
Exercise 5.1
Upcoming SlideShare
Loading in …5
×

UX Lesson 6: Visual Hierarchy

11,205 views

Published on

A practical guide to visual hierarchy

Published in: Design
  • Login to see the comments

UX Lesson 6: Visual Hierarchy

  1. 1. by Joan Lumanauw | June, 2015 Session6: VISUAL HIERARCHY
  2. 2. UX Team Design Team UI System User Context Brand Alignment Visual Content
  3. 3. UX Team Design Team Content Hierarchy Content Elements/Features Interaction Readability Colours Font Identity Design Trends Layout Icons/Images Navigations Usability
  4. 4. Visual Hierarchy One of the most important aspect of UI design
  5. 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. 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. 7. How do we implement visual hierarchy? Group PRIORITIZECollect
  8. 8. How we make sense of what we see Firstly, let’s 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. 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. 10. How do we establish hierarchy? Now that we know how to group information
  11. 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. 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 first scan a vertical line down the left side of the text, typically looking for keywords or points of interest in the paragraph’s initial sentences. Eventually the reader finds something they like, and begin to read normally, forming horizontal lines • F-Pattern is not a template, it’s 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. 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 that’s based around image. The reader first 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. 14. Page scanning patterns Layout Example http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
  15. 15. F- Layout in Action
  16. 16. Z- Layout in Action
  17. 17. Size People read/see bigger things first. http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
  18. 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/
  19. 19. Typeface weight http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
  20. 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. 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. 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 flow of the hierarchy http://sixrevisions.com/web_design/using-power-structure-and-gestalt-for-visual-hierarchy/
  23. 23. A designer should seek to build a design that guides the user’s 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. 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. 25. Why is visual hierarchy important? Business objectives Visual Hierarchy USER translates to Guidance Communication
  26. 26. MIRUM AGENCY 2014 ANY QUESTIONS? Thank you
  27. 27. Visual Hierarchy In pairs, rank the visual hierarchy of the williams- sonoma website. Exercise 5.1

×