1 / 47

Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design

Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design Computer Science Department Stanford University. Learning Goals for Today. Have an overview of the Interaction Design process in general and the specific way it will be applied in this course

noleta
Download Presentation

Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 2 – User-oriented Design Terry Winograd Introduction to Human-Computer Interaction Design Computer Science Department Stanford University

  2. Learning Goals for Today • Have an overview of the Interaction Design process in general and the specific way it will be applied in this course • Have a broad understanding of what “Design” means for this course • Learn a first level of detail about the steps we will be employing in the project • See some examples of design projects

  3. What is Design (Kelley) • Not just problem solving – Creative leap • Messy – No right answer • Takes a point of view – or many • Calls for vision and multiple minds • Open attitude – many solutions • Learned from experience with reflection • Requires a feel for the materials • Starts with broadening, followed by narrowing • Requires ongoing mindfulness

  4. Design phases (IDEO) • Understand • Observe • Visualize and Predict • Evaluate and Refine • Implement

  5. The Interaction Design Process Adapted from slides by Ron B. Yeh, TA from 2003

  6. Overview • Design Process Overview • Idea Generation • Needs Analysis • Exploring Design Ideas • Low-Fidelity “Paper” Prototype • User Testing • High Fidelity “Interactive” Prototype

  7. Design Process Overview

  8. NEEDS DESIGN EVALUATE IMPLEMENT Simple Iterative Model • Modified from p. 186 in Interaction Design

  9. Know thy User… • Alice • Mary • Bob • Dan • Harry • Kelly • Jack • Carrie • Gloria • Fred • Ismelda • Loren

  10. Simple Iterative Model • Modified from p. 186 in Interaction Design NEEDS DESIGN EVALUATE IMPLEMENT

  11. Participatory Design • Modified from p. 186 in Interaction Design NEEDS DESIGN EVALUATE IMPLEMENT

  12. Idea Generation

  13. Brainstorming • Group vs. Individual Creativity • More Ideas == More Creative == Better • Limited Time • Keep a Record • Brainstorm in Section next week!Brainstorming is not just a good idea but an inexhaustible source of inspiration and fresh thinking (IDEO)

  14. The Rules According to IDEO • 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.

  15. Needs Analysis NEEDS DESIGN EVALUATE IMPLEMENT

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

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

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

  19. Exploring Design Ideas NEEDS DESIGN EVALUATE IMPLEMENT

  20. Scenarios • What are they? • When can you use them? • Why are they useful? • Scenario vs. Task

  21. Sketches From a previous cs147 project…

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

  23. Storyboards

  24. Storyboards

  25. Flipbook

  26. Flipbook

  27. Flow Diagrams From a previous cs147 project…

  28. Woah Nelly…! • Sketches, Storyboards, Flipbooks, Diagrams • What’s the Difference? • When to use them? • Why to use them? • Who’s the audience? • Deliverable: Storyboard only • But, try as many as you can

  29. Prototyping NEEDS DESIGN EVALUATE IMPLEMENT

  30. Using Prototypes • Allows multiple parties to envision together • Designers • Users • Engineering, marketing, planning,….. • Reflective conversation with the materials • Focus for identifying alternatives and tradeoffs

  31. Low-Fidelity “Paper” Prototype NEEDS DESIGN EVALUATE IMPLEMENT

  32. 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 that a kindergartener would have fun using).

  33. Examples: Low-Fidelity Prototype

  34. Examples: Low-Fidelity Prototype http://www.mindspring.com/~bryce_g/projects/lo_fi.html

  35. Examples: Low-Fidelity Prototype http://bmrc.berkeley.edu/courseware/cs160/fall99/projects/t4/body/low-fi/

  36. NEEDS DESIGN EVALUATE IMPLEMENT Summary • What is it? • When can you use it? • Why is it useful?

  37. User Testing NEEDS DESIGN EVALUATE IMPLEMENT

  38. Tools • 4 group members • Greeter/Facilitator • Computer (not necessary for low-fi testing) • 2 Observers/Note takers • Prototype • Users!!!!

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

  40. Summary • What is it? • When can you use it? • Why is it useful?

  41. High Fidelity “Interactive” Prototype NEEDS DESIGN EVALUATE IMPLEMENT

  42. Tools • HTML & Javascript • Java JFC/Swing • Visual C++, Visual Basic • Flash MX, Director • Mac Interface Builder • others…or a mix of the above!!!

  43. Examples: Interactive Prototype From cs160 at UC Berkeley

  44. Examples: Interactive Prototype From cs247a at Stanford University

  45. Examples: Interactive Prototype From cs160 at UC Berkeley

  46. Summary • What is it? • When can you use it? • Why is it useful?

  47. Examples of Projects • Automated Menu System • Interactive Academic Planner • ToneDeaf Revolution • N • SleepSoft Tracker • Goober's Marathon

More Related