chap-03.ppt hci

7/24/2019 chap-03.ppt hci

1/70

chapter 3

the interaction


2/70

The Interaction

interaction models

translations between user and system

ergonomics physical characteristics of interaction

interaction styles

the nature of user/system dialog context

social, organizational, motivational


3/70

What is interaction?

communication

user system

but is that all ?

see language and action! in chapter "


4/70

models of interaction

terms of interaction

#orman modelinteraction framewor$


5/70

Some terms of interaction

domain the area of wor$ under studye%g% graphic design

goal what you want to achievee%g% create a solid red triangle

tas$ how you go about doing it ultimately in terms of operations or actions

e%g% select fill tool, clic$ over triangle

#ote traditional interaction

use of terms differs a lot especially tas$/goal &&&


6/70

Donald Normans model

'even stages user establishes the goal

formulates intention

specifies actions at interface executes action

perceives system state

interprets system state

evaluates system state with respect to goal

#orman(s model concentrates on user(s view ofthe interface


7/70

execution/evaluation loop

user establishes the goal


specifies actions at interface

executes action perceives system state



system

evaluationexecution

goal


8/70








system

evaluationexecution

goal


9/70








system

evaluationexecution

goal


10/70








system

evaluationexecution

goal


11/70

Using Normans model

'ome systems are harder to use than others

)ulf of *xecutionuser(s formulation of actions

+ actions allowed by the system

)ulf of *valuationuser(s expectation of changed system state

+ actual presentation of this state


12/70

Human error slips and mista!es

slip understand system and goal

correct formulation of action incorrect action

mista$e may not even have right goal&

ixing things?

slip better interface design

mista$e better understanding of system


13/70

"#o$d and %eale frame$or!

extension of #orman

their interaction framewor$ has " parts

user

input system

output

each has its own uni-ue language

interaction translation between languages

problems in interaction . problems in translation

Score

Utask

Ooutput

Iinput


14/70

Using "#o$d & %eales model

user intentionstranslated into actions at the interface

translated into alterations of system state reflected in the output display

interpreted by the user

general framewor$ for understanding interaction

not restricted to electronic computer systems identifies all maor components involved in interaction

allows comparative assessment of systems

an abstraction


15/70

ergonomics

physical aspects of interfaces

industrial interfaces


16/70

'rgonomics

'tudy of the physical characteristics ofinteraction

0lso $nown as human factors but this canalso be used to mean much of 12&

*rgonomics good at defining standards andguidelines for constraining the way we designcertain aspects of systems


17/70

'rgonomics examples

arrangement of controls and displayse%g% controls grouped according to function or

fre-uency of use, or se-uentially

surrounding environmente%g% seating arrangements adaptable to cope with all

sizes of user

health issuese%g% physical position, environmental conditions

4temperature, humidity5, lighting, noise,

use of coloure%g% use of red for warning, green for o$ay,

awareness of colour6blindness etc%


18/70

Industrial interfaces

7ffice interface vs% industrial interface?

2ontext matters&

office industrial

type of data textual numeric

rate of change slow fast

environment clean dirty

the oil soa$ed mouse&


19/70

(lass interfaces ?

industrial interface8

traditional dials and $nobs

now screens and $eypads

glass interface

9 cheaper, more flexible,multiple representations,precise values

not physically located,loss of context,complex interfaces

may need both

Vessel B Temp

0 100 200

113

multiple representationsof same information


20/70

Indirect manipulation

office direct manipulation

user interactswith artificial world

industrial indirect manipulation

user interactswithreal world

throughinterface

issues %%

feedbac$

delays

system

interface plant

immediat

efeedbac

k

instruments


21/70

interaction st)les

dialogue computer and user

distinct styles of interaction


22/70

*ommon interaction st)les

command line interface

menus

natural language -uestion/answer and -uery dialogue

form6fills and spreadsheets

:;nix system


24/70

+enus

'et of options displayed on the screen

7ptions visible less recall 6 easier to use

rely on recognition so names should be meaningful

'election by8 numbers, letters, arrow $eys, mouse

combination 4e%g% mouse plus accelerators5

7ften options hierarchically grouped sensible grouping is needed

estricted form of full :;< system


25/70

Natural language

amiliar to user

speech recognition or typed natural language


26/70

,uer) interfaces

@uestion/answer interfaces

user led through interaction via series of -uestions

