Website Navigation Systems
-
Upload
zabisco-digital -
Category
Technology
-
view
1.518 -
download
3
description
Transcript of Website Navigation Systems
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