Interaction Design & Psychology Workshop by Leonard Verhoef, 2002 Ferry den Dopper Notes from

Psychology : a different scope Usability Psychology Based on… Based on biology Applies to products Applies to processes Overlapping concepts Exclusive concepts Principles Human functions Consistency 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

Movement Efficient 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)

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)

Human functions Typing or clicking? Movement Less input 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

Slow (one arm)

Higher risk of RSI

Fast (10 fingers)

Lower risk of RSI

For positional relations

For instruction

Hard

For instruction

Perception Steering 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

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 > Form Perceiving characters Bad Good Because 29 / 1 / 89 29 - 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,45 10419,65 23429,95 00293,40 90290,25 20016,05 03930,30 40283,25 03749,50 00903,00 30272,35 15932,95 90030,25 28298,80 30985,55 00901,25 84739,90 39573,55 00001,25 06280,45 29272,65 49849,40 13988,25 73890,85 2 803,45 10 419,65 23 429,95 293,40 90 290,25 20 016,05 3 930,30 40 283,25 3 749,50 903,00 30 272,35 15 932,95 90 030,25 28 298,80 30 985,55 901,25 84 739,90 39 573,55 1,25 6 280,45 29 272,65 49 849,40 13 988,25 73 890,85 Perception > Form Test: Find the amount 1,25

02803,45

10419,65

23429,95

00293,40

90290,25

20016,05

03930,30

40283,25

03749,50

00903,00

30272,35

15932,95

90030,25

28298,80

30985,55

00901,25

84739,90

39573,55

00001,25

06280,45

29272,65

49849,40

13988,25

73890,85

2 803,45

10 419,65

23 429,95

293,40

90 290,25

20 016,05

3 930,30

40 283,25

3 749,50

903,00

30 272,35

15 932,95

90 030,25

28 298,80

30 985,55

901,25

84 739,90

39 573,55

1,25

6 280,45

29 272,65

49 849,40

13 988,25

73 890,85

Perception > Form Perceiving 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

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:

Perception > Form Perceiving text and graphics Text or graphics? Text Graphics Perception Recognizability Conspicuousness Visual Search Difficult Inconspicuous Slow search Easy Conspicuous Fast search Cognition Recognizability Cognitive search User programming Easy Easy Easy Difficult Not possible Difficult Practical Space required Design effort Large number Much space Easy to design Any # Little space Much (but fun) No translation Restricted #

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

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.

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’

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 > Color Control of attention Which color for which situation? Situation Action Example Color Normal Information available Menu White Grey Black 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

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

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

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 1 2 3 1 2 4 1 2 3 1 2 4 1 1 2 2 3 4 1 2 3 1 2 4 difficult difficult easy easy Place differences within one eye fixation (as close as possible)

1

2

3

1

2

4

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)

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 far Close

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

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

Language Test: Verb or noun? What will the user do at this message? MS Word File A file To file Edit An edit To edit Format A format To format Print A print To print

Language Clear 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

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

Language More error messages

Language Clear use of language advanced application banner basket database information click here link personalize next ok no results infrequently used, detailed (search) program advertisement orders refer to content (e.g. hotels, films) be more specific give content (e.g. email, order now) give content (e.g. details) customize to next be specific give content (e.g. no cars found)

advanced

application

banner

basket

database

information

click here

link

personalize

next

ok

no results

infrequently used, detailed (search)

program

advertisement

orders

refer to content (e.g. hotels, films)

be more specific

give content (e.g. email, order now)

give content (e.g. details)

customize

to next

be specific

give content (e.g. no cars found)

Memory Help, learning and memory Human 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

Memory Help, 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

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

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

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

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

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)

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…

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 From virtual to conceptual Be careful with using metaphors and virtual models Logical errors with text editor when using typewriter 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

From virtual to conceptual

Be careful with using metaphors and

virtual models

Logical errors with text editor when using

typewriter 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

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