information architecture organizing content. 1. steelers fan site 2. information architecture 2. css...
TRANSCRIPT
Information Architecture
Organizing content
1. Steelers fan site
2. Information Architecture
2. CSS | Dreamweaver | Forms
Today’s objectives
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
SOURCE: http://www.usability.gov/methods/process.html
www.usability.gov
Information Architecture
An introduction
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
Search
Findability
Page design
Information
Task support
Fancy design
Other
Issues that stopped users in their tracks
Source: Nielsen & Loranger, 2006
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)
Information Architecture
IAers create a blueprint for how to organize information/website to meet users informational needs.
http://articles.sitepoint.com/article/architecture-defined
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
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
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
• Colored tab identify section.• Breadcrumbs for location and to move up hierarchy.
Principle #1: Design for Wayfinding
Principle #1: Design for Wayfinding
Principle #1: Design for Wayfinding
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
Principle #1: Design for Wayfinding
What do the bulk of the visitors want?
Global navigation - navigation tools consistent throughout a web site.
Principle #1: Design for WayfindingWhat do the bulk of the visitors want?
Global navigation - navigation tools consistent throughout a web site.
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
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
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
Principle #2: Set Expectations and Provide Feedback
What is in the shopping cart?
Principle #2: Set Expectations and Provide Feedback
Principle #3: Ergonomic Design
Consider things such as: Excessive scrolling Colors Excessive eye scans Text size Auto play sounds Unnecessary animation
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.
Principle #4: Be Consistent and Consider Standards
Logo placement | Clickable to go home
Job opportunities
Principle #4: Be Consistent and Consider Standards
Logo placement | Clickable to go home
Job opportunities
Principle #5: Provide Error Support—Prevent, Protect, and Inform
Principle #6:Rely on Recognition Rather than on Recall
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.
Principle #7:Provide for People of Varying Skill Levels
Options for advanced users
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."
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."
