information architecture organizing content. 1. steelers fan site 2. information architecture 2. css...
TRANSCRIPT
![Page 1: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/1.jpg)
Information Architecture
Organizing content
![Page 2: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/2.jpg)
1. Steelers fan site
2. Information Architecture
2. CSS | Dreamweaver | Forms
Today’s objectives
![Page 3: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/3.jpg)
Marcus AmorosoJoseph BadaczewskiAaron WangAshleigh NegriChristine CastilloJulie CiaramellaAndrew CunninghamCharles DietzAmanda Henderson
Melia HerrmannKaitlyn JohnstonMegan KnightPatrick MulhollandNathan PhillipsMarjorie RishelRowland RudolfCaroline VotasLingjuan WangTamer Barham
Tuesday, October 20 Thursday, October 22
Highmark Usability lab tourOct. 20 & 22 | 4:20 – 5:45 PM
Must have ID.
Driver - KaitlynDriver - Andrew
![Page 4: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/4.jpg)
SOURCE: http://www.usability.gov/methods/process.html
www.usability.gov
![Page 5: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/5.jpg)
Information Architecture
An introduction
![Page 6: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/6.jpg)
Usability issues
Almost ¾ of usability issues people encounter relate to basic user goals: finding, reading, and understanding information.
Issues that stopped users in their tracks: Search Find-ability (IA, category names, navigation, links) Page Design (Readability, layout, graphics, scrolling) Information (content, product info, corporate info, prices) Task support (workflow, privacy, forms, comparison, inflexible) Fancy design
Source: Nielsen & Loranger, 2006
![Page 7: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/7.jpg)
Search
Findability
Page design
Information
Task support
Fancy design
Other
Issues that stopped users in their tracks
Source: Nielsen & Loranger, 2006
![Page 8: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/8.jpg)
Information foraging theory Developed by Stuart Card, Peter Pirolli
Analogy of animals looking for food to analyze how humans collect information online.
Humans basically lazy – conserve energy - might be survival-related (don’t exert yourself unless you have to).
People want max. benefit for min. effort.
Source: Nielsen & Loranger, 2006
Peter Pirolli, (2007). Information Foraging Theory: Adaptive Interaction with Information (Oxford University Press)
![Page 9: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/9.jpg)
Information Architecture
IAers create a blueprint for how to organize information/website to meet users informational needs.
http://articles.sitepoint.com/article/architecture-defined
![Page 10: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/10.jpg)
Information Architecture
Principle #1: Design for Wayfinding Principle #2: Set Expectations and Provide Feedback Principle #3: Ergonomic Design Principle #4: Be Consistent and Consider Standards Principle #5: Provide Error Support—Prevent, Protect, and Inform Principle #6: Rely on Recognition Rather than on Recall Principle #7: Provide for People of Varying Skill Levels Principle #8: Provide Meaningful and Contextual Help and Documentation
First Principles of Web DesignBy Christina Wodtkehttp://www.peachpit.com/articles/article.aspx?p=30600
First Principles of Web Design
![Page 11: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/11.jpg)
Principle #1: Design for Wayfinding
Wayfinding – hints and clues used to figure out where we are and where we’re going.
Goals to let people know: Where they are Where the things they’re looking for are located How to get to those things they seek
http://www.youtube.com/watch?v=W0VYRev7_bQ
![Page 12: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/12.jpg)
Four key elements of wayfinding:
1. Familiar organization system. Use an organization structure that is familiar to the user. E.g., online grocery store is organized as bakery, dairy, produce, meats, etc.
2. Use obvious labels. A label is a signpost to help people find something. Do not use catchy terms.
3. Navigation that looks like navigation.
4. Let people know where they are on the site and where they came from. Let them know how to get back.
Principle #1: Design for Wayfinding
![Page 13: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/13.jpg)
• Colored tab identify section.• Breadcrumbs for location and to move up hierarchy.
Principle #1: Design for Wayfinding
![Page 14: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/14.jpg)
Principle #1: Design for Wayfinding
![Page 15: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/15.jpg)
Principle #1: Design for Wayfinding
![Page 16: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/16.jpg)
Principle #1: Design for Wayfinding
Layout design suggest areas for user to go
I can find articles here.
I can find additional stuff here.
I can get to other places here
![Page 17: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/17.jpg)
Principle #1: Design for Wayfinding
What do the bulk of the visitors want?
Global navigation - navigation tools consistent throughout a web site.
![Page 18: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/18.jpg)
Principle #1: Design for WayfindingWhat do the bulk of the visitors want?
Global navigation - navigation tools consistent throughout a web site.
![Page 19: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/19.jpg)
Principle #1: Design for WayfindingHow to Get to Those Things They Seek?
•Good navigation design•Links look clickable•Links have clear labels•Labels set expectations of what lies beneath•Links are grouped
![Page 20: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/20.jpg)
Principle #1: Design for WayfindingHow to Get to Those Things They Seek?
•Good navigation design•Links look clickable•Links have clear labels•Labels set expectations of what lies beneath•Links are grouped
![Page 21: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/21.jpg)
Principle #1: Design for WayfindingHow to Get to Those Things They Seek?
•Good navigation design•Links look clickable•Links have clear labels•Labels set expectations of what lies beneath•Links are grouped
![Page 22: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/22.jpg)
Principle #2: Set Expectations and Provide Feedback
What is in the shopping cart?
![Page 23: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/23.jpg)
Principle #2: Set Expectations and Provide Feedback
![Page 24: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/24.jpg)
Principle #3: Ergonomic Design
Consider things such as: Excessive scrolling Colors Excessive eye scans Text size Auto play sounds Unnecessary animation
![Page 25: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/25.jpg)
Principle #4: Be Consistent and Consider Standards
People bring prior knowledge, experience and expectations when they visit your site.
Consider users’ expectations in your design.
![Page 26: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/26.jpg)
Principle #4: Be Consistent and Consider Standards
Logo placement | Clickable to go home
Job opportunities
![Page 27: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/27.jpg)
Principle #4: Be Consistent and Consider Standards
Logo placement | Clickable to go home
Job opportunities
![Page 28: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/28.jpg)
Principle #5: Provide Error Support—Prevent, Protect, and Inform
![Page 29: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/29.jpg)
Principle #6:Rely on Recognition Rather than on Recall
![Page 30: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/30.jpg)
Principle #6:Rely on Recognition Rather than on Recall
Placed in front of the user so he/she can see it and does not have to remember.
![Page 31: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/31.jpg)
Principle #7:Provide for People of Varying Skill Levels
Options for advanced users
![Page 32: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/32.jpg)
Principle #8: Provide Meaningful and Contextual Help and Documentation
Place information in clearly labeled locations, rather than grouping it all under the generic and menacing "Help."
![Page 33: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/33.jpg)
Principle #8: Provide Meaningful and Contextual Help and Documentation
Place information in clearly labeled locations, rather than grouping it all under the generic and menacing "Help."
![Page 34: Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives](https://reader036.vdocuments.net/reader036/viewer/2022081513/56649e575503460f94b4fff8/html5/thumbnails/34.jpg)