CS 320 Interaction Design

1. CS 320 Interaction Design INTERACTION DESIGN PROCESS Textbook: S. Heim, The Resonant Interface: HCI Foundations for Interaction Design [Chapter 3] Addison-Wesley, 2007 February 28, 2011

2. Outline Interaction Design Processes On Midterm 1 (March 21, 2011) More on Project Part 1 (Concept) CS 320 February 28, 2011

3. Iterative Design User-Centered Design Interaction Design Models: Basic Software Engineering Model (Waterfall SE) Basic Human-Computer Interaction Model (HCI) Discount Usability Engineering (DUE) Framework: Discovery, Design and Evaluation (DDE) 1 Interaction Design Process 3 CS 320 February 28, 2011

4. Interaction Design Process: Iterative Design • Interaction design is an iterative process • The knowledge path is constantly moving forward CS 320 February 28, 2011

5. Interaction Design Process: User Centered Design • User Centered Design (UCD) was pioneered by Donald Norman’s research laboratory at the University of California at San Diego • The objective of UCD is to develop a design framework that enables interaction designers to build more usable systems CS 320 February 28, 2011

6. Interaction Design Process: User Centered Design • Design should emerge from the user’s • goals • tasks • environment • Focuses on human-centric issues • cognition • perception • physical attributes and conditions CS 320 February 28, 2011

7. Interaction Design Process: User Centered Design • Who are the users? (not as obvious as we might think): • Those who interact directly with the product • Those who manage direct users • Those who provide input or receive output from the product • Those who make the purchasing decision • Those who use competitors’ products • Four types of stakeholders: • Primary: use the design directly • Secondary: either supply input or receive output from the design • Facilitators: develop or maintain the design • Indirect: affected by the use of design, but have no direct contact with it CS 320 February 28, 2011

8. Interaction Design Process: User Centered Design • The main tenants of user-centered design: • Early focus on users and tasks: directly study cognitive, behavioral, anthropomorphic, and attitudinal characteristics • Continuous evaluations to determine ease of learning and ease of use: observe, record and analyze the users’ reactions and performance to scenarios, manuals, simulations, and prototypes • Iterative design: when problems are found in user testing, fix them and carry out more tests CS 320 February 28, 2011

9. Interaction Design Process: User Centered Design • UCD projects generally involve the following methods: • User participation (Chapter 4) • Focus groups (Chapter 4) • Questionnaires (Chapter 4) • Ethnographicobservations (Chapter 4) • Walkthroughs (Chapter 5) • Expert evaluations (Chapter 5) • Usability testing (Chapter 8) CS 320 February 28, 2011

10. Interaction Design Process: Models • Many design models exist, with various mixtures of software engineering (SE) and HCI techniques [Rogers et al, 2007] [Heim 2007] • Waterfall model (basic Software Engineering model) • Spiral model • Basic HCI model • Dynamic Systems Development Method (DSDM) • Prototype-based models • Discount Usability Engineering (DUE) method • Contextual inquiry • We discuss next the basic SE (waterfall), the basic HCI model, and DUE CS 320 February 28, 2011

11. Interaction Design Process: Waterfall Model • Traditional SE model (waterfall) • Emphasis is on systematic, step-wise development CS 320 February 28, 2011

12. Interaction Design Process: Waterfall Model • The waterfall model is the classical, linear, sequential engineering development model • It has clear cut phases, each of which must be completed before the next phase can begin • Introduced by Winston Royce in 1970 based on his experience with developing software for “spacecraft mission planning, commanding and post-flight analysis” • Waterfall assumes that requirements are fixed • Not a user-centered model CS 320 February 28, 2011

13. Interaction Design Process: Waterfall Model • Advantages of the waterfall model: • Highly disciplined process of documentation • Easily observable development progress • Easy to create budget • Consistent review process • Disadvantages of the waterfall model: • Document centric; can be difficult for the customer to understand the process • Specialized development teams may wait on each other • Rigid, rather slow, doesn’t cope well with changing requirements CS 320 February 28, 2011

14. Interaction Design Process: Basic HCI Model • Typical HCI model [Rogers et al, 2007]. Note that emphasis is on iteration, evaluation, and alternative versions. CS 320 February 28, 2011

15. Interaction Design Process: DUE Model • Nielsen (1994) argued that the benefits derived from even small amounts of user testing would have a significant impact on the usability of the design • He proposed Discount Usability Engineering (DUE), which is based on the following three techniques: • Scenarios • Thinking aloud • Heuristic evaluation CS 320 February 28, 2011

16. Interaction Design Process: DUE Model • Nielsen suggested that the number of problems P that could be identified from a usability test with n users can be calculated according to the following equation: P = N [1-(1-L)n] where: N = total number of usability problems in a design L = proportion of usability problems discovered with a single participant n = number of users CS 320 February 28, 2011

17. Interaction Design Process: DDE Framework • General DDE Framework [Heim 2007] CS 320 February 28, 2011

18. Interaction Design Process: Discovery • General DDE Framework [Heim 2007] - Discovery CS 320 February 28, 2011

19. Monday March 21 at 2:30 pm Chapters required: Chapter 1 – Interaction Paradigms Chapter 2 – Interaction Frameworks and Styles Chapter 3 – Interaction Design Process Chapter 4 – Discovery More details will be provided on Wednesday 2 Midterm exam #1 19 CS 320 February 28, 2011

20. Due Thursday March 10, at 8:00 pm Need to finalize teams of two students Contents: Abstract Description Project Resources 3 Project Part 1: Concept 20 CS 320 February 28, 2011

21. Video Selection • Mobile computing [Mozilla Seabird] (Nathan) • Direct manipulation [Future user interface][Library carousel] • Virtual reality / 3D Environments [CAVE 1993] [Museum 1] [Therapy][Museum 2] [Challenges of HCI] (Parth) • Zoomable interfaces [Raskin] [Pad++] [NUI] [Google spreadsheets] • Natural language interaction [Siri] [Articulate] CS 320 February 28, 2011