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.

1

Share

Illustrating the Point: Images as effective communication tools

Presented at Funka Accessibility Days, 2017

Related Books

Free with a 30 day trial from Scribd

See all

Illustrating the Point: Images as effective communication tools

  1. 1. Illustrating the point How to use images as effective communication tools
  2. 2. Cordelia McGee-Tubb Web Accessibility Lead, Dropbox Master of Comics @cordeliadillon
  3. 3. Comics School, Day 1: Comics are about relationships.
  4. 4. image & image
  5. 5. image & image image & text
  6. 6. image & image image & text image & culture
  7. 7. I believe... Websites are comics.
  8. 8. Scott McCloud’s word-picture combinations 1. Word-specific 2. Picture-specific 3. Duo-specific 4. Additive 5. Interdependent 6. Parallel 7. Montage Understanding Comics, Scott McCloud (1993)
  9. 9. Scott McCloud’s word-picture combinations 1. Word-specific 2. Picture-specific 3. Duo-specific 4. Additive 5. Interdependent 6. Parallel 7. Montage Understanding Comics, Scott McCloud (1993)
  10. 10. Word-specific Words carry complete message, image illustrates some of it Duo-specific Words and image both convey same message Additive Words elaborate on image, or vice versa Interdependent Words and image combine to convey a meaning neither could convey alone
  11. 11. Additive
  12. 12. Duo-specific Additive
  13. 13. Duo-specific Word- specific Additive
  14. 14. Why are images so important in web design?
  15. 15. Images make pages more dynamic. ● Control visual pacing and breaks ● Reduce clutter ● Help visual learners ● Reinforce messages conveyed in text ● Illustrate complex topics ● Convey tone and personality
  16. 16. Control visual pacing and breaks “Celebrating half a billion users,” Dropbox blog
  17. 17. Reduce visual clutter Dropbox.com shared folder
  18. 18. Help visual learners dropbox.com/business/tour
  19. 19. Reinforce messages conveyed in text dropbox.com/help
  20. 20. Illustrate complex topics “Improving the Responsiveness of the Document Detector,” Dropbox Tech Blog
  21. 21. Convey tone and personality dropbox.com/about
  22. 22. A picture’s worth a thousand words.
  23. 23. A picture’s worth a thousand words. Are they the same thousand words for every viewer?
  24. 24. Personal experience Memory, age, education, gender, race, cognition, vision
  25. 25. Personal experience Memory, age, education, gender, race, cognition, vision Regional variations Language, idioms, humor, customs
  26. 26. Personal experience Memory, age, education, gender, race, cognition, vision Regional variations Language, idioms, humor, customs Visual conventions Well-known iconography
  27. 27. Personal experience Memory, age, education, gender, race, cognition, vision Regional variations Language, idioms, humor, customs Visual conventions Well-known iconography System context Particular to this interface
  28. 28. Personal experience Memory, age, education, gender, race, cognition, vision Regional variations Language, idioms, humor, customs Visual conventions Well-known iconography System context Particular to this interface
  29. 29. Personal experience Memory, age, education, gender, race, cognition, vision Regional variations Language, idioms, humor, customs Visual conventions Well-known iconography System context Particular to this interface
  30. 30. A very scientific diagram
  31. 31. A very scientific diagram
  32. 32. A very scientific diagram
  33. 33. Everyone has a different context. Image meaning gets muddled when we make too many assumptions about users.
  34. 34. Icons ● Convey state or action ● Designed to have clear, intentional purpose ● Audiences don’t always understand them
  35. 35. Ambiguity and frustration
  36. 36. Ambiguity and frustration ● Especially confusing for new or elderly users
  37. 37. Ambiguity and frustration ● Especially confusing for new or elderly users ● Don’t want to click on something you don’t understand
  38. 38. Ambiguity and frustration ● Especially confusing for new or elderly users ● Don’t want to click on something you don’t understand ● Screen reader users have advantage when icons are properly coded, extreme disadvantage when not
  39. 39. Resolving icon ambiguity ● Get feedback from people outside your team. ○ What does this icon represent by itself? ○ Is the icon’s meaning clear in this interface?
  40. 40. Resolving icon ambiguity ● Get feedback from people outside your team. ○ What does this icon represent by itself? ○ Is the icon’s meaning clear in this interface?
  41. 41. Resolving icon ambiguity ● Build in more context: ○ Accessible name for assistive technology ○ Also try one of these: ■ text adjacent to icon (duo-specific, word-specific) ■ mouse & keyboard-accessible tooltip (duo-specific) ■ other page content (interdependent)
  42. 42. Dropbox file list actions
  43. 43. Dropbox file list actions
  44. 44. Dropbox file list actions
  45. 45. Dropbox file list actions
  46. 46. Gmail message actions
  47. 47. Gmail message actions
  48. 48. Gmail message actions
  49. 49. Gmail message actions
  50. 50. Gmail message actions
  51. 51. Stickers and emoji ● Use images to convey information, reactions, and emotions in a more playful and engaging way ● Flexible expression ● Highly subjective
  52. 52. US English: Hang-loose hand sign For other languages: “Stay cool” hand sign Backup definitions: Dinosaur hang-loose hand sign Dinosaur shaka gesture
  53. 53. Areas of ambiguity ● A new layer of context: user-generated content
  54. 54. Areas of ambiguity ● A new layer of context: user-generated content
  55. 55. Areas of ambiguity ● A new layer of context: user-generated content
  56. 56. Areas of ambiguity ● A new layer of context: user-generated content ● Many potential text-to-image relationships
  57. 57. Areas of ambiguity ● A new layer of context: user-generated content ● Many potential text-to-image relationships ● Do you try to encourage a single definition for an image?
  58. 58. Areas of ambiguity ● A new layer of context: user-generated content ● Many potential text-to-image relationships ● Do you try to encourage a single definition for an image? ● If not, what definition do you supply for screen reader users?
  59. 59. Images from http://emojipedia.org/
  60. 60. “How do blind people interpret emojis?” Ouch: Disability Talk
  61. 61. Providing clarity and flexibility ● When designing new expressive symbols, consider: ○ Subtleties of facial expression ○ Regional variations ○ Color contrast
  62. 62. Providing clarity and flexibility ● When designing new expressive symbols, consider: ○ Subtleties of facial expression ○ Regional variations ○ Color contrast ● When displaying these symbols, consider: ○ Text tooltips ○ Contextual translation
  63. 63. Twitter
  64. 64. “Decorative” images ● Great visual separators ● Amplify surrounding content ● Set mood or tone ● Potentially inviting or distancing
  65. 65. Am I represented?
  66. 66. “7 Things Every Designer Needs to Know about Accessibility,” Jesse Hausler (author), Cordelia (illustrator)
  67. 67. Websites and comics: relationships between images, words, and cultural context.
  68. 68. Page and panel layouts
  69. 69. Scott McCloud’s word-picture combinations 1. Word-specific 2. Picture-specific 3. Duo-specific 4. Additive 5. Interdependent 6. Parallel 7. Montage Understanding Comics, Scott McCloud (1993)
  70. 70. Remember your audience’s varied experiences.
  71. 71. Don’t assume context. .
  72. 72. Do provide context. (words & other page elements)
  73. 73. Thanks! @cordeliadillon
  • AlyonaZhuravleva

    Jul. 3, 2021

Presented at Funka Accessibility Days, 2017

Views

Total views

43

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×