information architecture navigation. goals 1. organization systems 2. navigation: conventions 3....
TRANSCRIPT
![Page 1: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/1.jpg)
Information Architecture
Navigation
![Page 2: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/2.jpg)
Goals1. Organization systems
2. Navigation: Conventions
3. Login & Forms Task | Dreamweaver
4. Client Project 2 Blue Archer CONSOL Entergy Center
![Page 3: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/3.jpg)
Content Organization
An organizational system consists of an organizational scheme and an organizational structure.
Organizational schemes: classification systems for organizing content into groups
Organizational structures: defining the relationships among the groups
![Page 4: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/4.jpg)
Exact organizational schemes Alphabetical scheme uses alphabet to order
content items (e.g., author index in a library).
Chronological scheme uses time to order the content items (e.g., books and history books).
Geographical scheme uses location to order items (e.g., floor plans, weather maps)
![Page 5: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/5.jpg)
Ambiguous Organizational SchemesContent and Navigation
![Page 6: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/6.jpg)
Ambiguous organizational schemes Situations where there is more than one
reasonable way to group things.e.g., Books organized by author, title, by
audience, price, etc. Types:
1) Topical
2) Task-oriented
3) Audience-specific
![Page 7: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/7.jpg)
Topical organizational scheme
Organizes content by topic or subject Encyclopedia Chapter titles in textbooks E.g., fiction/non-fiction, clothing - shoes,
shirts, coats; mike, bread, meats, etc.
![Page 8: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/8.jpg)
Topical organizational scheme
Topics/Categories
![Page 9: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/9.jpg)
Task-oriented organizational scheme
Example:
Autobytel.com
By Tasks
![Page 10: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/10.jpg)
Audience-specific organizational scheme
Specific audience
s
![Page 11: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/11.jpg)
Hybrid organizational scheme
Combines multiple organizational schemes
Quite common, but must be done with care to avoid confusion
Example: Nordstrom
![Page 12: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/12.jpg)
Hybrid organizational scheme
Category
Audience
Task
![Page 13: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/13.jpg)
Hybrid organizational scheme
Category
Audience
Task
![Page 14: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/14.jpg)
Types of organizational structures
Hierarchy Hypertext Database
![Page 15: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/15.jpg)
Hierarchical structure
CLOTHINGBOOKS BUYMUSIC
HOME
ROCKJAZZ CLASSICAL
FOLK
REGGIE
http://www.surl.org/usabilitynews/42/hypertext.asp
http://www.otal.umd.edu/SHORE/bs04/
![Page 16: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/16.jpg)
Hypertext organizational structures
![Page 17: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/17.jpg)
Database organizational structures
![Page 18: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/18.jpg)
Navigation
![Page 19: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/19.jpg)
Navigation
“Navigation isn’t a feature of the Web site, it is the Web site… without it there’s no there.”
Krug, S. (2001)
Design for the user’s convenience, not yours.
Nielsen, J. (2006)
![Page 20: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/20.jpg)
Navigation: How do we find something? Do you decide to ask first or browse
Search dominant usersLink dominant users
We make our way though hierarchy using signs to guide us.
Source: Krug, S. (2001). Don’t make me think.
![Page 21: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/21.jpg)
In a Store
![Page 22: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/22.jpg)
On the Web
![Page 23: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/23.jpg)
Navigation
The Web lacks cues we rely on in physical spaces.
Source: Krug, S. (2001). Don’t make me think.
![Page 24: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/24.jpg)
Navigation
1. No sense of scale – how big is this site?
2. No sense of direction (no left, right, up down).
3. No sense of location.
![Page 25: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/25.jpg)
Navigation
Size/scale | Location | Direction
Text density???
![Page 26: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/26.jpg)
Navigation
Unlike physical spaces, on the Web, we must remember where something is in the conceptual hierarchy and retrace steps.
The importance of the Home page (Home base) Depicting the information hierarchy The Back button
![Page 27: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/27.jpg)
Navigation: Purpose
Informs user about what is on site. Make a visible hierarchy to convey what is on site.
Informs user how to use site - where to begin and the options available.
Builds user confidence.
![Page 28: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/28.jpg)
Navigation
Conventions
![Page 29: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/29.jpg)
Navigation: Conventions
Good navigation design shows users: where they are where things are located, and how to get the things they need.
![Page 30: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/30.jpg)
Navigation: Conventions
It is predictable and makes people feel comfortable exploring the site.
Doesn’t need to be studied or memorized.
Reflects users impression of how information should be represented in Web space.
![Page 31: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/31.jpg)
Site IDSections
Utilities
Subsections
Location
Local navigation
Small Text Navigation
Global Location
Conventions
![Page 32: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/32.jpg)
Navigation | site map Translate site map | flowchart into navigation
Global Navigation
Sub-level Navigation
![Page 33: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/33.jpg)
Site IDSections
Utilities
Subsections
Location
Local navigation
Small Text Navigation
Conventions
Global Location
![Page 34: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/34.jpg)
Site IDSections
Utilities
Subsections
Location
Navigation: Conventions
![Page 35: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/35.jpg)
Navigation: Conventions Navigation is in same location on every page.
Exceptions – the home page, forms.
Mains topics static and appear at once – users skim the choices
Keep Site ID (logo) on every page of site – upper left.
Site ID is the highest element in the hierarchy
![Page 36: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/36.jpg)
Site IDBooks
Computer Books
Perl scripting made easy
![Page 37: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/37.jpg)
![Page 38: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/38.jpg)
![Page 39: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/39.jpg)
Conveys that items are under this section
![Page 40: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/40.jpg)
![Page 41: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/41.jpg)
![Page 42: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/42.jpg)
![Page 43: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/43.jpg)
![Page 44: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/44.jpg)
12
3
4
![Page 45: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/45.jpg)
Navigation: Conventions
Site ID must look like a Site ID
Site ID should also function as a link to Home.
Add Search to every page: A box, a button, and Search No unique words
![Page 46: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/46.jpg)
Navigation: Conventions
• Primary/persistent navigation also includes space for secondary navigation.
Primary
Secondary
![Page 47: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/47.jpg)
Navigation: ConventionsUtilities
• Utilities are not part of the hierarchy
• Helps users use the site
• Provide information about site publisher
• Only include the most important 4-5 utilities on Primary navigation
• Make utilities list less prominent than sections
![Page 48: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/48.jpg)
Navigation: Page names
• Name your pages
• Page Name should frame content unique to the page.
• Names should be prominent
• Name should match what user clicks.
![Page 49: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/49.jpg)
Site IDBooksName pages
![Page 50: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/50.jpg)
![Page 51: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/51.jpg)
Navigation: You are here
Tell the user his/her location – you are here.
![Page 52: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/52.jpg)
Navigation: Breadcrumbs
Use “>” between levels Use small type Special visual treatment for last item
![Page 53: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/53.jpg)
Navigation: Links | Repeated information Placing duplicate links all over the page
decreases likelihood that viewers see them.
Fewer objects on the page, the more likely people will notice them.
With many competing elements, all items lose prominence.
![Page 54: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/54.jpg)
Navigation: Conventions | Words
People tend to skip meaningless words.
Remove extraneous words.
Links that start with identical or redundant phrases require people to carefully read all of them to glean the differences.
Help people quickly differentiate links by giving them informative names.
![Page 55: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/55.jpg)
Navigation: Your page should answer these questions. What is the site ID? What page am I on (page name)? What are the major sections (global
navigation) Where am I? (global and local navigation) How can I search?
![Page 56: Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f055503460f94c19776/html5/thumbnails/56.jpg)