Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design that’s easy on the brain

1,418 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
  • Be the first to comment

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

×