Date post: | 21-Aug-2015 |
Category: |
Design |
Upload: | joan-lumanauw |
View: | 58 times |
Download: | 14 times |
UX Team Design Team
Content Hierarchy
Content Elements/Features
Interaction
Readability
Colours
Font
Identity
Design Trends
Layout
Icons/Images
Navigations
Usability
Visual HierarchyA 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
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
How we make sense of what we seeFirstly, 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
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
Page scanning patternsThe predictable human eye
VS
F-Pattern Z-Pattern
http://www.webdesignerdepot.com/2015/03/how-eye-scanning-impacts-visual-hierarchy-in-ux-design/
Page scanning patternsF-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/
Page scanning patternsZ-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/
Page scanning patternsLayout Example
http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
SizePeople read/see bigger things first.
http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
Space & TextureThis 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/
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 fall lower on the hierarchy than richer, darker ones.
http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
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/
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/
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/
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/
Why is visual hierarchy important?
Business objectives
Visual Hierarchy
USER
translates to
Guidan
ceCom
munication