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/
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
Recommended
