Navigation Systems


Published on

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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 </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 ) </li></ul></ul></ul><ul><ul><ul><li>Multiple LNS with very little in common( also called sub-sites ). Example: </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> </li></ul></ul></ul><ul><ul><li>Contextual navigation embedded in the layout of the page </li></ul></ul><ul><ul><ul><li> </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: </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 </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: </li></ul><ul><ul><li> </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> = </li></ul></ul><ul><ul><li> – 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> </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>