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

2. 1 Interaction Design Processes 2 On Midterm 1 (March 21, 2011) 3 More on Project Part 1 (Concept) Outline 2 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 4 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 5 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 6 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 7 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 8 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) Ethnographic observations (Chapter 4) Walkthroughs (Chapter 5) Expert evaluations (Chapter 5) Usability testing (Chapter 8) 9 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 10 CS 320 February 28, 2011

11. Interaction Design Process: Waterfall Model Traditional SE model (waterfall) Emphasis is on systematic, step-wise development 11 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 12 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 13 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. 14 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 15

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 16

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

18. Interaction Design Process: Discovery General DDE Framework [Heim 2007] - Discovery 18 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.  Mobile computing [Mozilla Seabird] (Nathan)Mozilla Seabird  Direct manipulation [Future user interface][Library carousel]Future user interfaceLibrary carousel  Virtual reality / 3D Environments [CAVE 1993] [Museum 1] [Therapy] [Museum 2] [Challenges of HCI] (Parth)CAVE 1993MuseumTherapyMuseum 2Challenges of HCI  Zoomable interfaces [Raskin] [Pad++] [NUI] [Google spreadsheets]RaskinPadNUIspreadsheets  Natural language interaction [Siri] [Articulate]SiriArticulate CS 320 February 28, 2011 Video Selection