Infographics and Motion Grammar

1. First principle: visualize relationships, not decoration

An infographic should make a relationship easier to perceive than speech or text alone.

INFOGRAPHIC
= question
+ data/concepts
+ relationship
+ visual encoding
+ hierarchy
+ annotation
+ source/uncertainty
+ temporal behavior
+ accessibility alternative
+ narrative placement

Before choosing a chart or animation, name the information task.

2. Information-task taxonomy

IDENTIFY — what is this?
LOCATE — where is it?
QUANTIFY — how much?
COMPARE — how do values differ?
RANK — what is the order?
COMPOSE — what are the parts of a whole?
DISTRIBUTE — how are values spread?
CORRELATE — what varies together?
CHANGE_OVER_TIME — how does it move?
FLOW — what moves between states/places?
SEQUENCE — what happens in what order?
HIERARCHY — what contains or governs what?
NETWORK — what is connected to what?
CAUSE — what produces what?
PROCESS — how does it work?
STATE_CHANGE — what changed from before to after?
UNCERTAINTY — how confident are we?
EXPLAIN_SPATIAL — how is it arranged?
EXPLAIN_MECHANISM — how do parts interact?

3. Visual-encoding grammar

Available channels:

position
length
angle
area
volume
shape
orientation
color hue
color value/lightness
saturation
texture
pattern
connection
containment
proximity
motion
speed
direction
opacity
focus/depth
sound

Prefer more accurately perceived channels for precise comparison:

position/length before angle/area/volume

Do not encode the same critical distinction solely with color.

4. Graphic object vocabulary

TEXT
NUMBER
LABEL
ICON
PICTOGRAM
PHOTO
VIDEO_WINDOW
SHAPE
LINE
ARROW
CONNECTOR
AXIS
TICK
GRID
BAR
POINT
AREA
BAND
NODE
EDGE
CONTAINER
CARD
CALLOUT
HIGHLIGHT
MASK
MAP
TIMELINE
FLOW
DIAGRAM
LEGEND
SOURCE_NOTE
UNCERTAINTY_MARK

Every object should have a data or explanatory binding.

5. Chart-selection grammar

6. Non-data explanatory graphics

DEFINITION_CARD
ENTITY_CARD
LOWER_THIRD
QUOTE_CARD
KEY_TAKEAWAY
STEP_LIST
PROCESS_DIAGRAM
CAUSAL_DIAGRAM
SYSTEM_MAP
BEFORE_AFTER
ANNOTATED_DOCUMENT
ANNOTATED_SCREEN
TIMELINE
MAP
FAMILY_OR_RELATIONSHIP_TREE
DECISION_TREE
MATRIX
SPECTRUM
LAYER_STACK
EXPLODED_VIEW
CUTAWAY_DIAGRAM
COMPARISON_TABLE
COUNTER
PROGRESS_INDICATOR

7. Narrative-placement grammar

Placement modes:

FULL_SCREEN
SIDE_PANEL
LOWER_THIRD
OVERLAY
PICTURE_IN_PICTURE
SCREEN_REPLACEMENT
WORLD_TRACKED
OBJECT_TRACKED
BACKGROUND_LAYER
FOREGROUND_LAYER
INTERSTITIAL_CARD
PAUSE_AND_EXPLAIN

Selection rules:

IF the graphic is required to understand the mechanism
THEN give it sufficient screen area and time; do not force it into a decorative corner.

IF the speaker’s performance remains primary
THEN use a subordinate overlay or brief full-screen insert with audio continuity.

IF the graphic is documentary evidence
THEN show source identity, relevant date/scope, and legible detail.

IF the graphic introduces a new model
THEN orient the whole before animating individual parts.

8. Graphic hierarchy

PRIMARY — answer or most important relation
SECONDARY — dimensions needed to interpret it
TERTIARY — labels, sources, caveats, controls

Hierarchy dimensions:

size
position
contrast
weight
motion order
isolation
repetition
voiceover synchronization

Do not animate all hierarchy levels simultaneously.

9. Motion grammar

A motion graphic has phases:

PREPARE
ENTER
ORIENT
BUILD
EMPHASIZE
COMPARE_OR_TRANSFORM
HOLD
EXIT

Motion object:

property_changed
start_value
end_value
duration
delay
easing
path
velocity
acceleration
stagger
parent/child relation
trigger
semantic purpose

Motion purposes:

direct attention
show sequence
show cause/effect
show transformation
preserve object constancy
connect scenes
compress process
reveal hierarchy
indicate uncertainty
provide feedback

10. Object-constancy rules

IF one concept becomes another state
THEN transform or move the same visual object when possible.

IF two objects are compared
THEN keep scale and encoding consistent.

