Beginners guide to_navigation_systems
description
Transcript of Beginners guide to_navigation_systems
![Page 1: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/1.jpg)
UX Design
A beginners guide to Navigation systems
![Page 2: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/2.jpg)
Navigations
U(req)+{client}>√[entropii]∞∧≅×
![Page 3: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/3.jpg)
The Horizontal Bar
Text links, buttons, tabbed-shaped
![Page 4: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/4.jpg)
Speaking Blocks
Short menu label; single word or short syllables
![Page 5: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/5.jpg)
Drop Downs
List of links on click or on mouse over (fly-out menu)
Fly-out indicator
![Page 6: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/6.jpg)
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
![Page 7: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/7.jpg)
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
![Page 8: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/8.jpg)
Doormat
Same as an “always open” drop-down menu
Picsolve www.picsolve.com (by entropii)
![Page 9: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/9.jpg)
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
![Page 10: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/10.jpg)
Drop down list
Enhanced tool tip
Mega-Navs
Galleries
Ribbon
![Page 11: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/11.jpg)
Accordion Side Menu
Click to expose more options
![Page 12: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/12.jpg)
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)
![Page 13: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/13.jpg)
Navigations
U(req)+{client}>√[entropii]∞∧≅×
![Page 14: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/14.jpg)
Right Click
Lists secondary options in the associated area
Mozilla Firefox
Microsoft Office Word
![Page 15: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/15.jpg)
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
![Page 16: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/16.jpg)
Waitrose - http://www.waitrose.com/
Grooveshark- http://grooveshark.com/
Footers
![Page 17: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/17.jpg)
Advanced Breadcrumb by lonelyplanet
Breadcrumb
![Page 18: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/18.jpg)
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…
![Page 19: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/19.jpg)
Tips
Each navigation approach has pros & cons. All you need to do is satisfy business and users needs.
![Page 20: Beginners guide to_navigation_systems](https://reader033.fdocuments.us/reader033/viewer/2022050905/54c6f9654a79591c038b4617/html5/thumbnails/20.jpg)
Service Design