ARTDM 171, Week 10: Navigation Schemes

368 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
368
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ARTDM 171, Week 10: Navigation Schemes

  1. 1. ARTDM 171, Week 10: Navigation Schemes <ul><li>Gilbert Guerrero </li></ul><ul><li>[email_address] </li></ul><ul><li>gilbertguerrero.com/blog/artdm-171/ </li></ul>
  2. 2. Navigation Schemes
  3. 3. Basic Principles <ul><li>Navigation can provide users with both a map and compass </li></ul><ul><li>Highlight to show the user “you are here” </li></ul><ul><li>Maximum of seven items </li></ul><ul><li>Give user feedback on hover or click </li></ul><ul><li>Be direct </li></ul><ul><ul><li>User research helps determine naming </li></ul></ul><ul><li>Be consistent </li></ul>
  4. 4. Types of navigation <ul><li>Hierarchical – drill down from the home page to other pages </li></ul><ul><li>Global – users can get to any page from any other page </li></ul><ul><li>Local – users can drill down to get to a section and from any page get to any other page within the same section </li></ul>
  5. 5. Standard schemes
  6. 6. Expanding
  7. 7. Flyout Menus
  8. 8. Stacking
  9. 9. Tabbed
  10. 10. Faceted Search
  11. 11. Blocks
  12. 12. Experimental
  13. 13. Utilities <ul><li>Other elements that help users get to pages but aren’t considered “navigation” </li></ul><ul><li>Includes: </li></ul><ul><ul><li>Search </li></ul></ul><ul><ul><li>Terms of Use and other policy documents </li></ul></ul><ul><ul><li>Help pages </li></ul></ul>
  14. 14. Breadcrumbs <ul><li>Also called “navigation trail” </li></ul><ul><li>Can show users where they are in the hierarchy </li></ul><ul><li>Alternatively can show users how they got to a page </li></ul><ul><li>Helps users construct a mental map of your site </li></ul>
  15. 15. Searchers vs. browsers <ul><li>Some users go straight to the search bar or “quick links” </li></ul><ul><li>Other users have the patience or time to browse all of your pages </li></ul><ul><li>Do you browse the aisles or do you ask someone? </li></ul>
  16. 16. Directory vs. Index <ul><li>Yahoo! presents information in a directory </li></ul><ul><li>Google presents information as an index </li></ul><ul><li>Online portals provide different ways of getting to information, they also try to serve as many of your needs as possible to keep you there. Guess why. Ads. </li></ul>
  17. 17. Photoshop Comps
  18. 18. Design Patterns <ul><li>A Pattern Language: Towns, Buildings, Construction by Christopher Alexander </li></ul>
  19. 19. Layer Comps <ul><li>Photoshop CS3 has the ability to allow you to create different pages using the same elements in one document </li></ul>
  20. 20. Saving Comps <ul><li>Save JPEGs in Photoshop using Save as… </li></ul><ul><li>Combine all JPEGs into one PDF document using Acrobat </li></ul>
  21. 21. Homework due October 27 <ul><li>Read and do exercises: </li></ul><ul><ul><li>Chapter 8: Positioning Page Content  </li></ul></ul><ul><li>Finish your comps, they’re due next week </li></ul><ul><ul><li>Home page </li></ul></ul><ul><ul><li>One sublevel page </li></ul></ul><ul><li>Finish your moodboard, if you haven’t already </li></ul><ul><li>You can turn in your moodboard and comps together next week </li></ul>

×