The power of first impressions

1
The power of first impressions

• Gitte Lindgaard
• Professor, NSERC/Cognos Chair in User-Centred
  Design
• Director, Human Oriented Technology Lab (HOTLab)
  Carleton University
• gitte_lindgaard_at_carleton.ca

Prepared for the Taiwan Design Center
2
Usability and user satisfaction

• ISO Standard 9241/11 says usability is about
• Effectiveness
• Efficiency
• Satisfaction
• Traditionally, satisfaction measured degree of
  comfort, attitude
• But the ISO standard is based on office machines
• Do peoples criteria for judging satisfaction
  differ between web sites and office machines?
• How I came to be interested in user satisfaction

3
(No Transcript)
4
Why such low satisfaction ratings?

• Is the concept of satisfaction meaningless in the
  context?
• The burden of reputation?
• Local Government site
• Colour combination?
• Known to affect website appeal (Knutson, 1998)
• Arousal
• Psychology of art (Kreitler Kreitler, 1982)
• Theory of aesthetics (Berlyne, 1971 1973)
• First impressions
• Neurophysiology (LeDoux, 1996)
• Somatic markers (Damasio, 2000)
• Mere exposure effect (Zajonc, 1980)
• Emotion (Norman, 2004 2005)

5
Theory of aesthetics versus performance

• Berlyne Novelty complexity increases
  interestingness and pleasantness of
  meaningless stimuli
• Consistent with increases in arousal but not
  unpleasant
• Assume that
• resetting our internal preference/performance
  criterion is a protective survival mechanism
• We reset this criterion when the going becomes
  unpleasant
• then there is a close link between how I feel and
  how well I perform

6
Arousal preferences and tension

• Two very bright, highly saturated primary colors
  juxtaposed create maximum tension (Kreitler
  Kreitler, 1972)
• What does maximum tension mean?

Optimum arousal level
? Zone of maximum tension ?Point at which
operator resets internal criterion?
Asleep
7
Arousal performance and tension

• How it works
• At low task demand levels,
• human performance is aligned
• with task demands
• As 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 Ok
• (Moray,
  1983)

8
Proof the traditional visual pathway
9
More recent evidence
10
Summary visual pathway

• A small bunch of neurons lead directly from the
  hypothalamus to the amygdala in a single synapse
• This by-passes the traditional visual pathway
  (via thalamus ? occipital cortex ? amygdala)
• Consequence at least some information is
  processed emotionally before the brain can
  determine what it means
• Thus, we react emotionally before we know what we
  are seeing/hearing/smelling/touching

11
Why such low satisfaction ratings?

• Is the concept of satisfaction meaningless in the
  context?
• The burden of reputation?
• Local Government site
• ?Colour combination?
• Known to affect website appeal (Knutson, 1998)
• ? Arousal
• Psychology of art (Kreitler Kreitler, 1982)
• Theory of aesthetics (Berlyne, 1971 1973)
• ? First impressions
• Neurophysiology (LeDoux, 1996)
• Somatic markers (Damasio, 2000)
• Mere exposure effect (Zajonc, 1980)
• Emotion (Norman, 2004 2005)

12
Unpacking the notion of satisfaction

• In several experiments we found user satisfaction
  to comprise five components
• likeability
• emotion
• aesthetics
• expectations
• Usability
• Our paradigm
• users browse for 10 minutes while talking about
  their experience
• Usability test
• Second interview

13
Overall experimental outcome
14
Proportion of positive aesthetics statements
15
Proportion of positive usability statements
16
Our results suggest

• Users
• form an opinion of a web site very quickly
• are not fooled by poor usability, but
• that does not influence their opinion of
  aesthetics
• this contradicts Tractinsky et al.s (2000)
  results claiming that if it is pretty, it is
  usable
• Once users have formed an opinion, they stick
  with it
• This suggests that the first impression is very
  important
• But how far can we trust our eyes?

17
(No Transcript)
18
Which circle in the middle is bigger?
19
Is this possible!?!
20
If you take a look at the following  picture ,
let me tell you ... it is not animated.  Your
eyes are making it move.  To test this, stare at
one spot for a couple seconds and everything will
stop moving.  Or look at the black center of each
circle and it will stop moving.  But move your
eyes to the next black center and the previous
will move after you take your eyes away from
it....  Weird 
21
So .

• We dont necessarily see what is there
• Our brains usually correct for impossible images
• We know in an instant if we like or dislike what
  we see.
• Next research question how long is an instant?
• Mere exposure effect in lt 5msec
• Effect increases with increasing number of
  exposures, but awareness does not .
• Starts to wane at 50msec

22
Experiment 500msec exposure time

• Participants (N 22)
• 100 home pages (good? bad) shown twice in
  different random orders
