Dual Coding
Verbal and nonverbal representations can create partly independent, connected memory codes that support later understanding and retrieval.
Direct explanation
What it means
Useful words and visuals explain the same concept through complementary structures. Repeating a paragraph as decorative text inside an image does not create meaningful dual coding.
Well-integrated diagrams, examples, and language can support learning and accessibility; redundant clutter can split attention instead.
Research anchor: Allan Paivio, 1986
Research and interpretation
What the research found
Dual-coding theory proposed interconnected verbal and nonverbal representational systems to explain imagery and memory findings.
A large multimedia-learning literature supports benefits of coordinated representations under many conditions, while theories and mechanisms continue to evolve.
Popular advice versus careful use
Common shorthand: Adding an image to text automatically doubles learning.
Coordinate representations that contribute different but compatible cues and remove media that adds no explanatory structure.
How designers apply it
- 01
Pair a process description with a labeled flow diagram.
- 02
Use chart shape plus a short narrative of the pattern.
- 03
Teach a gesture with animation, caption, and static steps.
Original UI examples
desktop education
Network lesson
A labeled topology diagram and short explanation describe the same packet path.
Learners connect spatial and verbal relationships without duplicate prose.
mobile travel
Transit disruption
A route map and text itinerary both show the closed segment and alternative.
Travelers can use either representation and cross-check them.
Dashboard explanation
Less effective
Put an unlabeled chart beside a paragraph discussing different metrics.
Better fit
Align labels, sequence, and emphasis so chart and text describe one claim.
Conflicting codes add confusion rather than support.
Limits and failure modes
Redundancy, split attention, prior knowledge, and material type can reverse benefits.
Common mistakes
- Treating any image-plus-text layout as dual coding.
- Embedding essential labels in an inaccessible image.
When it should not dominate
- When the visual adds no distinct structure.
- When synchronized media cannot be made accessible.
Responsible use
Accessibility
Provide alt text, transcripts, captions, data tables, and logical reading order; equivalent meaning matters more than identical presentation.
On mobile: Stack representations closely and prevent the visual from pushing its explanation far away.
Ethics and context
Use the principle to reduce unnecessary effort and improve comprehension. Validate the result with representative users rather than treating a general tendency as a universal instruction.
On desktop: Use side-by-side layouts only when reading and focus order remain clear at zoom.
Designer checklist
- Identify the distinct contribution of each representation.
- Align labels and sequence.
- Verify full meaning through each accessible route.
Check your understanding
Which statement applies Dual Coding most carefully?
Practice and continue learning
See ideas in real interfaces
These external interfaces are editorial references, not examples created to demonstrate this principle.
Sources and further reading
- 01Open source
Mental Representations: A Dual Coding Approach
Allan Paivio · 1986 · Oxford University Press
Book · primary or original source
- 02Open source
Why Are Pictures Easier to Recall Than Words?
Allan Paivio, T. B. Rogers, Padric C. Smythe · 1968 · Psychonomic Science
Primary research · primary or original source
Continue the graph
Related principles
effect
Picture-Superiority Effect
Pictures are often remembered better than comparable words when they are recognizable, relevant, and tested under suitable conditions.
theory
Levels of Processing
Memory often improves when encoding engages meaning and relationships rather than only surface appearance or sound.
principle
Encoding Specificity
Retrieval improves when available cues overlap with information and context encoded during learning.