ARTDM 171, Week 13: Navigation Schemes

834 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide





























  • 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

    ×