Dr. Gitte Lindgaard

Dr. Gitte Lindgaard

HOTLab

(Human Oriented Technology Lab)

Carleton University

Today’s talk

• What is usability• Human information processing models• Signal detection theory in user interface design• Objective and subjective performance criteria• Applying signal detection theory to user interface

design• Taking advantage of perception and human

information processing in user interface design• Screen design principles applied

What usability is about

• Usability is about– The ease with which interactive technology can be learned,

used, continue to be used – Performance – Likeability– Capitalizing on what people are best at and what computers

are better at– Taking into account human perceptual, cognitive, and

affective capabilities and limitations

A model of Human Information processing

IP

Stage 1

Encode

Stage 2

Compare

Stage 3

SelectResponse

Stage 4

ExecuteResponse

Output

Sensory perception

• Sensory modalities• Vision objects, size, colour, shape, density, texture

• Auditory tone, timbre, pitch, intensity, frequency

• Tactile feel pressure, temperature

• Olfactory discriminate odours

• Gustatory taste sweet/sour/bitter/salty

• Stages in perception• Detect a stimulus

• Attend to important aspects

• Interpret the meaning, take

• Action in response

• How does this work with our model of information processing?

Information processing stagesInformation processing stages

IP

Stage 4

ExecuteResponse

OutputStage 1

Encode

Stage 2

Compare

Stage 3

SelectResponse

Interpret

Detect

Attend Act

Conflicting perceptual theories

• Constructivist theory• Seeing is an active process that constructs our view of the world from

information in the environment and stored knowledge• Perception involves intervention of representations and memory

• Ecological theory• perception is a direct process in which information is detected rather

than being constructed• We see what is afforded by the object, system or event

• Both argue that we are active perceivers, but– Constructivists say we embellish and elaborate retinal images

– Ecologists say we explore the objects in our environment

Perceptual Depth Cues

• Size• Overlay • Contrast • Shadow • Converging

• Texture

Human Memory

SensoryInformatio

nStore

Short-termMemory

Long-termMemory

Visual: 0.1 secAuditory: 3-4 sec

withoutprocessing

~ 30 secwithout

processing

?Forever

Information processing stagesInformation processing stages

IP

Stage 4

ExecuteResponse

OutputStage 1

Encode

Stage 2

Compare

Stage 3

SelectResponse

Interpret

Detect

Attend Act

SensoryInformation

Store

Short-termMemory

Long-termMemory

Perception & interpretation in design

• Can the user see the stimulus?• Is it distinguishable from the background?• Is it clear which is the important item?• Does the meaning of the display stand out?• Is it obvious what action is required?

Software development without guidance• Software developers may not appreciate the difference to the

user between data and information• Too much data hides the message• Starting from applied research in Human Perception and

Cognition, the objective in design of complex applications is to facilitate all of the above for the operator

Example of applied Perceptual research: Signal Detection Theory

Noise Signal

People detect signals by making judgments based on the strength of the signal against the background “noise” in which it is embedded

Signal Detection Theory: four probable outcomes in a statistical decision

Signal Detection Theory: effects of shifting the objective criterion

To help your users detect important information:• Strengthen the signal• Lower the noise• Remember that the

user will have a bias to determine whether or not the information is present

Is it clear which are buttons here?

Is the journalin the library?

What is this?

Possible responses

Hits False alarms

Misses Correct rejections

Response observed

YES NO

YES

NO

Responsepredicted

Decision matrix

Hit

True positive

Correct identification

False alarm

False positive

Miss True negative

Correct rejection

State of the world

Event occurred Event did not occur

Ju

dg

men

t b

y o

bse

rve

r

Eve

nt

did

Eve

nt

no

t o

ccu

r

occ

urr

ed

Objectives in design

• Pull the signal and noise distributions as far apart from each other as possible

• Regardless of where you set the objective criterion, there is a cost

• The purpose of the system determines the position of the objective criterion

• The complexity of the user’s tasks must be considered also

Applying Signal Detection Theory

c

Which display shows a network problem spot more clearly?

• Background noise reduced

• Signal is strengthened by adding visual weight

Subjective performance criteria

time

performance

Task demands

Human performance

How it works:At low task demand levels, human performance is aligned with task demandsAs demands increase beyond human capacity, the performer reduces his internal criterion.The gap between task demands and performance increases over time, but the human performer is unaware of this shift in performance criterion and continues to believe his performance is OkThink of “speed blindness”, drunk drivers, tired truck drivers (Moray, 1983)

