Website Navigation Systems

23
user experience agency

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

Transcript of Website Navigation Systems

Page 1: Website Navigation Systems

user experience agency

Page 2: Website Navigation Systems

Navigation Systems

Mariza SamartziUser Experience Architect

[email protected]

Page 3: Website Navigation Systems

Drop down

Mega-Nav

Accordion

Ribbon

Breadcrumb

Sitemap

Right Click

Footer

Primary Navigation Systems

Secondary Navigation Systems

More…

More…

Page 4: Website Navigation Systems

Research

Primary Navigation Systems

Page 5: Website 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

Page 6: Website Navigation Systems

• 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

Page 7: Website Navigation Systems

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

Page 8: Website Navigation Systems

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/

Page 9: Website Navigation Systems

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/

Page 10: Website Navigation Systems

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

Page 11: Website Navigation Systems

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

Page 12: Website Navigation Systems

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

Page 13: Website Navigation Systems

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

Page 14: Website Navigation Systems

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)

Page 15: Website Navigation Systems

Research

Secondary Navigation Systems

Page 16: Website 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

Page 17: Website Navigation Systems

• 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

Page 18: Website Navigation Systems

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

Page 19: Website Navigation Systems

Breadcrumb

• Breadcrumb; shows site hierarchy

ABOUT

BENEFITS

• Show current location• Navigate to higher level with one

click

Advanced Breadcrumb by lonelyplanet

Page 20: Website Navigation Systems

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/

Page 21: Website Navigation Systems

Research

A few words…

Page 22: Website Navigation Systems

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

Page 23: Website Navigation Systems

Thank you!

Mariza SamartziUser Experience Architect

[email protected]