Design that’s easy
on the brain
Ryan Coleman
FITC Spotlight UX/UI
March 7, 2015
Lead Technology Experience Strategist
Employee Technology Experience @ BMO
TECHNOLOGY
EXPERIENCE
DESIGN
VISUAL THINKING
Me.
White
& Gold?
Black
& Blue?
We see what our brain shows us.
INTERNET
INTERNET
INTERNET
INTERNET INTERNET
INTERNET
INTERNET
INTERNET
INTERNET
INTERNET
>
Design that’s easy on the brain?
... the goal of information design must be to
design displays so that visual queries are
processed both rapidly and correc...
... the goal of information design must be to
design displays so that visual queries are
processed both rapidly and correc...
Design for visual efficiency.
How We See
Photo: VictoriaPeckham (Flickr)
Let’s Try Something…
Approximate size of what’s in
focus at any given time.
Represents
about 5% of our
visual field…
Represents
about 5% of our
visual field…
… but uses HALF
of our visual
processing
power.
incurable_hippie (flickr)
incurable_hippie (flickr)
Photo: VictoriaPeckham (Flickr)
We ‘see’ through visual queries
Discovery
WHAT
Attention
WHERE
Discovery
WHAT
Processing
Visuals
Watch carefully…
?
?
?
Problem
Solving
Eye
Movements
Pattern
Testing
Based on illustration by Colin Ware, Visual Thinking for Design
We’re capable of rapidly
accessing complex patterns
We’re capable of rapidly
accessing complex patterns
but to comprehend them we
need to process them deeper.
Discovery
WHAT
Attention
WHERE
Attention
WHERE
Visual
Searching
Based on illustration by Colin Ware, Visual Thinking for Design
Pattern
Testing
Eye
Movement
Move and
Scan
Features
Pattern
Processing
Objects
Colour
Orientation
Shape
Motion
Neurons are
tuned for
specific features
“Face”
Terminator 2 (1991)
Features
Pattern
Processing
Objects
Visual Working
Memory
Visual Working
Memory
Visual Working
Memory
Scott McCloud
Understanding Comics
Photo: Gaetan Lee, Clip_Works, BaylorBear78, Chidorian, (Flickr)
Source: http://www.opticalillusion.net/
Over time, higher level
patterns are combined.
EYE FACE TIGER
Photo: thetruthabout, wootang01, dno1967, sylvar (Flickr)
Oliver
Face
Kid
Person
Visual Efficiency
=
Visual Efficiency
=
Reducing Visual Searches
Cognitive Effort
vs.
“At-a-Glance”
Where’s Waldo
Example
(Cognitively Difficult)
Great. Now what?
Make your designs POP.
Colour
Orientation
Shape
Motion
Neurons are
tuned for
specific features
Colour Proximity
MotionShape
4 Pop-out
Channels
Colour Proximity
MotionShape
4 Pop-out
Channels
Colour
HUE LIGHTNESS
Colour
HUE LIGHTNESS
Photo: Woodlywonderworks (Flickr)
Photo: Woodlywonderworks (Flickr)
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 ...
Ensure highest
contrast goes to the
emphasized elements
Ensure highest
contrast goes to the
emphasized elements
Colour Proximity
MotionShape
4 Pop-out
Channels
Shape
SIZEORIENTATION DISTORTION
Colour Proximity
MotionShape
4 Pop-out
Channels
Proximity
SPATIAL GROUPING
SPATIAL GROUPING
Proximity
SPATIAL GROUPING
Proximity
Colour Proximity
MotionShape
4 Pop-out
Channels
Motion
Some advice:
Don’t Cross
the Streams!
Ghostbusters (1984)
Don’t be
subtle.
Avoid visual interference.
Word
Word
Word
Word
Word
Word
Image: Pink Sherbet Photography (Flickr)
Word
Word
Word
Avoid multi-chunk queries.
0
1
2
3
4
5
6
Series 1
Series 2
Series 3
Series 4
Series 5
0
1
2
3
4
5
6
Series 1
Series 2
Series 3
Series 4
Series 5
Only show what you need to.
Dogs Cats Birds Horses
Percent of households owning 37.20% 32.40% 3.90% 1.80%
Number of households owning 43,021,000 37,46...
Dogs Cats Birds Horses
Percent of households owning 37.20% 32.40% 3.90% 1.80%
Number of households owning 43,021,000 37,46...
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....
0
5
10
15
20
25
30
35
40
Dogs Cats Birds Horses
U.S. Pet Ownership
%ofHousesOwning
0
5
10
15
20
25
30
35
40
Dogs Cats Birds Horses
U.S. Pet Ownership
%ofHousesOwning
0
5
10
15
20
25
30
35
40
Dogs
% of U.S. Houses With Dogs
37%of American homes
have a dog.
Photo: Digital_image_fan (Flickr)
Visual search can
be primed / tuned.
Be consistent!
Don’t trust YOUR eyes.
Photo: ndanger (Flickr)
In Summary:
Consider your
user’s visual
queries…
… design to satisfy
those queries as
efficiently as
possible.
Colour
Orientation
Shape
Motion
Use features
wisely to
Make it Pop!
Further Reading
Thank you.
http://ryancoleman.ca
@ryancoleman
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Design that’s easy on the brain
Upcoming SlideShare
Loading in …5
×

Design that’s easy on the brain

1,084 views

