• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Website Navigation Systems

Website Navigation Systems



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, ...

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



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.linkedin.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Website Navigation Systems Website Navigation Systems Presentation Transcript

    • user experience agency
    • Navigation SystemsMariza SamartziUser Experience Architectmariza@zabisco.com
    • More… More…Primary Navigation Systems Secondary Navigation Systems
    • ResearchPrimary Navigation Systems
    • • Horizontal bar; text links, buttons, tabbed-shaped • Simple • Clean • Minimal • Avoid adding TOO many options More information is shown on mouse overHorizontal bar
    • • 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
    • • 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
    • • 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
    • • 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
    • • 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
    • • 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
    • 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
    • • 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
    • • 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
    • ResearchSecondary Navigation Systems
    • • Right click; list of options or something more engaging? • Quick access to content related options Mozilla Firefox Microsoft Office WordRight click
    • 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….
    • 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
    • • Breadcrumb; shows site hierarchy • Show current location • Navigate to higher level with one click Advanced Breadcrumb by lonelyplanetBreadcrumb
    • • 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
    • ResearchA few words…
    • 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…
    • Thank you!Mariza SamartziUser Experience Architectmariza@zabisco.com