Design that’s easy on the brain with Ryan Coleman Presented on March 07 2015 at FITC's Spotlight UX/UI More info at www.fitc.ca It’s one thing to make design that’s easy on the eyes – but how about designs that are easy on the brain? How we see the world is incredibly complex – very little of the world is in focus at any one time, and our brain is required to do a lot of the heavy lifting to let us see what we see. Have you ever wondered why certain colours work together better than others? how irritating it is when two things aren’t perfectly aligned? or why yours eye goes straight to that flashing icon in the bottom of the screen? To take in the vast amount of information our eyes provide to our brain it’s had to come up with some quick shortcuts that let it make sense of what we’re seeing – In this session we’ll dive into those shortcuts and examine how we can improve our designs by using them to our advantage. OBJECTIVE Help design professionals understand the way we process what we see in the world and how designing to appeal to our base visual processes can result in better overall designs. TARGET AUDIENCE Anyone responsible for creating visuals, documents or images that other people will look at FIVE THINGS AUDIENCE MEMBERS WILL LEARN A deeper understanding of how we process the world around us The difference between what we see and how we see How to train your viewers brain to understand your designs more efficiently Easy to remember rules for creating brain pleasing designs Why Waldo is so damn hard to find.

1. Design that’s easy
on the brain
Ryan Coleman
FITC Spotlight UX/UI
March 7, 2015

2. Lead Technology Experience Strategist
Employee Technology Experience @ BMO

3. TECHNOLOGY
EXPERIENCE
DESIGN
VISUAL THINKING
Me.

4. White
& Gold?
Black
& Blue?

5. We see what our brain shows us.

7. INTERNET
INTERNET
INTERNET
INTERNET INTERNET
INTERNET
INTERNET
INTERNET
INTERNET
INTERNET

9. >

12. Design that’s easy on the brain?

13. ... the goal of information design must be to
design displays so that visual queries are
processed both rapidly and correctly for
every important cognitive task the display is
intended to support.
Colin Ware
Visual Thinking for Design

14. ... the goal of information design must be to
design displays so that visual queries are
processed both rapidly and correctly for
every important cognitive task the display is
intended to support.
Colin Ware
Visual Thinking for Design

15. Design for visual efficiency.

16. How We See

17. Photo: VictoriaPeckham (Flickr)

18. Let’s Try Something…

20. Approximate size of what’s in
focus at any given time.

21. Represents
about 5% of our
visual field…

22. Represents
about 5% of our
visual field…
… but uses HALF
of our visual
processing
power.

24. incurable_hippie (flickr)

25. incurable_hippie (flickr)

26. Photo: VictoriaPeckham (Flickr)

27. We ‘see’ through visual queries

28. Discovery
WHAT
Attention
WHERE

29. Discovery
WHAT
Processing
Visuals

30. Watch carefully…

32. ?

34. ?

36. ?

38. Problem
Solving
Eye
Movements
Pattern
Testing
Based on illustration by Colin Ware, Visual Thinking for Design

39. We’re capable of rapidly
accessing complex patterns

40. We’re capable of rapidly
accessing complex patterns
but to comprehend them we
need to process them deeper.

41. Discovery
WHAT
Attention
WHERE

42. Attention
WHERE
Visual
Searching

44. Based on illustration by Colin Ware, Visual Thinking for Design
Pattern
Testing
Eye
Movement
Move and
Scan

45. Features
Pattern
Processing
Objects

46. Colour
Orientation
Shape
Motion
Neurons are
tuned for
specific features

52. “Face”

54. Terminator 2 (1991)

55. Features
Pattern
Processing
Objects

56. Visual Working
Memory

57. Visual Working
Memory

58. Visual Working
Memory

59. Scott McCloud
Understanding Comics

60. Photo: Gaetan Lee, Clip_Works, BaylorBear78, Chidorian, (Flickr)

61. Source: http://www.opticalillusion.net/

62. Over time, higher level
patterns are combined.

63. EYE FACE TIGER

64. Photo: thetruthabout, wootang01, dno1967, sylvar (Flickr)

65. Oliver
Face
Kid
Person

67. Visual Efficiency
=

68. Visual Efficiency
=
Reducing Visual Searches

69. Cognitive Effort
vs.
“At-a-Glance”

70. Where’s Waldo
Example
(Cognitively Difficult)

72. Great. Now what?

73. Make your designs POP.

74. Colour
Orientation
Shape
Motion
Neurons are
tuned for
specific features

