Chapter 5 ID2e Slides

8/13/2019 Chapter 5 ID2e Slides

1/54


2/54

2

Designing the User Interface4th Edition

by Ben Shneiderman & Catherine Plaisant

Chapter 12Balancing Function and Fashion

The following PowerPoint slides also contain thecontent of this book:


3/54

3

Overview

Expressive interfaces how the appearance of an interface can affect users

User frustration what it is and how to reduce it

Persuasive technologies how technologies can be designed to change peoples

attitudes and behavior

Anthropomorphism and interaction design The pros and cons

Interface agents and interactive physical toys

Conceptual models of the relationship between

affect and user experience


4/54

4

Affective aspects

HCI has traditionally been aboutdesigning efficient and effectivesystems

Now more about how to designinteractive systems that make peoplerespond in certain ways

e.g. to be happy, to be trusting, to learn, to bemotivated


5/54

5

Expressive interfaces

Colour, icons, sounds, graphical elements andanimations are used to make the look andfeel of an interface appealing Conveys an emotional state

In turn this can affect the usability of aninterface People are prepared to put up with certain aspects of an

interface (e.g. slow download rate) if the end result isappealing and aesthetic


6/54

6

User-created expressiveness Users have created a range of emoticons -

compensate for lack of expressiveness in textcommunication:Happy :)

Sad ::

