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.
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
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
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
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)
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/
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