the interaction physical characteristics of interaction - - PDF document

1 chapter 3

the interaction

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

What is interaction?

communication user system

but is that all … ? – see “language and action” in chapter 4 …

models of interaction

terms of interaction Norman model interaction framework

Some terms of interaction

domain

– the area of work under study e.g. graphic design

goal

– what you want to achieve e.g. create a solid red triangle

task

– how you go about doing it – ultim ately in term s of operations or actions e.g. … select fill tool, click over triangle

Note …

– traditional interaction … – use of term s differs a lot especially task/ goal !!!

Donald Norman’s model

• Seven stages

– user establishes the goal – form ulates intention – specifies actions at interface – executes action – perceives system state – interprets system state – evaluates system state with respect to goal

• Norman’s model concentrates on user’s view
• f the interface

2

execution/evaluation loop

• 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

system evaluation execution goal

execution/evaluation loop

• 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

system evaluation execution goal

execution/evaluation loop

• 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

system evaluation execution goal

execution/evaluation loop

• 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

system evaluation execution goal

Using Norman’s model

Some systems are harder to use than others Gulf of Execution

user’s form ulation of actions

• actions allowed by the system

Gulf of Evaluation

user’s expectation of changed system state

• actual presentation of this state

Human error - slips and mistakes

slip

understand system and goal correct form ulation of action incorrect action

mistake

may not even have right goal!

Fixing things? slip – better interface design m istake – better understanding of system

3

Abowd and Beale framework

extension of Norm an… their interaction fram ework has 4 parts – user – input – system – output each has its own unique language interaction translation between languages problem s in interaction = problem s in translation

S

core

U

task

O

• utput

I

input

Using Abowd & Beale’s model

user intentions translated into actions at the interface translated into alterations of system state reflected in the output display interpreted by the user

general framework for understanding interaction

– not restricted to electronic com puter system s – identifies all m ajor com ponents involved in interaction – allows com parative assessm ent of system s – an abstraction

ergonomics

physical aspects of interfaces industrial interfaces

Ergonomics

• Study of the physical characteristics of

interaction

• Also known as human factors – but this can

also be used to m ean m uch of HCI!

• Ergonomics good at defining standards and

guidelines for constraining the way we design certain aspects of system s

Ergonomics - examples

• arrangement of controls and displays

e.g. controls grouped according to function or frequency of use, or sequentially

• surrounding environment

e.g. seating arrangem ents adaptable to cope with all sizes of user

• health issues

e.g. physical position, environm ental conditions (tem perature, hum idity), lighting, noise,

• use of colour

e.g. use of red for warning, green for okay, awareness of colour-blindness etc.

Industrial interfaces

Office interface vs. industrial interface? Context matters!

• ffice

industrial type of data textual numeric rate of change slow fast environment clean dirty

… the oil soaked mouse!

4

Glass interfaces ?

• industrial interface:

– traditional … dials and knobs – now … screens and keypads

• glass interface

+ cheaper, m ore flexible, m ultiple representations, precise values – not physically located, loss of context, com plex interfaces

• m ay need both

Vessel B Temp 100 200

113

multiple representations

• f same information

Indirect manipulation

• office– direct m anipulation

– user interacts with artificial world

• industrial – indirect m anipulation

– user interacts with real world through interface

• issues ..

– feedback – delays system interface plant

immediat e feedbac k instruments

interaction styles

dialogue … computer and user distinct styles of interaction

Common interaction styles

• command line interface
• menus
• natural language
• question/ answer and query dialogue
• form-fills and spreadsheets
• WIMP
• point and click
• three–dimensional interfaces

Command line interface

• Way of expressing instructions to the

com puter directly

– function keys, single characters, short abbreviations, whole words, or a com bination

• suitable for repetitive tasks
• better for expert users than novices
• offers direct access to system functionality
• command names/ abbreviations should be

meaningful! Typical example: the Unix system

Menus

• Set of options displayed on the screen
• Options visible

– less recall - easier to use – rely on recognition so nam es should be m eaningful

• Selection by:

– num bers, letters, arrow keys, m ouse – com bination (e.g. m ouse plus accelerators)

• Often options hierarchically grouped

– sensible grouping is needed

• Restricted form of full WIMP system

5

Natural language

• Fam iliar to user
• speech recognition or typed natural language
• Problem s

– vague – am biguous – hard to do well!

• Solutions

– try to understand a subset – pick on key words

Query interfaces

• Question/ answer interfaces

