Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Navigation design alternatives for websites

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.

  • Be the first to comment

Navigation design alternatives for websites

  1. What I learned aboutNAVIGATIONDESIGNin 2010
  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
  5. Back in 1997… basic menumatrixexploring guidancebrandvaluesbrandmessage
  6. Enigmatic navigationIndicatorsshowwhere Very basicyou are menuBack tomatrix
  7. Lateral EXPLORATION Brand values drive content and
  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”
  11. Meanwhile, back in 2010...
  12. The same site in 2010Service Actionmenu menuProductmenu Topical featuresFeaturebuttons Footer links
  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 & buttons
  21. More menus, tabs & buttons…zzzzzz |
  22. MEGA MenusGroup menuitems to makechoicesclearer (design for website under development)
  23. MEGA MenusExplain thechoices andinclude imagesto focus yourattention
  24. MEGA MenusEven inanother languageyou can guesshow a menuworksFly-outmenu is notthe mostusable
  25. Buttons, icons/imagesIcons makechoices looksimplePhotos doubleas productpromos |
  26. Multiple Menu Madness 1 2 3 4 5 6 7
  27. 2 Typographic & numeric
  28. Totally typographic navigation Typographic approach makes a strong statement and forces you to make a choice |
  29. Navigation becomes the content Hover over text to make sense of it
  30. Navigation by Numbers Do I care enough to click? |
  31. Ninja Numeric Navigation
  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)
  35. A metaphor with boundariesNavigate to“rooms” Open “doors” to explore
  36. A “real” shop display Browse products arranged along the wall
  37. A virtual shopfront Showcases the navigation, not the products or services
  38. 4 Spatial navigation
  39. Image grid navigator Current position isSelect an highlightedimage
  40. Magical mystery tourMove overshapes to makethe navigationoptions appear
  41. Holistic viewCircle adjusts as you focus in on content
  42. One page vertical glide Glide up/down smoothly to explore vertical space
  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.
  44. One page multi-dimensional Move up/down/left/right/diagonally using menu or arrows
  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.
  47. Minimal site navigation No structure, just browse what’s on offer
  48. Promotional one-pager No choices are presented up-front. You see welcoming content before being expected to click anything.
  49. Navigation on demand Click to open out navigation panel Follow the arrows to explore
  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
  53. Carolyn King | web | twitter @CredosAssoc