interactivity

easy to focus on lookwhat 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”

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 menus

• Interactivity is also crucial in determining the ‘feel’ of a WIMP environment.

appearance + behaviour = look and feel

understanding and choosing widgets

widgets - bits that make the GUIwhat do they do

what are they good for

one-by-one – WIMP elements

widgets - bits that make the GUI

what do they do

what are they good for

widgets?

• individual items on a GUI screen ...– checkboxes, menus, toolbars, buttons etc.

• three aspects:– appearance- what they look like– interaction - how they behave– semantics - what they mean

appearance

appearance includes words

• verbs - action words– quit, exit, embolden, italicise

• adjectives - description/state words– bold, italic

• nouns - usually as a form of description– Times New Roman, US Letter

• beware of mixes …– embolden + italic !!?!

behaviour

Move mouse off target withbutton still down – highlight removed

Release mouse – nothing happens

Move mouse over button – highlights

behaviour … ctd.

• some bits the toolkit does for you– but is it right?

• some you control– e.g. drawing, interactions between widgets

• beware timing issues– e.g. large selections under Windows apps.

semantics

• menus, buttons,…, etc.

• do things …

… lets make it bold italic

YOU say what it means

• semantics usually up to you– although widgets may link direct to

database– even then, you say what links

• think separately:– meaning first - what you want it to

do– then appearance - how you do it

• choose the widget for the job

what do you want?

• actions– usually menu, buttons, or toolbar

• setting state/options– usually checkbox, radio button, combi-box

• but …– menus can be used to set state etc. ...

how many?

• one of several options– radio buttons, selection menu

• zero, one or more options– checkbox, multi-choice menu

• free choice– offer recent/typical shortcuts– one line text boxes often terrible!

and more ...

• number– fixed e.g. bold, italic, underline– variable e.g. font list– scolling through telephone list …

• liveness– grey out inactive options

• dynamic interactions– some choices dependent on others

Initiative

• who has the initiative?old question–answer – computerWIMP interface – user

• modal dialog boxes– come and won’t go away!– good for errors, essential steps– but use with care– When a major fault has been detected, or for certain

kinds of instructional software

Error and repair

Interactivity is also critical in dealing with errors. . If users can detect errors then they can correct them can’t always avoid errors …

… but we can put them right

make it easy to detect errors… then the user can repair them

Context

Interaction affected by social and organizational context

This interaction does not occur within a vacuum. We have already noted some of the physical

factors in the environment that can directlyaffect the quality of the interaction

• other people– desire to impress, competition, fear of failure– The presence of other people in a work environment

affects the performance of the worker in any task

• motivation– In order to perform well, users must be motivated.– fear, allegiance, ambition and self-satisfaction.

• inadequate systems– cause frustration and lack of motivation

Experience, engagement and fun

designing experiencephysical engagement

managing value

Experience?

• home, entertainment, shopping

– not enough that people can use a system– Shopping is as much about going to

theshops, feeling the clothes, being with friends

– they must want to use it!– You can go shopping and never intend to

spend money. – Shopping is not about an efficient

financial transaction, it is an experience.

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 mask – click and bang

Designing experience

• virtual crackers– cheap and cheerful– bad joke, web toy, cut-out mask – click and bang

how crackers work

sender

fill in web form

To: wxvFrom: ..

receive email recipient

closedcracker page

open

messagerecipient clicks

cracker opens ...very slowly

jokelinks

opencracker page

web toymask

sender

watchesprogress

Physical design

• many constraints:– ergonomic – minimum button size

– physical – high-voltage switches are big

– legal and safety – high cooker controls

– context and environment – easy to clean

– aesthetic – must look good

– economic – … and not cost too much!

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. ergonomics vs. physical – MiniDisc remote

ergonomics – controls need to be bigger physical – no room! solution – multifunction controls & reduced functionality

Managing value

people use somethingONLY IF

it has perceived valueAND

value exceeds cost

BUT NOTE• exceptions (e.g. habit)• value NOT necessarily personal gain or money

Weighing up value

value• helps me get my work done• fun• good for others

cost• download time• money £, $, €• learning effort

• 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 bookhelps you to look up things– chapter and page number

• value for those who don’t …sort of online mini-encyclopaedia– full paragraph of context

… but also says “buy me”!!… but also says “buy me”!!

Value and organisational design• coercion

• tell people what to do!• value = keep your job

• enculturation• explain corporate values• establish support (e.g share options)

• emergence• 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

Thank You

Next weekinteraction design basics