Beginners guide to_navigation_systems

UX Design

A beginners guide to Navigation systems

Navigations

U(req)+{client}>√[entropii]∞∧≅×

The Horizontal Bar

Text links, buttons, tabbed-shaped

Speaking Blocks

Short menu label; single word or short syllables

Drop Downs

List of links on click or on mouse over (fly-out menu)

Fly-out indicator

Nike http://www.nike.com

Mega-Nav’s

Big, two-dimensional drop-down panels [1]

[1] Jakob Nielsen

http://www.useit.com/alertbox/mega-dropdown-menus.html

Adidas http://www.adidas.com

Benance http://www.behance.net/

Laid out differently to reflect the content of the zone.

Multi-Tab Mega-Nav’s

Doormat

Same as an “always open” drop-down menu

Picsolve www.picsolve.com (by entropii)

Ribbon

Introduced by Microsoft Office

Microsoft Office Word

Tabs Quick access toolbar

Gallery

Dialog box launcher Groups

“Word 2007 users are now using four times as many features as they used in previous versions”

eBook Microsoft Office

Drop down list

Enhanced tool tip

Mega-Navs

Galleries

Ribbon

Accordion Side Menu

Click to expose more options

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 entropii)

Navigations

U(req)+{client}>√[entropii]∞∧≅×

Right Click

Lists secondary options in the associated area

Mozilla Firefox

Microsoft Office Word

IET

http://www.theiet.org/

Facebook

http://www.facebook.com/

House of Fraser http://www.houseoffraser.co.uk/

John Lewis

http://www.johnlewis.com/

Search, Filters…

Links and buttons Filters

Waitrose - http://www.waitrose.com/

Grooveshark- http://grooveshark.com/

Footers

Advanced Breadcrumb by lonelyplanet

Breadcrumb

Nestle http://www.nestle.co.uk

BHF http://www.bhf.org.uk/

[1] Jakob Nielsen

http://www.useit.com/alertbox/sitemaps.html

Sitemap

“Sitemaps are used rarely by the

users”. [1]

However…

Tips

Each navigation approach has pros & cons. All you need to do is satisfy business and users needs.

Service Design