suitable for novice users but restricted functionality

often used in information systems

@uery languages 4e%g% '@A5

used to retrieve information from database

re-uires understanding of database structure andlanguage syntax, hence re-uires some expertise


27/70

-ormfills


28/70

Spreadsheets

first spreadsheet C'20A2, followed byAotus D6E63

;' *xcel most common today sophisticated variation of form6filling%

grid of cells contain a value or a formula

formula can involve values of other cells

e%g% sum of all cells in this column

user can enter and alter data spreadsheetmaintains consistency


29/70

WI+. Interface

:indows

cons

;enus


30/70

.oint and clic! interfaces

used in %%

multimedia

web browsers hypertext

ust clic$ something&

icons, text lin$s or location on map

minimal typing


31/70

Three dimensional interfaces

virtual reality

Fordinary( window systems

highlighting

visual affordance

indiscriminate useust confusing&

3B wor$spaces

use for extra virtual space

light and occlusion give depth

distance effects

flat buttons

or sculptured

clic$ me&


32/70

elements of the $imp interface

windows, icons, menus, pointers

999buttons, toolbars,palettes, dialog boxes

also see supplementary materialon choosing wimp elements


33/70

Windo$s

0reas of the screen that behave as if they wereindependent can contain text or graphics

can be moved or resized can overlap and obscure each other, or can be laid out

next to one another 4tiled5

scrollbars

allow the user to move the contents of the window upand down or from side to side

title bars describe the name of the window


34/70

Icons

small picture or image

represents some obect in the interface

often a window or action windows can be closed down 4iconised5

small representation G many accessiblewindows

icons can be many and various highly stylized

realistic representations%


35/70

.ointers

important component

:;< style relies on pointing and selecting things

uses mouse, trac$pad, oystic$, trac$ball,cursor $eys or $eyboard shortcuts

wide variety of graphical images


36/70

+enus

2hoice of operations or services offered on the screen

e-uired option selected with pointer

problem ta$e a lot of screen space

solution pop6up8 menu appears when needed

File Edit OptionsTypewriter

Screen

Times

Font


37/70

inds of +enus

;enu Har at top of screen 4normally5, menudrags down pull6down menu 6 mouse hold and drag down menu

drop6down menu 6 mouse clic$ reveals menu fall6down menus 6 mouse ust moves over bar&

2ontextual menu appears where you are pop6up menus 6 actions for selected obect

pie menus 6 arranged in a circle easier to select item 4larger target area5

-uic$er 4same distance to any option5 but not widely used&


38/70

+enus extras

2ascading menus

hierarchical menu structure

menu selection opens new menu

and so in ad infinitum

Ieyboard accelerators

$ey combinations 6 same effect as menu item

two $inds active when menu open usually first letter

active when menu closed usually 2trl 9 letter

usually different &&&


39/70

+enus design issues

which $ind to use

what to include in menus at all

words to use 4action or description5

how to group items

choice of $eyboard accelerators


40/70

%uttons

individual and isolated regions within adisplay that can be selected to invo$e anaction

'pecial $inds

radio buttons set of mutually exclusive choices

chec$ boxes set of non6exclusive choices


41/70

Tool#ars

long lines of icons but what do they do?

fast access to common actions

often customizable8

choose whichtoolbars to see choose whatoptions are on it


42/70

.alettes and tearoff menus


43/70

Dialogue #oxes

information windows that pop up toinform of an important event or re-uest

information%

e%g8 when saving a file, a dialogue box isdisplayed to allow the user to specify the

filename and location% 7nce the file issaved, the box disappears%


44/70

interactivit)

easy to focus on loo$

what about feel?


45/70

Speech0driven interfaces

rapidly improving but still inaccurate

how to have robust dialogue? interaction of course&

e%g% airline reservation8reliable yes! and no!9 system reflects bac$ its understandingyou want a tic$et from #ew Jor$ to Hoston?!


46/70

1oo! and 2 feel

:;< systems have the same elements8windows, icons%, menus, pointers, buttons, etc%

but different window systems behavedifferently

e%g% ;ac7' vs :indows menus

appearance 9 behaviour . loo$ and feel


47/70

Initiative

who has the initiative?old -uestionanswer computer:;< interface user

:;< exceptions pre-emptiveparts of the interface

modal dialog boxes

