Syllabus 1

Information Design 1 Syllabus

Jump to Week: 1 2 3 4 5 6 7 8

Week 1: Information Design, Inventories, and Personas

Topics:

Information Design (ID), Information Architecture (IA), User Experience Design (UXD)
Debunking Ten UX Myths (wiki)
Content and features inventories
Personas and motivations: Who, what, and why?

Readings:

Information Architecture: Blueprints for the Web (2nd Edition) (Wodtke & Govella, 2009):
Chapter 2: Balancing Acts - Users, Technology, and Business
Chapter 6: From A to C by Way of B (pp. 123 - 145)
Great Designs Should Be Experienced and Not Seen (HTML)

Exercises:

Creating personas and identifying motivations and needs
Creating a content and feature inventory

Assignment:

Review the project site. Identify and write one persona for this site. Create content and features inventories for the existing site. Include recommendations for adding, modifying, and/or deleting content and functionality in order to better meet the needs and expectations of the target audience.

Example Site:

Art & Orchids Bed & Breakfast (HTML)

Current Content Inventory (PDF)
Persona (PDF)

Project Sites:

Group 1: SunHeat Infrared Heaters
Group 2: Feeling Good
Group 3: Southern Grace Farms
Group 4: Confusion Hill
Group 5: Steel City Disc Jockey
Group 6: Jacob's World Famous Andouille Sausage
Group 7: Morgus the Magnificent
Group 8: The Academy of Kung Fu

Sample Sites:

Truly Bad Sites:

Make your own site bad with the Geocities-izer!

Finally, Save the Words is not truly bad but certainly not easy to use.

(Temporarily) Retired Sites:

Rickshaw Stop
Imperial Tea Garden
Mercer Memorial Day 500
21st Century Health Club
The Houdini Museum
Angkor Borei Restaurant
Infectious Disease T-Shirts
Dog Beach Dog Wash
Mountain Meadow RV Park
Chicken, Alaska
Puppy Dog Web
Dinghy Insurance

Week 2: Site Architecture

Topics:

Site Architecture
Navigation Systems

Readings:

Information Architecture: Blueprints for the Web (2nd Edition) (Wodtke & Govella, 2009):
Chapter 3: Sock Drawers and CD Racks - Everything Must Be Organized
Chapter 4: A Bricklayer's View of Information Architecture (Optional for those of you interested in learning more about taxonomies and metadata)

Information Architecture 101: Techniques and Best Practices (HTML)

Exercises:

Create a site architecture. Methods for discovering and exploring site architecture (e.g., card sorting task.)

Example Site:

Art & Orchids Bed & Breakfast (HTML)

Current Sitemap (Image)
Proposed Sitemap (Image)

Assignment:

Create a map of the current architecture of the project site and create a revised architecture improving the organization and including your recommendations for new content and functionality.

Week 3: Work Flows for User Experience

Topics:

Work flows (for example site)
Interaction Design (IxD)

Readings:

Information Architecture: Blueprints for the Web (2nd Edition) (Wodtke & Govella, 2009):
Chapter 6: From A to C by Way of B (pp. 146-154)
Interaction Elasticity (How many clicks are too many?)
Modeling User Workflows (PDF)

Exercises:

Identifying key tasks and user behavior goals. Create user flows for key tasks.
For the Art & Orchids Bed and Breakfast site, create a workflow for site visitors who want to add a comment to the online guestbook. Include form fields for: Name, email, URL (optional), city, dates of stay, comment, and a Captcha (to verify humanity)
Guestbook Workflow (Image)

Assignment:

Create two (2) user flows for key tasks of visitors to the project site.

Week 4: Schematics / Wireframes I

Topics:

Homepage
Static content pages

Readings:

Information Architecture: Blueprints for the Web (2nd Edition) (Wodtke & Govella, 2009):
Chapter 7: From Box to Page
Chapter 8: The Tao of Navigation

Web Site Wireframing (HTML)
Wireframing Benefits (HTML)
Design Psychology by Andy Rutledge (HTML)
Information Design Patterns (HTML)
Design Patterns, Standard, and Memes (PDF)
Designing with a Grid-Based Approach (HTML)
Grids are Good (PDF)
The Grid System (HTML)

