1. 1 Lecture 4: Understanding how interfaces affect users and the Process of Interaction design

2. 2 Overview Expressive interfaces Expressive interfaces how the ‘appearance’ of an interface can elicit positive responseshow the ‘appearance’ of an interface can elicit positive responses Negative aspects Negative aspects how computers frustrate users how computers frustrate users Anthropomorphism and interface agents Anthropomorphism and interface agents The pros and consThe pros and cons Designing synthetic characters Designing synthetic characters

3. 3 Affective aspects HCI has generally been about designing efficient and effective systems HCI has generally been about designing efficient and effective systems Recently, move towards considering how to design interactive systems to make people respond in certain ways Recently, move towards considering how to design interactive systems to make people respond in certain ways e.g. to be happy, to be trusting, to learn, to be motivated e.g. to be happy, to be trusting, to learn, to be motivated

4. 4 Expressive interfaces Colour, icons, sounds, graphical elements and animations are used to make the ‘look and feel’ of an interface appealing Colour, icons, sounds, graphical elements and animations are used to make the ‘look and feel’ of an interface appealing Conveys an emotional stateConveys an emotional state In turn this can affect the usability of an interface In turn this can affect the usability of an interface People are prepared to put up with certain aspects of an interface (e.g. slow download rate) if the end result is very appealing and aestheticPeople are prepared to put up with certain aspects of an interface (e.g. slow download rate) if the end result is very appealing and aesthetic

5. 5 Friendly interfaces Microsoft pioneered friendly interfaces for technophobes - ‘At home with Bob’ software Microsoft pioneered friendly interfaces for technophobes - ‘At home with Bob’ software 3D metaphors based on familiar places (e.g. living rooms) 3D metaphors based on familiar places (e.g. living rooms) Agents in the guise of pets (e.g. bunny, dog) were included to talk to the user Agents in the guise of pets (e.g. bunny, dog) were included to talk to the user Make users feel more at ease and comfortableMake users feel more at ease and comfortable