come and won(t go away&

good for errors, essential steps

but use with care


48/70

'rror and repair

can(t always avoid errors but we can put them right

ma$e it easy to detecterrors then the user can repairthem

hello, this is the )o aster boo$ing system

what would you li$e?

4user5 I want to fly from New York to London

you want a tic$et from #ew Jor$ to Hoston

4user5 no

sorry, please confirm one at a time

do you want to fly from #ew Jor$

4user5 yes


49/70

*ontext

nteraction affected by social and organizationalcontext

other people desire to impress, competition, fear of failure

motivation

fear, allegiance, ambition, self6satisfaction

inade-uate systems cause frustration and lac$ of motivation


50/70

'xperience3 engagement and fun

designing experience

physical engagement

managing value


51/70

'xperience?

home, entertainment, shopping not enough that people can use a system

they must want to use it&

psychology of experience flow 42si$szentimihalyi5

balance between anxiety and boredom

education zone of proximal development

things you can ust do with help

wider %%% literary analysis, film studies, drama


52/70

Designing experience

real crac$ers

cheap and cheerful&

bad o$e, plastic toy, paper hat

pull and bang


53/70


virtual crac$ers

cheap and cheerful

bad o$e, web toy, cut6out mas$

clic$ and bang


54/70


virtual crac$ers

cheap and cheerful

bad o$e, web toy, cut6out mas$

clic$ and bang


55/70

ho$ crac!ers $or!

sender

fill in web form

To: wxv

From: ..

receive email recipient

closedcracker page

open

messagerecipient clicks

cracker opens ...

very slowly

joke

links

open

cracker page

web toymask

sender

watces

progress


56/70

The crac!ers experience

real cracker virtual cracker

'urface elements

design cheap and cheerful simple page/graphics

play plastic toy and o$e web toy and o$e

dressing up paper hat mas$ to cut out

*xperienced effects

shared offered to another sent by email message

co6experience pulled together sender canKt see contentuntil opened by recipient

excitement cultural connotations recruited expectation

hiddenness contents inside first page 6 no contents

suspense pulling crac$er slow %%% page change

surprise bang 4when it wor$s5 :0C file 4when it wor$s5


57/70

.h)sical design

many constraints8

ergonomic minimum button size

physical high6voltage switches are big

legal and safety high coo$er controls

context and environment easy to clean

aesthetic must loo$ good

economic and not cost too much&


58/70

Design tradeoffs

constraints are contradictory need trade6offs

within categories8

e%g% safety coo$er controls front panel safer for adult

rear panel safer for child

between categories

e%g% ergonomics vs% physical ;iniBisc remote ergonomics controls need to be bigger

physical no room&

solution multifunction controls L reduced functionality


59/70

-luidit)

do external physical aspects reflectlogical effect?

related to affordance 4chap M5

logical state revealed in physical state?e%g% on/off buttons

inverse actions inverse effects?e%g% arrow buttons, twist controls


60/70

inverse actions

yes/no buttons

well sort of

Foystic$(

also left side control


61/70

spring #ac! controls

one6shot buttons

oystic$

some sliders

good large selection sets

bad hidden state


62/70

a minidis! controller

series of spring6bac$ controlseach cycle through some optionsnatural inverse bac$/forward

twist for trac$ movementpull and twist for volume spring bac$ natural inverse for twist


63/70

ph)sical la)out

controls8

logical relationshipN spatial grouping


64/70

compliant interaction

state evident inmechanical buttons

rotary $nobs reveal internal stateand can be controlled by both user

and machine


65/70

+anaging value

people use somethingONLY IF

it has perceived value

ANDvalue exceeds cost

BUT NOTE

exceptions 4e%g% habit5

value NOTnecessarily personal gain or money


66/70

Weighing up value

value helps me get my wor$ done

fun

good for others

cost download time

money O, P, Q

learning effort


67/70

in economics #et


68/70

example 0 H*I #oo! search

value for people who havethe boo$helps you to loo$ up things

chapter and page number

value for those who dontsort of online mini6encyclopaedia

full paragraph of context

but also says buy me!&& but also says buy me!&&


69/70

4alue and organisational design

coercion tell people what to do&

value . $eep your ob

enculturation explain corporate values

establish support 4e%g share options5

emergence design process so that

individuals value organisational value


70/70

(eneral lesson 2

if you want someone to do something

ma$e it easy for them&

understand their values

Documents

chap-03.ppt hci