ARTDM 171, Week 13: Navigation Schemes

850 views

Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

ARTDM 171, Week 13: Navigation Schemes

  1. 1. ARTDM 171, Week 13: Navigation Schemes Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
  2. 2. Final Project Prototypes • Please turn in an html folder that contains your final project as a text-only html prototype 2
  3. 3. Navigation Schemes 3
  4. 4. Basic Principles • Navigation can provide users with both a map and compass • Highlight to show the user “you are here” • Maximum of seven items • Give user feedback on hover or click • Be direct o User research helps determine naming • Be consistent
  5. 5. Types of navigation • Hierarchical – drill down from the home page to other pages • Global – users can get to any page from any other page • Local – users can drill down to get to a section and from any page get to any other page within the same section
  6. 6. Standard schemes
  7. 7. Expanding
  8. 8. Flyout Menus
  9. 9. Stacking
  10. 10. Tabbed
  11. 11. Faceted Search
  12. 12. Blocks
  13. 13. Experimental
  14. 14. Utilities • Other elements that help users get to pages but aren’t considered “navigation” • Includes: o Search o Terms of Use and other policy documents o Help pages
  15. 15. Breadcrumbs • Also called “navigation trail” • Can show users where they are in the hierarchy • Alternatively can show users how they got to a page • Helps users construct a mental map of your site
  16. 16. Searchers vs. browsers • Some users go straight to the search bar or “quick links” • Other users have the patience or time to browse all of your pages Do you browse the aisles or do you ask someone?
  17. 17. Directory vs. Index • Yahoo! presents information in a directory • Google presents information as an index • 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.
  18. 18. JavaScript Rollovers in Dreamweaver
  19. 19. Button States • Up – Appears when the page first loads, the default image • Over – Appears when the mouse moves over the image • Down – Appears after the image has been clicked, a “pressed” state • Over While Down – Appears when the mouse moves over the image in the Down state
  20. 20. Disjointed Rollovers • Use to create a rollover gallery
  21. 21. JavaScript Effects 21
  22. 22. JavaScript Frameworks • Prototype and Scriptaculous o http://prototypejs.org o http://script.aculo.us • jQuery o http://jquery.com 22
  23. 23. jQuery Download http://jquery.com
  24. 24. Create a New Web Page Open Dreamweaver
  25. 25. Add jQuery to the page • Put this between the <head> tags, all on one line <script type="text/javascript" src="jquery-1.4.1.min.js"> </script>
  26. 26. Effects • jQuery includes a set of simple, standard animations ‣ List of effects
  27. 27. Fade Out and Fade In $('#box').fadeOut(1000); $('#box').fadeIn(1000);
  28. 28. Timeline March April May Last day of class 9 16 23 30 6* 13 20 27 4 11 18 25 Strategy Present final projects Research and discovery (two days) Design Interaction design Validation Visual design Site development Prototyping (Text-only HTML) Present revisions Layout and styling (CSS) User interface dev (images and backgrounds) Production
  29. 29. Homework due April 27 • Read Chapter 8: Positioning Page Content • Apply CSS to your final project site (but no images) • Use CSS to: oAdjust the layout and positioning oAdd style–text colors, headings, and font faces

×