Visual design is more than styling. It is function. And not only because it communicates, but also because it makes us feel. And between feeling and communication, people find things easier to use.

1. “Visual Design”
“Pretty Graphics”
“Sexy interfaces”
“Eye-Candy
“Look & Feel”
“Skinning”

3. “Look & Feel”
f u n c t io n
(Common Perception)

5. f u n c t io n
“Look & Feel”

6. “Do users want applications that work, or
applications that can wrap themselves into
funny shapes? I'm sure it looks really whizzy in
demos, but come on, we're just trying to give
user applications to help them do their jobs.”

7. “...it doesn't matter how pretty your site is or
how many quot;bells and whistlesquot; you have.
While a high-quality site is important, the
majority of people today value usability more
than good looks or fanciness.”

8. “...it doesn't matter how pretty your site is or
X
how many quot;bells and whistlesquot; you have.
While a high-quality site is important, the
majority of people today value usability more
than good looks or fanciness.”
an’t
ou c
Y
rate
Sepa
from
ility
Usab ign.
Des
sual
Vi

9. “Eye Candy is a Critical
Business Requirement”

10. hetics
Aest
“Eye Candy is a Critical
Business Requirement”

11. Aesthetics:

12. Aesthetics:
quot;the science of how things are
known via the senses.quot;

13. Aesthetics:
quot;the science of how things are
known via the senses.quot;
More than just visual design,
1. anything that appeals to the senses.

14. Aesthetics:
quot;the science of how things are
known via the senses.quot;
More than just visual design,
1. anything that appeals to the senses.
More about the psychological
2. response to sensory stimulus,
than the actual trigger.

15. http://www.fastcompany.com/magazine/104/moto.html

16. “...consciously or unconsciously,
the iPod materials reference a
convention of ‘cleanliness’ that
everybody interacts with every
day – a bathroom.”
http://www.frogdesign.com/?p=13

18. http://www.poetpainter.com/thoughts/article/the-ipod-shuffle-and-wrigleys-doublemint-gum

19. http://www.poetpainter.com/thoughts/article/the-ipod-shuffle-and-wrigleys-doublemint-gum

20. Aesthetics and...
Cognition
“the process of knowing”

21. Aesthetics and...
Cognition
“the process of knowing”

22. Aesthetics and...
Cognition
“the process of knowing”
Affordance says an ‘objects sensory characteristics
intuitively imply its functionality and use’

23. Guess what this screen is communicating...

24. Guess what this screen is communicating...

25. Guess what this screen is communicating...
A Visual Language is a set of practices by which
images can be used to communicate concepts

26. Guess what this screen is communicating...
A Visual Language is a set of practices by which
images can be used to communicate concepts
better:

27. Brilliant!

28. What does the ‘genie effect’ communicate?

29. Which of these windows of closer to you? Why?

30. Which of these windows of closer to you? Why?

31. Can you spot the problem?

32. Can you spot the problem?
OR

33. Can you spot the problem?
OR
One of the Four Laws of Perception states
‘elements that are close to each other are related.’

34. “Dismissing visual design as just a
matter of making things pretty or ugly
cuts off your ability to communicate
with your customers...
Design is a means to communicate,
not mere styling.”
-Luke Wroblewski

35. Aesthetics and...
Affect
quot;the experience of feeling or emotionquot;

36. Aesthetics and...
Affect
quot;the experience of feeling or emotionquot;

37. “Emotion is one of the strongest differentiators
in user experience namely because it triggers
unconscious responses to a product, website,
environment or interface. Our feelings strongly
influence our perceptions and often frame
how we think about or refer to our experiences
at a later date.”
-Frank Spillers
http://experiencedynamics.blogs.com/site_search_usability/2004/08/design_and_emot.html

38. Efficient
Easy to Use
Enjoyable

39. Efficient
+
Easy to Use
=
Enjoyable
?

40. Efficient
Easy to Use
Enjoyable

41. Efficient
Easy to Use
Enjoyable

42. Perception.

43. Load time is five seconds.
Which of these pre-loaders makes this
‘seem’ like a faster load time?

44. Load time is five seconds.
Which of these pre-loaders makes this
‘seem’ like a faster load time?
is in
peed
S
e of
e Ey
th er.
hold
e Be
th

45. Which will seem to take longer?
(a) Waiting in a 20 minute line
-or-
(b) Waiting in 5 different lines,
each lasting about 5 minutes

46. Which will seem to take longer?
(a) Waiting in a 20 minute line
-or-
(b) Waiting in 5 different lines,
each lasting about 5 minutes
es longer but that is
“...something that tak
superior to something
perceived to be efficient is
ut perceived differently.”
that is shorter b
-Don Norman

