SlideShare a Scribd company logo
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 Trends
Layout
Icons/Images
Navigations
Usability
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 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 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 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
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-scanning-impacts-visual-hierarchy-in-ux-design/
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/
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/
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 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
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

More Related Content

What's hot

UX Lesson 5: Information Architecture
UX Lesson 5: Information ArchitectureUX Lesson 5: Information Architecture
UX Lesson 5: Information Architecture
Joan Lumanauw
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
Jayan Narayanan
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
Matin Maleki
 
Understanding Information Architecture: A Workshop
Understanding Information Architecture: A WorkshopUnderstanding Information Architecture: A Workshop
Understanding Information Architecture: A Workshop
Abby Covert
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
Aciron Consulting
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
 
What is UX?
What is UX?What is UX?
What is UX?
Peter van Lanschot
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
Bart Van Hecke
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
Inova LLC
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
Whitney Quesenbery
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
Maksym Babych
 
UX Lesson 4: Task & Feature Analysis
UX Lesson 4: Task & Feature AnalysisUX Lesson 4: Task & Feature Analysis
UX Lesson 4: Task & Feature Analysis
Joan Lumanauw
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
Evan Samek
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
Dijup Tuladhar
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
eggcellent
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
Sooraj P R
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
MoodLabs
 

What's hot (20)

UX Lesson 5: Information Architecture
UX Lesson 5: Information ArchitectureUX Lesson 5: Information Architecture
UX Lesson 5: Information Architecture
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
Understanding Information Architecture: A Workshop
Understanding Information Architecture: A WorkshopUnderstanding Information Architecture: A Workshop
Understanding Information Architecture: A Workshop
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
What is UX?
What is UX?What is UX?
What is UX?
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UX Lesson 4: Task & Feature Analysis
UX Lesson 4: Task & Feature AnalysisUX Lesson 4: Task & Feature Analysis
UX Lesson 4: Task & Feature Analysis
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
 

Similar to UX Lesson 6: Visual Hierarchy

Web Design Phase
Web Design PhaseWeb Design Phase
Web Design Phase
Ahsan Uddin Shan
 
Usabilityslideshow
UsabilityslideshowUsabilityslideshow
Usabilityslideshow
Carmell06769
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basics
elmorandall
 
Visual hierarchy
Visual hierarchyVisual hierarchy
Visual hierarchy
veuser98
 
Global Scope Final Report
Global Scope Final ReportGlobal Scope Final Report
Global Scope Final Report
Kamil Mustaffa
 
Cores and Paths - designing a website
Cores and Paths - designing a websiteCores and Paths - designing a website
Cores and Paths - designing a website
Karen Lindemann
 
The DEC Education: Product Design
The DEC Education: Product DesignThe DEC Education: Product Design
The DEC Education: Product Design
The Dallas Entrepreneur Center
 
Lecture4
Lecture4Lecture4
Lecture4
hstryk
 
Website Navigation - Some Tips
Website Navigation - Some TipsWebsite Navigation - Some Tips
Website Navigation - Some Tips
ffats1
 
Week4 : Wireframes and Sketching
Week4 : Wireframes and SketchingWeek4 : Wireframes and Sketching
Week4 : Wireframes and Sketching
Mark Zelis
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
robin fay
 
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit WebsitesKill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
guidecreative
 
Lesson 3 - IA for web
Lesson 3 - IA for webLesson 3 - IA for web
Lesson 3 - IA for web
Hanna-Liisa Pender
 
How to increase online traffic for your website
How to increase online traffic for your websiteHow to increase online traffic for your website
How to increase online traffic for your website
PRITHWISH SAHA
 
Top10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for BloggersTop10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for Bloggers
Brian Sullivan
 
Information Architecture for Drupal
Information Architecture for DrupalInformation Architecture for Drupal
Information Architecture for Drupal
Vanessa Turke
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
James Smith
 
Lab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rolloversLab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rollovers
Yaowaluck Promdee
 
Planning a sucessful business website
Planning a sucessful business websitePlanning a sucessful business website
Planning a sucessful business website
Anubhav Singh MBA,Ph.D, UGC JRF
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
Lany Lyn Magdaraog
 

Similar to UX Lesson 6: Visual Hierarchy (20)

Web Design Phase
Web Design PhaseWeb Design Phase
Web Design Phase
 
Usabilityslideshow
UsabilityslideshowUsabilityslideshow
Usabilityslideshow
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basics
 
Visual hierarchy
Visual hierarchyVisual hierarchy
Visual hierarchy
 
Global Scope Final Report
Global Scope Final ReportGlobal Scope Final Report
Global Scope Final Report
 
Cores and Paths - designing a website
Cores and Paths - designing a websiteCores and Paths - designing a website
Cores and Paths - designing a website
 
The DEC Education: Product Design
The DEC Education: Product DesignThe DEC Education: Product Design
The DEC Education: Product Design
 
Lecture4
Lecture4Lecture4
Lecture4
 
Website Navigation - Some Tips
Website Navigation - Some TipsWebsite Navigation - Some Tips
Website Navigation - Some Tips
 
Week4 : Wireframes and Sketching
Week4 : Wireframes and SketchingWeek4 : Wireframes and Sketching
Week4 : Wireframes and Sketching
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
 
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit WebsitesKill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
 
Lesson 3 - IA for web
Lesson 3 - IA for webLesson 3 - IA for web
Lesson 3 - IA for web
 
How to increase online traffic for your website
How to increase online traffic for your websiteHow to increase online traffic for your website
How to increase online traffic for your website
 
Top10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for BloggersTop10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for Bloggers
 
Information Architecture for Drupal
Information Architecture for DrupalInformation Architecture for Drupal
Information Architecture for Drupal
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
Lab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rolloversLab#10 navigation, links and hover rollovers
Lab#10 navigation, links and hover rollovers
 
Planning a sucessful business website
Planning a sucessful business websitePlanning a sucessful business website
Planning a sucessful business website
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 

Recently uploaded

NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 

Recently uploaded (20)

NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 

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