1182847 5959530Fo0S 484229P< 393955021182847 5959530Fo0S 484229P< 393955021182847 5959530Fo0S 484229P< 393955021182847 5959530Fo0S 484229P< 693955021182847 5959530Fo0S 484229P< 393955021182847 5959530Fo0S 484229P< 393985021702847 5959531Fo0S 484230P< 393955021182847 5959530Fo1S 484229P< 393955021882847 5959530Fo0S 484229P< 393955021182847 5959530Fo0S 484229P< 393955021182847 5959563Fo0S 484229P< 393956021182847 5979530Fo0S 484229P< 398455021182847 5959530Fo0S 484229P< 393955021182847 5959530Fo0S 484229P< 393955021182847 5959530Fo0S 484229P< 39395502

Task complexity

• Think about this task…The operator must • Find the right column

• Transform a number into a perception of the location of an approaching aircraft relative to himself

• Remember what that number was on the last screen and the screen before that and before that….

• Compare these numbers mentally to

• Decide whether or not the aircraft is descending







Now

15 sec ago

30 sec ago

45 sec ago

60 sec ago

Etc.

Time

Altitude

Design for usability

• Designer’s job is to make it easy to– See/hear that something is happening that should be attended to

– Locate the important stimulus

– Interpret what it means

– Take the correct action

• Make it easy to remember information from one occasion to the next

• Prevent errors– Slips

– Mistakes

• Support rapid error recovery

OEO50I INIT ENTRY:ANDREW MEDICI

I11489 SERV#: _______ EXT#: _________ EE#: _____

*** TPIS/2 ORDER S&E ENTRY ***

EXCH ACT: J EXCH CODE: ______ INPLACE: _________ IP DATE: ______

EXCH RMK: ____________________________________________________________________

SERVICE NAME: ________________________________________________________________

ADD ADDR INFO: _______________________________________________________________

SUB ADDR TYPE: ______________________________ SUB ADDR#: ____________________

STREET#SFX: _______ ________ NAME: ____________________ TP/SFX: ______________

LOCALITY: __________________________ POSTCODE: ________

FLT CLR PTY: ___ TEMPORARY: _ AL CONN: _______ ROT CONN: ___ PEXT? __

LINE TYPE: _____ NEXT FAC: _ LN SEL: __ ARE CODE:

REM/CCN(R/N): __ - SERV STATUS: ___ DISC TYPE: PAL#: _______

RENTAL RATE: ___ METER RATE: ___ CONC AUTH: _________ CAB#: ______

ASIC: _________

DIRECTORY ACTION REQ (Y/N): _ DIRECTORIES#=-> WH: __ YE: _ COM: ___

COMMAND: ______

Example of a screen design


I11489 SERV#: _______ EXT#: _________ EE#: _____


EXCH ACT: J EXCH CODE: PBX334 INPLACE: 3374606 IP DATE: 04089996

EXCH RMK: N/A QREMM

SERVICE NAME:PETER JAMES HOUSTON

ADD ADDR INFO: ROWANVILLE MELA

SUB ADDR TYPE: SEMI-ATT. DUAL H/H DWELLING SUB ADDR#: 337A

STREET#SFX: CRESCENT NAME: ST BARTHOLOMEW TP/SFX: PMT/YY

LOCALITY: ROWANVILLE WEST POSTCODE: 3957

FLT CLR PTY: ROP TEMPORARY: N AL CONN: P/T ROT CONN: 3F PEXT? Y

LINE TYPE: PBX NEXT FAC: N LN SEL: PR ARE CODE:TTYP-M

REM/CCN(R/N): 2X - SERV STATUS: INP DISC TYPE: PAL#: POTT/P

RENTAL RATE: RES METER RATE: PM1 CONC AUTH: MELA CAB#: 228FS/476PW

ASIC: 338PY

DIRECTORY ACTION REQ (Y/N): N DIRECTORIES#=-> WH: N YE: N COM: PB

COMMAND: EXT

No better when it is filled in

Simple ways to improve screens

In Western culture, people start reading from the upper left corner, across, then down the page, ending in the lower right corner

Apply that simple principle in screen design

…use a consistent pattern

Area 1: The tree and the selection

criteria areas allow the user to specify a subset of data to be retrieved

Area 2: The results of the search are

displayed in this region

Area 3: A set of filters are sometimes

provided to further select specific data from the retrieved data

Area 4: Details regarding a selected

object are displayed in this area.


I11489 SERV#: _______ EXT#: _________EE#: _____


EXCH ACT: J EXCH CODE: ______ INPLACE: _________

IP DATE: ______

EXCH RMK: _______________________________________________________________

SERVICE NAME: ________________________________________________________________

ADD ADDR INFO: _______________________________________________________________

SUB ADDR TYPE: _____________ SUB ADDR#: ____________________

STREET#SFX: _______ ________ NAME: ____________________ TP/SFX: ______________

LOCALITY: _____________ POSTCODE: ________

