(:Summary:Contains the 'action' links (like Browse, Edit, History, etc.), placed at the top of the page, see site page actions:) (:comment This page can be somewhat complex to figure out the first time you see it. Its contents are documented at PmWiki.SitePageActions if you need help. :) * View * Edit * History * Print

(:nl:)!! Information Design 1 Syllabus

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


'''Whiteboard Photos from In-Class Exercises'''

* View photos and scans from in-class exercises here >


'''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)
Web Design Process (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:''

# Student groups and project sites will be listed here.

''Project Sites:'' ->Klotz Watches & Clocks
Katie's Korner Ice Cream
Gore Place: The Historic Governor Gore Estate
Ancient Egyptian Collection
Madrone Art Bar
Misty Acres Cheviot Sheep Breeders
The Captain and Tennille
Unicorn Farm
Farrago Market and Cafe
Napoleon House
La Poussiere - Authentic Cajun Dancehall
The Galloping Goose Historical Society
Rudi Lechner's Restaurant and Bar
Kazamura Cave Tours
Warren County Kustoms
Angkor Borei Restaurant
Confusion Hill
Dolores Food Market: Unexpected Gourmet
Ability Consultants
The Academy of Kung Fu
Feeling Good
Houdini Tribute
Canton Trade Days
Ski Utah Rentals
Jacob's World Famous Andouille Sausage
Kawamoto Orchid Nursery
Southern Grace Farms
SunHeat Infrared Heaters
Mountain Meadow RV Park

''Truly Bad Sites:'' ->Hosanna1 Afghan Hounds
George Hutchins for Congress
Ling's Cars
Ron Oslund's Homepage
Fabric Land
Human Resources and OD Consultancy
One Global Community
MSY Technology

Make your own site bad with the Geocities-izer!

''Retired Sites:'' ->Rock Bar San Francisco
Hardy Farms Peanuts
Discount Tool Rentals
Mercer Memorial Day 500
The Houdini Museum
Dinghy Insurance
Hometown Favorites Groceries, Candy, and Gifts
Joy Ice Cream Cone Company (for consumers)
Morgus the Magnificent


'''Week 2: Site Architecture'''

''Topics:'' * Information Architecture ** Categorization (groups, may be non-exclusive) ** Classification (hierarchical and exclusive) ** Taxonomy ** Metadata ** Tags (and Folksonomy) * Affinity ** Affinity Diagrams ** Card-Sorting * Site Architecture / Site Map ** Navigation Structure ** Mental Maps

''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)
Debunking the Three-Click Rule (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)


->''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:'' * Introduction to Wireframing * Grids * Navigation * Homepages * 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
<:vspace> ->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)
The Elements of Navigation (HTML)
Ten Simple Ways to Make Wireframes More Useful (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:'' * Introduction to Interactivity: Streaming media, AJAX, Singe-page architecture, and RIAs * Dynamic and interactive content pages: Tabs, Panes, Carousels, accordions, etc. * Gestalt Principles (Proximity, Similarity, Closure) * Form elements and form pages ** Label placement (above? beside? within?) ** Tab-order ** Action buttons (placement and priority)

''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 Alignment in Long Forms (HTML)
Label Placement in Forms (HTML)
Flat Design and 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 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, dialogs, and other layers (e.g., lightboxes, off-screen patterns) ** Hover vs. click / tap ** Where to place it? ** Use an obfuscation layer? ** Make it draggable? ** Using motion * Wizards and guided processes ** Linear (direct path) vs. non-linear (hub-and-spoke) ** Underlying logic (branching tree, conditionals) ** Making complex tasks approachable and manageable ** Hiding the logic, conditions, contingencies, and presenting only what is necessary (when necessary)

''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 wireframes for a guided process (what is a typical linear process? what would be good as a hub-and-spoke process?)

->Market Watch
Fine Stationery
Reebok Custom
jQuery Superbox Photo Gallery

''Assignment:'' ->Create wireframes for displaying error messages, layers (e.g., modal dialogs), and a guided process (at least two, preferably 3+ steps) 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.

-> Usability scripts should give the participant a task, but they should not provide direction. What is wrong with the tasks in this script, and how could it be improved?
Sample of a Poor Script

->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. Prototypes should have sufficient content to provide context - people need to be able to determine if their actions are correct.
Marusan Pantry (HTML, Japanese)

->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

''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(:nl:)

Design by N.Design Studio, adapted by solidGone.org and IDUX
Powered by pmwiki-2.2.86