6. 6 User-created expressiveness Users have created emoticons - compensate for lack of expressiveness in text communication: Users have created emoticons - compensate for lack of expressiveness in text communication: Happy :) Sad :< Sick :X Mad >: Very angry >:-( Also use of icons and shorthand in text and instant messaging has emotional connotations, e.g. Also use of icons and shorthand in text and instant messaging has emotional connotations, e.g. I 12 CU 2NITE

7. 7 User frustration Many causes: Many causes: Gimmicks—MildGimmicks—Mild When a user’s expectations are not met they are instead presented with a gimmicky display. When a user’s expectations are not met they are instead presented with a gimmicky display. Error Message--HighError Message--High When a system or application crashes and and provides an “unexpected” error message When a system or application crashes and and provides an “unexpected” error message Overburdening the user—Medium to highOverburdening the user—Medium to high Upgrading software so that users are required to carry out excessive house-keeping tasks Upgrading software so that users are required to carry out excessive house-keeping tasks Appearance--MediumAppearance--Medium When the appearance of an interface is unpleasant When the appearance of an interface is unpleasant

8. 8 Error messages “The application Word Wonder has unexpectedly quit due to a type 2 error.” Why not instead: “the application has expectedly quit due to poor coding in the operating system” Shneiderman’s guidelines for error messages include: Shneiderman’s guidelines for error messages include: avoid using terms like FATAL, INVALID, BAD avoid using terms like FATAL, INVALID, BAD Audio warnings Audio warnings Avoid UPPERCASE and long code numbers Avoid UPPERCASE and long code numbers Messages should be precise rather than vague Messages should be precise rather than vague Provide context-sensitive help Provide context-sensitive help

9. 9 Website error message…

10. 10 More helpful error message “The requested page /helpme is not available on the web server. If you followed a link or bookmark to get to this page, please let us know, so that we can fix the problem. Please include the URL of the referring page as well as the URL of the missing page. Otherwise check that you have typed the address of the web page correctly. The Web site you seek Cannot be located, but Countless more exist.”

11. 11 Should computers say they’re sorry? Reeves and Naas (1996) argue that computers should be made to apologize Reeves and Naas (1996) argue that computers should be made to apologize Should emulate human etiquette Should emulate human etiquette Would users be as forgiving of computers saying sorry as people are of each other when saying sorry? Would users be as forgiving of computers saying sorry as people are of each other when saying sorry? How sincere would they think the computer was being? For example, after a system crash: How sincere would they think the computer was being? For example, after a system crash: “I’m really sorry I crashed. I’ll try not to do it again”“I’m really sorry I crashed. I’ll try not to do it again” How else should computers communicate with users? How else should computers communicate with users?

12. 12 Anthropomorphism Attributing human-like qualities to inanimate objects (e.g. cars, computers) Attributing human-like qualities to inanimate objects (e.g. cars, computers) Well known phenomenon in advertising Well known phenomenon in advertising Dancing butter, drinks, breakfast cerealsDancing butter, drinks, breakfast cereals Much exploited in human-computer interaction Much exploited in human-computer interaction Make user experience more enjoyable, more motivating, make people feel at ease, reduce anxietyMake user experience more enjoyable, more motivating, make people feel at ease, reduce anxiety

13. 13 Which do you prefer? 1. As a welcome message “Hello Chris! Nice to see you again. Welcome back. Now what were we doing last time? Oh yes, exercise 5. Let’s start again.” “Hello Chris! Nice to see you again. Welcome back. Now what were we doing last time? Oh yes, exercise 5. Let’s start again.” “User 24, commence exercise 5.” “User 24, commence exercise 5.”

14. 14 Which do you prefer? 2. Feedback when get something wrong 1. “Now Chris, that’s not right. You can do better than that.Try again.” 2. “Incorrect. Try again.” Is there a difference as to what you prefer depending on type of message? Why?

15. 15 Evidence to support anthropomorphism Reeves and Naas (1996) found that computers that flatter and praise users in education software programs -> positive impact on them Reeves and Naas (1996) found that computers that flatter and praise users in education software programs -> positive impact on them “Your question makes an important and useful distinction. Great job!” “Your question makes an important and useful distinction. Great job!” Students were more willing to continue with exercises with this kind of feedback Students were more willing to continue with exercises with this kind of feedback

16. 16 Criticism of anthropomorphism Deceptive, make people feel anxious, inferior or stupid Deceptive, make people feel anxious, inferior or stupid People tend not to like screen characters that wave their fingers at the user & say: People tend not to like screen characters that wave their fingers at the user & say: Now Chris, that’s not right. You can do better than that.Try again.”Now Chris, that’s not right. You can do better than that.Try again.” Many prefer the more impersonal: Many prefer the more impersonal: “Incorrect. Try again.”“Incorrect. Try again.” Studies have shown that personalized feedback is considered to be less honest and makes users feel less responsible for their actions (e.g. Quintanar, 1982) Studies have shown that personalized feedback is considered to be less honest and makes users feel less responsible for their actions (e.g. Quintanar, 1982)

17. 17 Virtual characters Increasingly appearing on our screens Increasingly appearing on our screens Web, characters in videogames, learning companions, wizards, newsreaders, popstarsWeb, characters in videogames, learning companions, wizards, newsreaders, popstars Provides a persona that is welcoming, has personality and makes user feel involved with them Provides a persona that is welcoming, has personality and makes user feel involved with them

18. 18 Disadvantages Lead people into false sense of belief, enticing them to confide personal secrets with chatterbots (e.g. Alice) Lead people into false sense of belief, enticing them to confide personal secrets with chatterbots (e.g. Alice) Annoying and frustrating Annoying and frustrating E.g. ClippyE.g. Clippy Not trustworthy Not trustworthy virtual e-commerce assistants?virtual e-commerce assistants?

19. 19 Miss boo.com What do you think of Miss boo?

20. 20 Persuasive advice?

21. 21 Virtual sales agents What do the virtual agents do? What do the virtual agents do? Do they elicit an emotional response in you? Do they elicit an emotional response in you? Do you trust them? Do you trust them? Is the style of interaction different for men and woman’s clothes? Is the style of interaction different for men and woman’s clothes? What facial expression does Miss.boo have? What facial expression does Miss.boo have? Is she believable, pushy, helpful? Is she believable, pushy, helpful? Would it be different if she was a male figure? Would it be different if she was a male figure?

22. 22 Virtual characters: agents Can be classified in terms of the degree of anthropomorphism they exhibit: Can be classified in terms of the degree of anthropomorphism they exhibit: Synthetic characters Synthetic characters animated agents animated agents emotional agents emotional agents embodied conversational agents embodied conversational agents

23. 23 (i)Synthetic characters -Silas the dog (Blumberg, 1996 - MIT) autonomous, with internal states and able to respond to external events

24. 24 (ii) Animated agents Play a collaborative role at the interface Play a collaborative role at the interface Often cartoon-like Often cartoon-like e.g. Herman the bug (Lester et al, 1997 Intellimedia) e.g. Herman the bug (Lester et al, 1997 Intellimedia) flies into plants & explains things on-the-fly & gives advice to students flies into plants & explains things on-the-fly & gives advice to students

25. 25 (iii) Emotional agents Pre-defined personality and set of emotions that user can change Pre-defined personality and set of emotions that user can change The Woggles, Bates, 1994

26. 26 (iv) Embodied conversational agents Rea, real-estate agent, showing user an apartment Rea, real-estate agent, showing user an apartment Human-like body Human-like body Uses gesture, non-verbal communication (facial expressions, winks) while talking Uses gesture, non-verbal communication (facial expressions, winks) while talking Sophisticated AI techniques used to enable this form of interaction Sophisticated AI techniques used to enable this form of interaction Cassell, 2000, MIT

27. 27 Conversation with Rea Mike approaches screen and Rea turns to face him and says: Mike approaches screen and Rea turns to face him and says: Hello. How can I help you? Hello. How can I help you? Mike: I’m looking to buy a place near MIT. Mike: I’m looking to buy a place near MIT. Rea nods, indicating she is following. Rea nods, indicating she is following. Rea: I have a house to show you. (picture of a house appears on the screen) Rea: I have a house to show you. (picture of a house appears on the screen) Rea: it is in Somerville. Rea: it is in Somerville. Mike: Tell me about it. Mike: Tell me about it. Rea looks up and away while she plans what to say. Rea looks up and away while she plans what to say. Rea: It’s big. Rea: It’s big. Rea makes an expansive gesture with her hands. Rea makes an expansive gesture with her hands. Mike brings his hands up as if to speak, so Rea does not continue, waiting for him to speak. Mike brings his hands up as if to speak, so Rea does not continue, waiting for him to speak. Mike: Tell me more about it. Mike: Tell me more about it. Rea: Sure thing. It has a nice garden... Rea: Sure thing. It has a nice garden...

28. 28 Which is the most believable agent? Believability refers to the extent to which users come to believe an agent’s intentions and personality Believability refers to the extent to which users come to believe an agent’s intentions and personality Appearance is very important Appearance is very important Are simple cartoon-like characters or more realistic characters, resembling the human form more believable?Are simple cartoon-like characters or more realistic characters, resembling the human form more believable? Behaviour is very important Behaviour is very important How an agent moves, gestures and refers to objects on the screenHow an agent moves, gestures and refers to objects on the screen Exaggeration of facial expressions and gestures to show underlying emotions (cf animation industry)Exaggeration of facial expressions and gestures to show underlying emotions (cf animation industry)

29. 29 Key points Affective aspects are concerned with how interactive systems make people respond in emotional ways Affective aspects are concerned with how interactive systems make people respond in emotional ways Well-designed interfaces can elicit good feelings in users Well-designed interfaces can elicit good feelings in users Expressive interfaces can provide reassuring feedback Expressive interfaces can provide reassuring feedback Badly designed interfaces make people angry and frustrated Badly designed interfaces make people angry and frustrated Anthropomorphism is increasingly used at the interface, in the guise of agents and virtual screen characters Anthropomorphism is increasingly used at the interface, in the guise of agents and virtual screen characters

30. 30 The Process of Interaction Design

31. 31 Overview What is Interaction Design? —Four basic activities —Three key characteristics Some practical issues —Who are the users? —What are ‘needs’? —Where do alternatives come from? —How do you choose among alternatives? Lifecycle models from software engineering Lifecycle models from HCI

32. 32 What is Interaction Design? It is a process: — a goal-directed problem solving activity informed by intended use, target domain, materials, cost, and feasibility — a creative activity — a decision-making activity to balance trade- offs It is a representation: — a plan for development — a set of alternatives and successive elaborations

33. 33 Four basic activities There are four basic activities in Interaction Design: 1.Identifying needs and establishing requirements 2. Developing alternative designs 3. Building interactive versions of the designs 4. Evaluating designs

34. 34 Three key characteristics Three key characteristics permeate these four activities: 1. Focus on users early in the design and evaluation of the artefact 2. Identify, document and agree specific usability and user experience goals 3. Iteration is inevitable. Designers never get it right first time

35. 35 Some practical issues Who are the users? What are ‘needs’? Where do alternatives come from? How do you choose among alternatives?

36. 36 Who are the users/stakeholders? Not as obvious as you think: — those who interact directly with the product — those who manage direct users — those who receive output from the product — those who make the purchasing decision — those who use competitor’s products Three categories of user (Eason, 1987): — primary: frequent hands-on — secondary: occasional or via someone else — tertiary: affected by its introduction, or will influence its purchase

37. 37 Who are the stakeholders? Check-out operators Customers Managers and owners Suppliers Local shop owners

38. 38 What are the users’ capabilities? Humans vary in many dimensions: — size of hands may affect the size and positioning of input buttons — motor abilities may affect the suitability of certain input and output devices — height if designing a physical kiosk — strength - a child’s toy requires little strength to operate, but greater strength to change batteries — disabilities(e.g. sight, hearing, dexterity)

39. 39 What are ‘needs’? Users rarely know what is possible Users rarely know what is possible Users can’t tell you what they ‘need’ to help them achieve their goals Users can’t tell you what they ‘need’ to help them achieve their goals Instead, look at existing tasks: Instead, look at existing tasks: their contexttheir context what information do they require?what information do they require? who collaborates to achieve the task?who collaborates to achieve the task? why is the task achieved the way it is?why is the task achieved the way it is? Envisioned tasks: Envisioned tasks: can be rooted in existing behaviourcan be rooted in existing behaviour can be described as future scenarioscan be described as future scenarios

40. 40 Where do alternatives come from? Humans stick to what they know works Humans stick to what they know works But considering alternatives is important to ‘break out of the box’ But considering alternatives is important to ‘break out of the box’ Designers are trained to consider alternatives, software people generally are not Designers are trained to consider alternatives, software people generally are not How do you generate alternatives? How do you generate alternatives? —‘Flair and creativity’: research and synthesis —Seek inspiration: look at similar products or look at very different products

41. 41 IDEO TechBox Library, database, website - all-in-one Library, database, website - all-in-one Contains physical gizmos for inspiration Contains physical gizmos for inspiration From: www.ideo.com/

42. 42 The TechBox

43. 43 How do you choose among alternatives? Evaluation with users or with peers, e.g. prototypes Evaluation with users or with peers, e.g. prototypes Technical feasibility: some not possible Technical feasibility: some not possible Quality thresholds: Usability goals lead to usability criteria set early on and check regularly Quality thresholds: Usability goals lead to usability criteria set early on and check regularly — safety: how safe? — utility: which functions are superfluous? — effectiveness: appropriate support? task coverage, information available — efficiency: performance measurements

44. 44 Testing prototypes to choose among alternatives

45. 45 Lifecycle models Show how activities are related to each other Show how activities are related to each other Lifecycle models are: Lifecycle models are: —management tools —simplified versions of reality Many lifecycle models exist, for example: Many lifecycle models exist, for example: —from software engineering: waterfall, spiral, JAD/RAD, Microsoft —from HCI: Star, usability engineering

46. 46 A simple interaction design model Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final product Exemplifies a user-centered design approach

47. 47 Traditional ‘waterfall’ lifecycle Requirements analysis Design Code Test Maintenance

48. 48 JAD workshops Project set-up Iterative design and build Engineer and test final prototype Implementation review A Lifecycle for RAD (Rapid Applications Development)

49. 49 Important features: —Risk analysis —Prototyping —Iterative framework allowing ideas to be checked and evaluated —Explicitly encourages alternatives to be considered Good for large and complex projects but not simple ones Spiral model (Barry Boehm)

50. 50 Spiral Lifecycle model From cctr.umkc.edu/~kennethjuwng/spiral.htm

51. 51 The Star lifecycle model Suggested by Hartson and Hix (1989) Important features: —Evaluation at the center of activities —No particular ordering of activities. Development may start in any one —Derived from empirical studies of interface designers

52. 52 The Star Model (Hartson and Hix, 1989) Evaluation Conceptual/ formal design Requirements specification Prototyping task/functional analysis Implementation

53. 53 Usability engineering lifecycle model Reported by Deborah Mayhew Reported by Deborah Mayhew Important features: Important features: Holistic view of usability engineeringHolistic view of usability engineering Provides links to software engineering approaches, e.g. OOSEProvides links to software engineering approaches, e.g. OOSE Stages of identifying requirements, designing, evaluating, prototypingStages of identifying requirements, designing, evaluating, prototyping Can be scaled down for small projectsCan be scaled down for small projects Uses a style guide to capture a set of usability goalsUses a style guide to capture a set of usability goals

54. 54 Summary Four basic activities in the design process 1. Identify needs and establish requirements 2. Design potential solutions ((re)-design) 3. Choose between alternatives (evaluate) 4. Build the artefact These are permeated with three principles 1. Involve users early in the design and evaluation of the artefact 2. Define quantifiable & measurable usability criteria 3. Iteration is inevitable Lifecycle models show how these are related