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.
Upcoming SlideShare
Navigation System
Navigation System
Loading in …3
×
1 of 53

Navigation design alternatives for websites

84

Share

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Navigation design alternatives for websites

  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

×