Navigation design alternatives for websites

72,105 views

Published on

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.

Published in: Design, Technology, Business
17 Comments
82 Likes
Statistics
Notes
No Downloads
Views
Total views
72,105
On SlideShare
0
From Embeds
0
Number of Embeds
15,741
Actions
Shares
0
Downloads
780
Comments
17
Likes
82
Embeds 0
No embeds

No notes for slide

Navigation design alternatives for websites

  1. What I learned aboutNAVIGATIONDESIGNin 2010 www.credos.com.au
  2. What I didn’t know aboutNAVIGATIONDESIGN in 1997
  3. Let’s check outthe early days of web navigation
  4. Back in 1997… a simple corporate websitewww.honda.co.uk
  5. Back in 1997… basic menumatrixexploring guidancebrandvaluesbrandmessage www.honda.co.uk
  6. Enigmatic navigationIndicatorsshowwhere Very basicyou are menuBack tomatrix www.honda.co.uk
  7. Lateral EXPLORATION Brand values drive content and navigationwww.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 19981998 1995-7 Find more via the “Wayback machine” http://web.archive.org
  11. Meanwhile, back in 2010...
  12. The same site in 2010Service Actionmenu menuProductmenu Topical featuresFeaturebuttons Footer linkshttp://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 want2. Get an overview of what’s on offer3. See where they are4. See where they can go
  17. Role of navigation… For users… For site owners…1. Find stuff they want 1. Drive people to2. Get an overview of action points what’s on offer 2. Cross-sell services3. See where they are 3. Show what is/isn’t4. 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 & buttonshttp://www.ford.com/microsites/sustainability-report-2009-10
  21. More menus, tabs & buttons…zzzzzzhttp://www.rosiesdollsclothes.com.au | http://www.arden.net.au
  22. MEGA MenusGroup menuitems to makechoicesclearer (design for website under development)
  23. MEGA MenusExplain thechoices andinclude imagesto focus yourattention http://www.amnesty.org.au
  24. MEGA MenusEven inanother languageyou can guesshow a menuworksFly-outmenu is notthe mostusable http://www.yubin-nenga.jp
  25. Buttons, icons/imagesIcons makechoices looksimplePhotos doubleas productpromoshttp://www.telstra.com | http://www.samsung.com.au
  26. Multiple Menu Madness 1 2 3 4 5 6 7http://www.bigpond.com
  27. 2 Typographic & numeric
  28. Totally typographic navigation Typographic approach makes a strong statement and forces you to make a choicehttp://www.proa.org | http://www.ah-studio.com
  29. Navigation becomes the content Hover over text to make sense of ithttp://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 Navigationhttp://answer.nttdocomo.co.jp/t28/
  32. 3 Real world metaphors
  33. Literal navigation (not a metaphor, the real thing)Navigate thehuman bodyto find outabout specificmuscles(design mock-up for website under development)
  34. A self-contained worldMixedmetaphors– cars intrees? Click and explore the “world” (the scene moves with you)http://www.idemitsu.co.jp/chienergy/special/
  35. A metaphor with boundariesNavigate to“rooms” Open “doors” to explorehttp://www.annielennox.com
  36. A “real” shop display Browse products arranged along the wallhttp://www.jamesjoyce.co.uk
  37. A virtual shopfront Showcases the navigation, not the products or serviceshttp://www.daviddeane.com.au/
  38. 4 Spatial navigation
  39. Image grid navigator Current position isSelect an highlightedimage
  40. Magical mystery tourMove overshapes to makethe navigationoptions appear http://flywheeldesign.com/
  41. Holistic viewCircle adjusts as you focus in on contenthttp://bucchake.com
  42. One page vertical glide Glide up/down smoothly to explore vertical spacehttp://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 arrowshttp://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 offerhttp://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 explorehttp://moonlinx.jp/special_issue/003/
  50. A quick re-cap… Types of navigation… Role of navigation…1. Menus/tabs/buttons • Help users find what2. Typographic/numeric they want/need3. Metaphoric • Drive people to action • Cross-promote content4. Spatial • Show what is on offer5. 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

×