SlideShare a Scribd company logo
Illustrating the point
How to use images as
effective communication tools
Cordelia McGee-Tubb
Web Accessibility Lead, Dropbox
Master of Comics
@cordeliadillon
Comics School, Day 1:
Comics are about
relationships.
image & image
image & image image & text
image & image image & text image & culture
I believe...
Websites are comics.
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)
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)
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
Additive
Duo-specific
Additive
Duo-specific
Word-
specific
Additive
Why are images
so important in
web design?
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
Control visual pacing and breaks
“Celebrating half a billion users,” Dropbox blog
Reduce visual clutter
Dropbox.com shared folder
Help visual learners
dropbox.com/business/tour
Reinforce messages conveyed in text
dropbox.com/help
Illustrate complex topics
“Improving the Responsiveness of the Document Detector,” Dropbox Tech Blog
Convey tone and personality
dropbox.com/about
A picture’s worth a
thousand words.
A picture’s worth a
thousand words.
Are they the same thousand
words for every viewer?
Personal experience
Memory, age, education, gender, race, cognition, vision
Personal experience
Memory, age, education, gender, race, cognition, vision
Regional variations
Language, idioms, humor, customs
Personal experience
Memory, age, education, gender, race, cognition, vision
Regional variations
Language, idioms, humor, customs
Visual conventions
Well-known iconography
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
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
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
A very scientific diagram
A very scientific diagram
A very scientific diagram
Everyone has a
different context.
Image meaning gets muddled
when we make too many
assumptions about users.
Icons
● Convey state or action
● Designed to have clear, intentional purpose
● Audiences don’t always understand them
Ambiguity and frustration
Ambiguity and frustration
● Especially confusing for new or elderly users
Ambiguity and frustration
● Especially confusing for new or elderly users
● Don’t want to click on something you don’t understand
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
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?
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?
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)
Dropbox file list actions
Dropbox file list actions
Dropbox file list actions
Dropbox file list actions
Gmail message actions
Gmail message actions
Gmail message actions
Gmail message actions
Gmail message actions
Stickers and emoji
● Use images to convey information,
reactions, and emotions in a more playful
and engaging way
● Flexible expression
● Highly subjective
US English:
Hang-loose hand sign
For other languages:
“Stay cool” hand sign
Backup definitions:
Dinosaur hang-loose hand sign
Dinosaur shaka gesture
Areas of ambiguity
● A new layer of context: user-generated content
Areas of ambiguity
● A new layer of context: user-generated content
Areas of ambiguity
● A new layer of context: user-generated content
Areas of ambiguity
● A new layer of context: user-generated content
● Many potential text-to-image relationships
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?
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?
Images from http://emojipedia.org/
“How do blind people interpret emojis?” Ouch: Disability Talk
Providing clarity and flexibility
● When designing new expressive symbols, consider:
○ Subtleties of facial expression
○ Regional variations
○ Color contrast
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
Twitter
“Decorative” images
● Great visual separators
● Amplify surrounding content
● Set mood or tone
● Potentially inviting or distancing
Am I represented?
“7 Things Every Designer Needs to Know about Accessibility,” Jesse Hausler (author), Cordelia (illustrator)
Websites and comics:
relationships between images,
words, and cultural context.
Page and panel layouts
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)
Remember your
audience’s varied
experiences.
Don’t assume context.
.
Do provide context.
(words & other page elements)
Thanks!
@cordeliadillon

More Related Content

Similar to Illustrating the Point: Images as effective communication tools

Sports and Leisure Activities Vocabulary - Spanish - 4th grade by Slidesgo.pptx
Sports and Leisure Activities Vocabulary - Spanish - 4th grade by Slidesgo.pptxSports and Leisure Activities Vocabulary - Spanish - 4th grade by Slidesgo.pptx
Sports and Leisure Activities Vocabulary - Spanish - 4th grade by Slidesgo.pptx
HernanEzequielGarrit
 
Viewing Skill
Viewing SkillViewing Skill
famous-people-in-history-social-studies-pre-k.pptx
famous-people-in-history-social-studies-pre-k.pptxfamous-people-in-history-social-studies-pre-k.pptx
famous-people-in-history-social-studies-pre-k.pptx
thevdiya451
 
Maulycya Problem-Solution Essay.pptx
Maulycya Problem-Solution Essay.pptxMaulycya Problem-Solution Essay.pptx
Maulycya Problem-Solution Essay.pptx
MaulycyaSierlyUllulA
 