FLT CLR PTY: ___ TEMPORARY: _ AL CONN: _______

ROT CONN: ___ PEXT: __

LINE TYPE: _____ NEXT FAC: _ LN SEL: __ ARE CODE:

REM/CCN(R/N): __ SERV STATUS: ___ DISC TYPE: ______ PAL#: _______

RENTAL RATE: ___ METER RATE: ___ CONC AUTH: _____ CAB#: ______

ASIC: __

DIRECTORY ACTION REQ (Y/N): _ DIRECTORIES#=->

WH: __ YE: _ COM: ___

COMMAND: ______

Simple remedies

Reduce alignments

Improvements to this screen…

– Use a mixture of CAPITAL and lower case letters• We ‘see’ words as shapes

• Using the downward strokes as in p j y

• And the upward strokes as in k l b helps us detect the word shape with less effort than reading PJY or KLB because the shape is lost when using capital letters

– Use highlights to make those fields stand out that users must fill

• Eyes can ‘jump’ straight to those items

• This reduces the probability of users making errors like missing fields they should fill in

Oeo50I Init Entry:ANDREW MEDICI

I11489 Serv#: _______ Ext#: _________ Ee#: _____


Exch Act: J Exch code: ______ Inplace: _________

IP date: ______

Exch Rmk: _______________________________________________________________

Service Name: ________________________________________________________________

Add Addr info: _______________________________________________________________

Sub Addr Type: _____________ Sub Addr#: ____________________

Street#Sfx: _______ ________ Name: ____________________ TP/Sfx: ______________

Locality: _____________ Postcode: ________

Flt Clr Pty: ___ Temporary: _ Al Conn: _______

Rot Conn: ___ Pext: __

Line Type: _____ Next Fac: _ Ln Sel: __ Are Code:

Rem/Ccn(R/N): __ Serv Status: ___ Disc Type: ______ Pal#: _______

Rental Rate: ___ Meter Rate: ___ Conc Auth: _____ Cab#: ______

Asic: __

Directory Action Req (Y/N): _ Directories#=->

WH: __ YE: _ Com: ___

Command: ______

Further improvements

Semantics

• Group items that ‘belong’ together• Give visual cues about the status of these• Make actions clear that user can take• Show additional information to help the user learn for

the future• Be aware of users’ expectations

Screen elements: Menus

New… Ctrl+NOpen… Ctrl+OClose

Save Ctrl+SSave AsSave as web pageSearch…

Versions…

• What may you deduce from the following?

• Semantic groups • Hot keys shown• “more” (open another window)• “more” (primary menus)• Can be activated• Cannot be activated

Large impact of small changes

• If you want to impact user performance negatively– Don’t give people what they expect– Apply design norms inconsistently– Make users guess how the system will behave today– Invent your own standards, but don’t stick with them

everywhere– Use a lot of different colors, shapes, sizes, rules

• Usability is also about predictability

Impact of minute changes

File Edit View Insert Format Tools Other Other Help



Other Edit Format Help View Tools File Other Insert

These examples are trivial but annoying and time-wasting because theyforce more work on the central cognitive subsystems

Here is a more serious example of a seemingly minor change

Paper roll from high-pressure petro-chemicalFactory undergoing automation:Shows pressure and temperature over timeOne rectangle (horizontal) shows amount of changeOne rectangle (vertical) shows 30 minutes in timeChanges are readily visibleOperators can enter notes as product progressesEasy to go back in time to see whole procedureThis display was not kept

Before automation

time

Amount

After automation

Time

Amount

Changes made:Pressure and temperature nowSeparated on different displaysThe scale has been rotated 90Time is now horizontalAmount is verticalOne square (horizontal) is 5minOne square (vertical) is 1/10 ofEarlier measure

Effects:Operators were unable to run the factoryThe quality of output dropped through the floorThe company nearly lost its biggest customer (60% of product)Engineers were put on team 24/7 for first six months

Could this have been avoided?

• Studying the users and how they ran the factory before a system was ordered would have helped to understand

• how they make decisions

• What cues they rely on for making decisions

• What else they need (documenting the product history in a simple, accessible way)

• How to manage the transition period

• Etc.

Conclusion

• Understanding how people detect, encode, and process information promotes usability

• Signal detection theory can be applied to user interface design to help users distinguish between important and unimportant information

• Users have a memory and they will use it!• Clarity and consistency promotes usability• Designing user interfaces is a very important activity

– 60-70% of software code is related to the user interface

This is what we do in the HOTLab

• Contact Dr. Gitte Lindgaard for more on ext 2255• E-mail: [email protected] • Web site: www.carleton.ca/hotlab

Dr. Gitte Lindgaard

Documents

Transcript of Dr. Gitte Lindgaard