home ....interface design .... web development .... movie reviews .... travel .... about peterme
edgewise '99
Presentations
Top 10 Things To Know And Do in User-Centered Design

User-Centered Design: From Thought to Product
 
Session Presentation

User-Centered Design: From Thought to Product

View the presentation in properly-formatted PowerPoint. (Well, properly-formatted for the PC. Dunno what it will look like on a Mac.) 275k.

Or view the presentation below in HTML. It contains additional links to Web site resources. Italicized links are to books on Amazon. "Links in Quotes" are to articles on the Web.

The formatting is a bit skewed, and it's missing some visuals, but you'll get the idea.

What is User-Centered?
-Maintain focus on the end-users of your product at all times
-Involve them from the outset in your design process
-Endeavor to understand how your users work

Why User-Centered?
-Ensures relevant and useful functionality
-Saves money with low-cost design methods
-More than anything else, sites must work

How User-Centered?
Process Broken into 3 phases:
Research - Steps 1 through 3
Definition - Steps 4 through 7
Design - Steps 8 through 13
The Rest - Step 14

1. Direct User Research
Ethnographic Field Studies
-Participant Observation
-Time-intensive
-Narrow but very very deep
-
Field Methods Casebook for Software Design, Wixon and Ramey

Contextual Inquiry
-Study context of work tasks
-Interviews and observation
-Best bang for buck
-
Contextual Design, Beyer and Holtzblatt

Interviews
-If you don’t have the time for CI
-Interview within their context

Focus Groups
-Similar to marketing focus groups
-Still try to get a handle on how people do things
-Good in spurring dialog
-"
The Use and Misuse of Focus Groups," Nielsen

2. Site Audits
Competitive and Landscape Analysis
-Competitors have faced same problems
-Understand users’ perspectives
-Know what you’ll need to be competitive
-Best of breed designs
-Unexploited niches
-"
Crash Course on Information Architecture," Shiple

3. Marketing Review
-Witness larger trends
-Understand the Big Picture

DEFINITION
4. Brainstorming
-Grounded in real user data and understanding
-Focus on 3-4 typical customer types
-Team activity

5. Scenarios
-Narratives for those 3-4 customer types
-Force you to think non-logically
-Throughout process: “How would Suzy do this?”
-Can be given to a number of different designers to solve
-Rough Example:

Wile E. Coyote just used up his last anvil in an attempt to hunt a road runner in the middle of the desert. Leading a nomadic lifestyle, he enjoys using the Web to purchase from Acme, as he can do it any time and from anywhere.

Wile stops into a cybercafe and calls up the Acme Products site to order new supplies. He finds the anvil he’s interested in and buys it…”

6. Task Analysis
-Discrete step-by-step analysis of how users do things
-Takes mushy information and starts making it solid
-Good time for client input
-Typically for transactional sites, handy for process-based content
-
User and Task Analysis for Interface Design, Hackos and Redish
-
Task Analysis primer, Young
-Example:

  • I. Buy An Anvil
    • A. Find The Anvil
      • i. Search For Anvil
        • a. Type in "anvil" in Search box
        • b. Read results
      • ii. Browse the Store
      • iii.View anvil
    • B. Purchase The Anvil

7. Functional Requirements
-List out all the possible features and functionality for the site
-Prioritize them
-Major sign-off agreement for proceeding with site
-Start roadmap with subsequent phases
-Good time for revisiting budget

DESIGN

8. Content Grouping
Affinity Diagrams and Card Sorting
-Have team or users place concepts together that make sense
-Good for developing hierarchy or menu groups
-
"Affinity Diagrams," Arthur
-"
Card Sorting Tests to Form Hierarchical Structure," Andrews [note: this link seems a flaky]

9. Site Architecture
Task-oriented flows
-From task analysis, focus on particular user task
-Detail all the possibilities of that task
-For more “interaction-heavy” areas
Site maps
-Structure of entire site
-Less interaction detail, more content placement
-Serve as blueprint for site’s design and production
Information Architecture for the World Wide Web, Rosenfeld and Morville

10. Paper Prototypes
-Interactive paper sketches of your site’s key -functionality
-Great team activity
-Good balance with the eminently logical site maps
-User testing and input
-"
Low Fidelity Prototyping," Hom

11. Functional HTML Prototype
-Fully functional prototype of the main areas of your site
-Non-designed--the focus is on the functionality
-A high-fidelity prototype that will make problems painfully clear

12. Usability Testing
User Testing
-Give real people tasks to accomplish with prototype
Heuristic Evaluations
-Have experts assess based on guidelines
Rev your prototype and architecture
Usability Engineering, Nielsen
"
Usability Heuristics for the Web," Instone

13. Functional Specification
-Detailed description of every page and the functionality on it
-The site’s Bible
-This, the prototype, and the site architecture should cover the totality of the site’s structure and functionality

14. The Rest of the Process
Serve as a consultant throughout design and development
Should review materials before presented to client
Work with team to fix any SNAFUs

 

All contents of peterme.com are © 1999, Peter Merholz.