IAS2223: Human Computer Interaction Chapter 1: The Interaction.

IAS2223:Human Computer

InteractionChapter 1: The Interaction

Content

• Model of interaction.• Ergonomics.• Interaction styles.• Interactivity.• The process of design.• Navigation design.• Screen design and layout.• Iteration and prototyping.

The Interaction

• Address the translation between what the user wants and what system does – use interaction models

• Ergonomics looks at physical characteristics of the interaction

• Dialog between user and system• Takes place within a social and

organizational context – affects both user and system

What is it?

Communication user system

but is that all … ?

Interaction termsdomain – the area of work under study

e.g. graphic design

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

task – how you go about doing it– ultimately in terms of operations or actions

e.g. … select fill tool, click over triangle

Note …– traditional interaction …– use of terms differs a lot especially

task/goal !!!

Model of Interaction

Donald Norman’s Model• Seven stages

– user establishes the goal– formulates intention– specifies action sequence– executes action– perceives system state– interprets system state– evaluates system state with respect to goal

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

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

evaluationexecution

goal

… cont’d

user establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system state interprets system stateevaluates system state with respect to goal

system

evaluationexecution

goal

Human Errors – slips and mistakes

slip understand system and goal correct formulation of action incorrect action

mistake may not even have right goal!

Fixing things?slip – better interface design

mistake – better understanding of system

Abowd and Beale frameworkextension of Norman…

their interaction framework has 4 parts– user– input– system– output

each has its own unique language

interaction translation between languages

problems in interaction = problems in translation

Score

Utask

Ooutput

Iinput

Ergonomics

• Study of the physical characteristics of interaction

• Also known as human factors – but this can also be used to mean much of HCI!

• Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems

Ergonomics - examples• arrangement of controls and displays

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

• surrounding environmente.g. seating arrangements adaptable to cope with

all sizes of user

• health issuese.g. physical position, environmental conditions

(temperature, humidity), lighting, noise,

• use of coloure.g. use of red for warning, green for okay,

awareness of colour-blindness etc.

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

computer directly– function keys, single characters, short

abbreviations, whole words, or a combination

• 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, DOS

Menus

• Set of options displayed on the screen• Options visible

– less recall - easier to use– rely on recognition so names should be meaningful

• Selection by: – numbers, letters, arrow keys, mouse– combination (e.g. mouse plus accelerators)

• Often options hierarchically grouped– sensible grouping is needed

• Restricted form of full WIMP system

Natural language• Familiar to user

• speech recognition or typed natural language

• Problems– vague– ambiguous– 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 information systems

• Query languages (e.g. SQL)– used to retrieve information from database– requires understanding of database structure and

language syntax, hence requires some expertise

Form-fills

• Primarily 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 column

– user can enter and alter data spreadsheet maintains consistency

WIMP Interface

Windows

Icons

Menus

Pointers

… or windows, icons, mice, and pull-down menus!

• default style for majority of interactive computer systems, especially PCs and desktop

machines

Point and click interfaces

• used in ..– multimedia– web browsers– hypertext

• just click something!– icons, text links or location on map

Three dimensional interfaces

• virtual reality• ‘ordinary’ window systems

– highlighting– visual affordance– indiscriminate use

just confusing!• 3D workspaces

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

flat buttons …

… or sculptured

click me!

Elements of WIMP

• Windows• Icons• Menus

• Pointers• Buttons• Palettes• Toolbars

• Dialog boxes

Context

Interaction affected by social and organizational context

• other people– desire to impress, competition, fear of failure

• motivation– fear, allegiance, ambition, self-satisfaction

• inadequate systems– cause frustration and lack of motivation

Interactivity design interactions not just interfaces

not just the immediate interaction e.g. stapler in office – technology changes interaction

style• manual: write, print, staple, write, print,

staple, …• electric: write, print, write, print, …, staple

The process of design

what iswanted

analysis

design

implementand deploy

prototype

interviewsethnography

what is therevs.

what is wanted

guidelinesprinciples

dialoguenotations

precisespecification

architecturesdocumentation

help

evaluationheuristics

scenariostask analysis

Steps …

• requirements– what is there and what is wanted …

• analysis– ordering and understanding

• design– what to do and how to decide

• iteration and prototyping– getting it right … and finding what is really needed!

• implementation and deployment– making it and getting it out there

… but how can I do it all ! !

• limited time design trade-off

• usability?– finding problems and fixing them?– deciding what to fix?

• a perfect system is badly designed– too good too much effort in design

navigation design

local structure – single screenglobal structure – whole site

start

the systems

info and help management messages

add user remove user

mainscreen

removeuser

confirm

add user

Interact at several levels:

• widget choice– menus, buttons etc.

• screen design• application navigation design• environment

– other apps, O/S

think about structure

• within a screen– later ...

• local– looking from this screen out

• global– structure of site, movement between

screens• wider still

– relationship with other applications

screen design and layout

basic principlesgrouping, structure, order

alignmentuse of white space

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell

basic principles

•ask– what is the user doing?

•think– what information, comparisons,

order

•design– form follows function

available tools for layout

• grouping of items• order of items • decoration - fonts, boxes etc.• alignment of items• white space between items

grouping and structure

logically together physically together

Billing details: Name Address: … Credit card no

Delivery details: Name Address: … Delivery time

Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … …

decoration

• use boxes to group logical items• use fonts for emphasis, headings• but not too many!!

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

• you read from left to right (English and

European) align left hand side

Willy Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable!

alignment - names

• Usually scanning for surnames make it easy!

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell

alignment - numbers

think purpose!

which is biggest?

532.56179.3

256.31715

73.9481035

3.142497.6256

alignment - numbers

visually: long number = big number

align decimal pointsor right align integers

627.8651.005763

382.5832502.56

432.9352.0175

652.8756.34

multiple columns

• scanning across gaps hard:(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

• use leaders



• or greying (vertical too)


sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85


• or even (with care!) ‘bad’ alignment

white space - the counter

WHAT YOU SEE

white space - the counter

WHAT YOU SEE

THE GAPS BETWEEN

space to separate

space to structure

space to highlight

physical controls

• grouping of items

– defrost settings

– type of food

– time to cooktype of food

time to cook

defrost settings

physical controls


• order of items1) type of heating

2) temperature

3) time to cook

4) start

4

4) start2

2) temperature

3

3) time to cook

11) type of heating

physical controls


• order of items

• decoration– different colours

for different functions

– lines around relatedbuttons

different colours for different functions

lines around related buttons (temp up/down)

physical controls


• order of items

• decoration

• alignment– centered text in buttons

? easy to scan ?? easy to scan ?

centred text in buttons

physical controls


• order of items

• decoration

• alignment

• white space– gaps to aid groupinggaps to aid grouping

Prototyping

• System with limited functionality

• Prototyping help in easing the design

THANKS

To tolerate someone else’s mistakes is one thing. To forgive them is even greater.

IAS2223: Human Computer Interaction Chapter 1: The Interaction.

Documents

Transcript of IAS2223: Human Computer Interaction Chapter 1: The Interaction.