Very angry >:-(

Also use of icons and shorthand in texting and

instant messaging has emotionalconnotations, e.g.I 12 CU 2NITE


7/54

7

Would you use any of these?What for?


8/54

8

Which one do you prefer?


9/54

9

Marcus and Teasley study Marcus

Left dialog box

For white American females Who prefer a more detailed presentation, curvilinear

shapes and the absence of some of the more brutal terms

... favored by male software engineers.

Right dialog box was designed for European adultmale intellectuals

Who like suave prose, a restrained treatment ofinformation density, and a classical approach to fontselection

Teasley et al The European dialog box was preferred by all and was

considered most appropriate for all users

Round dialog box was strongly disliked by everyone


10/54

10

Friendly interfaces

Microsoft pioneered friendly interfacesfor technophobes - At home with Bobsoftware

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 Make users feel more at ease and

comfortable


11/54


12/54

12

Clippy

Why was Clippy dislikedby so many?

Was it annoying,

distracting,patronising or other?

What sort of user

liked Clippy?


13/54

13

User frustration When an application doesnt work properly or crashes When a system doesnt do what the user wants it to do

When a users expectations are not met When a system does not provide sufficient information to

enable the user to know what to do When error messages pop up that are vague, obtuse or

condemning

When the appearance of an interface is garish, noisy,gimmicky or patronizing

When a system requires users to carry out too manysteps to perform a task, only to discover a mistake wasmade earlier and they need to start all over again

Disruptive interference Lacked appropriate emotional expressions


14/54

14

Gimmicks

Amusing to the designer but notthe user, e.g.,

Clicking on a link to a website only to

discover that it is still underconstruction


15/54

15

Error messages

Phrasing of error messages or diagnostic warnings iscritical, especially when dealing with novices

Avoid imperious tone that condemns user messages that are too generic (e.g. WHAT? or

SYNTAX ERROR)

messages that are too obscure (e.g. FAC RJCT004004400400) Specificity

File names must begin with a letterBAD FILE NAME

Days range from 1 to 31INVALID DATA

Type first letter: Send, Read, or DropILLEGAL ENTRY

Unmatched left parenthesisSYNTAX ERROR

BetterPoor


16/54

16

Constructive guidance andpositive tone

Messages should, where possible, indicatewhat users should do to correct the problem

Unnecessarily hostile messages using violentterminology can disturb non-technical users: FATAL ERROR, RUN ABORTED

CATASTROPHIC ERROR: LOGGED WITH OPERATOR Negative terms such as ILLEGAL, ERROR, INVALID,

BAD should be eliminated or used infrequently

Drop-off date must come after pickup date.Bad date.

Your password was not recognized. Please retype.Network connection refused.

Remove your compact flash card and restartResource Conflict Bus: 00 Device: 03 Function: 01

Virtual memory space consumed. Close some

programs and retry.

Run-Time error -2147469 (800405): MethodPrivate Profile String of object System

failed.

BetterPoor


17/54

17

User-centered phrasing Suggests user controls the interface, initializing

more than responding

User should have control over amount ofinformation system provides e.g. screen tips; ahelp button for context-sensitive help or anextensive online user manual

Telephone company, Were sorry, but we areunable to complete your call as dialed. Pleasehang up, check your number, or consult theoperator for assistance, versus Illegal telephone

number. Call aborted. Error number 583-2R6.9.Consult your user manual for furtherinformation.


18/54

18

Appropriate physical format

use uppercase-only messages for brief, seriouswarnings

avoid code numbers; if required, include at endof message

debate over best location of messages. E.g.

Could be: near where problem arose

placed in consistent position on bottom ofscreen

near to, but not obscuring relevant information audio signals useful, but can be embarrassing -

place under user control


19/54

19

Development of effective messages Should be evaluated by several people and tested with

suitable participants Should appear in user manuals and be given high visibility Users may remember the one time when they had

difficulties with a computer system rather than the 20 timeswhen everything went well Recommendations

Increase attention to message design Establish quality control

Develop guidelines Have a positive tone Be specific and address the problem in the user's

terms Place the users in control of the situation Have a neat, consistent, and comprehensible format

Carry out usability test Collect user performance data


20/54

20

Website error messages


21/54

21

More helpful error messageThe requested page /helpme is not available on the webserver.

If you followed a link or bookmark to get to this page, pleaselet us know, so that we can fix the problem. Please includethe URL of the referring page as well as the URL of themissing page.

Otherwise check that you have typed the address of the webpage correctly.

The Web site you seekCannot be located, butCountless more exist.


22/54

22

Should computers say theyresorry?

Reeves and Naas (1996) argue that computers

should be made to apologize Should emulate human etiquette

Would users be as forgiving of computers sayingsorry as people are of each other when sayingsorry?

How sincere would they think the computer wasbeing? For example, after a system crash: Im really sorry I crashed. Ill try not to do it again

How else should computers communicate withusers?


23/54

23

Persuasive technologies

Interactive computing systemsdeliberately designed to changepeoples attitudes and behaviours(Fogg, 2003)

A diversity of techniques now used tochange what they do or think Pop-up ads, warning messages, reminders,

prompts, personalized messages,recommendations, Amazon 1-click


24/54

24

Nintendos Pocket Pikachu

Changing bad habits and improving wellbeing

Designed to motivate children into beingmore physically active on a consistent basis

The owner of the digital pet that lives inthe device is required to walk, run, or jump

If owner does not exercise the virtual pet

becomes unhappy and eventually dies


25/54

25

Which works best?


26/54

26

How effective?

Is the use of novel forms of interactivetechnologies (e.g., the combination ofsensors and dynamically updatedinformation) that monitor, nag, or send

personalized messages intermittently toa person more effective at changing apersons behavior than non-interactive

methods, such as the placement ofwarning signs, labels, or ads inprominent positions?


27/54

27

Phishing and trust

Web used to deceive people

into parting with personal details e.g. paypal, ebay and won the lottery letters

Allows Internet fraudstersto access their bank accounts

and draw money from them Many vulnerable peoplefall for it

The art of deception is centuries oldbut internet allows ever more

ingenious ways to trick people


28/54

28

Anthropomorphism

Attributing human-like qualities to inanimate objects(e.g. cars, computers)

Well known phenomenon in advertising

Dancing butter, drinks, breakfast cereals

Much exploited in human-computer interaction

Make user experience more enjoyable, more motivating,make people feel at ease, reduce anxiety


29/54

29

Which do you prefer?

1. As a welcome message

Hello Chris! Nice to see you again. Welcomeback. Now what were we doing last time? Oh

yes, exercise 5. Lets start again.

User 24, commence exercise 5.


30/54

30

Which do you prefer?

2. Feedback when get something wrong

1. Now Chris, thats not right. You can do betterthan that.Try again.

2. Incorrect. Try again.

Is there a difference as to what you prefer

depending on type of message? Why?


31/54

31

Evidence to supportanthropomorphism

Reeves and Naas (1996) found that computersthat flatter and praise users in educationsoftware programs -> positive impact on them

Your question makes an important and usefuldistinction. Great job!

Students were more willing to continue withexercises with this kind of feedback


32/54

32

Criticism of anthropomorphism Deceptive, make people feel anxious, inferior or stupid

People tend not to like screen characters that wave their

fingers at the user & say: Now Chris, thats not right. You can do better than

that.Try again.

Many prefer the more impersonal:

Incorrect. Try again.

Studies have shown that personalized feedback isconsidered to be less honest and makes users feel lessresponsible for their actions (e.g. Quintanar, 1982)


33/54

33

Virtual characters

Increasingly appearing on our screens Web agents, characters in videogames, learning

companions, wizards, pets, newsreaders, popstars

Provides a persona that is welcoming, haspersonality and makes user feel involvedwith them


34/54

34

Disadvantages

Lead people into false sense of belief, enticingthem to confide personal secrets withchatterbots (e.g. Alice)

Annoying and frustrating

e.g. Clippy

Not trustworthy

virtual shop assistants?


35/54

35

Defunct Miss Boo

What

do youthinkof Miss boo?


36/54

36

Persuasive advice?


37/54

37

Rea the realtor

Rea

showing useran apartment

Human-like body

Uses gesture, non-verbal

communication (facialexpressions, winks)while talking

Sophisticated AI

techniques used toenable this form of interaction

Cassell, 2000, MIT


38/54

38

Conversation with Rea

Mike approaches screen and Rea turns to face him and says:

Hello. How can I help you?

Mike: Im looking to buy a place near MIT.

Rea nods, indicating she is following.

Rea: I have a house to show you. (picture of a house appears onthe screen)

Rea: it is in Somerville.

Mike: Tell me about it.

Rea looks up and away while she plans what to say. Rea: Its big.

Rea makes an expansive gesture with her hands.

Mike brings his hands up as if to speak, so Rea does notcontinue, waiting for him to speak.

Mike: Tell me more about it. Rea: Sure thing. It has a nice garden...

Would you buy a house from her?


39/54

39

Virtual agents

What do the virtual agents do?

Do they elicit an emotional response inyou?

Do you trust them?

What is the style of interaction? What facial expression do they have?

Are they believable, pushy, helpful?

Would it be different if they were male?If so, how?


40/54

40

Virtual pets

Silas the dog (Blumberg, 1996) Autonomous pet with internal states Able to respond to external events


41/54

41

Virtual learning companions

Play a collaborative role at the interface

Often cartoon-like

e.g., Herman the bug(Lester et al, 1997)

Flies into plantsand explains thingson-the-fly and givesadvice to students


42/54

42

What makes an agentbelievable?

Believability refers to the extent to whichusers come to believe an agents intentionsand personality

Appearance is very important Are simple cartoon-like characters or more realistic characters,

resembling the human form more believable?

Behaviour is very important How an agent moves, gestures and refers to objects on the screen

Exaggeration of facial expressions and gestures to showunderlying emotions (c.f. animation industry)


43/54

43

Emotional design model

Norman, Ortony and Revelle(2004) model of emotion


44/54

44

Claims from model

Our emotional state changes how wethink

when frightened or angry we focus narrowlyand body responds by tensing muscles and

sweating more likely to be less tolerant

when happy we are less focused and the

body relaxes more likely to overlook minor problems and be

more creative


45/54

45

Implications

Should we, therefore, create productsthat adapt according to peoplesdifferent emotional states? When people are feeling angry should an

interface be more attentive and informativethan when they are happy?

Is Norman right? designers can get away with more for

products intended to be used during leisuretime than those designed for serious tasks


46/54

46

Pleasure model

Jordon (2000) based on Tigers (1992)framework of pleasure

Focuses on the pleasurable aspects ofour interactions with products (i) physio-pleasure

(ii) socio-pleasure

(iii) psycho-pleasure

(iv) ideo-pleasure (cognitive) Means of framing a designers thinking

about pleasure, highlighting that thereare different kinds


47/54

47

Introduction of Window design Users need to consult multiple sources rapidly

Must minimally disrupt user's task

With large displays, eye-head movement and visibilityare problems

With small displays, windows too small to be effective

Need to offer users sufficient information and flexibility

to accomplish task, while reducing window housekeepingactions, distracting clutter, eye-head movement opening, closing, moving, changing size

time spent manipulating windows instead of on task

Can apply direct-manipulation strategy to windows

Rooms - a form of window macro that enables users tospecify actions on several windows at once


48/54

48

Coordinating MultipleWindows Designers may break through to the next generation of

window managers by developing coordinate windows, inwhich windows appear, change contents, and close as adirect result of user actions in the task domain

Such sequences of actions can be established by designers,or by users with end-user programming tools

A careful study of user tasks can lead to task-specificcoordinations based on sequences of actions

Important coordinations: Synchronized scrolling Hierarchical browsing Opening/closing of dependent windows Saving/opening of window state


49/54

49

Image browsing A 2D cousin of hierarchical browsing

Work with large images Overview in one window (context),

detail in another (focus)

Field of view box in the overview

Panning in the detail view, changes thefield of view box

Matched aspect ratios between field ofview box and the detail view


50/54

50

Zoom factors: 5-30

Larger suggestsan intermediateview is needed

Semantic zooming

Side by sideplacement, versusfisheye view


51/54

51

Image browsing (cont.) The design of image browsers should

be governed by the users tasks,which can be classified as follows:

Image generation

Open-ended exploration

Diagnostics

Navigation

Monitoring


52/54

52

Color

Soothe or strike the eye

Add accents to an uninterestingdisplay

Facilitate subtle discriminations in

complex displays Emphasize the logical organization of

information

Draw attention to warnings

Evoke string emotional reactions ofjoy, excitement, fear, or anger


53/54

53

Color Guidelines Use color conservatively Limit the number and amount of colors

Recognize the power of color to speed or slow tasks Color coding should support the task Color coding should appear with minimal user effort Color coding should be under user control Design for monochrome first

Consider the needs of color-deficient users Color can help in formatting Be consistent in color coding Be alert to common expectations about color codes

Be alert to problems with color pairings Use color changes to indicate status changes Use color in graphic displays for greater information

density


54/54

54

Key points Affective aspects are concerned with how interactive

systems make people respond in emotional ways

Well-designed interfaces can elicit good feelings in users Expressive interfaces can provide reassuring feedback

Badly designed interfaces make people angry andfrustrated

Anthropomorphism is the attribution of human qualities

to objects An increasingly popular form of anthropomorphism is to

create agents and other virtual characters as part of aninterface

Models of affect provide a way of conceptualizingemotional and pleasurable aspects of interaction design

Date post:	04-Jun-2018
Category:	Documents
Upload:	jugela
View:	223 times
Download:	0 times

Chapter 5 ID2e Slides

Documents