User-Centered Design: From Concept to Product Peter Merholz peterme

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 Studies Contextual Inquiry Interviews Focus Groups research

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

peterme 1. Direct User Research Contextual Inquiry Study context of work tasks Interviews and observation Best bang for buck Contextual Design, Beyer and Holtzblatt research

peterme 1. Direct User Research Interviews If you don’t have the time for CI Interview within their context research

peterme 1. Direct User Research Focus Groups Similar to marketing focus groups Still 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 problems Understand users’ perspectives Know what you’ll need to be competitive Best of breed designs Unexploited niches Example of competitive audit Best practices report research

peterme 3. Marketing Review Witness larger trends Understand the Big Picture research

peterme DEFINITION

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

peterme 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 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 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 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 site Prioritize them Major sign-off agreement for proceeding with site Start roadmap with subsequent phases Good time for revisiting budget definition

peterme DESIGN

peterme 9. Content Grouping Affinity Diagrams and Card Sorting Have team or users place concepts together that make sense Good for developing hierarchy or menu groups design

peterme 10. Site Architecture The Site’s Blueprint Task-oriented flows Site maps Information Architecture for the World Wide Web, Rosenfeld and Morville design

peterme 10. 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 design

peterme 10. Site Architecture Task oriented flow design

peterme 10. Site Architecture Site Map Structure of entire site Less interaction detail, more content placement Serve as blueprint for site’s design and production design

peterme 10. Site Architecture Site Map design

peterme 11. 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 design

peterme 12. 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 Example design

peterme 13. 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 design

peterme 14. 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 design

peterme 15. 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

peterme Thank You! Peter Merholz peterme