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.

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, 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. 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 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. 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. 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/

19. Typeface weight
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 flow 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 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. 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