Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Navigation Systems
Embedded Navigation Systems <ul><ul><li>provide context and flexibility </li></ul></ul><ul><ul><li>Help users to understan...
Supplemental Navigation Systems <ul><ul><li>Provide different ways of accessing Information. </li></ul></ul>Site map Categ...
Navigation Systems <ul><li>Browsers support many navigation features </li></ul><ul><li>Users are familiar with these featu...
Navigation Systems <ul><li>Since users can “parachute” to any page in your web site, building context is key. </li></ul><u...
Navigation Systems <ul><li>Example  www.walmart.com   </li></ul>
Navigation Systems <ul><li>To test context you can try a “Navigation Stress Test” </li></ul><ul><ul><li>Ignore the home pa...
Improving Flexibility <ul><li>You can allow users to move laterally in the hierarchy of navigation to allow more flexible ...
Embedded Navigation Systems <ul><li>Global Navigation Systems (GNS) or site wide navigation </li></ul><ul><ul><li>Intended...
Embedded Navigation Systems <ul><li>Local Navigation Systems (LNS) </li></ul><ul><ul><li>Global navigation systems can be ...
Embedded Navigation Systems
Embedded Navigation Systems <ul><li>Contextual Navigation </li></ul><ul><ul><li>Navigation links specific to a particular ...
Embedded Navigation Systems <ul><li>Examples: </li></ul><ul><ul><li>Links embedded in contents </li></ul></ul><ul><ul><ul>...
Implementing Embedded Navigation <ul><li>Balance between flexibility of navigation and the danger of overwhelming the user...
Implementing Embedded Navigation <ul><li>When combined all three types of navigation may overwhelm the user </li></ul><ul>...
Implementing Embedded Navigation <ul><li>How to implement navigation bars: </li></ul><ul><ul><li>Text or Graphics </li></u...
Implementing Embedded Navigation <ul><li>Icons combined with textual labels </li></ul><ul><ul><li>Example  http://www.scot...
Implementing Embedded Navigation <ul><li>A final note on implementation: </li></ul><ul><ul><li>NO FRAMES: </li></ul></ul><...
Supplemental Navigation Systems <ul><li>External to the basic hierarchy of the site </li></ul><ul><li>Sitemaps: </li></ul>...
Supplemental Navigation Systems <ul><li>Sitemaps rules of thumb: </li></ul><ul><ul><li>Reinforce hierarchy  </li></ul></ul...
Supplemental Navigation Systems <ul><li>Site Indexes </li></ul><ul><ul><li>Similar to back of book index </li></ul></ul><u...
Supplemental Navigation Systems <ul><li>Guides </li></ul><ul><ul><li>Guided tours </li></ul></ul><ul><ul><li>Tutorials </l...
Supplemental Navigation Systems <ul><li>Wizards and Configurators </li></ul><ul><ul><li>http://toyota.com/byt/pub/init.do?...
Supplemental Navigation Systems <ul><li>Search </li></ul><ul><ul><li>Is part of the supplemental navigation system (will t...
Advanced Navigation Approaches <ul><li>Personalization and Customization </li></ul><ul><ul><li>Tailoring pages based on us...
Advanced Navigation Approaches <ul><li>Visualization </li></ul><ul><ul><li>Cool but still haven’t prove their usefulness <...
Advanced Navigation Approaches <ul><li>Social Navigation </li></ul><ul><ul><li>“ Recommender systems” </li></ul></ul><ul><...
Upcoming SlideShare
Loading in …5
×

Navigation Systems

12,366 views

Published on

Published in: Technology, Business
  • Be the first to comment

Navigation Systems

  1. 1. Navigation Systems
  2. 2. Embedded Navigation Systems <ul><ul><li>provide context and flexibility </li></ul></ul><ul><ul><li>Help users to understand where they are and where can they go. </li></ul></ul>Contextual navigation Global Navigation Local navigation
  3. 3. Supplemental Navigation Systems <ul><ul><li>Provide different ways of accessing Information. </li></ul></ul>Site map Category 1 SubCat1 , SubCat2 Category 2 SubCat1 , SubCat2 Category 3 SubCat1 , SubCat2 Index A ______ B C Guide Step 1 Step 2
  4. 4. Navigation Systems <ul><li>Browsers support many navigation features </li></ul><ul><li>Users are familiar with these features </li></ul><ul><li>Designers should avoid : </li></ul><ul><ul><li>Cluelessly modifying the visited/unvisited link colors </li></ul></ul><ul><ul><li>Killing the back button </li></ul></ul><ul><ul><li>Crippling the bookmark feature </li></ul></ul>
  5. 5. Navigation Systems <ul><li>Since users can “parachute” to any page in your web site, building context is key. </li></ul><ul><ul><li>Rules of thumb for building context clues </li></ul></ul><ul><ul><ul><li>Users should always know where they are in. Include the organization logo in every page. </li></ul></ul></ul><ul><ul><ul><li>Present the structure of the information hierarchy in a clearly and consistently. </li></ul></ul></ul>
  6. 6. Navigation Systems <ul><li>Example www.walmart.com </li></ul>
  7. 7. Navigation Systems <ul><li>To test context you can try a “Navigation Stress Test” </li></ul><ul><ul><li>Ignore the home page and jump directly into the middle of the site. </li></ul></ul><ul><ul><li>For each random page, Can you figure out where you are in relation to the rest of the site </li></ul></ul><ul><ul><li>Can you tell where the page will lead you next? </li></ul></ul>
  8. 8. Improving Flexibility <ul><li>You can allow users to move laterally in the hierarchy of navigation to allow more flexible navigation. </li></ul><ul><li>You have to balance between the advantages of flexibility and clutter. </li></ul>Hierarchical navigation Hypertext navigation
  9. 9. Embedded Navigation Systems <ul><li>Global Navigation Systems (GNS) or site wide navigation </li></ul><ul><ul><li>Intended to be present in every page. </li></ul></ul><ul><ul><li>Allows direct access to the site’s hierarchy </li></ul></ul><ul><ul><li>Examples: </li></ul></ul>
  10. 10. Embedded Navigation Systems <ul><li>Local Navigation Systems (LNS) </li></ul><ul><ul><li>Global navigation systems can be complemented by one or more local navigation systems. </li></ul></ul><ul><ul><ul><li>Tightly controlled and integrated to GNS and LNS (example www.nytimes.com ) </li></ul></ul></ul><ul><ul><ul><li>Multiple LNS with very little in common( also called sub-sites ). Example: www.microsoft.com </li></ul></ul></ul>
  11. 11. Embedded Navigation Systems
  12. 12. Embedded Navigation Systems <ul><li>Contextual Navigation </li></ul><ul><ul><li>Navigation links specific to a particular page, document, or object </li></ul></ul><ul><ul><li>Supports associative learning </li></ul></ul><ul><ul><li>Allows you to create connectivity links that benefits users and navigations </li></ul></ul>
  13. 13. Embedded Navigation Systems <ul><li>Examples: </li></ul><ul><ul><li>Links embedded in contents </li></ul></ul><ul><ul><ul><li>Wikipedia.com </li></ul></ul></ul><ul><ul><li>Contextual navigation embedded in the layout of the page </li></ul></ul><ul><ul><ul><li>http://www.rei.com/online/store/ProductDisplay?storeId=8000&catalogId=40000008000&productId=9740053&parent_category_rn=4500600 </li></ul></ul></ul>
  14. 14. Implementing Embedded Navigation <ul><li>Balance between flexibility of navigation and the danger of overwhelming the user with too many options. </li></ul><ul><li>Global, local and contextual elements exists together on most pages </li></ul>Contextual Navigation Content Contextual Navigation Global Navigation Local navigation
  15. 15. Implementing Embedded Navigation <ul><li>When combined all three types of navigation may overwhelm the user </li></ul><ul><ul><li>Ex: http://buffalo.com/ </li></ul></ul><ul><li>There is no absolute correct place to position navigation just general rules </li></ul><ul><ul><li>Where do you look for navigation? </li></ul></ul>
  16. 16. Implementing Embedded Navigation <ul><li>How to implement navigation bars: </li></ul><ul><ul><li>Text or Graphics </li></ul></ul><ul><ul><li>Pull-downs </li></ul></ul><ul><ul><li>Pop-up </li></ul></ul><ul><ul><li>Cascading menus </li></ul></ul>
  17. 17. Implementing Embedded Navigation <ul><li>Icons combined with textual labels </li></ul><ul><ul><li>Example http://www.scottmccloud.com/inventions/inventions.html </li></ul></ul>
  18. 18. Implementing Embedded Navigation <ul><li>A final note on implementation: </li></ul><ul><ul><li>NO FRAMES: </li></ul></ul><ul><ul><ul><li>Confuse the user by slicing pages into independent panes of content. </li></ul></ul></ul><ul><ul><ul><li>Tend to cripple usability </li></ul></ul></ul><ul><ul><ul><ul><li>Problems with back button </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Reloading and printing a page </li></ul></ul></ul></ul>
  19. 19. Supplemental Navigation Systems <ul><li>External to the basic hierarchy of the site </li></ul><ul><li>Sitemaps: </li></ul><ul><ul><li>Equivalent to the table of contents of books </li></ul></ul><ul><ul><li>Usually present a few levels of the information hierarchy </li></ul></ul><ul><ul><li>Provides broad contents access </li></ul></ul>
  20. 20. Supplemental Navigation Systems <ul><li>Sitemaps rules of thumb: </li></ul><ul><ul><li>Reinforce hierarchy </li></ul></ul><ul><ul><li>Facilitate fast and direct access to the contents </li></ul></ul><ul><ul><li>Avoid overwhelming the user with too much information </li></ul></ul><ul><li>Example: Intel’s sitemap </li></ul>
  21. 21. Supplemental Navigation Systems <ul><li>Site Indexes </li></ul><ul><ul><li>Similar to back of book index </li></ul></ul><ul><ul><li>Presents keywords or phrases in alphabetical order </li></ul></ul><ul><ul><li>Link within the index lead directly to destination pages </li></ul></ul><ul><li>Example: http://www.aol.com/info/siteindex.html </li></ul><ul><ul><li>http://www.buffalo.edu/home/azindex.shtml </li></ul></ul>
  22. 22. Supplemental Navigation Systems <ul><li>Guides </li></ul><ul><ul><li>Guided tours </li></ul></ul><ul><ul><li>Tutorials </li></ul></ul><ul><ul><li>Micro-portals focused around a specific audience, topic, or task </li></ul></ul><ul><ul><li>Keep short and to the point </li></ul></ul><ul><ul><li>Meant to answer questions </li></ul></ul><ul><ul><li>Example: Google docs/spreadsheets </li></ul></ul>
  23. 23. Supplemental Navigation Systems <ul><li>Wizards and Configurators </li></ul><ul><ul><li>http://toyota.com/byt/pub/init.do?zip_code=14227&series_id = </li></ul></ul><ul><ul><li>Dell.com – build your own computer </li></ul></ul>
  24. 24. Supplemental Navigation Systems <ul><li>Search </li></ul><ul><ul><li>Is part of the supplemental navigation system (will talk about it later) </li></ul></ul>
  25. 25. Advanced Navigation Approaches <ul><li>Personalization and Customization </li></ul><ul><ul><li>Tailoring pages based on user preferences </li></ul></ul><ul><ul><li>Be aware that: </li></ul></ul><ul><ul><ul><li>Typically plays important but limited roles </li></ul></ul></ul><ul><ul><ul><li>Require a solid foundation or structure ans organization </li></ul></ul></ul><ul><ul><ul><li>Are really difficult to do well </li></ul></ul></ul><ul><ul><ul><li>Google, Yahoo, Amazon, etc….Direction of the web today </li></ul></ul></ul>
  26. 26. Advanced Navigation Approaches <ul><li>Visualization </li></ul><ul><ul><li>Cool but still haven’t prove their usefulness </li></ul></ul><ul><ul><li>Still under development </li></ul></ul><ul><ul><li>Example: </li></ul></ul><ul><ul><li>http://bowlingforsoup.com/ </li></ul></ul>
  27. 27. Advanced Navigation Approaches <ul><li>Social Navigation </li></ul><ul><ul><li>“ Recommender systems” </li></ul></ul><ul><ul><li>Build on other users actions. </li></ul></ul><ul><ul><li>Example Amazon’s recommended books </li></ul></ul><ul><ul><li>Flickr, Blogs </li></ul></ul><ul><ul><li>Becoming very popular </li></ul></ul>

×