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