slide1
Download
Skip this Video
Download Presentation
Interaction Design & Psychology Workshop by Leonard Verhoef , 2002

Loading in 2 Seconds...

play fullscreen
1 / 37

Interaction Design & Psychology Workshop by Leonard Verhoef , 2002 - PowerPoint PPT Presentation


  • 48 Views
  • Uploaded on

Notes from. Interaction Design & Psychology Workshop by Leonard Verhoef , 2002. Ferry den Dopper. Psychology : a different scope. Human functions as UI principles. Movement Efficient user input. Large buttons Bigger targets are easier to hit Less input Efficient list selection

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Interaction Design & Psychology Workshop by Leonard Verhoef , 2002' - myles-beck


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Notes from

Interaction Design & Psychology

Workshop by Leonard Verhoef, 2002

Ferry den Dopper

movement efficient user input
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)
slide5

MovementLess input

Typing or clicking?

Human functions

perception steering attention and recognizing information
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
perception form
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

perception form perceiving text and graphics

CompuServe WinCim 2.0

MS Word

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:

perception luminance
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.

Good use of luminance

Bold highlighted text

perception color
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’
perception color control of attention
Perception > ColorControl of attention

Which color for which situation?

perception blinking and animations
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
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
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

easy

easy

difficult

Place differences within one eye fixation

(as close as possible)

perception where to place information
Perception > Where to place information?
  • Direction
    • Not necessarily from left to right, top to bottom
  • Distance
    • Concentratenot 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 fixation1
Eye fixation

Close

Too far

perception tables
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
language test verb or noun
LanguageTest: Verb or noun?

What will the user do at this message?

MS Word

language clear use of language
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
language clear use of language1
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)

LanguageClear use of language
memory help learning and memory1
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
Memory> Mistaking and forgetting Help, learning and memory

Presentation

  • Show active processesProgress 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 memory1
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 memory2
Memory> Mistaking and forgetting Help, learning and memory

Thinking

  • Are you sure?
    • Only for actions which have impact
    • If “no” is probable
    • No user inputBut: 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
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
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)
thinking
Thinking

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

Suggests dates: today, tomorrow, other…

thinking1
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
thinking2
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
ad