75. Colour Proximity
MotionShape
4 Pop-out
Channels

76. Colour Proximity
MotionShape
4 Pop-out
Channels

77. Colour
HUE LIGHTNESS

78. Colour
HUE LIGHTNESS

79. Photo: Woodlywonderworks (Flickr)

80. Photo: Woodlywonderworks (Flickr)

83. A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Luminance Contrast

84. Ensure highest
contrast goes to the
emphasized elements

85. Ensure highest
contrast goes to the
emphasized elements

86. Colour Proximity
MotionShape
4 Pop-out
Channels

87. Shape
SIZEORIENTATION DISTORTION

88. Colour Proximity
MotionShape
4 Pop-out
Channels

89. Proximity
SPATIAL GROUPING

90. SPATIAL GROUPING
Proximity

91. SPATIAL GROUPING
Proximity

92. Colour Proximity
MotionShape
4 Pop-out
Channels

93. Motion

94. Some advice:

95. Don’t Cross
the Streams!
Ghostbusters (1984)

97. Don’t be
subtle.

98. Avoid visual interference.

99. Word
Word
Word
Word
Word
Word
Image: Pink Sherbet Photography (Flickr)
Word
Word
Word

100. Avoid multi-chunk queries.

101. 0
1
2
3
4
5
6
Series 1
Series 2
Series 3
Series 4
Series 5

102. 0
1
2
3
4
5
6
Series 1
Series 2
Series 3
Series 4
Series 5

103. Only show what you need to.

104. Dogs Cats Birds Horses
Percent of households owning 37.20% 32.40% 3.90% 1.80%
Number of households owning 43,021,000 37,460,000 4,453,000 2,087,000
Average number owned per
household
1.7 2.2 2.5 3.5
Total number in United States 72,114,000 81,721,000
11,199,00
0
7,295,000
Veterinary visits per household
per year (mean)
2.6 1.7 0.3 2.2
Veterinary expenditure per
household per year (mean)
$356 $190 $25 $360
Veterinary expenditure per
animal (mean)
$200 $81 $9 $92
U.S. Pet Ownership
Source: American Veterinary Medical Association

105. Dogs Cats Birds Horses
Percent of households owning 37.20% 32.40% 3.90% 1.80%
Number of households owning 43,021,000 37,460,000 4,453,000 2,087,000
Average number owned per
household
1.7 2.2 2.5 3.5
Total number in United States 72,114,000 81,721,000
11,199,00
0
7,295,000
Veterinary visits per household
per year (mean)
2.6 1.7 0.3 2.2
Veterinary expenditure per
household per year (mean)
$356 $190 $25 $360
Veterinary expenditure per
animal (mean)
$200 $81 $9 $92
U.S. Pet Ownership
Source: American Veterinary Medical Association

106. 0
5
10
15
20
25
30
35
40
Dogs Cats Birds Horses
Dogs Cats Birds Horses
Percent of households owning 37.20% 32.40% 3.90% 1.80%
Number of households owning 43,021,000 37,460,000 4,453,000 2,087,000
Average number owned per
household
1.7 2.2 2.5 3.5
Total number in United States 72,114,000 81,721,000
11,199,00
0
7,295,000
Veterinary visits per household
per year (mean)
2.6 1.7 0.3 2.2
Veterinary expenditure per
household per year (mean)
$356 $190 $25 $360
Veterinary expenditure per
animal (mean)
$200 $81 $9 $92
U.S. Pet Ownership
(2007)
%ofHousesOwning

107. 0
5
10
15
20
25
30
35
40
Dogs Cats Birds Horses
U.S. Pet Ownership
%ofHousesOwning

108. 0
5
10
15
20
25
30
35
40
Dogs Cats Birds Horses
U.S. Pet Ownership
%ofHousesOwning

109. 0
5
10
15
20
25
30
35
40
Dogs
% of U.S. Houses With Dogs

110. 37%of American homes
have a dog.
Photo: Digital_image_fan (Flickr)

111. Visual search can
be primed / tuned.
Be consistent!

112. Don’t trust YOUR eyes.
Photo: ndanger (Flickr)

113. In Summary:

114. Consider your
user’s visual
queries…

115. … design to satisfy
those queries as
efficiently as
possible.

116. Colour
Orientation
Shape
Motion
Use features
wisely to
Make it Pop!

117. Further Reading

118. Thank you.
http://ryancoleman.ca
@ryancoleman