– user led through interaction via series of questions – suitable for novice users but restricted functionality – often used in inform ation system s

• Query languages (e.g. SQL)

– used to retrieve inform ation from database – requires understanding of database structure and language syntax, hence requires som e expertise

Form-fills

• Prim arily for data entry or data retrieval
• Screen like paper form.
• Data put in relevant place
• Requires

– good design – obvious correction facilities

Spreadsheets

• first spreadsheet VISICALC, followed by

Lotus 1-2-3 MS Excel most common today

• sophisticated variation of form-filling.

– grid of cells contain a value or a formula – formula can involve values of other cells

e.g. sum of all cells in this colum n

– user can enter and alter data spreadsheet m aintains consistency

WIMP Interface

Windows I cons Menus Pointers

…

• r windows, icons, m ice, and pull-down m enus!
• default style for majority of interactive

com puter system s, especially PCs and desktop machines

Point and click interfaces

• used in ..

– m ultim edia – web browsers – hypertext

• just click something!

– icons, text links or location on map

• minimal typing

6

Three dimensional interfaces

• virtual reality
• ‘ordinary’ window systems

– highlighting – visual affordance – indiscrim inate use just confusing!

• 3D workspaces

– use for extra virtual space – light and occlusion give depth – distance effects flat buttons … …

• r sculptured

click m e!

elements of the wimp interface

windows, icons, menus, pointers + + + buttons, toolbars, palettes, dialog boxes

also see supplementary material

• n choosing wimp elements

Windows

• Areas of the screen that behave as if they

were independent

– can contain text or graphics – can be m oved or resized – can overlap and obscure each other, or can be laid

• ut next to one another (tiled)
• scrollbars

– allow the user to m ove the contents of the window up and down or from side to side

• title bars

– describe the nam e of the window

Icons

• small picture or image
• represents some object in the interface

– often a window or action

• windows can be closed down (iconised)

– small representation fi m any accessible windows

• icons can be many and various

– highly stylized – realistic representations.

Pointers

• important component

– WIMP style relies on pointing and selecting things

• uses mouse, trackpad, joystick, trackball,

cursor keys or keyboard shortcuts

• wide variety of graphical images

Menus

• Choice of operations or services offered on the screen
• Required option selected with pointer

problem – take a lot of screen space solution – pop-up: m enu appears when needed

File Edit Options Typewriter Screen Times Font

7

Kinds of Menus

• Menu Bar at top of screen (normally), menu

drags down

– pull-down m enu - m ouse hold and drag down m enu – drop-down m enu - m ouse click reveals m enu – fall-down m enus - m ouse just m oves over bar!

• Contextual menu appears where you are

– pop-up m enus - actions for selected object – pie m enus - arranged in a circle

• easier to select item (larger target area)
• quicker (same distance to any option)

… but not widely used!

Menus extras

• Cascading m enus

– hierarchical m enu structure – m enu selection opens new m enu – and so in ad infinitum

• Keyboard accelerators

– key com binations - sam e effect as m enu item – two kinds

• active when menu open – usually first letter
• active when menu closed – usually Ctrl + letter

usually different !!!

Menus design issues

• which kind to use
• what to include in menus at all
• words to use (action or description)
• how to group items
• choice of keyboard accelerators

Buttons

• individual and isolated regions within a

display that can be selected to invoke an action

• Special kinds

– radio buttons – set of m utually exclusive choices – check boxes – set of non-exclusive choices

Toolbars

• long lines of icons …

… but what do they do?

• fast access to common actions
• often customizable:

– choose which toolbars to see – choose what options are on it

Palettes and tear-off menus

• Problem

m enu not there when you want it

• Solution

palettes – little windows of actions

– shown/ hidden via m enu option e.g. available shapes in drawing package

t ear-off and pin-up menus

– m enu ‘tears off’ to becom e palette

8

Dialogue boxes

• information windows that pop up to

inform of an important event or request information.

e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filenam e and location. Once the file is saved, the box disappears.

interactivity

easy to focus on look what about feel?

Speech–driven interfaces

• rapidly improving …

… but still inaccurate

• how to have robust dialogue?

… interaction of course!

e.g. airline reservation: reliable “yes” and “no” + system reflects back its understanding

“ you want a ticket from New York to Boston?”

Look and … feel

• WIMP systems have the same elements:

windows, icons., menus, pointers, buttons, etc.

• but different window systems

… behave differently

e.g. MacOS vs Windows m enus

