Using images effectively as communication tools
•
1 like•92 views
Presented at Funka Accessibility Days, 2017
Recommended
Recommended
More Related Content
Similar to Using images effectively as communication tools
Similar to Using images effectively as communication tools (20)
Recently uploaded
Recently uploaded (20)
Using images effectively as communication tools
- 1. Illustrating the point How to use images as effective communication tools
- 2. Cordelia McGee-Tubb Web Accessibility Lead, Dropbox Master of Comics @cordeliadillon
- 3. Comics School, Day 1: Comics are about relationships.
- 5. image & image image & text
- 6. image & image image & text image & culture
- 7. I believe... Websites are comics.
- 10. 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)
- 11. 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)
- 12. 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
- 15. Additive
- 18. Why are images so important in web design?
- 19. 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
- 20. Control visual pacing and breaks “Celebrating half a billion users,” Dropbox blog
- 21. Reduce visual clutter Dropbox.com shared folder
- 23. Reinforce messages conveyed in text dropbox.com/help
- 24. Illustrate complex topics “Improving the Responsiveness of the Document Detector,” Dropbox Tech Blog
- 25. Convey tone and personality dropbox.com/about
- 27. A picture’s worth a thousand words.
- 28. A picture’s worth a thousand words. Are they the same thousand words for every viewer?
- 30. Personal experience Memory, age, education, gender, race, cognition, vision
- 31. Personal experience Memory, age, education, gender, race, cognition, vision Regional variations Language, idioms, humor, customs
- 32. Personal experience Memory, age, education, gender, race, cognition, vision Regional variations Language, idioms, humor, customs Visual conventions Well-known iconography
- 33. 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
- 34. 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
- 35. 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
- 36. A very scientific diagram
- 37. A very scientific diagram
- 38. A very scientific diagram
- 39. Everyone has a different context. Image meaning gets muddled when we make too many assumptions about users.
- 40. Icons ● Convey state or action ● Designed to have clear, intentional purpose ● Audiences don’t always understand them
- 42. Ambiguity and frustration ● Especially confusing for new or elderly users
- 43. Ambiguity and frustration ● Especially confusing for new or elderly users ● Don’t want to click on something you don’t understand
- 44. 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
- 45. 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?
- 46. 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?
- 47. 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)
- 48. Dropbox file list actions
- 49. Dropbox file list actions
- 50. Dropbox file list actions
- 51. Dropbox file list actions
- 57. Stickers and emoji ● Use images to convey information, reactions, and emotions in a more playful and engaging way ● Flexible expression ● Highly subjective
- 61. US English: Hang-loose hand sign For other languages: “Stay cool” hand sign Backup definitions: Dinosaur hang-loose hand sign Dinosaur shaka gesture
- 62. Areas of ambiguity ● A new layer of context: user-generated content
- 63. Areas of ambiguity ● A new layer of context: user-generated content
- 64. Areas of ambiguity ● A new layer of context: user-generated content
- 65. Areas of ambiguity ● A new layer of context: user-generated content ● Many potential text-to-image relationships
- 66. 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?
- 67. 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?
- 69. “How do blind people interpret emojis?” Ouch: Disability Talk
- 70. Providing clarity and flexibility ● When designing new expressive symbols, consider: ○ Subtleties of facial expression ○ Regional variations ○ Color contrast
- 71. 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
- 72. Twitter
- 73. “Decorative” images ● Great visual separators ● Amplify surrounding content ● Set mood or tone ● Potentially inviting or distancing
- 75. “7 Things Every Designer Needs to Know about Accessibility,” Jesse Hausler (author), Cordelia (illustrator)
- 77. Websites and comics: relationships between images, words, and cultural context.
- 78. Page and panel layouts
- 79. 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)
- 82. Do provide context. (words & other page elements)
Editor's Notes
- Hey folks, today I’ll be talking about “Illustrating the point” -- “How to use images as effective communication tools”
- Before we get started, a brief background on me: I’m Cordelia McGee-Tubb. If you’d like to be internet acquaintances or friends, I’m @cordeliadillon on Twitter and most everywhere else; that’s cordelia-d-i-l-l-o-n. On the screen here is an illustration of me waving at all you fine people. // By day, I lead web accessibility at Dropbox. By night, I am a Master of Comics. It seems very pretentious to call myself a “master” of anything, but I genuinely do have a Masters of Fine Arts in Comics. So it’s official. // I’m very much interested in the intersection between the fields of accessibility and comics, so today I wanted to talk about one way in which they overlap: visual communication.
- On our first day of comics grad school, the chair of our department told us that everything is a comic, and that the fundamental building blocks of a comic are relationships. He identified three key relationships in comics:
- (1) Relationships between image and image: For example, here I have a square illustrated panel of me clutching my stomach and looking down, potentially in pain. In the second panel, my head is thrust up smiling; I’m clutching my stomach from laughter.
- (2) Relationships between image and text: Here, I have a single panel of me raising one of my eyebrows skeptically as I ask, “Are you serious?”
- (3) Relationships between image and culture: Even in a single image, you can tell a story as long as the reader gets the reference. Here I am as the Mona Lisa! So why am I talking about comics at an accessibility conference? Well, I believe we can learn a lot about web design from comics because ….
- I believe websites are comics. Both are narratives built out of text, images, and cultural context.
- Consider Dropbox’s homepage, which features a combination of bold headers, product screenshots, and login / sign up form fields. There’s a visual relationship between the product screenshots and the product names written below them.
- As you scroll down the page, you can maybe start to see why I consider webpages comics. Below the heading “Dropbox works the way you do,” there are brief sections that highlight Dropbox features; an illustration accompanies each text blurb. For example, “Send videos quickly,” with a blurb about sharing videos with family, has an illustration of a laptop open next to a smartphone. An image of a koi fish is spread across both screens, conveying the concept of sharing videos. With each highlighted feature, the illustration swaps sides. These illustrations help guide the eye across the page, reinforce the message conveyed in the text, break up otherwise text-heavy content, and add some personality and whimsy to the UI. They weave together a story about the Dropbox experience.
- There are several different types of image & text combinations. In his book “Understanding Comics,” Scott McCloud outlines 7 different types of “word-picture” combinations used in comics panels.
- Of these seven, I think four are most relevant to what we’ll be discussing today… Word-specific Duo-specific Additive Interdependent
- (read them out) Let’s look at some examples...
- Going back to Dropbox’s website, you may be able to see, there’s a “Learn more” link below “Take your docs anywhere.”
- When you click the “Learn more” link, a section expands out with more information about ways to access your documents. On this page, there are several examples of Scott McCloud’s word-picture combinations.
- Additive: The text on this page reads out “Take your docs anywhere. Save files on your computer then access them on your phone from the road.” Next to this text, there’s an illustration of a van pulling a trailer that vaguely resembles a Microsoft Word document. Behind this van, there are mountains and a sunset. I’d call this an example of an additive text-to-image relationship; the text gives you all the information you need to know, but the image enhances this by adding a sense of adventure and freedom, by turning “take your docs anywhere” into a metaphor.
- Below this text, there’s an “x” icon next to the word “Close.” Clicking either of these things will close the expanded section. I’d call this an example of a duo-specific text to image relationship; the “x” and the “Close” convey the same exact thing, just in two different ways. If I were to add alt text for the “x” icon, it would be an empty string, since the image is redundant to the text next to it.
- Finally, there’s more specific information about saving files. This text blurb reads “Save any kind of file in Dropbox, from photos, videos, and music to Microsoft Office and Adobe files.” Above the text is a screenshot of Dropbox’s user interface showing a list of files of different file types. This is word-specific: The screenshot demonstrates what the text is already saying.
- Using Dropbox.com as an example, let’s look at some ways images help web design...
- Images control visual pacing and breaks. Here’s an infographic from a Dropbox blog post, with statistics about how many connections have been made between Dropbox users. Rather than putting this information in a text list or table, the statistics are floating, surrounded by drawings of user pictures connected to one another. These blobs slow down the reading order, potentially making the stats resonate more than if they were in a list.
- Images reduce visual clutter. In a shared folder, displaying user avatars instead of their full names to save space in the UI. (Full names appear on hover/focus)
- Images help visual learners. For example, product screenshots.
- Images reinforce messages conveyed in text. On Dropbox’s help website, each help category has a corresponding illustration, to visually reiterate the category.
- Images illustrate complex topics. On our Tech Blog, for example, we sometimes use diagrams to explain complex systems. Here’s a diagram showing timing of various photo-related events.
- And finally, my favorite: Images convey tone and personality. Here on the /about page, there’s an illustration of two people waving at you and smiling.
- So this brings us to the common saying in English, “A picture’s worth a thousand words.” To express this statement, I’ve got an illustration on this slide of a scale weighing a framed image of a robot against an unfolded letter of approximately two pages.
- When we think about this in the case of websites, where we’re trying to provide information or services to a diverse group of people, we have to ask ourselves...
- “Are they the same thousand words for every viewer?” And if not, is that okay? Is it okay for there to be ambiguity and different interpretations?
- Everyone approaches images with a different context. I like to frame these in terms of 4 categories...
- Personal experience: Everyone has a unique combination of experiences. Someone’s memories, age, education all influence what associations they make with certain imagery. Gender, race, the way we are perceived in the world affects how we perceive, too. Ability is also a large factor, especially vision -- can a person see images? If not, is there another way to understand their meaning?
- 2) Regional variations. Even in this room, there are people of all different nationalities and cultures. On the internet, there’s even more variety. Our languages, idioms, humor, and customs vary considerably across regions and ethnicities. An image could mean something completely different depending on the language the viewer grew up speaking. There’s a lot of overlap between personal experience and regional variations, as both are cultural contexts. They both tie into this relationship between image and culture.
- 3) Visual conventions: There’s certain iconography that has become fairly universal. Look at airport signage, for instance, which includes standard ways of communicating bathrooms, staircases, elevators, phones. These are visual vocabularies designed to resonate with as many people as possible.
- 4) System context: Within each user interface, the product creators have designed their own visual vocabulary, their own associations
- As an example, consider this image of a floppy disk. Someone with limited computer experience may not know what it is. Someone over the age of 30 who used computers before 2000 would draw upon personal experience and remember it as a piece of hardware for storing digital files. Someone younger than 30 may not have that personal experience, but will likely recognize this as the visual convention for “save” on computer interfaces.
- … though visual conventions suggests it’s a “Save” icon, if the floppy disk image is surrounded by a CD and a flash drive, system context would suggest it’s not a “Save” icon, but, perhaps, one item in a series of images of digital storage devices. This image-to-image relationship between cd, flash drive, and floppy disk gives the floppy disk a specific meaning.
- I drew a very scientific diagram to illustrate how this all works. // The floppy disk icon and its surrounding system context enter into a person’s vision, which leads to searching several filing cabinets in their brain for the relevant contexts...
- … and figure out what concept the image is meant to represent.
- … or not.
- What does each arrow do? Does the “x” close or delete? At the senior center where I work as a computer tutor, there is a lot of hesitation amongst older adults about what icon to press, especially when there are multiple arrows on the same screen which all have slightly different meanings. It can be very overwhelming and doesn’t inspire confidence.
- What does each arrow do? Does the “x” close or delete? At the senior center where I work as a computer tutor, there is a lot of hesitation amongst older adults about what icon to press, especially when there are multiple arrows on the same screen which all have slightly different meanings. It can be very overwhelming and doesn’t inspire confidence.
- What does each arrow do? Does the “x” close or delete? At the senior center where I work as a computer tutor, there is a lot of hesitation amongst older adults about what icon to press, especially when there are multiple arrows on the same screen which all have slightly different meanings. It can be very overwhelming and doesn’t inspire confidence.
- Sometimes I encounter icons on my iPhone that I don’t understand. Even as someone working on technology all day every day, I am confused by and wary of these icons because I don’t know what action will occur if I tap them. So I turn on my screenreader, VoiceOver, to find out what the icon represents. If it’s been coded well, I’ll find out what it is; if not, that’s a major issue for sight-impaired users who will have no clear way to figure out the meaning.
- Ask people outside your team for feedback. Chances are your team has been looking at your icons so long, they all make sense to you. What does this icon represent by itself? In the context of this interface, is its meaning clear?
- Example: Here are the 4 icons that appear at the top of one’s file list on dropbox.com. The first two are fairly straightforward, relying on conventions. A plus sign in front of a piece of paper suggests “Create/Add a document”; A plus sign in front of a folder suggests “Create/Add folder.” The third icon, a folder with a rainbow on it, is less clear. And then there’s a trash can icon.
- Other page content -- for example, consider the floppy disk example
- Returning to the Dropbox file list...
- On hover and focus, we show a high contrast tooltip for each icon. Here, the rainbow folder icon has tooltip “Share a folder…”
- And the trash can icon has “Show deleted files.” I bet many of you expected the trash can to represent “Delete,” not “Show deleted files.” The icon itself is so flat, one might not realize it was a trash can. Even so, there are ways to make this even more clear.
- We’re rolling out a new UI with a lot of visual changes, including this one to the file list actions. We have the same icons pretty much, but they now appear next to visual text. Rainbow folder “New share folder”; Plus sign folder, “New folder”; Trash can symbol, “Show deleted files.” This makes the actions crystal clear, and the text and images help reinforce each other.
- Gmail is also a great example of this. Here’s the menu bar that appears when you open an email. There are 6 icon buttons and 1 button that says “More”. Since these icons use a flat design, some could be confusing. Personally, I always forget what the second icon is; a box or an envelope with a down arrow inside it.
- Fortunately, Google has high-contrast tooltips available on hover and focus, so I can easily learn that icon means “Archive.” // But Google has an extra feature I quite like...
- In Gmail settings, you can actually toggle how you whether you want button labels to display as icons or as text.
- If I toggle to text, now every time I use Gmail, I see text buttons instead of icon buttons. Back, Archive, Spam, Delete, Move to, Labels, More.
- One of the great things about this is the element of configuration, choice, flexibility. This is an essential part of universal design, allowing user to interact with a UI in a way that feels most natural to them. Some users will prefer icons, perhaps dyslexic users who power users who like to have minimal amounts of distraction/clutter around them. Some users will, like me, prefer text for its clarity or searchability. While Google does make an assumption when it makes icons the default, they provide flexibility with the toggle.
- Let’s consider this example: I open up Paper, Dropbox’s collaborative document editor. I write this comment: “Do you think I need to change this slide?”
- My friend reads my comment and decides to reply with a sticker, rather than a typed message. They open up the Sticker menu and select the “Chillasaurus” sticker set (that’s the name of our chill dinosaur sticker set).
- Out of these options, they select the first one, which is an illustration of a hand with the thumb and pinky pointed outward, the three other fingers curved down. There are motion lines, as if the hand is moving slightly. So… // In Hawaii, this is known as the “shaka” hand gesture, meant as a friendly greeting and a large part of surfing culture. It’s expanded into other parts of the U.S.; in California, for instance, it’s known as the “hang loose” sign. “Cool.” // But in other cultures, this hand gesture looks like the sign for “call me.” // So I’ve asked my friend if they think I need to change this slide. They respond with this hand gesture -- does it mean “it’s cool”, “call me” (stern), or something else -- maybe it’s American Sign Language for “Y” and they mean “yes.” There’s even more ambiguity because it’s a hand gesture translated into an image. It’s ambiguous, but as designers we want to give users lots of options. // Cultural and regional context matters.
- I’ve been working with a team of writers at Dropbox to figure out the best way to label our stickers for users with vision impairments. It’s a tricky thing to do, as so many of these symbols mean different things to different people. We decided to use “Hang-loose hand sign” in the U.S., but use “Stay cool hand sign” for other languages. We also explored a few other variations, like “Dinosaur shaka gesture.”
- Stickers add an extra layer of context: user-generated content. With icons, there was just one layer of interaction: the app provide the icons, and the user interprets them.
- Stickers add an extra layer of context: user-generated content. With icons, there was just one layer of interaction: the app provide the icons, and the user interprets them.
- Now, the app provides an icon set, which the user now interprets and selects from. Their network then interprets the icons they’ve selected, taking on new meaning depending on the conversational context.
- Now, the app provides an icon set, which the user now interprets and selects from. Their network then interprets the icons they’ve selected, taking on new meaning depending on the conversational context.
- To add to this complexity, when it comes to emojis, every platform has a different set of illustrations. Here are 8 variations on a particular emoji, each one a little different. Each face has closed eyes and a slightly open or very open mouth. Most faces have a liquid droplet in the middle. Is it coming from the mouth or the nose? The emoji face in the bottom right corner looks like it’s smiling. Does anyone know what this emoji represents? // I always thought it was someone with a runny nose, but the snot droplet is actually a Japanese convention for conveying “sleepy” in manga and anime. In American comics, I’m used to seeing the z z z formation for sleeping, so only one emoji in this set conveys sleepiness effectively to me. (upper right corner)
- The culture around emoji communication is fascinating and I don’t have much time to get into it here. I’d highly recommend checking out the “How do blind people interpret emojis?” episode of Ouch: Disability Talk. It’s a 16 minute podcast where folks delve a little more into this topic.
- I think Twitter’s doing pretty well with this. In their custom emoji-picker, they have title-based tooltips to tell you what the formal definition of each icon is. Here it’s telling me this is, in fact, a “Sleepy face.” This doesn’t mean you have to use that definition, but it helps you realize the original intent of the icon. I also like that they include this title and an aria-label for emojis in published tweets, so if you’re never quite sure what an emoji is, you can quickly find out.
- A note about decorative images. I’ve put “decorative” in quotes because traditionally when we talk about decorative images on the web, we talk about them in terms of images that can safely be ignored by screen readers, or safely disappear in high-contrast mode. But I believe a lot of decorative images do, indirectly, carry meaning by strengthening surrounding context or by setting a mood or tone. Again, as in comics, this is about relationships.
- If you are going to include images of people - whether illustrated or photographed - consider the breadth of your audience. Will your audience be able to see themselves in these figures?
- You can aim for having a diversity of characters, as I tried to do here in my header image for Jesse Hausler’s blog post “7 Things Every Designer Needs to Know about Accessibility.” Still, when I look at this, I think that while there’s variety, there are so many folks who aren’t represented here.
- A technique used quite successfully in comics is to use simplified drawings of generic people without many identifiable features. Stick figures are fairly effective, as it’s easy for reader to focus on their actions and feelings, rather than on physical features. Readers can put themselves in the character’s shoes. “That’s me!” // Here’s an illustration from a recent webcomic I made. A person with very generic features, slightly plumper than a stick figure, closes their eyes, breathes in, and breathes out. The caption above it says “Take a deep breath.” Below it: “You can do this.” I think this resonated more with readers than if I had included an illustration of myself taking a deep breath. They’re able to project themselves onto the comic.
- Let’s recap...
- Varying the size and position of decorative images can help control the pacing and reading order of the page, in much the same way that comics panel layouts can control the pacing of comics pages. Try out variations to figure out the right balance between words and images.
- For example, Facebook’s globe icon changes its orientation depending on where you are located in the world.
- Remember: Personal experience Regional variations Visual conventions System context
- Make it vibrant! Use images wisely to engage your audience.