47. Personality.
http://www.affectivedesign.org/ http://iasummit.org/2006/conferencedescrip.htm#88

48. see the smile?

49. Which window is friendlier?

50. Which window is friendlier? Why?

51. http://www.affectivedesign.org/
http://iasummit.org/2006/conferencedescrip.htm#88

52. Why should we care about personality?
People identify with (or avoid) certain personalities
Trust is related to personality
Perception and expectations are linked with personality
Consumers ‘choose’ products that are an extension of
themselves
We treat sufficiently advanced technology as people
...and so on

53. Why did Sony make their robot a puppy?

54. Trust.

55. What’s the most frequently cited factor for
evaluating the credibility of a Web site?

56. What’s the most frequently cited factor for
evaluating the credibility of a Web site?

57. Trust?

58. Trust?

61. Can you spot the differences?

62. Trust + Personality + Perception. . .
presented at CHI 2007,
“According to research
ancy of identical search
users judge the relev
arch engines based on
results from different se
d Google coming out
e brand, with Yahoo an
th
the study indicated
on top… Participants in
Google and Yahoo were
that the results from
ical results found through
superior to ident
eneric search engine.”
Windows Live or a g

64. Why did the more attractive (but otherwise
identical) ATM Machine perform better?

65. “Attractive
things work
better.”

66. “Product design that provides aesthetic appeal, pleasure and
satisfaction can greatly influence the success of a product.
Traditional cognitive approaches to product usability have tended to
underestimate or fragment emotion from an understanding of the
user experience. Affect, which is inexplicable linked to attitudes,
expectations and motivations, plays a significant role in the
cognition of product interaction, and therefore can be usefully
treated as a design aid. Emotion influences and mediates specific
aspects of interaction before, during and after the use of a product.
These affective states regularly impact how a user manipulates and
explores a user interface in order to support a desired cognitive
state.”
Products That
from “Emotion as a Cognitive Artifact and the Design Implications for
are Perceived As Pleasurable”

67. to Davidson (2003), the perception that affect and
cognition are independent, separate information
processing systems is flawed. New breakthroughs
in neuroscience using functional Magnetic
Resonance Imaging (fMRI) have validated the
assertions that cognition and emotion are a unified
process. Gray et. al (2002) found that emotion and
cognition ‘conjointly and equally contribute to the
control of thought and behavior’.

68. Affect
How I ‘think’
cannot be
separated from
how I ‘feel’
Cognition
Myth reality

69. If you care about function,
then you care about
cognition and affect.
And consequently, you
care about aesthetics.

70. “Look & Feel”
f u n c t io n

71. “Look & Feel”
X f u n c t io n
Not
ty is
Pret
ion!
rat
deco ion.
unct
is F
etty
Pr

72. “Attractive things work better.”

73. Aesthetics and...
Business Value
ROI. Easier Sales. Higher Margins.
Brand Equity. Market Differentiation.

74. “Is it worth the investment?”

75. “Good [enough] is the enemy of great.”
-Jim Collins

76. “Is it worth the investment?”
It’s not an option.

77. “Why not?”
Product Maturity.

78. “When technology delivers basic needs,
user experience dominates.”
-Don Norman

79. “When technology delivers basic needs,
user experience dominates.”
-Don Norman

80. SUBJECTIVE / QUALITATIVE
Focused on
Experiences
(People, Activities, Context)
Meaningful
Has personal significance
Pleasurable
Memorable experience worth sharing
Convenient THIS IS THE “CHASM” THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Super easy to use, works like I think
Usable
Can be used without difficulty
Reliable
Is available and accurate
Functional (Useful)
Works as programmed
Focused on
Tasks
(Products, Features)
OBJECTIVE / QUANTIFIABLE
http://www.poetpainter.com/thoughts/article/presentation-notes-slides-for-creating-pleasurable-interfaces

81. gets
0% of the project
You know, 8
20% of the time. ...the remaining 20% takes
completed in
80 / 20
80% of the time.
This is commodity
This is where you
differentiate.

82. “Cars have been around for ages - since Ford’s little black number.
They all pretty much do the same thing and look similar. Four
wheels, seats, they go from point A to B. Why do people buy one
over the other? One word. Design.
Aesthetics and Car Design have been fused for many years. It’s what
defines a car, it’s what gives a car it’s personality and importantly for
the manufacturers, it’s what gives the car it’s competitive edge in the
market place.”
from “Aesthetic-Usability Effect”, Mark Boulton
http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

83. “Eye Candy is a Critical
Business Requirement”

84. hetics
Aest
“Eye Candy is a Critical
Business Requirement”

85. Thanks!

86. ME MY PERSONAL SITE
THE BEST WAY TO REACH ME