appearance + behaviour = look and feel

Initiative

• who has the initiative?
• ld question–answer

– computer WIMP interface – user

• WIMP exceptions …

pre-emptive parts of the interface

• m odal dialog boxes

– com e and won’t go away! – good for errors, essential steps – but use with care

Error and repair

can’t always avoid errors … … but we can put them right make it easy to detect errors … then the user can repair them

hello, this is the Go Faster booking system what would you like? (user) I want to fly from New York to London you want a ticket from New York to Boston (user) no sorry, please confirm one at a time do you want to fly from New York (user) yes … … …

9

Context

Interaction affected by social and organizational context

• other people

– desire to im press, com petition, fear of failure

• m otivation

– fear, allegiance, am bition, self-satisfaction

• inadequate systems

– cause frustration and lack of m otivation

Experience, engagement and fun

designing experience physical engagement managing value

Experience?

• hom e, entertainm ent, shopping

– not enough that people can use a system – they must want to use it!

• psychology of experience

– flow (Csikszentimihalyi) – balance between anxiety and boredom

• education

– zone of proximal development – things you can just do with help

• wider ...

– literary analysis, film studies, drama

Designing experience

• real crackers

– cheap and cheerful! – bad joke, plastic toy, paper hat – pull and bang

Designing experience

• virtual crackers

– cheap and cheerful – bad joke, web toy, cut-out m ask – click and bang

Designing experience

• virtual crackers

– cheap and cheerful – bad joke, web toy, cut-out m ask – click and bang

10

how crackers work

sender fill in web form

To: wxv From: ..

receive email recipient closed

cracker page

• pen

message

recipient clicks cracker opens ... very slowly

joke links

• pen

cracker page web toy mask

sender watches progress

The crackers experience

real cracker virtual cracker Surface elements design cheap and cheerful simple page/ graphics play plastic toy and joke web toy and joke dressing up paper hat mask to cut out Experienced effects shared

• ffered to another

sent by email message co-experience pulled together sender can't see content until opened by recipient excitement cultural connotations recruited expectation hiddenness contents inside first page - no contents suspense pulling cracker slow ... page change surprise bang (when it works) WAV file (when it works)

Physical design

• many constraints:

– ergonomic – m inim um button size – physical – high-voltage switches are big – legal and safety – high cooker controls – context and environment – easy to clean – aesthetic – m ust look good – econom ic – … and not cost too m uch!

Design trade-offs

constraints are contradictory … need trade-offs

within categories: e.g. safety – cooker controls front panel – safer for adult rear panel – safer for child between categories e.g. ergonom ics vs. physical – MiniDisc rem ote ergonomics – controls need to be bigger physical – no room! solution – multifunction controls & reduced functionality

Fluidity

• do external physical aspects reflect

logical effect?

– related to affordance (chap 5) logical state revealed in physical state?

e.g. on/ off buttons

inverse actions inverse effects?

e.g. arrow buttons, twist controls

inverse actions

• yes/ no buttons

– well sort of

• ‘joystick’
• also left side control

11

spring back controls

• one-shot buttons
• joystick
• some sliders

good – large selection sets bad – hidden state

a minidisk controller

series of spring-back controls each cycle through some options –natural inverse back/ forward twist for track movement pull and twist for volume – spring back – natural inverse for twist

physical layout

controls: logical relationship ~ spatial grouping

compliant interaction

state evident in mechanical buttons rotary knobs reveal internal state and can be controlled by both user and machine

Managing value

people use som ething ONLY I F it has perceived value AND value exceeds cost

BUT NOTE

• exceptions (e.g. habit)
• value N OT necessarily personal gain or m oney

Weighing up value

value

• helps m e get m y work done
• fun
• good for others

cost

• download tim e
• m oney £, $,
• learning effort

12

• in economics Net Present Value:

– discount by (1+ rate) years to wait

• in life people heavily discount

– future value and future cost – hence resistance to learning – need low barriers and high perceived present value

Discounted future example – HCI book search

• value for people who have the book

helps you to look up things

– chapter and page number

• value for those who don’t …

sort of online m ini-encyclopaedia

– full paragraph of context

… but also says “buy m e”!! … but also says “buy m e”!!

Value and organisational design

• coercion
• tell people what to do!
• value = keep your job
• enculturation
• explain corporate values
• establish support (e.g share options)
• em ergence
• design process so that

individuals value organisational value

General lesson …

if you want someone to do something …

• make it easy for them!
• understand their values