1 lecture 4: understanding how interfaces affect users and the process of interaction design
TRANSCRIPT
11
Lecture 4:Lecture 4:Understanding how interfaces Understanding how interfaces
affect usersaffect usersand the Process of Interaction and the Process of Interaction
designdesign
22
OverviewOverview
Expressive interfaces Expressive interfaces • how the ‘appearance’ of an interface can how the ‘appearance’ of an interface can
elicit positive responseselicit positive responses
Negative aspectsNegative aspects• how computers frustrate usershow computers frustrate users
Anthropomorphism and interface agentsAnthropomorphism and interface agents• The pros and consThe pros and cons
Designing synthetic charactersDesigning synthetic characters
33
Affective aspectsAffective aspects
HCI has generally been about designing HCI has generally been about designing efficient and effective systemsefficient and effective systems
Recently, move towards considering how Recently, move towards considering how to design interactive systems to make to design interactive systems to make people people respondrespond in certain ways in certain ways• e.g. to be happy, to be trusting, to learn, to be e.g. to be happy, to be trusting, to learn, to be
motivatedmotivated
44
Expressive interfacesExpressive interfaces
Colour, icons, sounds, graphical elements and Colour, icons, sounds, graphical elements and animations are used to make the ‘look and feel’ animations are used to make the ‘look and feel’ of an interface appealingof an interface appealing• Conveys an emotional stateConveys an emotional state
In turn this can affect the usability of an interfaceIn turn this can affect the usability of an interface• People are prepared to put up with certain aspects of an People are prepared to put up with certain aspects of an
interface (e.g. slow download rate) if the end result is interface (e.g. slow download rate) if the end result is very appealing and aestheticvery appealing and aesthetic
55
Friendly interfacesFriendly interfaces
Microsoft pioneered friendly interfaces for Microsoft pioneered friendly interfaces for technophobes - ‘At home with Bob’ technophobes - ‘At home with Bob’ softwaresoftware
3D metaphors based on familiar places 3D metaphors based on familiar places (e.g. living rooms)(e.g. living rooms)
Agents in the guise of pets (e.g. bunny, Agents in the guise of pets (e.g. bunny, dog) were included to talk to the user dog) were included to talk to the user • Make users feel more at ease and comfortableMake users feel more at ease and comfortable
66
User-created expressivenessUser-created expressiveness
Users have created Users have created emoticonsemoticons - compensate - compensate for lack of expressiveness in text for lack of expressiveness in text communication:communication:
Happy :)Happy :)Sad :<Sad :<Sick :XSick :XMad >:Mad >:Very angry >:-(Very angry >:-(
Also use of icons and shorthand in text and Also use of icons and shorthand in text and instant messaging has emotional connotations, instant messaging has emotional connotations, e.g.e.g.
I 12 CU 2NITEI 12 CU 2NITE
77
User frustrationUser frustration
Many causes:Many causes:• Gimmicks—MildGimmicks—Mild
When a user’s expectations are not met they are When a user’s expectations are not met they are instead presented with a gimmicky display.instead presented with a gimmicky display.
• Error Message--HighError Message--High When a system or application crashes and and When a system or application crashes and and
provides an “unexpected” error messageprovides an “unexpected” error message
• Overburdening the user—Medium to highOverburdening the user—Medium to high Upgrading software so that users are required to Upgrading software so that users are required to
carry out excessive house-keeping taskscarry out excessive house-keeping tasks
• Appearance--MediumAppearance--Medium When the appearance of an interface is unpleasantWhen the appearance of an interface is unpleasant
88
Error messagesError messages““The application Word Wonder has unexpectedly quit due to a type 2 The application Word Wonder has unexpectedly quit due to a type 2
error.”error.”
Why not instead:Why not instead:
““the application has the application has expectedlyexpectedly quit due to poor coding in the quit due to poor coding in the operating system”operating system”
Shneiderman’s guidelines for error messages include:Shneiderman’s guidelines for error messages include: avoid using terms like FATAL, INVALID, BADavoid using terms like FATAL, INVALID, BAD Audio warnings Audio warnings Avoid UPPERCASE and long code numbersAvoid UPPERCASE and long code numbers Messages should be precise rather than vagueMessages should be precise rather than vague Provide context-sensitive helpProvide context-sensitive help
99
Website error message…Website error message…
1010
More helpful error messageMore helpful error message““The requested page The requested page /helpme/helpme is not available on the is not available on the web serverweb server. .
If you followed a link or bookmark to get to this page, If you followed a link or bookmark to get to this page, please let us knowplease let us know, so that we can fix the problem. , so that we can fix the problem. Please include the URL of the referring page as well as Please include the URL of the referring page as well as the URL of the missing page. the URL of the missing page.
Otherwise check that you have typed the address of the Otherwise check that you have typed the address of the web page correctly. web page correctly.
The Web site you seekThe Web site you seekCannot be located, butCannot be located, butCountless more exist.”Countless more exist.”
1111
Should computers say they’re Should computers say they’re sorry?sorry?
Reeves and Naas (1996) argue that computers should be Reeves and Naas (1996) argue that computers should be made to apologizemade to apologize
Should emulate human etiquetteShould emulate human etiquette
Would users be as forgiving of computers saying sorry as Would users be as forgiving of computers saying sorry as people are of each other when saying sorry?people are of each other when saying sorry?
How sincere would they think the computer was being? For How sincere would they think the computer was being? For example, after a system crash: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?
1212
AnthropomorphismAnthropomorphism
Attributing human-like qualities to inanimate Attributing human-like qualities to inanimate objects (e.g. cars, computers)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 interactionMuch exploited in human-computer interaction• Make user experience more enjoyable, more Make user experience more enjoyable, more
motivating, make people feel at ease, reduce anxietymotivating, make people feel at ease, reduce anxiety
1313
Which do you prefer?Which do you prefer?
1. As a welcome message1. As a welcome message
““Hello Chris! Nice to see you again. Welcome Hello Chris! Nice to see you again. Welcome back. Now what were we doing last time? Oh yes, back. Now what were we doing last time? Oh yes, exercise 5. Let’s start again.”exercise 5. Let’s start again.”
““User 24, commence exercise 5.” User 24, commence exercise 5.”
1414
Which do you prefer? Which do you prefer?
2. Feedback when get something wrong2. Feedback when get something wrong
1.1. ““Now Chris, that’s not right. You can do better Now Chris, that’s not right. You can do better than that.Try again.”than that.Try again.”
2.2. ““Incorrect. Try again.”Incorrect. Try again.”
Is there a difference as to what you prefer Is there a difference as to what you prefer depending on type of message? Why?depending on type of message? Why?
1515
Evidence to support Evidence to support anthropomorphismanthropomorphism
Reeves and Naas (1996) found that computers Reeves and Naas (1996) found that computers that flatter and praise users in education that flatter and praise users in education software programs -> positive impact on themsoftware programs -> positive impact on them
““Your question makes an important and useful Your question makes an important and useful distinction. Great job!”distinction. Great job!”
Students were more willing to continue with Students were more willing to continue with exercises with this kind of feedbackexercises with this kind of feedback
1616
Criticism of anthropomorphismCriticism of anthropomorphism Deceptive, make people feel anxious, inferior or stupidDeceptive, make people feel anxious, inferior or stupid
People tend not to like screen characters that wave People tend not to like screen characters that wave their fingers at the user & say:their fingers at the user & say:• Now Chris, that’s not right. You can do better than Now Chris, that’s not right. You can do better than
that.Try again.”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 Studies have shown that personalized feedback is considered to be less honest and makes users feel less considered to be less honest and makes users feel less responsible for their actions (e.g. Quintanar, 1982)responsible for their actions (e.g. Quintanar, 1982)
1717
Virtual charactersVirtual characters
Increasingly appearing on our screensIncreasingly appearing on our screens• Web, characters in videogames, learning Web, characters in videogames, learning
companions, wizards, newsreaders, popstarscompanions, wizards, newsreaders, popstars
Provides a persona that is welcoming, has Provides a persona that is welcoming, has personality and makes user feel involved personality and makes user feel involved with themwith them
1818
DisadvantagesDisadvantages
Lead people into false sense of belief, enticing Lead people into false sense of belief, enticing them to confide personal secrets with them to confide personal secrets with chatterbots (e.g. Alice)chatterbots (e.g. Alice)
Annoying and frustratingAnnoying and frustrating• E.g. Clippy E.g. Clippy
Not trustworthyNot trustworthy• virtual e-commerce assistants?virtual e-commerce assistants?
1919
Miss boo.comMiss boo.com
WhatWhatdo youdo youthinkthinkof Miss boo?of Miss boo?
2020
Persuasive advice?Persuasive advice?
2121
Virtual sales agentsVirtual 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 Is the style of interaction different for men and woman’s clothes?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?
2222
Virtual characters: agentsVirtual characters: agents
Can be classified in terms of the Can be classified in terms of the degree of anthropomorphism they degree of anthropomorphism they exhibit:exhibit:• Synthetic charactersSynthetic characters• animated agents animated agents • emotional agents emotional agents • embodied conversational agentsembodied conversational agents
2323
(i)Synthetic characters -Silas (i)Synthetic characters -Silas the dogthe dog
(Blumberg, 1996 - MIT)
• autonomous, with internal states and able to respond to external events
2424
(ii) Animated agents(ii) Animated agents
Play a collaborative role at the interfacePlay a collaborative role at the interface Often cartoon-likeOften cartoon-like e.g. Herman the buge.g. Herman the bug
(Lester et al, 1997(Lester et al, 1997Intellimedia)Intellimedia)
flies into plantsflies into plants& explains things & explains things on-the-fly & gives on-the-fly & gives advice to studentsadvice to students
2525
(iii) Emotional agents(iii) Emotional agents
Pre-defined personality and set of Pre-defined personality and set of emotions that user can changeemotions that user can change
The Woggles, Bates, 1994
2626
(iv) Embodied conversational (iv) Embodied conversational agentsagents
Rea, real-estate agent, Rea, real-estate agent, showing usershowing useran apartment an apartment
Human-like bodyHuman-like body
Uses gesture, non-verbal Uses gesture, non-verbal communication (facialcommunication (facialexpressions, winks) expressions, winks) while talkingwhile talking
Sophisticated AI Sophisticated AI techniques used to techniques used to enable this form of interactionenable this form of interaction Cassell, 2000, MIT
2727
Conversation with ReaConversation 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 Rea: I have a house to show you. (picture of a house appears on the
screen)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, Mike brings his hands up as if to speak, so Rea does not continue,
waiting for him to speak.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...
2828
Which is the most believable Which is the most believable agent?agent?
Believability refers to the extent to which Believability refers to the extent to which users come to believe an agent’s intentions users come to believe an agent’s intentions and personalityand personality
Appearance is very importantAppearance is very important• Are simple cartoon-like characters or more realistic Are simple cartoon-like characters or more realistic
characters, resembling the human form more believable?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 How an agent moves, gestures and refers to objects on the
screenscreen• Exaggeration of facial expressions and gestures to show Exaggeration of facial expressions and gestures to show
underlying emotions (cf animation industry)underlying emotions (cf animation industry)
2929
Key pointsKey points Affective aspects are concerned with how interactive Affective aspects are concerned with how interactive
systems make people respond in emotional wayssystems make people respond in emotional ways Well-designed interfaces can elicit good feelings in Well-designed interfaces can elicit good feelings in
usersusers Expressive interfaces can provide reassuring feedbackExpressive interfaces can provide reassuring feedback Badly designed interfaces make people angry and Badly designed interfaces make people angry and
frustratedfrustrated Anthropomorphism is increasingly used at the interface, Anthropomorphism is increasingly used at the interface,
in the guise of agents and virtual screen charactersin the guise of agents and virtual screen characters
3030
The Process of The Process of Interaction DesignInteraction Design
3131
OverviewOverview •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
3232
What is Interaction Design?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
3333
Four basic activitiesFour 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
3434
Three key characteristicsThree key characteristics
Three key characteristics permeate these four activities:
1. Focus on users early in the design and evaluation of the artefact2. Identify, document and agree specific usability and user experience goals3. Iteration is inevitable. Designers never get it right first time
3535
Some practical issuesSome practical issues
•Who are the users?
•What are ‘needs’?
•Where do alternatives come from?
•How do you choose among alternatives?
3636
Who are the users/stakeholders?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
3737
Who are the stakeholders?Who are the stakeholders?
Check-out operators
CustomersManagers and owners
• Suppliers• Local shop owners
3838
What are the users’ capabilities? 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)
3939
What are ‘needs’?What are ‘needs’? Users rarely know what is possibleUsers rarely know what is possible Users can’t tell you what they ‘need’ to help them Users can’t tell you what they ‘need’ to help them
achieve their goals 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
4040
Where do alternatives Where do alternatives come from?come from?
Humans stick to what they know worksHumans stick to what they know works But considering alternatives is important to But considering alternatives is important to
‘break out of the box’‘break out of the box’ Designers are trained to consider alternatives, Designers are trained to consider alternatives,
software people generally are notsoftware people generally are not How do you generate alternatives?How do you generate alternatives?
—‘‘Flair and creativity’: research and synthesis Flair and creativity’: research and synthesis —Seek inspiration: look at similar products or Seek inspiration: look at similar products or
look at very different productslook at very different products
4141
IDEO TechBoxIDEO TechBox
Library, database, website - all-in-oneLibrary, database, website - all-in-one Contains physical gizmos for inspirationContains physical gizmos for inspiration
From: www.ideo.com/
4242
The TechBox The TechBox
4343
How do you choose among How do you choose among alternatives?alternatives?
Evaluation with users or with peers, e.g. Evaluation with users or with peers, e.g. prototypesprototypes
Technical feasibility: some not possibleTechnical feasibility: some not possible Quality thresholds: Usability goals lead to Quality thresholds: Usability goals lead to
usability criteria set early on and check regularlyusability criteria set early on and check regularly— safety: how safe?safety: how safe?— utility: which functions are superfluous? utility: which functions are superfluous?
— effectiveness: appropriate support? task coverage, effectiveness: appropriate support? task coverage, information availableinformation available
— efficiency: performance measurementsefficiency: performance measurements
4444
Testing prototypes to choose Testing prototypes to choose among alternativesamong alternatives
4545
Lifecycle modelsLifecycle models Show how activities are related to each otherShow how activities are related to each other Lifecycle models are:Lifecycle models are:
— management toolsmanagement tools— simplified versions of realitysimplified versions of reality
Many lifecycle models exist, for example:Many lifecycle models exist, for example:— from software engineering: waterfall, spiral, JAD/RAD, from software engineering: waterfall, spiral, JAD/RAD,
MicrosoftMicrosoft— from HCI: Star, usability engineeringfrom HCI: Star, usability engineering
4646
A simple interaction design modelA simple interaction design model
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final productExemplifies a user-centered design approach
4747
Traditional ‘waterfall’ lifecycleTraditional ‘waterfall’ lifecycleRequirements
analysis
Design
Code
Test
Maintenance
4848
JAD workshops
Project set-up
Iterative design and build
Engineer and test final prototype
Implementationreview
A Lifecycle for RAD A Lifecycle for RAD (Rapid Applications (Rapid Applications
Development)Development)
4949
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)Spiral model (Barry Boehm)
5050
Spiral Lifecycle modelSpiral Lifecycle model
From cctr.umkc.edu/~kennethjuwng/spiral.htm
5151
The Star lifecycle modelThe 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
5252
The Star Model (Hartson and Hix, 1989)The Star Model (Hartson and Hix, 1989)
Evaluation
Conceptual/formal design
RequirementsspecificationPrototyping
task/functionalanalysis
Implementation
5353
Usability engineering lifecycle Usability engineering lifecycle modelmodel
Reported by Deborah MayhewReported by Deborah Mayhew Important features:Important features:
• Holistic view of usability engineeringHolistic view of usability engineering• Provides links to software engineering approaches, Provides links to software engineering approaches,
e.g. OOSE e.g. OOSE • Stages of identifying requirements, designing, Stages of identifying requirements, designing,
evaluating, prototypingevaluating, 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
5454
SummarySummaryFour basic activities in the design processFour basic activities in the design process
1.1. Identify needs and establish requirementsIdentify needs and establish requirements2.2. Design potential solutions ((re)-design)Design potential solutions ((re)-design)3.3. Choose between alternatives (evaluate)Choose between alternatives (evaluate)4.4. Build the artefactBuild the artefact
These are permeated with three principlesThese are permeated with three principles1.1. Involve users early in the design and evaluation of Involve users early in the design and evaluation of
the artefactthe artefact2.2. Define quantifiable & measurable usability criteriaDefine quantifiable & measurable usability criteria3.3. Iteration is inevitableIteration is inevitable
Lifecycle models show how these are relatedLifecycle models show how these are related