Article

Designing Visuals That Teach And Not Just Tell

17 may 2025

Mark Gibson

,

UK

Health Communication Specialist

The last article looked at what visual literacy is and why it is critical in healthcare settings. From Patient Information Leaflets to symptom trackers and diaries, visual communication can empower users or confuse them, depending on their level of visual understanding.

In this article, we ask the question: if visual literacy varies so widely amongst users, how can the design process take this into account? Is it possible to design for visual literacy?

This would require a shift in mindset. Instead of designers assuming that visuals are instantly understood, they should treat them and develop them as teachable elements, i.e. components of an emerging visual, a new-old way of processing information, that users can learn, build fluency in and trust.

This article highlights six pointers for design strategies to make visuals in health communication more intuitive, learnable and inclusive. Visuals should not just be clear for some. They need to be useful for all.

1.       One Icon = One Concept

Designers should start with the golden rule, that each icon should communicate a single idea clearly. This principle is often violated in health design, where designers try to ‘save space’ or be efficient or clever by embedding multiple meanings into one visual. It is possible to see this in visuals used in medical device IFUs, or dashboards in medical apps, Patient Information Leaflets, and so on, such as:

·       A single icon that tries to blend taking a tablet orally, with water and after a meal and arrows showing the direction that the tablets should go down the throat (Is there any other way?)

·       An icon used in a health app that is supposed to denote ‘health overview’ that is composed of a pie chart (for data), a heart (for cardiovascular health) and a figure of a person jogging (for physical activity).

The result of both of these is an icon that is heavy on the process, increases cognitive load and can be interpreted in multiple ways.

2.       Be Consistent with Uses of Icons Across Contexts

People become visually literate through exposure and repetition. If we want users to understand an icon, it must:

·       Be used in multiple settings.

·       Keep its meaning and style consistent whenever it is used.

·       Reinforce its association with real-world actions.

If 💊means ‘medication’, then do not also use it to mean ‘side effect’ elsewhere. Icons need to be dedicated to one role. Thus, the same icon for time, e.g. 🕒 should be used in all instances where time is meant to be depicted, such as in forms, posters, reminders, diary entries. Similarly, the same symbol for ‘healthcare provider’, e.g. a stethoscope should be the same in all documents. Consistency is how users build up visual fluency over time.

3.        Use Labels with Visuals.

Icons are not expected to work alone. In fact, when an icon is first introduced, it should not be a stand-alone item. It should be paired with a text label. This can serve to confirm meaning, to act as a tooltip to teach, i.e. learning the symbol’s definition and it removes ambiguity and any scope for false assumptions.

For example:

  • 💧 With Water

  • ⚠️ Do Not Use If… / Warning…

When the communication is digital, the label can be interactive. It can reveal itself by hovering or tapping on it or a ‘what does this icon mean?’ feature. Then, over time, the label could be phased out. With personalised digital communication, this could be the choice of the user to retain the labels or not to see them again.

4.       Sequences of Icons?

Just like with text messaging currently, icons in health communication could eventually be sequenced together to form visual instructions. If this is the case, then it is not just a matter of haphazardly joining up a bunch of icons together: there needs to be a logical order. Otherwise, without rules – like a grammar – users may misinterpret the message if the sequence follows no logical order. Spacing, arrows and framing could take on meaning in the same way as prepositions, verb tenses and conjunctions have in human language. It could become a visual mimic of sentence grammar.

Sequencing rules could be as follows:

  • Time ➝ Action ➝ Object
    🕒 ➝ 💊 ➝ 🍽️ = Take medicine before eating

  • Conditional / Hypothetical ➝ Action ➝ Escalation
    🤕 ➝ 💊 ➝ ☎️👩‍⚕️ = If pain, take medicine and call doctor

  • Negation ➝ Symbol
    🚫 ➝ 🛏️ = Do not lie down

4.       Design for Interpretation, Not Aesthetics

Many icons are the way they are because they look pretty, without much thought about how they are interpreted. This is normally assumed by the designers. Formative and summative testing is vital in the iterative design of visuals because they are focused on testing:

·       What users think each icon means.

·       How accurately they can act on the meaning.

·       Whether diverse groups interpret the same icon differently.

Testing could take the form of a hybrid of cognitive debriefing, comprehension testing and cultural validation techniques.

5.       The Interface Should Teach Visual Literacy

In digital tools, whether it is a health app or an eCOA, the interface can be the classroom. Designers could build learning into the experience in the following ways:

·       Onboarding: users are walked through icons on first use, with explanations

·       Progression: All the visuals should not be introduced at once. New ones could be introduced as and when required.

·       Gamification: designers could use repetition, recognition rewards and visual ‘challenges’.

·       Personalisation: Icon complexity could be adjusted according to user behaviour and comprehension.


6.       Design for the Learner.

Apps and interfaces are often designed for the ideal user, the confident, visually literate person who is at ease with technology. This may not be the typical user. Visuals should be designed with the following in mind:

·       The needs of older users. This means simpler shapes and larger icons could be considered.

·       For low-literacy users, visual sequences might be more useful than abstract text.

·       Multilingual users: icons need to be tested across a range of languages and cultures.

·       Neurodiverse users: do not overload visuals or make designs that are metaphor heavy.


Every Icon Is a Lesson

Visuals are more than a decoration. They are instructions, warnings and education. Visuals should be teachable elements, where designers build visual literacy over time. This would elevate users from hesitating and guessing to knowing and using with confidence. This would make patient experiences that are not only easier, but safer and more equitable.

Thank you for reading,


Mark Gibson

Leeds, United Kingdom, April 2025

Originally written in

English