Beginners guide to_navigation_systems
1 like511 views
This document provides an overview of common navigation system patterns for websites, including horizontal bars, drop-downs, mega-navs, ribbons, accordion side menus, and breadcrumbs. It discusses the pros and cons of different approaches and emphasizes selecting patterns that meet business and user needs.
![U(req)+{client}>√[entropii]∞∧≅×
Navigations](https://image.slidesharecdn.com/beginnersguidetonavigationsystems-130314104111-phpapp02/85/Beginners-guide-to_navigation_systems-2-320.jpg)
![Mega-Nav’s
Big, two-dimensional drop-down panels [1]
Nike
http://www.nike.com
[1] Jakob Nielsen
http://www.useit.com/alertbox/mega-dropdown-menus.html](https://image.slidesharecdn.com/beginnersguidetonavigationsystems-130314104111-phpapp02/85/Beginners-guide-to_navigation_systems-6-320.jpg)
![U(req)+{client}>√[entropii]∞∧≅×
Navigations](https://image.slidesharecdn.com/beginnersguidetonavigationsystems-130314104111-phpapp02/85/Beginners-guide-to_navigation_systems-13-320.jpg)
![Sitemap
“Sitemaps are used rarely by the
users”. [1]
However…
Nestle
http://www.nestle.co.uk
[1] Jakob Nielsen
BHF
http://www.bhf.org.uk/
http://www.useit.com/alertbox/sitemaps.html](https://image.slidesharecdn.com/beginnersguidetonavigationsystems-130314104111-phpapp02/85/Beginners-guide-to_navigation_systems-18-320.jpg)
Beginners guide to_navigation_systems
- 1. UX Design A beginners guide to Navigation systems
- 3. The Horizontal Bar Text links, buttons, tabbed-shaped
- 4. Speaking Blocks Short menu label; single word or short syllables
- 5. Drop Downs List of links on click or on mouse over (fly-out menu) Fly-out indicator
- 6. Mega-Nav’s Big, two-dimensional drop-down panels [1] Nike http://www.nike.com [1] Jakob Nielsen http://www.useit.com/alertbox/mega-dropdown-menus.html
- 7. Multi-Tab Mega-Nav’s Laid out differently to reflect the content of the zone. Benance Adidas http://www.behance.net/ http://www.adidas.com
- 8. Doormat Same as an “always open” drop-down menu Picsolve www.picsolve.com (by entropii)
- 9. Ribbon Introduced by Microsoft Office “Word 2007 users are now using four times as many features as they used in previous versions” eBook Microsoft Office Quick access toolbar Tabs Gallery Microsoft Office Word Groups Dialog box launcher
- 10. Ribbon Mega-Navs Enhanced tool tip Drop down list Galleries
- 11. Accordion Side Menu Click to expose more options
- 12. Combinations Different features can work together and add value Porche IET http://www.porsche.com/usa/ http://www.theiet.org/ Vertical bar menu + Fly-out drop down + Mega-nav Speaking blocks + Mega-nav, (By entropii)
- 14. Right Click Lists secondary options in the associated area Mozilla Firefox Microsoft Office Word
- 15. Search, Filters… Links and buttons Filters John Lewis http://www.johnlewis.com/ Facebook http://www.facebook.com/ IET http://www.theiet.org/ House of Fraser http://www.houseoffraser.co.uk/
- 16. Footers Grooveshark- http://grooveshark.com/ Waitrose - http://www.waitrose.com/
- 17. Breadcrumb Advanced Breadcrumb by lonelyplanet
- 18. Sitemap “Sitemaps are used rarely by the users”. [1] However… Nestle http://www.nestle.co.uk [1] Jakob Nielsen BHF http://www.bhf.org.uk/ http://www.useit.com/alertbox/sitemaps.html
- 19. Tips Each navigation approach has pros & cons. All you need to do is satisfy business and users needs.
- 20. Service Design