user-centered design: from concept to product peter merholz peterme [email protected]
TRANSCRIPT
User-Centered Design: From Concept to Product
Peter Merholzpeterme
http://peterme.com/[email protected]
peterme
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
introduction
peterme
Why User-Centered?
Ensures relevant and useful functionality
Saves money with low-cost design methods
More than anything else, sites must work
introduction
peterme
How User-Centered?
Research
Definition
Design
introduction
peterme
RESEARCH
peterme
1. Direct User Research
Ethnographic Field StudiesContextual InquiryInterviewsFocus Groups
research
peterme
1. Direct User Research
Ethnographic Field Studies
Participant ObservationTime-intensiveNarrow but very very deepField Methods Casebook for Software Design, Wixon and Ramey
research
peterme
1. Direct User Research
Contextual Inquiry
Study context of work tasksInterviews and observationBest bang for buckContextual Design, Beyer and Holtzblatt
research
peterme
1. Direct User Research
Interviews
If you don’t have the time for CIInterview within their context
research
peterme
1. Direct User Research
Focus Groups
Similar to marketing focus groupsStill try to get a handle on how people do things
Good in spurring dialog
research
peterme
2. Site Audits
Competitive and Landscape Analysis
Competitors have faced same problemsUnderstand users’ perspectives Know what you’ll need to be competitiveBest of breed designsUnexploited nichesExample of competitive auditBest practices report
research
peterme
3. Marketing Review
Witness larger trendsUnderstand the Big Picture
research
peterme
DEFINITION
peterme
4. Brainstorming
Grounded in real user data and understandingFocus on 3-4 typical customer typesTeam activity
definition
peterme
5. Scenarios
Narratives for those 3-4 customer typesForce you to think non-logicallyThroughout process: “How would Suzy do this?”Can be given to a number of different designers to solve
definition
peterme
5. Scenarios
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…”
definition
peterme
6. Task Analysis
Discrete step-by-step analysis of how users do thingsTakes mushy information and starts making it solidGood time for client inputTypically for transactional sites, handy for process-based contentUser and Task Analysis for Interface Design, Hackos and Redish
definition
peterme
7. Task Analysis
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
definition
peterme
8. Functional Requirements
List out all the possible features and functionality for the sitePrioritize themMajor sign-off agreement for proceeding with siteStart roadmap with subsequent phasesGood time for revisiting budget
definition
peterme
DESIGN
peterme
9. Content Grouping
Affinity Diagrams and Card SortingHave team or users place concepts together that make senseGood for developing hierarchy or menu groups
design
peterme
10. Site Architecture
The Site’s BlueprintTask-oriented flowsSite mapsInformation Architecture for the World Wide Web, Rosenfeld and Morville
design
peterme
10. Site Architecture
Task-oriented flowsFrom task analysis, focus on particular user task
Detail all the possibilities of that task
For more “interaction-heavy” areas
design
peterme
10. Site Architecture
Task oriented flow
design
peterme
10. Site Architecture
Site MapStructure of entire siteLess interaction detail, more content placement
Serve as blueprint for site’s design and production
design
peterme
10. Site ArchitectureSite Map
design
peterme
11. Paper Prototypes
Interactive paper sketches of your site’s key functionalityGreat team activityGood balance with the eminently logical site mapsUser testing and input
design
peterme
12. Functional HTML Prototype
Fully functional prototype of the main areas of your siteNon-designed--the focus is on the functionalityA high-fidelity prototype that will make problems painfully clearExample
design
peterme
13. Usability Testing
User TestingGive real people tasks to accomplish with prototype
Heuristic EvaluationsHave experts assess based on guidelines
Rev your prototype and architectureUsability Engineering, Nielsen
design
peterme
14. Functional Specification
Detailed description of every page and the functionality on itThe site’s BibleThis, the prototype, and the site architecture should cover the totality of the site’s structure and functionality
design
peterme
15. The Rest of the Process
Serve as a consultant throughout design and developmentShould review materials before presented to clientWork with team to fix any SNAFUs