IF an item changes category
THEN animate its movement between containers rather than replacing it without explanation.

IF an object disappears because it is filtered
THEN show the filtering operation or label the new scope.

11. Voice-to-graphic synchronization

Synchronization modes:

LEAD — graphic prepares before words
ALIGN — graphic appears with named concept
FOLLOW — graphic confirms after verbal explanation
COUNTERPOINT — graphic adds a different but compatible layer

Rules:

IF the viewer must read exact text
THEN reduce concurrent speech complexity.

IF narration names a number
THEN reveal the correct visual unit at that phrase, not the entire dense chart at once.

IF the graphic contradicts or qualifies speech
THEN make the relationship explicit rather than leaving accidental conflict.

12. Infographic timing dimensions

reading speed target
number of novel terms
label count
visual complexity
animation duration
hold duration
narration duration
screen size
platform
viewer control

A graphic remains on screen until its required task can be completed, not merely until the animation ends.

13. Data and claim integrity

Every data graphic stores:

title/question
data source
retrieval/publication date
population
sample
units
time range
geography
transformations
normalization
missing values
uncertainty
comparison baseline
annotation source

Rules:

Never truncate or transform an axis without making the relevant scale legible.
Never use area or volume when the data is encoded only linearly unless the mapping is intentional and labeled.
Never imply causation from correlation alone.
Never compare totals when rates or population normalization are required.
Never animate values through fabricated intermediate states without indicating interpolation.

14. Uncertainty grammar

confidence interval
credible interval
range
error bar
probability
scenario band
unknown category
missing-data marker
source disagreement
quality grade
provisional label

Uncertainty can be encoded with:

bands
interval lines
multiple scenarios
opacity only with redundant labels
texture
explicit language
source cards

Do not use blur as the only uncertainty indicator; it can be confused with depth or decoration.

15. Maps and spatial graphics

Map dimensions:

projection
extent
scale
basemap detail
geographic unit
normalization
symbol type
route direction
uncertainty
privacy precision
time layer

Rules:

IF exact personal location creates risk
THEN aggregate, jitter, generalize, or omit coordinates.

IF comparing regions of different population
THEN consider per-capita/rate normalization.

IF movement is central
THEN show direction and time, not only endpoints.

16. Typography grammar for motion

role: title | label | annotation | data | quote | source | caption
size hierarchy
line length
alignment
case
weight
contrast
entry behavior
hold behavior
exit behavior

Kinetic type operations:

REVEAL_BY_WORD
REVEAL_BY_PHRASE
HIGHLIGHT_TERM
REPLACE_TERM
SCALE_EMPHASIS
TRACKING_CHANGE
PATH_FOLLOW
MASK_REVEAL
TYPE_ON
COUNT_UP

Do not animate body text character-by-character when reading continuity is important.

17. Accessibility grammar

color distinction has redundant cue
minimum legibility threshold by output
captions do not collide with graphics
graphic text has spoken or textual alternative
motion can be reduced where interactive
flashing is constrained
reading order is explicit
source notes remain legible

For essential visual information, provide narration, captions, transcript description, or an extended description.

18. Brand and visual-system dimensions

type tokens
spacing tokens
shape tokens
stroke tokens
corner tokens
icon grammar
color roles
chart palette
motion durations
easing families
transition motifs
texture
logo usage
source-note format

Brand consistency is a constraint; information truth and accessibility are harder constraints.

19. LAKA infographic variations

Baseline

same chart/task; refine labels, hierarchy, and timing

Minor

alternate annotation, entry order, or emphasis

Major

change chart family or full-screen/overlay treatment

Structural

single chart becomes progressive explanatory sequence or interactive exploration

Paradigm

data chart becomes physical metaphor, spatial simulation, or audience-controlled model

20. Infographic failure modes

DECORATION_WITHOUT_TASK
WRONG_CHART_FOR_RELATION
VISUAL_AREA_DISTORTION
UNLABELED_UNITS
MISSING_BASELINE
SOURCE_TOO_SMALL
TOO_MUCH_AT_ONCE
VOICE_TEXT_COMPETITION
COLOR_ONLY_ENCODING
MOTION_WITHOUT_INFORMATION
OBJECT_CONSTANCY_FAILURE
FALSE_CAUSAL_ARROW
UNCERTAINTY_ERASURE
CAPTION_COLLISION
PLATFORM_CROP_FAILURE

21. Acceptance test

What question does the graphic answer?
What relationship is encoded?
Why is this encoding more legible than speech or text alone?
Are scale, units, source, scope, and uncertainty visible?
Does motion explain rather than decorate?
Can the viewer complete the task before the graphic exits?
Is essential meaning available without color and without vision?
Does it fit all required aspect ratios and caption zones?