1. stanford hci group / cs147 http://cs147.stanford.ed u 25 September 2008 Human-Centered Design: Enlightened Trial and Error Scott Klemmer tas: Amal Dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon, Neema Moraveji, Neil Patel

2. Recap: Course Overview Project-based course Weekly assignments, due Thursday noon Two weekly lectures, studio Final project presentations: Monday 12/8, 7p-10p

3. Is this course right for me? Officially, cs106a is a pre- requisite and cs106b is a co-requisite Functionally, can you work together with two peers to create and evaluate an interactive application? (We’ll provide the Flash tutorials) Depending on your background, some of this may be review (e.g., design process for product design students)

4. How CS147 Fits into Curriculum Most CS courses for learning technology –compilers, operating systems, databases, etc. CS147 concerned w/ design & evaluation –technology as a tool to evaluate via prototyping –skills will become very important upon graduation complex systems, large teams

5. today

7. “The best way to have a good idea is to have lots of ideas.” -Linus Pauling

8. 8 Prototypes for the Microsoft mouse From Moggridge, Designing Interactions, Ch2

9. [Buxton, Sketching User Experiences]

14. TIME LEARNING / COMMUNICATION

15. 15 Prototyping as Communication

16. Epistemic Action thinking through doing

17. [Buxton, Sketching User Experiences]

18. Tohidi et al, CHI 2006

19. User Interfaces (UIs) Part of application that allows people –to interact with computer –to carry out their task User vs. Customer vs. Client –user is a term only used by 2 industries  bad! –customer – person who will use the product you build –client – the company who is paying you to build it HCI = design, prototyping, evaluation, & implementation of UIs

20. Human-Centered Design  Users’ tasks and goals are the driving force behind development  Users are consulted throughout development  All design decisions are taken from within the context of the users, their work, and their environment

21. User Interface Development Process Design Exploration EvaluateProduction Proposal: Demos/ Lo Fi Prototypes (How) Work together to realize the design in detail Evaluate with Customers Design Discovery Customers, Products, Business, Marketing Customers, Products, Business, Marketing Design Definition: - Design Problem Statement - Targeted User Roles (Who) - Targeted User Tasks (What) - Design Direction Statements Specification: Hi Fidelity, Refined Design - Based on customer feedback - Foundation in product reality - Refined Design description Storyboard Customers: - Roles (Who) - Tasks (What) - Context (Stories) Marketing: - Business Priorities - Messages Technology: - Products - Architecture Design: - Leading/competing technologies Review & Iterate based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli

22. Our Human-Centered Process  Understand  Observe  Visualize and Predict  Evaluate and Refine  Implement  Iterate

23. Iteration Design Prototype Evaluate

24. Why is HCI Important? Major part of work for “real” programs –approximately 50% Bad user interfaces cost –money 5%  satisfaction  up to 85%  profits finding problems early makes them easier to fix –reputation of organization (e.g., brand loyalty) –lives (Therac-25) User interfaces hard to get right –people are unpredictable –intuition of designers often wrong

25. CSE 440 - Autumn 2008 Web Interface Design, Prototyping, & Implementation 25 Who Creates UIs? A team of specialists (ideally) –graphic designers –interaction / interface designers –information architects –technical writers –marketers –test engineers –usability engineers –software engineers –customers

26. CSE 440 - Autumn 2008 Web Interface Design, Prototyping, & Implementation 26 Usability According to the ISO: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments This does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals

27. CSE 440 - Autumn 2008 Web Interface Design, Prototyping, & Implementation 27 Usability/User Experience Goals –Learnable faster the 2 nd time & so on –Memorable from session to session –Flexible multiple ways to do tasks –Efficient perform tasks quickly –Robust minimal error rates good feedback so user can recover –Discoverable learn new features over time –Pleasing high user satisfaction –Fun Set goals early & later use to measure progress Goals often have tradeoffs, so prioritize Example goals

28. User-centered Design “Know thy User” Cognitive abilities –perception –physical manipulation –memory Organizational / educational job abilities & skills Keep users involved throughout –developers working with target customers –think of the world in users terms –not technology-centered/feature driven

29. 1 Inspiration

30. “Good artists borrow, great artists steal” - Pablo Picasso 19th century Fang sculpture Les Demoiselles d'Avignon

31. CSE 440 - Autumn 2008 Web Interface Design, Prototyping, & Implementation 31 Design Discovery Task Analysis & Contextual Inquiry Observe existing work practices –augment with self-report tools (e.g., ESM) Create examples & scenarios of actual use Discover tasks to design for Answer key questions about tasks & users “Try-out”new ideas before building software ?

32. 2 Contextual Inquiry  Users and stakeholders  Context  At the interviewee’s workplace  Partnership  Designer is apprentice to Interviewee  Can be guided by interviewee

33. Contextual Interviews  Interpretation and elicitation of needs  Observations must be interpreted by observer and interviewee  Focus  Short  Inquire about work behaviors  Intention is to design a new system  Focus on design goals

34. Capturing the Data  Observer’s head  Written notes  Sketches and photos of the setting  Audio (or even Video)

35. Brainstorming Guidelines  Be Visual.  Defer judgment.  Encourage Wild Ideas.  Build on the Ideas of Others.  Go for Quantity.  One Conversation at a Time.  Stay Focused on the Topic.

36. 3 Storyboards http://www.storyboards- east.com/sb_dismoi.htm

37. 4 Low-Fidelity Prototypes

38. Tools  Paper, Cardboard, Transparencies  Tape, Glue, Rubber Cement  Pens, Pencils, Markers  Scissors  Plastic Tubes, Paper Cups, CD “Coasters”  Anything that you can buy in an arts and crafts store  …and video

39. http://www.mindspring.com/~bryce_g/proj ects/lo_fi.html

40. http://bmrc.berkeley.edu/courseware/cs160/fall99/project s/t4/body/low-fi/

41. 5 User Testing http://www.cs.waikato.ac.nz/usability/facilities.html http://www.itl.nist.gov/iad/gallery.html

42. User Testing Ingredients  Greeter/Facilitator  2 Observers/Note takers  Prototype  Users!!!!

43. An example cs147 project

44. stanford hci group / cs147 http://cs147.stanford.ed u 25 September 2008 Human-Centered Design Scott Klemmer tas: Amal Dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon, Neema Moraveji, Neil Patel