Presentation done for Brisbane Web Design Meetup (18 Nov 2010) about what I learned about website navigation design in 2010, including a look back at web designs from the 1990s and a review of current styles of navigation.

1. What I learned about
NAVIGATION
DESIGN
in 2010
www.credos.com.au

2. What I didn’t know about
NAVIGATION
DESIGN
in 1997

3. Let’s check out
the early days of
web navigation

4. Back in 1997…
a simple corporate website
www.honda.co.uk

5. Back in 1997…
basic
menu
matrix
exploring guidance
brand
values
brand
message
www.honda.co.uk

6. Enigmatic navigation
Indicators
show
where Very basic
you are menu
Back to
matrix
www.honda.co.uk

7. Lateral EXPLORATION
Brand values drive content and navigation
www.honda.co.uk

8. Inspired by… Battleships game
1 2 3 4 5 6 7 8 9 10
A B B B B S
B
C C D
D C D
E C
F D D D
G S D
H S
I S
J C C C

9. Why lateral navigation?
• Encourage exploration and brand engagement
• Appeal to women, who make purchase decisions
• Refresh a brand perceived to be stuffy
• Reach a younger demographic
• Stand out from competitors
• Support the message “first man then machine”
• Why not? Few rules back then…

10. Elsewhere on the web…
1996 1998
1998
1995-7
Find more via the “Wayback machine” http://web.archive.org

11. Meanwhile, back in 2010...

12. The same site in 2010
Service Action
menu menu
Product
menu
Topical
features
Feature
buttons
Footer links
http://www.honda.co.uk/cars

13. So what’s changed?
• Usability (research, best practice, awareness)
• Accessibility (legal & ethical need for accessible websites)
• Technology (Browsers, Javascript, Ajax, Mobile/Touch devices, etc)
• Commercialism (need for measurable results, SEO performance)
• Audience (numbers, demographics, sophistication, expectations)
• Conventions (nav bars, tabs, breadcrumbs, links, standards)
• Tools (CMS templates, menu systems, SEO analysis)

14. Q. What’s the role of
website navigation?

15. Q. What’s the role of
website navigation?
A. Help people find their
way around.

16. Role of navigation…
For users…
1. Find stuff they want
2. Get an overview of
what’s on offer
3. See where they are
4. See where they
can go

17. Role of navigation…
For users… For site owners…
1. Find stuff they want 1. Drive people to
2. Get an overview of action points
what’s on offer 2. Cross-sell services
3. See where they are 3. Show what is/isn’t
4. See where they available
can go 4. Be found on Google

18. Styles of navigation
in 2010

19. 1 Menus, tabs & buttons
90% of
websites?

20. Menus, tabs & buttons
http://www.ford.com/microsites/sustainability-report-2009-10

21. More menus, tabs & buttons…zzzzzz
http://www.rosiesdollsclothes.com.au | http://www.arden.net.au

22. MEGA Menus
Group menu
items to make
choices
clearer
(design for website under development)

23. MEGA Menus
Explain the
choices and
include images
to focus your
attention
http://www.amnesty.org.au

24. MEGA Menus
Even in
another language
you can guess
how a menu
works
Fly-out
menu is not
the most
usable
http://www.yubin-nenga.jp

25. Buttons, icons/images
Icons make
choices look
simple
Photos double
as product
promos
http://www.telstra.com | http://www.samsung.com.au

26. Multiple Menu Madness
1
2
3
4 5
6
7
http://www.bigpond.com

27. 2 Typographic
& numeric

28. Totally typographic navigation
Typographic approach makes a strong statement and forces you to make a choice
http://www.proa.org | http://www.ah-studio.com

29. Navigation becomes the content
Hover over
text to
make
sense of it
http://www.digitalmash.com

30. Navigation by Numbers
Do I care
enough to
click?
http://www.modulab.co.uk | http://www.modularlab.com

31. Ninja Numeric Navigation
http://answer.nttdocomo.co.jp/t28/

32. 
3 Real world metaphors

33. Literal navigation
(not a metaphor, the real thing)
Navigate the
human body
to find out
about specific
muscles
(design mock-up for website under development)

34. A self-contained world
Mixed
metaphors
– cars in
trees?
Click and
explore the
“world” (the
scene moves
with you)
http://www.idemitsu.co.jp/chienergy/special/

35. A metaphor with boundaries
Navigate to
“rooms” Open “doors”
to explore
http://www.annielennox.com

36. A “real” shop display
Browse products arranged along the wall
http://www.jamesjoyce.co.uk

37. A virtual shopfront
Showcases the
navigation, not
the products
or services
http://www.daviddeane.com.au/

38. 4 Spatial navigation

39. Image grid navigator
Current
position is
Select an highlighted
image

40. Magical mystery tour
Move over
shapes to make
the navigation
options appear
http://flywheeldesign.com/

41. Holistic view
Circle adjusts as you focus in on content
http://bucchake.com

42. One page vertical glide
Glide up/down smoothly
to explore vertical space
http://www.plinestudios.com/

43. One page decision path
Follow the decision paths
according to what you
know or want to find
out. Stop and explore
when you want more.
http://www.komra.de

44. One page multi-dimensional
Move up/down/left/right/diagonally
using menu or arrows
http://www.visuall.be/

45. 5 No navigation
(or very minimal)

46. NO site navigation
Home icon is the only site navigation device.
It’s all about the content.
http://iconwerk.de/

47. Minimal site navigation
No structure, just browse what’s on offer
http://relogik.com

48. Promotional one-pager
No choices are presented up-front.
You see welcoming content before
being expected to click anything.
http://www.mailchimp.com/v5-3/

49. Navigation on demand
Click to open out
navigation panel
Follow the arrows to explore
http://moonlinx.jp/special_issue/003/

50. A quick re-cap…
Types of navigation… Role of navigation…
1. Menus/tabs/buttons • Help users find what
2. Typographic/numeric they want/need
3. Metaphoric • Drive people to action
• Cross-promote content
4. Spatial
• Show what is on offer
5. Minimal or none
• Be found on Google

51. Choosing a navigation style
• Why the navigation is there (its role)
• Who will be using it
• Where they want to go
• What YOU want them to do
• How you will manage it (CMS etc)

52. My advice to web designers…
Get lost.
(it’s the only way you’ll find anything new)
50’s style fonts & graphics from http://www.fontdiner.com/

53. Carolyn King | web www.credos.com.au | twitter @CredosAssoc