Vocab and 21st Century Skills
Vocab and 21st Century SkillsVocab and 21st Century Skills
Vocab and 21st Century Skills
Pam Krambeck
 
Intuitive images: tips and techniques for creating and evaluating graphics in...
Intuitive images: tips and techniques for creating and evaluating graphics in...Intuitive images: tips and techniques for creating and evaluating graphics in...
Intuitive images: tips and techniques for creating and evaluating graphics in...
TCUK
 
The Conceptual Age
The Conceptual AgeThe Conceptual Age
The Conceptual Age
Dodge City Public Schools
 
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptxFood and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
UNED - Universidad Nacional de Educación a Distancia
 
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptxFood and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
Rominaaez
 
visual literacy
visual literacyvisual literacy
visual literacy
joeri Neri
 
Global Citizenship and Social Responsibility - Spanish - 9th Grade by Slidesg...
Global Citizenship and Social Responsibility - Spanish - 9th Grade by Slidesg...Global Citizenship and Social Responsibility - Spanish - 9th Grade by Slidesg...
Global Citizenship and Social Responsibility - Spanish - 9th Grade by Slidesg...
AlexArgueta12
 
Visual literacy
Visual literacyVisual literacy
Visual literacy
Kshema Jose
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
Tania Schlatter
 
PAI unit
PAI unitPAI unit
PAI unit
nuncajamasazul
 
Digital graphics evaluation pro forma
Digital graphics evaluation pro formaDigital graphics evaluation pro forma
Digital graphics evaluation pro forma
GeorginaWhitelock
 
Creating Digital Learners Using Web2.0 Technology
Creating Digital Learners Using Web2.0 TechnologyCreating Digital Learners Using Web2.0 Technology
Creating Digital Learners Using Web2.0 Technology
sharris
 
ontribute to 'the Meaning of a Text.pptx
ontribute to 'the Meaning of a Text.pptxontribute to 'the Meaning of a Text.pptx
ontribute to 'the Meaning of a Text.pptx
LAWRENCEJEREMYBRIONE
 
How Language affects your thoughts
How Language affects your thoughtsHow Language affects your thoughts
How Language affects your thoughts
AlizaZeeshan
 
Idm unit i ppt (deleted 38112ace3a82cbb8fba22044606fd8dc)
Idm  unit i ppt (deleted 38112ace3a82cbb8fba22044606fd8dc)Idm  unit i ppt (deleted 38112ace3a82cbb8fba22044606fd8dc)
Idm unit i ppt (deleted 38112ace3a82cbb8fba22044606fd8dc)
sgonza61
 
Using iPads to Make Thinking Visible
Using iPads to Make Thinking VisibleUsing iPads to Make Thinking Visible
Using iPads to Make Thinking Visible
Diana Beabout
 

Similar to Illustrating the Point: Images as effective communication tools (20)

Sports and Leisure Activities Vocabulary - Spanish - 4th grade by Slidesgo.pptx
Sports and Leisure Activities Vocabulary - Spanish - 4th grade by Slidesgo.pptxSports and Leisure Activities Vocabulary - Spanish - 4th grade by Slidesgo.pptx
Sports and Leisure Activities Vocabulary - Spanish - 4th grade by Slidesgo.pptx
 
Viewing Skill
Viewing SkillViewing Skill
Viewing Skill
 
famous-people-in-history-social-studies-pre-k.pptx
famous-people-in-history-social-studies-pre-k.pptxfamous-people-in-history-social-studies-pre-k.pptx
famous-people-in-history-social-studies-pre-k.pptx
 
Maulycya Problem-Solution Essay.pptx
Maulycya Problem-Solution Essay.pptxMaulycya Problem-Solution Essay.pptx
Maulycya Problem-Solution Essay.pptx
 
Vocab and 21st Century Skills
Vocab and 21st Century SkillsVocab and 21st Century Skills
Vocab and 21st Century Skills
 
Intuitive images: tips and techniques for creating and evaluating graphics in...
Intuitive images: tips and techniques for creating and evaluating graphics in...Intuitive images: tips and techniques for creating and evaluating graphics in...
Intuitive images: tips and techniques for creating and evaluating graphics in...
 
The Conceptual Age
The Conceptual AgeThe Conceptual Age
The Conceptual Age
 
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptxFood and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
 
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptxFood and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
Food and Drink Vocabulary - Spanish - 1st grade by Slidesgo.pptx
 
