Website Navigation Systems


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
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website Navigation Systems

  1. 1. user experience agency
  2. 2. Navigation SystemsMariza SamartziUser Experience
  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 pagesNike • Eliminate scrolling [1] Henleys [1] Jakob Nielsen Mega-Nav
  9. 9. • Multi-Tab Mega-Nav be laid out differently to reflect the content of the zone. Adidas Benance
  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 (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 Vertical bar menu + Fly-out drop down + Mega-nav IET 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 IET Facebook House of Fraser, Filters….
  18. 18. Grooveshark- • Footer; fat or flat?Waitrose - • 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 BHF [1] Jakob Nielsen
  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.