User-Centered Design: From Concept to Product

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

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

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

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

5. RESEARCH peterme

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

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

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

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

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

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

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

13. DEFINITION peterme

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

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

16. definition 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…” peterme

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

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

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

20. DESIGN peterme

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

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

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

24. design 10. Site Architecture • Task oriented flow peterme

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

26. design 10. Site Architecture • Site Map peterme

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

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

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

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

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

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