Published on

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.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,084
On SlideShare
0
From Embeds
0
Number of Embeds
98
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design that’s easy on the brain

  1. 1. Design that’s easy on the brain Ryan Coleman FITC Spotlight UX/UI March 7, 2015
  2. 2. Lead Technology Experience Strategist Employee Technology Experience @ BMO
  3. 3. TECHNOLOGY EXPERIENCE DESIGN VISUAL THINKING Me.
  4. 4. White & Gold? Black & Blue?
  5. 5. We see what our brain shows us.
  6. 6. INTERNET INTERNET INTERNET INTERNET INTERNET INTERNET INTERNET INTERNET INTERNET INTERNET
  7. 7. >
  8. 8. Design that’s easy on the brain?
  9. 9. ... 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
  10. 10. ... 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
  11. 11. Design for visual efficiency.
  12. 12. How We See
  13. 13. Photo: VictoriaPeckham (Flickr)
  14. 14. Let’s Try Something…
  15. 15. Approximate size of what’s in focus at any given time.
  16. 16. Represents about 5% of our visual field…
  17. 17. Represents about 5% of our visual field… … but uses HALF of our visual processing power.
  18. 18. incurable_hippie (flickr)
  19. 19. incurable_hippie (flickr)
  20. 20. Photo: VictoriaPeckham (Flickr)
  21. 21. We ‘see’ through visual queries
  22. 22. Discovery WHAT Attention WHERE
  23. 23. Discovery WHAT Processing Visuals
  24. 24. Watch carefully…
  25. 25. ?
  26. 26. ?
  27. 27. ?
  28. 28. Problem Solving Eye Movements Pattern Testing Based on illustration by Colin Ware, Visual Thinking for Design
  29. 29. We’re capable of rapidly accessing complex patterns
  30. 30. We’re capable of rapidly accessing complex patterns but to comprehend them we need to process them deeper.
  31. 31. Discovery WHAT Attention WHERE
  32. 32. Attention WHERE Visual Searching
  33. 33. Based on illustration by Colin Ware, Visual Thinking for Design Pattern Testing Eye Movement Move and Scan
  34. 34. Features Pattern Processing Objects
  35. 35. Colour Orientation Shape Motion Neurons are tuned for specific features
  36. 36. “Face”
  37. 37. Terminator 2 (1991)
  38. 38. Features Pattern Processing Objects
  39. 39. Visual Working Memory
  40. 40. Visual Working Memory
  41. 41. Visual Working Memory
  42. 42. Scott McCloud Understanding Comics
  43. 43. Photo: Gaetan Lee, Clip_Works, BaylorBear78, Chidorian, (Flickr)
  44. 44. Source: http://www.opticalillusion.net/
  45. 45. Over time, higher level patterns are combined.
  46. 46. EYE FACE TIGER
  47. 47. Photo: thetruthabout, wootang01, dno1967, sylvar (Flickr)
  48. 48. Oliver Face Kid Person
  49. 49. Visual Efficiency =
  50. 50. Visual Efficiency = Reducing Visual Searches
  51. 51. Cognitive Effort vs. “At-a-Glance”
  52. 52. Where’s Waldo Example (Cognitively Difficult)
  53. 53. Great. Now what?
  54. 54. Make your designs POP.
  55. 55. Colour Orientation Shape Motion Neurons are tuned for specific features
  56. 56. Colour Proximity MotionShape 4 Pop-out Channels
  57. 57. Colour Proximity MotionShape 4 Pop-out Channels
  58. 58. Colour HUE LIGHTNESS
  59. 59. Colour HUE LIGHTNESS
  60. 60. Photo: Woodlywonderworks (Flickr)
  61. 61. Photo: Woodlywonderworks (Flickr)
  62. 62. 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
  63. 63. Ensure highest contrast goes to the emphasized elements
  64. 64. Ensure highest contrast goes to the emphasized elements
  65. 65. Colour Proximity MotionShape 4 Pop-out Channels
  66. 66. Shape SIZEORIENTATION DISTORTION
  67. 67. Colour Proximity MotionShape 4 Pop-out Channels
  68. 68. Proximity SPATIAL GROUPING
  69. 69. SPATIAL GROUPING Proximity
  70. 70. SPATIAL GROUPING Proximity
  71. 71. Colour Proximity MotionShape 4 Pop-out Channels
  72. 72. Motion
  73. 73. Some advice:
  74. 74. Don’t Cross the Streams! Ghostbusters (1984)
  75. 75. Don’t be subtle.
  76. 76. Avoid visual interference.
  77. 77. Word Word Word Word Word Word Image: Pink Sherbet Photography (Flickr) Word Word Word
  78. 78. Avoid multi-chunk queries.
  79. 79. 0 1 2 3 4 5 6 Series 1 Series 2 Series 3 Series 4 Series 5
  80. 80. 0 1 2 3 4 5 6 Series 1 Series 2 Series 3 Series 4 Series 5
  81. 81. Only show what you need to.
  82. 82. 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
  83. 83. 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
  84. 84. 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
  85. 85. 0 5 10 15 20 25 30 35 40 Dogs Cats Birds Horses U.S. Pet Ownership %ofHousesOwning
  86. 86. 0 5 10 15 20 25 30 35 40 Dogs Cats Birds Horses U.S. Pet Ownership %ofHousesOwning
  87. 87. 0 5 10 15 20 25 30 35 40 Dogs % of U.S. Houses With Dogs
  88. 88. 37%of American homes have a dog. Photo: Digital_image_fan (Flickr)
  89. 89. Visual search can be primed / tuned. Be consistent!
  90. 90. Don’t trust YOUR eyes. Photo: ndanger (Flickr)
  91. 91. In Summary:
  92. 92. Consider your user’s visual queries…
  93. 93. … design to satisfy those queries as efficiently as possible.
  94. 94. Colour Orientation Shape Motion Use features wisely to Make it Pop!
  95. 95. Further Reading
  96. 96. Thank you. http://ryancoleman.ca @ryancoleman

×