• 20 practice pages shown first
• Subject rated visual appeal (interval scale)

23
(No Transcript)
24
(No Transcript)
25
(No Transcript)
26
(No Transcript)
27
(No Transcript)
28
(No Transcript)
29
Results First versus second trial (100 pages)
R2 .94, plt.001
30
Results First versus second trial (50 pages)
R2 .97, plt.001
31
Results Study 1 versus study 2
R2 .95, plt.001
32
Visual appeal versus visual characteristics

• Subjects also asked to rate the following design
  aspects
• Simple ? complex (R2 .80, p lt .01)
• Interesting ? boring (R2 .91, p lt .001)
• Good design ? bad design (R2 .92, p lt .001)
• Good layout ? bad layout (R2 .88, p lt .001)
• Clear ? confusing (R2 .39, plt.01)
• Good color ? bad color (R2 .90, p lt .001)
• Imaginative ? unimaginative (R2 .86, p lt .001)
  
• Multiple regression best linear combination, R2
  .94, p lt .001

33
Simple ? complex
Interesting? boring
Clear ? confusing
Good design ? bad design
Imaginative ? unimaginative
Good color ? bad color
Good layout? bad layout
34
Next experiment

• Same paradigm as before
• 50msec or 500msec exposure time
• Responded using numeric keys 1-9
• Comparison of medians in 500msec and 50msec
• first trial, R2 .83, p lt .001
• second trial R2 .85, p lt .001
• ? more variability among participants in 50msec
  than in 500msec condition (but R2 .90, p lt
  .001)

35
So, keeping in mind the human mind.

• The human brain has certain limitations
• We must take these into account when we design
  interactive technology
• Human Computer Interaction (HCI) is a field of
  study that does this

36
Conclusion

• First impression of web sites appears to be a
  mere exposure effect
• People decide how much they like a web site very
  quickly
• That first impression is a holistic, visceral
  (physiological) response it seems to stick

37
The value of visual design for usability

• Easy to understand
• More universalMore consistent, less
  ambiguousMore memorableMore efficient,
  compactMore intuitive
• Easy to learn
• Reduces the need for training Enables faster
  trainingApproachable, not intimidatingRecognizab
  le metaphoricallyImmediate
• Increases market value
• Entertaining EngagingElegant

38
CRAP design is good design

• Contrast
• If elements are the same, make them look the
  same.If elements are different, make them look
  different!
• Repetition or consistency
• Create a series of common visual threads to tie
  the interface togetherby repeating one or more
  elements throughout the interface.
• Alignment
• Every element should have a visual connection to
  another element. Do not position elements
  arbitrarily.
• Proximity
• Physically group related elements

39
Optimizing contrast Signal Detection Theory
Noise Signal
Humans detect signals in their environment by
making statistical judgments based on the
strength of the signal against the background
noise in which it is embedded
40
Contrast Signal Detection Theory in Network
Management

• Which display shows a network problem spot more
  clearly?
• Background noise reduced
• Signal is strengthened by adding visual weight
• This approach is at the core of Nortels visual
  display language
• Rapidly becoming the Defacto industry standard

41
Nortels network browsers

• Reduce noise by muting background displays that
  contain context information
• Strengthen the important information (signals)
  by
• Applying colour
• Changing the shape of the objects containing the
  signal (alarm balloons)
• Coding information about the nature of the events
  that the operator needs to know about

42
Repetition consistent screen design

• 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

43
Repetition wireframes

• Area 1
• 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
• Filters are sometimes provided to select
  specific data from retrieved set
• Area 4
• Details about a selected object are displayed
  here

44
Repetition principle applied

• Consistency between screens
• Meaning of symbol (shape)
• Meaning of color (red urgent)
• Content of symbol (C critical)
• Placement in reading path
• Placed directly on affected object

45
Alignment

• 1. This grid is based on units of 5 pixels.2.
  Widget-to-window spacing is 15 pixels always
  greater than widget-to-widget.3.
  Widget-to-widget spacing is 5 pixels.4. Widget
  heights increment in units of 15 pixels.5.
  Widget widths increment in column units based on
  the width of the window.6. Window widths and
  heights are based on the number of widgets in the
  window.

46
Proximity
47
Proximity
48
So, CRAP design IS good design

• Contrast
• If elements are the same, make them look the
  same.If elements are different, make them look
  different!
• Repetition or consistency
• Create a series of common visual threads to tie
  the interface togetherby repeating one or more
  elements throughout the interface.
• Alignment
• Every element should have a visual connection to
  another element. Do not position elements
  arbitrarily.
• Proximity
• Physically group related elements

49
Acknowledgements

• this talk included work done with
• Cathy Dudek
• Dick Dillon
• Gary Fernandes
• Judy Brown

50
Thank you for your kind attention
Any questions