website navigation systems
DESCRIPTION
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, sitemapsTRANSCRIPT
user experience agency
Navigation Systems
Mariza SamartziUser Experience Architect
Drop down
Mega-Nav
Accordion
Ribbon
Breadcrumb
Sitemap
Right Click
Footer
Primary Navigation Systems
Secondary Navigation Systems
More…
More…
Research
Primary Navigation Systems
Horizontal bar
BENEFITS
• Horizontal bar; text links, buttons, tabbed-shaped
• Simple• Clean• Minimal
More information is shown on mouse over
ABOUT
TIPS• Avoid adding TOO many options
• Speaking Blocks: short menu label; single word or short syllables
Speaking Blocks
BENEFITS
• Allow sections to be grouped • Easy to scan• Doesn’t require users to “think”• Keyword optimised for SEO• Human tone of voice
ABOUT
Drop down
• Drop down; list of links on click • Fly-Out menu; list more options
on mouse over
ABOUT
BENEFITS
• Quick access to lower levels• Less space is needed
Fly-Out indicator
TIPS• Fly-Out menu is not ideal for tablets
Mega-Nav
• Mega-Nav; Big, two-dimensional drop-down panels. [1]
ABOUT
BENEFITS
• Expose more options • Avoid landing pages• Eliminate scrolling [1]
[1] Jakob Nielsen http://www.useit.com/alertbox/mega-dropdown-menus.html
Nike http://www.nike.com
Henleys http://www.henleys.co.uk/
Mega-Nav
• Multi-Tab Mega-Nav be laid out differently to reflect the content of the zone.
ABOUT
Adidas http://www.adidas.com
Benancehttp://www.behance.net/
Doormat
• Doormat; same as an “always open” drop-down menu
Picsolvewww.picsolve.com(by Zabisco)
ABOUT
BENEFITS
• Visibility of each sections content• Hover/active states can act like a breadcrumb• Single click access to either Level 1 and Level 2
Ribbon
Quick Access Toolbar
Group Dialog box launcher
GalleryTabs
[1] eBook Microsoft Office
• Ribbon; introduced by Microsoft office
ABOUT
• “Word 2007 users are now using four times as many features as they used in previous versions” [1]
BENEFITS
Microsoft Office Word
Ribbon
• Increases accessibility• Uses different features to expose more
options e.g.:1. Drop downs2. Tool tips3. Mega-Navs4. Galleries
MORE BENEFITS
Enhanced tool tip
Drop down list
Mega-Navs
Accordion Side Menu
• Side-nav; left or right?1. Left: conventional approach2. Right: prioritize content
• Accordion side-nav; click to expose more options.
ABOUT
BENEFITS
• Only reveal the options when required
• Quickly browse to subsections• Ideal for sub navigation
Combinations
• Combinations; different features can work together and add value
ABOUT
Porchehttp://www.porsche.com/usa/Vertical bar menu + Fly-out drop down + Mega-nav
IEThttp://www.theiet.org/Speaking blocks + Mega-nav, (By Zabisco)
Research
Secondary Navigation Systems
Right click
• Right click; list of options or something more engaging?
ABOUT
BENEFITS
• Quick access to content related options
Mozilla Firefox
Microsoft Office Word
• Filters & Search; critical options for big sites e.g. e-commerce
• Links & Buttons; allow “easy” user journey
Search, Filters….
Links & Buttons
IEThttp://www.theiet.org/
Facebookhttp://www.facebook.com/House of Fraser
http://www.houseoffraser.co.uk/
Filters
ABOUT
John Lewishttp://www.johnlewis.com/
Search
Footer
BENEFITS
• Footer; fat or flat?
• Quick access to internal pages• Allow quick navigation for
long pages
Blik- http://www.whatisblik.com
Waitrose - http://www.waitrose.com/
Grooveshark- http://grooveshark.com/
ABOUT
Breadcrumb
• Breadcrumb; shows site hierarchy
ABOUT
BENEFITS
• Show current location• Navigate to higher level with one
click
Advanced Breadcrumb by lonelyplanet
Sitemap
BENEFITS
ABOUT
• 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]
[1] Jakob Nielsenhttp://www.useit.com/alertbox/sitemaps.html
Nestlehttp://www.nestle.co.uk
BHFhttp://www.bhf.org.uk/
Research
A few words…
A 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 us
TIPS