Interaction Design & PsychologyWorkshop by Leonard Verhoef, 2002

Ferry den Dopper

Notes fromNotes from

Psychology: a different scope

Usability PsychologyBased on… Based on biology

Applies to products Applies to processes

Overlapping concepts Exclusive concepts

Principles Human functionsConsistency Movement

Feedback Perception

Portability Language

Robustness Memory

Etc. Thinking

Human functions as UI principles

Movement Perception Language Memory Thinking

Efficient user input

Steering attention and recognizing information

Clear use of language

Help, learning and memory

Thinking

Size Large buttons Perceive size

Form Perceive form

Resistance Luminance

Texture Color

Changes Blinking and animations

Number Less input Quiet pages Less words Mistaking and forgetting

Mental load

Distance Where to place information?

Clear words Help From virtual to conceptual

Structure Tables Sentences Consistency and standards

Navigation

MovementEfficient user input

• Large buttons– Bigger targets are easier to hit

• Less input– Efficient list selection

• Have a default selection• Include frequency of use• Allow keying and pointing

(Think about which is the faster way)– Efficient word input

• > 400 elements• Auto completion (e.g. MSIE address bar)• Accept synonyms • Accept errors • Sort / Analyze data for user (no database terror)• Date input

(Accept no leading zero’s, month numbers, month names, no century, century)

Pointing & Clicking Typing

Movement •Slow (one arm)•Higher risk of RSI

•Fast (10 fingers)•Lower risk of RSI

Perception Eyes needed Blind control is possible

Language Few differentiations Many differentiations

Learning Few conventions Many conventions

Thinking •For positional relations•For instruction

•Hard•For instruction

Technical Easy Hard

Hum

an fu

nctio

nsTyping or clicking?

MovementLess input

PerceptionSteering attention and recognizing information

• Size– Use few large sizes– Use different sizes to picture the layout structure

(like a newspaper)• Form

– Perceiving characters(hand-out readability test)

– Perceiving text– Perceiving graphics

• Luminance• Color• Blinking and animations• Quiet pages• Where to place information• Tables

Too many attention points

Perception > FormPerceiving characters

Bad Good Because29/1/8929-1-89

Extra figures like symbols decrease distinctiveness

29 1 89 Empty space increases distinctiveness

29 01 89 29 Jan 89 Jan is from another symbol set and more distinct

29 01 89 29 1 89 Leading zero’s decrease distinctiveness between tens, hundreds, thousands

29 1 89 Underlining decreases distinctiveness

1234 AB 1234 56 An other symbol set is more distinct

READ MORE read more Uppercase text reads 10% slower than lowercase

abcd abcd Sans-serif characters are more distinct and are read easier / faster

abc efg abc efg Bigger isn’t always better

02803,4510419,6523429,9500293,4090290,2520016,0503930,3040283,2503749,5000903,0030272,3515932,9590030,2528298,8030985,5500901,2584739,9039573,5500001,2506280,4529272,6549849,4013988,2573890,85

2 803,4510 419,6523 429,95 293,4090 290,2520 016,05 3 930,3040 283,25 3 749,50 903,0030 272,3515 932,9590 030,2528 298,8030 985,55 901,2584 739,9039 573,55 1,25 6 280,4529 272,6549 849,4013 988,2573 890,85

Perception > Form

Test: Find the amount 1,25

Perception > FormPerceiving text and graphics

• With text:– Omit leading zero’s– Use distinctive characters– Use lowercase text– Don’t underline text

• Use graphics to:– Improve visual recognizability– Improve conspicuousness– Search in few items– Increase understandability– Save screen space

Icons are very useful with recurring visitors

but only clear icons:

CompuServe WinCim 2.0

MS Word

Text GraphicsPerceptionRecognizabilityConspicuousnessVisual Search

DifficultInconspicuousSlow search

EasyConspicuousFast search

CognitionRecognizabilityCognitive searchUser programming

EasyEasyEasy

DifficultNot possibleDifficult

PracticalSpace requiredDesign effort

Large number

Much spaceEasy to design

Any #

Little spaceMuch (but fun)No translationRestricted #

Text or graphics?

Perception > FormPerceiving text and graphics

Perception > Luminance

• High luminance for:– Relevant information– Variable information– Differences– Information on quantity (e.g. atlas)

• Parallel attention– We don’t work sequential, but parallel– In multi-step processes: show the next step

• Impossible choices– If people try to select an impossible (inactive)

option, the interface is wrong• Conflict: software vs. psychology

– Psychology: Emphasize the ‘dangerous’ option, not the likely option

• Highlighting text– Which is better? Making the text bold or marking

the text transparent yellow?• Bold: In principle preferable, but you lose focus on

other distant markings.• Yellow: More luminous, but requires mental switch

between yellow and black.

Bold highlighted text

Good use of luminance

Perception > Color

• Color and visibility– Use unsaturated colors– Light blue not for important info– Red and green different luminance– Red and blue not both in foreground

• Color not for:– Quantitative information– Unknown meaning– Too many in foreground– Too many in background

• Color for:– Interpretation of data– Search of elements– Control of attention

• Monochrome for no attention• One color for attention required soon• One color for immediate attention• One color for after ‘disaster’

Too many colors

Unclear use of colors

Perception > ColorControl of attention

Situation Action Example ColorNormal Information

availableMenu White

GreyBlack

Expected change of situation

Needed Default value, chosen option

Yellow

Situation is unusual, unexpected, dangerous

Needed NOW

Running out of memory, virus found, system will shut down

Orange

Disaster is unavoidable or has already happened

Too late Out of memory, system crash, system shuts down

Red

Which color for which situation?

Perception > Blinking and animations

• Blinking = screaming!• Running text reads 10% slower