visual literacy
visual literacyvisual literacy
visual literacy
 
Global Citizenship and Social Responsibility - Spanish - 9th Grade by Slidesg...
Global Citizenship and Social Responsibility - Spanish - 9th Grade by Slidesg...Global Citizenship and Social Responsibility - Spanish - 9th Grade by Slidesg...
Global Citizenship and Social Responsibility - Spanish - 9th Grade by Slidesg...
 
Visual literacy
Visual literacyVisual literacy
Visual literacy
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
 
PAI unit
PAI unitPAI unit
PAI unit
 
Digital graphics evaluation pro forma
Digital graphics evaluation pro formaDigital graphics evaluation pro forma
Digital graphics evaluation pro forma
 
Creating Digital Learners Using Web2.0 Technology
Creating Digital Learners Using Web2.0 TechnologyCreating Digital Learners Using Web2.0 Technology
Creating Digital Learners Using Web2.0 Technology
 
ontribute to 'the Meaning of a Text.pptx
ontribute to 'the Meaning of a Text.pptxontribute to 'the Meaning of a Text.pptx
ontribute to 'the Meaning of a Text.pptx
 
How Language affects your thoughts
How Language affects your thoughtsHow Language affects your thoughts
How Language affects your thoughts
 
Idm unit i ppt (deleted 38112ace3a82cbb8fba22044606fd8dc)
Idm  unit i ppt (deleted 38112ace3a82cbb8fba22044606fd8dc)Idm  unit i ppt (deleted 38112ace3a82cbb8fba22044606fd8dc)
Idm unit i ppt (deleted 38112ace3a82cbb8fba22044606fd8dc)
 
Using iPads to Make Thinking Visible
Using iPads to Make Thinking VisibleUsing iPads to Make Thinking Visible
Using iPads to Make Thinking Visible
 

Recently uploaded

Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
Intelisync
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 

Recently uploaded (20)

Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 

Illustrating the Point: Images as effective communication tools

Editor's Notes

  1. Hey folks, today I’ll be talking about “Illustrating the point” -- “How to use images as effective communication tools”
  2. 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.
  3. 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:
  4. (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.
  5. (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?”
  6. (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 ….
  7. I believe websites are comics. Both are narratives built out of text, images, and cultural context.
  8. 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.
  9. 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.
  10. 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.
  11. Of these seven, I think four are most relevant to what we’ll be discussing today… Word-specific Duo-specific Additive Interdependent
  12. (read them out) Let’s look at some examples...
  13. Going back to Dropbox’s website, you may be able to see, there’s a “Learn more” link below “Take your docs anywhere.”
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. Using Dropbox.com as an example, let’s look at some ways images help web design...
  19. 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.
  20. 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)
  21. Images help visual learners. For example, product screenshots.
  22. Images reinforce messages conveyed in text. On Dropbox’s help website, each help category has a corresponding illustration, to visually reiterate the category.
  23. 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.
  24. 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.
  25. 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.
  26. 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...
  27. “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?
  28. Everyone approaches images with a different context. I like to frame these in terms of 4 categories...
  29. 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?
  30. 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.
  31. 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.
  32. 4) System context: Within each user interface, the product creators have designed their own visual vocabulary, their own associations
  33. 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.
  34. … 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.
  35. 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...
  36. … and figure out what concept the image is meant to represent.
  37. … or not.
  38. 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.
  39. 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.
  40. 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.
  41. 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.
  42. 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?
  43. 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.
  44. Other page content -- for example, consider the floppy disk example
  45. Returning to the Dropbox file list...
  46. On hover and focus, we show a high contrast tooltip for each icon. Here, the rainbow folder icon has tooltip “Share a folder…”
  47. 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.
  48. 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.
  49. 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.
  50. 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...
  51. In Gmail settings, you can actually toggle how you whether you want button labels to display as icons or as text.
  52. 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.
  53. 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.
  54. 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?”
  55. 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).
  56. 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.
  57. 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.”
  58. 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.
  59. 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.
  60. 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.
  61. 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.
  62. 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)
  63. 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.
  64. 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.
  65. 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.
  66. 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?
  67. 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.
  68. 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.
  69. Let’s recap...
  70. 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.
  71. For example, Facebook’s globe icon changes its orientation depending on where you are located in the world.
  72. Remember: Personal experience Regional variations Visual conventions System context
  73. Make it vibrant! Use images wisely to engage your audience.