The document discusses various navigation patterns and their efficiencies, emphasizing concepts like global navigation, hub and spoke, and pyramid structures. It highlights the importance of signposts for user orientation and the concept of navigation cost, where users require a 'map' to navigate effectively within a product. Additionally, it suggests combining different navigation models to enhance user experience and references several design resources.

1. NAVIGATION
Vu Phuong Hoang
2015/08

2. Content
1. Navigation
2. Signposts
3. Navigation cost
4. Patterns
1. Global navigation
2. Hub and spoke
3. Pyramid
4. Modal window
5. Annotated scrollbar
5. Comparision

3. 1. Navigation
 Users have to go around in your product
 They do it mainly by grouped links called NAVIGATION

4. 1. Navigation

5. 1. Navigation

6. 2. Signposts
 Signs helping user to figure out the surrounding
 Common signposts:
 Titles
 Tabs
 Highlighted selection
 Labels

7. 2. Signposts

8. 3. Navigation cost
 In order to navigate, you need a “map”
Reference clip: movie “Premium Rush”

9. 3. Navigation cost
 In order to navigate, you need a “map”
 It takes time to “draw” a map
 Strange structures cost more

10. Find a path to the balcony

11. Living room before the makeover

12. Living room after the makeover

13. Living room after the makeover

14. 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

15. 4. Patterns
1. Global navigation
2. Hub and spoke
3. Pyramid
4. Modal window
5. Annotated scrollbar

16. 4.1. Global navigation
 Fixed navigation bar(s) in all pages
 Limited (short) links
 Users can jump directly
to other areas
 It takes space

17. 4.1. Global navigation

18. 4.1. Global navigation

19. 4.1. Global navigation

20. 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

21. 4.2. Hub and spoke
For deep nested content, it’s the long way to go back

22. 4.2. Hub and spoke

24. 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

25. 4.3. Pyramid

26. 4.3. Pyramid

27. 4.3. Pyramid

28. 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

29. 4.4. Modal window

30. 4.4. Modal window

31. 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

32. 4.5. Annotated scrollbar

33. 4.5. Annotated scrollbar

34. 4.5. Annotated scrollbar

35. 5. Comparison
Navigation
cost
Space cost
Use when Few links
Need direct
jump
Many
independen
t links
Need to
focus on 1
task
Links can be
connected
Short
content
Very long
content

36. Combination
Combine navigation models for best use

37. Combination
 Good navigation + visual effects = great experience
 Be creative:
 AWWWards
 House of Borel
 Bose
 Bagigia

38. 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

39. Other UI elements in the book
 Designing interfaces – 2nd edition:
 Text
 Layout
 Action
 Complex data representation
 Input
 Social media

40. Any questions?