Transcript
NAVIGATION
Vu Phuong Hoang2015/08
Content
1. Navigation
2. Signposts
3. Navigation cost
4. Patterns1. Global navigation
2. Hub and spoke
3. Pyramid
4. Modal window
5. Annotated scrollbar
5. Comparision
1. Navigation Users have to go around in your product
They do it mainly by grouped links called NAVIGATION
1. Navigation
1. Navigation
2. Signposts
Signs helping user to figure out the surrounding
Common signposts:
Titles
Tabs
Highlighted selection
Labels
2. Signposts
3. Navigation cost In order to navigate, you need a “map”
Reference clip: movie “Premium Rush”
3. Navigation cost
In order to navigate, you need a “map”
It takes time to “draw” a map
Strange structures cost more
Find a path to the balcony
Living room before the makeover
Living room after the makeover
Living room after the makeover
3. Navigation cost
In order to navigate, you need a “map”
It takes time to “draw” a map
Strange structures cost more
Familiar structures with new style still cost
4. Patterns
1. Global navigation
2. Hub and spoke
3. Pyramid
4. Modal window
5. Annotated scrollbar
4.1. Global navigation
Fixed navigation bar(s) in all pages
Limited (short) links
Users can jump directly
to other areas
It takes space
4.1. Global navigation
4.1. Global navigation
4.1. Global navigation
4.2. Hub and spoke
Hub is where shortcuts to spoke are
Spoke has an exit back to hub
Users must go back to
hub to access other areas
It takes least space
Back button is prominent
4.2. Hub and spoke
For deep nested content, it’s the long way to go back
4.2. Hub and spoke
4.3. Pyramid
Similar to “Hub and spoke”, but adjacent spokes are
connected
It’s a hybrid of “Hub and spoke”
and “Global navigation”
Only if spokes are
connected
Back, Next (and Up) buttons are prominent
4.3. Pyramid
4.3. Pyramid
4.3. Pyramid
4.4. Modal window
Similar to “Hub and spoke”
But new spoke is in front of current spoke
Only applied to short content
Keep current context
4.4. Modal window
4.4. Modal window
4.5. Annotated scrollbar
Add information about current area
while scrolling
For very long content, normal
scrollbars have disadvantages: Reading speed vs scrolling speed
Hard to know where it is
Must scan for keyword position
Content can be heavy to load
Info
4.5. Annotated scrollbar
4.5. Annotated scrollbar
4.5. Annotated scrollbar
5. Comparison
Navigation cost
Space cost
Use when Few linksNeed direct
jump
Many independent links
Need to focus on 1 task
Links can be connected
Short content
Very long content
CombinationCombine navigation models for best use
Combination Good navigation + visual effects = great experience
Be creative:
AWWWards
House of Borel
Bose
Bagigia
References
Designing interfaces (1st edition) – Jenifer Tidwell
Designing interfaces (2nd edition) – Jenifer Tidwell
Changes log: http://designinginterfaces.com/patterns/
Wayfinding for the mobile web – Smashing Magazine
Web design navigation showcases – Smashing
Magazine
Other articles – Smashing Magazine
Other UI elements in the book
Designing interfaces – 2nd edition:
Text
Layout
Action
Complex data representation
Input
Social media
Any questions?
top related