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.

Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Professional Needs to Know

1,014 views

Published on

Presented by Adam Moorman & Stacy Robison, MPH, on March 12, 2015 at the fifth Center for Health Literacy Conference: Plain Talk in Complex Times.

Published in: Design
  • Be the first to comment

Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Professional Needs to Know

  1. 1.   Stacy Robison, MPH, MCHES   Adam Moorman Designing Health Information What every health professional needs to know
  2. 2. Agenda  Introduction  Key universal design principles  Designing health information: 10 Tips
  3. 3. Warm Up
  4. 4. We want health information that’s: Useful Usable Attractive
  5. 5. Case Study: Florida 2000 Election
  6. 6. Source: More Carrot 2012
  7. 7. Source: More Carrot 2012
  8. 8. Source: http://arts.bev.net/roperldavid/politics/fl2000.htm
  9. 9. Results   Over 3 times more votes for Reform Party than next-highest Florida county   Over 19,000 ballots disqualified for double votes   Election decided by 537 votes Source: More Carrot 2012
  10. 10. If information design can influence the outcome of a presidential election… Just imagine the impact it can have on our health.
  11. 11.  Chew pill and crush before swallowing.  Chew it up so it will dissolve, don’t swallow whole or you might choke. Davis et al., J Gen Intern Med. 2006 August; 21(8): 847–851.
  12. 12.  Use extreme caution in how you take it.  Medicine will make you feel dizzy.  Take only if you need it. Davis et al., J Gen Intern Med. 2006 August; 21(8): 847–851.
  13. 13.  Don’t take the medicine if you’ve been in the sunlight too long.  Don’t leave medicine in the sun. Davis et al., J Gen Intern Med. 2006 August; 21(8): 847–851.
  14. 14. We can do better
  15. 15. Neighbor Nudge Share one tip that has worked for you in designing health information or patient education materials.
  16. 16. Design for your readers ①  Understand your readers ②  Think about what you want them to know or do ③  Use good visual communication
  17. 17. Understand Your Readers
  18. 18. How Readers Read   Readers are selective about what they read   Readers read to accomplish their own goals   Readers interpret as they read
  19. 19. What do you want your readers to know or do? (Organize your content accordingly)
  20. 20. Almost all writing is intended to change behavior.
  21. 21.          I  want    _______       to  __________  .  
  22. 22. Iden&fy  your  main  message(s).     Ideally no more than 3   Decide what is a main message and what is supporting content   Put your main messages first
  23. 23.     Use the inverted pyramid. Main Message Supporting Info Background
  24. 24.     Nielson Norman Group Typical F Pattern
  25. 25. Use good visual communication
  26. 26. What is Visual Communication? The art of arranging and delivering (visual) content to your readers.
  27. 27. Information Design   Ability to take information and data and communicate it in a way that is clear and facilitates good decision making Health Literacy:   Capacity to obtain, process, and understand health information and services needed to make appropriate health decisions
  28. 28. Design is more than aesthetics It can help people:  Find what they need  Understand what they find  Remember what they read
  29. 29.    Guess what: It doesn’t have to be a brochure!
  30. 30. The Information Blanket
  31. 31. Rule29
  32. 32. What color is your pen?
  33. 33. Hand me the pen!   No hesitation putting marks on a blank page   Believe in pictures as a problem-solving tool   Enjoy visual metaphors and analogies   Show confidence in drawing simple images to summarize their ideas Black Pen
  34. 34. I can’t draw, but…   A.K.A. “highlighters” – good at identifying the most important parts of what others have drawn   Happy to watch others working at whiteboard   More verbal, incorporate words and labels, make comparisons Yellow Pen
  35. 35. I’m not visual   Think of themselves as quantitatively oriented   Quite often have the most detailed grasp of the problem at hand   Once images have been captured, they will move to the board… and redraw everything, often coming up with the clearest picture Red Pen
  36. 36. The Takeaway Regardless of your visual thinking confidence or the color of your pen, everybody already has good visual thinking skills, and everybody can easily improve those skills.
  37. 37. We are hard-wired We process pre-cognitive visuals long before we know we’re processing them
  38. 38. So… The more pre-cognitive cues in a picture, the quicker we can process it, saving “high level” mental capacity for deeper analytic processing. (like reading and interpreting)
  39. 39. Visual Cues Visual difference is intuitive. Conceptual difference is learned.
  40. 40.     Visual = intuitive
  41. 41.    Conceptual = learned
  42. 42. Gestalt Principles
  43. 43. Gestalt Principles  Psychology of visual perception  Our perception of form depends not just on seeing individual parts but on the organization of the whole
  44. 44. Organize text Show relationships to create meaning  Contrast  Grouping
  45. 45. Contrast  Separating figure from background
  46. 46. Grouping 1.  Objects close to each other are related 2.  Objects similar in size, shape, color are related
  47. 47. Using Grouping Who should get the flu shot? Everyone age 6 months or older. When should I get the flu shot? As soon as possible, typically in the fall. Are there side effects? Soreness or redness where the shot was given.
  48. 48. Using Grouping Who should get the flu shot? Everyone age 6 months or older. When should I get the flu shot? As soon as possible, typically in the fall. Are there side effects? Soreness or redness where the shot was given.
  49. 49. Combine Grouping AND Contrast Who should get the flu shot? Everyone age 6 months or older. When should I get the flu shot? As soon as possible, typically in the fall. Are there side effects? Soreness or redness where the shot was given.
  50. 50. What else is intuitive?   Relative Size – we recognize difference with zero effort
  51. 51. Source: More Carrot 2012 Other cues: Alignment
  52. 52. Four Squares
  53. 53. The 10 Tips
  54. 54.         Create an obvious path for the eye to follow1
  55. 55. Create  an  obvious  path  for  the  eye     Start Move on
  56. 56.         Create a visual hierarchy2
  57. 57. You read this first. And now you’re reading this. Since you probably skipped this, I’m guessing your eyes jumped here third.
  58. 58.     The Title A Sub-Heading Some body text
  59. 59. The function of a header   Facilitate scanning   Get people interested   Separate sections of text   Help give an overview of what’s on the page
  60. 60.         Use a grid to keep content and images aligned for web and print 3
  61. 61. Image sources: Grid Systems in Graphic Design by Josef Müller-Brockmann, and eyelearn.org
  62. 62. Image source: 960.gs
  63. 63. A few notes on grids  Left justify for better readability  Keep column width between 40-50 characters  Utilize gutters and generous padding to give content room to breathe
  64. 64.             Incorporate white space4 5 Use lists
  65. 65. Use white space wisely.   Break up sections of text to avoid “walls”   Include generous padding around images   Don’t overload the canvas just to fill space Remember: Leave more white space above a header than below
  66. 66. The  Basics     Make your content look easy-to-read   Actionable health content written in plain language will still look overwhelming without good use of whitespace.   Break content up into smaller chunks.
  67. 67. Skipping vs. Scanning People tend to skip over content with:   Dense “walls” of text   Long sentences   Long words   Paragraphs with more than three lines
  68. 68. What is a chunk? Here is your header §  Point 1 §  Point 2 §  Point 3 §  Point 4 Here is your header No more than three lines of text. No more than three lines of text. No more than three lines of text. No more than three lines of text.
  69. 69. Use  short,  simple  sentences.            
  70. 70. Use  lists  and  short  paragraphs.  
  71. 71.         Use conceptual cues6
  72. 72.    Stoplight
  73. 73. Steven Leckart, Wired Magazine November 29, 2010
  74. 74. Steven Leckart, Wired Magazine November 29, 2010
  75. 75.         Use images to facilitate understanding7
  76. 76.      ?  ?  ?  
  77. 77. Place  visuals  in  context  
  78. 78.         Use icons or images to call out important content 8
  79. 79. Image source: apple.com/mac
  80. 80.         Consider sans-serif fonts 9
  81. 81. A quote from Allan Haley “Not all typefaces are designed to be legible. Many are drawn to create a typographic statement, or provide a particular spirit or feeling to graphic communication… To the degree that a typeface has personality, spirit, or distinction, however, it often suffers proportionally on the legibility scale.”
  82. 82. Font Categories  This  is  Calibri,  a  sans-­‐serif  font    This is Times, a serif font
  83. 83. Standard OS Fonts Arial Comic Sans Courier New Georgia Helvetica Tahoma Times New Roman Trebuchet MS Verdana
  84. 84. Text vs. Display Typefaces   Text Typefaces §  Designed to be legible and readable across a variety of sizes   Display Typefaces §  Designed to attract attention and pull the reader into the text §  It can be more elaborate, expressive, and have a stylish look.
  85. 85.     Please, use display typefaces responsibly.
  86. 86. Other considerations for font selection
  87. 87. The physical make-up of a font. Source: I.D.E.A.S. Computer Typography Basics, David Creamer, 2003
  88. 88. Letter Width   Avoid overly wide or condensed fonts
  89. 89. Counter   Look for fonts with adequate counter space
  90. 90. Do everyone a favor and avoid:
  91. 91. The best font choices are ones where readers do not notice the font, but the message. Source: urbanfonts.com
  92. 92.         Increase overall font size and spacing10
  93. 93. Font Size (web) 16-­‐20  px   12px  ✗ ✓ The Need Excessive exposure to ultraviolet radiation (UVR) from sunlight is both the primary and the most easily prevented cause of skin cancer. Total lifetime exposure to UVR is positively associated with several types of skin cancer, including basal cell carcinoma, squamous cell carcinoma, and possibly melanoma. Intermittent and sever exposure (i.e., sunburning) may also be linked to the development of melanoma. The Need Excessive exposure to ultraviolet radiation (UVR) from sunlight is both the primary and the most easily prevented cause of skin cancer. Total lifetime exposure to UVR is positively associated with several types of skin cancer, including basal cell carcinoma, squamous cell carcinoma, and possibly melanoma. Intermittent and sever exposure (i.e., sunburning) may also be linked to the development of melanoma.
  94. 94. Be mindful of Line Spacing (Leading)   The vertical space between baselines Palatino 9/9 Because type size and line spacing are both measured in points and are inseparable, their sizes are normally written together. They are commonly written in this manner: 10/12, pronounced “ten over twelve.” This indicates that the type size is ten points and the line spacing is 12 points, or has two extra points of space over the type size. Palatino 9/11 Because type size and line spacing are both measured in points and are inseparable, their sizes are normally written together. They are commonly written in this manner: 10/12, pronounced “ten over twelve.” This indicates that the type size is ten points and the line spacing is 12 points, or has two extra points of space over the type size. Palatino 9/10 Because type size and line spacing are both measured in points and are inseparable, their sizes are normally written together. They are commonly written in this manner: 10/12, pronounced “ten over twelve.” This indicates that the type size is ten points and the line spacing is 12 points, or has two extra points of space over the type size. Palatino 9/12 Because type size and line spacing are both measured in points and are inseparable, their sizes are normally written together. They are commonly written in this manner: 10/12, pronounced “ten over twelve.” This indicates that the type size is ten points and the line spacing is 12 points, or has two extra points of space over the type size.
  95. 95. Character and word spacing   Tracking adjusts the visual density of a line of copy   Kerning is the adjustment between two individual letters   These allow horizontal copy manipulation without affecting the integrity of the font
  96. 96. -25 Tracking The adjustment of word spacing is called Tracking. It is similar to kerning but refers to the adjustment of an entire selection of characters, words, and spaces. Its main purpose is to make type fit a required space without altering the type size or line spacing. Tracking can be either negative, making the words closer together; or positive, making the words farther apart. +5 Tracking The adjustment of word spacing is called Tracking. It is similar to kerning but refers to the adjustment of an entire selection of characters, words, and spaces. Its main purpose is to make type fit a required space without altering the type size or line spacing. Tracking can be either negative, making the words closer together; or positive, making the words farther apart. +10 Tracking The adjustment of word spacing is called Tracking. It is similar to kerning but refers to the adjustment of an entire selection of characters, words, and spaces. Its main purpose is to make type fit a required space without altering the type size or line spacing. Tracking can be either negative, making the words closer together; or positive, making the words farther apart.
  97. 97. Image source: https://www.fontfont.com/glossary
  98. 98. Practice
  99. 99. To sum it all up: Keep it simple
  100. 100. Think “Clean”  Clean design supports visual thinking  Reduces the effort needed to find information
  101. 101. Questions?

×