1. User-Centered Design: From Concept to Product Peter Merholz peterme http://peterme.com/edgewise peterme@peterme.com

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

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

4. peterme How User-Centered? Research Definition Design introduction

5. peterme RESEARCH

6. peterme 1. Direct User Research Ethnographic Field Studies Contextual Inquiry Interviews Focus Groups research

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

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

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

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

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

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

13. peterme DEFINITION

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

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

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

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

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

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

20. peterme DESIGN

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

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

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

24. peterme 10. Site Architecture Task oriented flow design

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

26. peterme 10. Site Architecture Site Map design

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

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

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

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

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

32. peterme Thank You! Peter Merholz peterme http://peterme.com peterme@peterme.com