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