ARTDM 171, Week 10: Navigation Schemes Gilbert Guerrero [email_address] gilbertguerrero.com/blog/artdm-171/

Gilbert Guerrero

[email_address]

gilbertguerrero.com/blog/artdm-171/

Navigation Schemes

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 User research helps determine naming Be consistent

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

User research helps determine naming

Be consistent

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

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

Standard schemes

Expanding

Flyout Menus

Stacking

Tabbed

Faceted Search

Blocks

Experimental

Utilities Other elements that help users get to pages but aren’t considered “navigation” Includes: Search Terms of Use and other policy documents Help pages

Other elements that help users get to pages but aren’t considered “navigation”

Includes:

Search

Terms of Use and other policy documents

Help pages

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

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

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?

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?

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.

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.

Photoshop Comps

Design Patterns A Pattern Language: Towns, Buildings, Construction by Christopher Alexander

A Pattern Language: Towns, Buildings, Construction by Christopher Alexander

Layer Comps Photoshop CS3 has the ability to allow you to create different pages using the same elements in one document

Photoshop CS3 has the ability to allow you to create different pages using the same elements in one document

Saving Comps Save JPEGs in Photoshop using Save as… Combine all JPEGs into one PDF document using Acrobat

Save JPEGs in Photoshop using Save as…

Combine all JPEGs into one PDF document using Acrobat

Homework due October 27 Read and do exercises: Chapter 8: Positioning Page Content Finish your comps, they’re due next week Home page One sublevel page Finish your moodboard, if you haven’t already You can turn in your moodboard and comps together next week

Read and do exercises:

Chapter 8: Positioning Page Content

Finish your comps, they’re due next week

Home page

One sublevel page

Finish your moodboard, if you haven’t already

You can turn in your moodboard and comps together next week