Navigation design alternatives for websites
84 likes16,320 views
The document discusses the evolution of web navigation design from 1997 to 2010, highlighting significant changes in usability, accessibility, technology, and audience expectations. It outlines different styles of navigation and their roles, emphasizing the importance of helping users find content and driving engagement. The author advises web designers to explore new ideas to innovate navigation styles.
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
- 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/
- 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