Website Navigation Systems

2,672 views

Published on

Website navigation is critical to the success of your user experience. Your visitors may use primary or secondary options to navigate through the pages like drop downs, mega navs, speaking blocks, breadcrumbs, footers, sitemaps

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,672
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
51
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Website Navigation Systems

  1. 1. user experience agency
  2. 2. Navigation SystemsMariza SamartziUser Experience Architectmariza@zabisco.com
  3. 3. More… More…Primary Navigation Systems Secondary Navigation Systems
  4. 4. ResearchPrimary Navigation Systems
  5. 5. • Horizontal bar; text links, buttons, tabbed-shaped • Simple • Clean • Minimal • Avoid adding TOO many options More information is shown on mouse overHorizontal bar
  6. 6. • Speaking Blocks: short menu label; single word or short syllables • Allow sections to be grouped • Easy to scan • Doesn’t require users to “think” • Keyword optimised for SEO • Human tone of voiceSpeaking Blocks
  7. 7. • Drop down; list of links on click • Fly-Out menu; list more options on mouse over • Quick access to lower levels • Less space is needed Fly-Out indicator • Fly-Out menu is not ideal for tabletsDrop down
  8. 8. • Mega-Nav; Big, two-dimensional drop-down panels. [1] • Expose more options • Avoid landing pagesNikehttp://www.nike.com • Eliminate scrolling [1] Henleys [1] Jakob Nielsen http://www.henleys.co.uk/ http://www.useit.com/alertbox/mega-dropdown-menus.html Mega-Nav
  9. 9. • Multi-Tab Mega-Nav be laid out differently to reflect the content of the zone. Adidas http://www.adidas.com Benance http://www.behance.net/Mega-Nav
  10. 10. • Doormat; same as an “always open” drop-down menu• Visibility of each sections content• Hover/active states can act like a breadcrumb• Single click access to either Level 1 and Level 2 Picsolve www.picsolve.com (by Zabisco)Doormat
  11. 11. • Ribbon; introduced by Microsoft office • “Word 2007 users are now using four times as many features as they used in previous versions” [1] Quick Access Toolbar Tabs Gallery Microsoft Office Word Group Dialog box launcher [1] eBook Microsoft OfficeRibbon
  12. 12. Mega-Navs• Increases accessibility• Uses different features to expose more options e.g.: 1. Drop downs 2. Tool tips 3. Mega-Navs Enhanced tool tip 4. Galleries Drop down listRibbon
  13. 13. • Side-nav; left or right? 1. Left: conventional approach 2. Right: prioritize content • Accordion side-nav; click to expose more options. • Only reveal the options when required • Quickly browse to subsections • Ideal for sub navigationAccordion Side Menu
  14. 14. • Combinations; different features can work together and add value Porche http://www.porsche.com/usa/ Vertical bar menu + Fly-out drop down + Mega-nav IET http://www.theiet.org/ Speaking blocks + Mega-nav, (By Zabisco)Combinations
  15. 15. ResearchSecondary Navigation Systems
  16. 16. • Right click; list of options or something more engaging? • Quick access to content related options Mozilla Firefox Microsoft Office WordRight click
  17. 17. Links & Buttons • Filters & Search; critical options for Filters big sites e.g. e-commerce • Links & Buttons; allow “easy” user journey Search John Lewis http://www.johnlewis.com/ IET http://www.theiet.org/ Facebook House of Fraser http://www.facebook.com/ http://www.houseoffraser.co.uk/Search, Filters….
  18. 18. Grooveshark- http://grooveshark.com/ • Footer; fat or flat?Waitrose - http://www.waitrose.com/ • Quick access to internal pages • Allow quick navigation for long pagesBlik- http://www.whatisblik.comFooter
  19. 19. • Breadcrumb; shows site hierarchy • Show current location • Navigate to higher level with one click Advanced Breadcrumb by lonelyplanetBreadcrumb
  20. 20. • Sitemap; list all pages of your website. • “Sitemaps are used rarely by the users”. [1] • “Users see all available content areas on one page”. [1] Nestle http://www.nestle.co.uk BHF [1] Jakob Nielsen http://www.bhf.org.uk/ http://www.useit.com/alertbox/sitemaps.htmlSitemap
  21. 21. ResearchA few words…
  22. 22. Each navigation approach has pros & cons. All you need to do is satisfy business and users needs.Overall• Mega-nav’s with speaking blocks seems to work well for big sites.• Advance search is needed for e-commerce sites.• Breadcrumbs are useful for deep sites.• Fat footers can pull out useful pages.• Microsoft office seems to overcome many usability issues with the ribbon and the right click.• Do you need help with your website navigation system? Contact usA few words…
  23. 23. Thank you!Mariza SamartziUser Experience Architectmariza@zabisco.com

×