Exercises:

Identify different content page types. Create wireframes for the homepage and other content pages for the Art & Orchids Bed and Breakfast site.

Art & Orchids Bed and Breakfast Wireframes (Part 1)

Assignment:

Create schematics for the homepage and two (2) static content pages for the project site.

Week 5: Schematics / Wireframes II

Topics:

Interactivity
Form elements and form pages
Dynamic content pages

Readings:

Information Architecture: Blueprints for the Web (2nd Edition) (Wodtke & Govella, 2009):
Chapter 5: Search and Ye Shall Find
The Future of Wireframes (HTML)
Human Interface Guidelines (HTML)
Gradual Engagement (HTML)
Web Forms Best Practices (PDF)
Web Application Form Design I (HTML)
Web Application Form Design II (HTML)
Previous and Next Actions in Web Forms (HTML)
Label Placement in Forms (HTML)

Examples:

Let's play "find the navigation!" (not a positive example, in case you were wondering...)
(Here are screenshots in case the site is no longer live: Hide and Show

Example of Poor Form Structure (PDF)

What NOT to do with an online form. (Image)

Exercises:

Designing status and progress indicators for forms and multi-step processes. Create schematics for forms (for example site)

Assignment:

Create three (3) schematics for forms and/or dynamic content pages for the project site.

Week 6: Schematics / Wireframes III

Topics:

Error handling and messages
- Never blame the visitor
- What went wrong?
- Why did it happen?
- How do I fix it?
Modal "hop-ups", windows, and dialogs
Wizards and guided processes
- Linear vs. non-linear
- Underlying logic (branching tree)
- Making complex tasks approachable and manageable

Readings:

Information Architecture: Blueprints for the Web (2nd Edition) (Wodtke & Govella, 2009):
Chapter 1: First Principles

Exercises:

Error trapping, error handling, and error messages. Designing modal dialogs. Create schematics for step-by-step guided processes (for example site)

Market Watch
Gap
Yahoo!
Fine Stationery
Jansport
jQuery Superbox Photo Gallery

Assignment:

Create three (3) schematics for error messages, modal dialogs, and/or a wizard for the project site.

Week 7: Usability

Topics:

Usability Techniques
Paper Prototypes

Readings:

Information Architecture: Blueprints for the Web (2nd Edition) (Wodtke & Govella, 2009):
Chapter 9: Architecting Social Spaces

Exercises:

Developing paper (or other low-fidelity) prototypes. Defining usability tasks and writing usability scripts. Demo usability test session.

Art & Orchids Click-through Prototype (HTML)

Click-through Prototype Fireworks File (Source File - right-click and "Save Link As", then open in Adobe Fireworks to see how the prototype was created)

Watch a screencast of this prototype being created

Navigate a web site in another language by looking for standard design techniques and practices (e.g., primary navigation, breadcrumbs, link language, etc.) Notice how it is possible to develop a sense of place even if you are unable to understand the language.
Marusan Pantry (HTML, Japanese)

Assignment:

Create the wireframes necessary to test two key tasks on the project site. Write a script for testing these tasks. Create a paper or clickable prototype to be tested in the final class.

Week 8: Final Design Review

Topics:

Mock Usability Testing
Project Design Review

Readings:

Information Architecture: Blueprints for the Web (2nd Edition) (Wodtke & Govella, 2009):
Chapter 10: All Together Now
Chapter 11: And in the End

Exercises:

Test paper or clickable prototype with classmates. Briefly describe and discuss problems or design issues and offer possible solutions to design and usability problems.

NOTE: You do not need to upload your protoype to the wiki. Please upload only the testing script. I will review all prototypes during class.

Common Usability Issues

Syllabus 1

Information Design 1 Syllabus

Week 1: Information Design, Inventories, and Personas

Week 2: Site Architecture

Week 3: Work Flows for User Experience

Week 4: Schematics / Wireframes I

Week 5: Schematics / Wireframes II

Week 6: Schematics / Wireframes III

Week 7: Usability

Week 8: Final Design Review

Information Design

Interaction Design

About