25 September 2008

1. Human-Centered Design:Enlightened Trial and Error Scott Klemmertas: Amal Dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon, Neema Moraveji, Neil Patel 25 September 2008

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 andcs106b 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. -Linus Pauling “The best way to have a good idea is to have lots of ideas.”

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

9. [Buxton, Sketching User Experiences]

14. LEARNING / COMMUNICATION TIME

15. Prototyping as Communication

16. thinking through doing Epistemic Action

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 Customers, Products, Business, Marketing Customers, Products, Business, Marketing Design Discovery Design Exploration Evaluate Production Customers: - Roles (Who) - Tasks (What) - Context (Stories) Marketing: - Business Priorities - Messages Technology: - Products - Architecture Design: - Leading/competing technologies Work together to realize the design in detail Evaluate with Customers Storyboard Review & Iterate 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 Proposal: Demos/ Lo Fi Prototypes (How) 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. Design Prototype Evaluate Iteration

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. Web Interface Design, Prototyping, & Implementation 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. Web Interface Design, Prototyping, & Implementation 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. Web Interface Design, Prototyping, & Implementation Learnable faster the 2nd 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 Usability/User Experience Goals • 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. 19th century Fang sculpture Les Demoiselles d'Avignon “Good artists borrow, great artists steal” - Pablo Picasso

31. Web Interface Design, Prototyping, & Implementation ? Design DiscoveryTask 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/projects/lo_fi.html

40. http://bmrc.berkeley.edu/courseware/cs160/fall99/projects/t4/body/low-fi/http://bmrc.berkeley.edu/courseware/cs160/fall99/projects/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. Human-Centered Design Scott Klemmertas: Amal Dar Aziz, Mike Krieger, Ranjitha Kumar, Steve Marmon, Neema Moraveji, Neil Patel 25 September 2008