• Animation not for:– Indicating direction– System is working– User should wait– To appear attractive– Text, e.g. running– Objects, e.g. moving– A realistic image

• Animation for:– Unexpected info– Complex spatial relations– Bridge visual distance

Perception > Quiet pages

• Use few sizes• Use few fonts• Use few graphics• Use few lines• Use luminance scarce• Use few colors• Use few animations• Low pixel information ratio

Perception > Where to place information?Comparison

123

124

1 2 31 2 4

1 12 23 4

1 2 3 1 2 4

difficult difficulteasy easy

Place differences within one eye fixation (as close as possible)

Perception > Where to place information?

• Direction– Not necessarily from left to right, top to bottom

• Distance– Concentrate

not on the distance from the page margin, but on the distance from the current fixation point

– Don’t center text blocks, keep a fixed fixation point– As close as possible:

• Labels to the object• Objects for comparison

• Grouping– Watch out for too many boxes / borders– Rather no black borders– No more than 5 tabs horizontally– Enable sort by column– Enable search entries (e.g. alphabet-ordered list)

Eye fixation

Eye fixation

Too farClose

Perception > Tables

• Efficient use of rows– Few empty lines– One item one line– As long as possible– Include marks, search entries– Search list vertical

• Efficient use of columns– Use approx. 5 tabs max– Not too large– Do not centre– Fixed size– Last user selection– x% of longest element in list

• Efficient use of areas– If scrolling unavoidable, sort by:

• Recently used• Frequently used• Rarely used• Never used

– Use empty, unused space

LanguageTest: Verb or noun?

File A file To fileEdit An edit To editFormat A format To format

Print A print To print

What will the user do at this message?

MS Word

LanguageClear use of language

• Less words– Use few words– Don’t use synonyms– Use plurals– Use homogeneous word sets

• Clear words– No incorrect words– No homonyms– No jargon– No unspecific words– No form words– No negative words

• Sentences– Use a verb and a noun– Use an adjective and a noun– Consistent word order– Use sentence with punctuation

LanguageMore error messages

LanguageClear use of language

advancedapplicationbannerbasketdatabaseinformationclick herelinkpersonalizenextokno results

infrequently used, detailed (search)programadvertisementordersrefer to content (e.g. hotels, films)be more specificgive content (e.g. email, order now)give content (e.g. details)customizeto nextbe specificgive content (e.g. no cars found)

MemoryHelp, learning and memory

Short term memory(working memory)

Long term memory

Short term recall Long term recall

Electric basis Chemical basis

Instable Stable

Limited capacity (5-9 elements) Rather large

Human memory

MemoryHelp, learning and memory

• Mistaking and forgetting– Presentation– Thinking

• Help– Easy learning not by…– Easy learning by…

• Consistency and standards– Have consistent input keys– Have consistent presentation– Have consistent words (no synonyms)– Have consistent abbreviations– Program standards– Platform standards– Computer interface standards

But:– Be careful ‘worshipping’ consistency– With very complex systems, it’s very hard to remain consistent– Crossing system boundaries, inconsistency is allowed

Memory > Mistaking and forgetting Help, learning and memory

Presentation• Show active processes

Progress indicator:– Function: Allow user to perform other task– Info: Indicate system is alive– Info: Indicate (reliable!) time to wait (in user’s units)– Info: Indicate total waiting time– Info: Change graphical presentation every 0.5 seconds– Control: Pause / Continue– Control: Undo actions done– Control: Alarm stop escape– Control: Stop

• Show irregular status• Show history• Show context• Show icon word label• Reduce visual distance• Enable progress control

Memory > Mistaking and forgetting Help, learning and memory

Thinking• Lists

– Mutually exclusive elements– Predictable order– Relative predictable list position

• Provide agenda– Suggest dates– Allow user entered dates

• Support password recall– User specifies password– Provide hint

Memory > Mistaking and forgetting Help, learning and memory

Thinking• Are you sure?

– Only for actions which have impact– If “no” is probable– No user input

But: prevent routine clicking:• By typing “yes”• Not by typing a random number

– Wait a few seconds before fatal action– Pretend starting operation– Enable abort / undo– “Progress indicator” requirements

Memory > Help

• If you need ‘Help’, the interface is wrong– You have to tune your application to the user, not

the other way around.– “Help” is an alibi for incompetence

(The designer/developer doesn’t understand how people work)

• Don’t give help that doesn’t help– Give help concerning content, not on controls– Don’t explain the browser in your website help– Be on the right expert level

• No help using…– Tip of the day– Help option in menu

• Helpful help…– Has correct expert level– Is vertical– Changes level automatically– Reduces operation

Memory > Help Tool tips

• A tool tip…– has an unobtrusive presentation– has a verb and a noun– has the correct expert level– has concise text– has a correct time delay (0.5 seconds)

Reduce mental load• The computer computes

– Program computes numbers– Present from user’s perspective– Present in user’s units

• Personalize– Better: Customize– Why?

Not because you don’t know how the user works

– How? E.g. Give info / offers based on user’s history

• Reliability– Announce uncertainty, don’t conceal it– Show reliable waiting time– Have up-to-date content

Thinking

Suggests dates: today, tomorrow, other…

Thinking From virtual to conceptual

Be careful with using metaphors andvirtual models

Logical errors with text editor when usingtypewriter as a metaphor

• Accented characters using destructive backspace• Confusion over cursor keys, space bar,

backspace and return• Misunderstanding difference hard / soft return• Insert spaces to justify right• Overtype with spaces to delete characters

Thinking Navigation• Psychologically, each menu,

toolbar and tab control is a list.

So the same requirements apply:– Mutually exclusive elements– Predictable order– Relative predictable list position– Absolute predictable position