L
📕 Companion article · 3 of 5

Diagrams and microcopy

load-bearing pictures · six words at a decision · judged where they are read

Both of these are handed to an assistant constantly, and both fail in a way prose never does. Prose is read in sequence, so a fault shows up as you read. A diagram arrives all at once and microcopy arrives mid-decision, and neither can be judged in a document.

A diagram · read all at onceMicrocopy · read mid-decisionNeither · judged in a document
What you'll learn

What these two have in common

Neither is read the way you write it. That single fact produces every rule below, and it is why both of them survive a review and fail in use.

  • Say what the picture has to carry before asking for a picture.
  • Test a diagram by describing it — if you cannot, it carries nothing.
  • Write microcopy at the moment, not at the desk: what is the reader about to do?
  • Judge both in place, at the size and speed they are actually met.
Why it matters · where it's tested

Why these fail quietly

A bad paragraph is obvious to its writer and a decorative diagram is not, because it looks like an illustration and illustrations are allowed to be pleasant.

Companion to the 25-day courseBuilds on days 17, 18, 22For writers and instructional designers

People look for: AI diagram prompts, explanatory diagrams, interface microcopy, button labels, and accessible visuals.

See diagrams and microcopy work together

One test for a diagram and one for microcopy, and both are ten seconds. Everything else on this page follows from them.

Load-bearing, or decorative
The pictureCan you say what it carries?What to do
Four boxes with arrows between them Yes. The order, and which steps can happen at once Keep it. A paragraph would need the reader to hold four things at once
A two-by-two of two real decisions Yes — which combinations exist and which do not Keep it. This is the shape that a table cannot show and prose cannot either
A cycle with five stages Sometimes — if it really returns to the start Check. Most cycles in real documents are lines drawn in a circle
An icon beside each headingNo Decoration. Harmless until somebody has to write alt text for it
A photograph of people at a meetingNo Decoration, and it will take a caption, a credit and a description nobody needs
Microcopy, written at the moment

Six words beside a button are not a sentence in a document. The reader is mid-task, deciding, and has not read the page. So the only useful question is what they are about to do — not what the button does. Save tells them about the system. Save and come back later tells them about their afternoon, and it is the one that stops somebody losing an hour of work to a wrong guess.

How diagrams and microcopy divide the job

A diagram carries a relationship all at once; microcopy resolves one decision at one moment. Both must be judged in context rather than as isolated prose.

Ask for the job, never for the picture

Ask for a diagram of the process and you get boxes. Say instead that a reader has to see which two steps can run at the same time, and the shape decides itself. You find out, sometimes, that the answer was a sentence.

A diagram you cannot describe is carrying nothing

Write the alt text before you commission the picture. If the honest description is a diagram of the process, there is nothing in it, and you have saved yourself a reviewer asking what it is for. Day 22 made this an access rule; it is also the cheapest editorial test you own.

Six words, one decision

Give an assistant the screen, the reader, and what happens after the click, then ask for five options and reject four. Microcopy is one of the few places where generating many and choosing one genuinely beats writing one, because the space is small and you can hold all five in your head.

Where the rules bend
  • An expressive illustration may set mood without carrying an explanation.
  • A familiar icon can replace words only when its meaning is genuinely conventional for the audience.
  • Complex diagrams may need a text explanation and progressive disclosure rather than more labels.
Two things you can measure
  • A reader can state the relationship the diagram reveals without reading the surrounding paragraph.
  • A person can predict what happens after selecting the labelled control.

Diagrams and labels in real work

The cycle that was a line

A generated process diagram looked polished but placed a recurring review as the final step. Redrawing the return path changed the reader's model from delivery to continuous improvement.

The button that lost an hour

A button labelled Continue submitted a long form instead of opening the next step. Naming the consequence changed the label and prevented accidental submissions.

The diagram nobody could caption

Reviewers could describe the colours and boxes but not the relationship. Writing the intended alt text exposed that the visual had no explanatory claim, so the team redesigned it.

Glossary — the 4 words that unlock it

Load-bearing diagram

What it means
A picture carrying something the prose cannot: an order, a shape, which things co-exist.
Why it matters
If you can describe what it carries, keep it. If you cannot, it is decoration with a caption bill.
Example
Four boxes with arrows showing which two steps can run at the same time.
Key question
What does your reader lose if the picture is removed?

Alt text

What it means
The words a reader hears instead of seeing the image, written for the job it does here.
Why it matters
The same photograph in two articles is doing two jobs and needs two descriptions.
Example
Proving the backlog started after the process change, not a description of a line chart.
Key question
Why is this image in this piece at all?

Microcopy

What it means
The few words beside a control, read mid-task by somebody who has not read the page.
Why it matters
It is met at a moment of decision, so it must say what the reader is about to do.
Example
Save and come back later, rather than Save.
Key question
What happens to your reader immediately after they click?

Decorative image

What it means
A picture that carries nothing the surrounding text does not already say.
Why it matters
Marking it empty is the correct treatment, not a lazy one; describing it interrupts for nothing.
Example
A photograph of people at a meeting, beside a paragraph about meetings.
Key question
Would anything be lost if this image were skipped entirely?

Questions about diagrams and microcopy

When is a diagram better than another paragraph?
ConceptualWhatcomplexity 2

Use a diagram when position, sequence, hierarchy, flow, comparison, or cause is the idea the reader must understand. If the picture merely repeats the surrounding prose or cannot be described more precisely than 'a diagram of the process,' it is decoration rather than explanation.

How should an AI assistant be briefed to create a useful diagram?
ConceptualWhatcomplexity 2

Describe the reader's question, the relationship the picture must reveal, the items that must appear, the reading order, and the decision the viewer should make afterward. Ask for a labelled structure before visual styling so an attractive composition cannot conceal a weak explanation.

Why write alt text before producing the final diagram?
ConceptualWhatcomplexity 2

Early alt text forces the author to state what the diagram contributes. If that description has no relationship, change, or conclusion, the visual probably has no teaching job yet. The final alternative text can then be refined for accessibility after the approved diagram exists.

What makes interface microcopy effective?
ConceptualWhatcomplexity 2

Effective microcopy answers the question present at the decision: what will happen, what the person must provide, whether the action can be reversed, or how to recover. It uses the user's vocabulary, fits the component, and remains accurate in the exact state where it appears.

Why must diagrams and microcopy be reviewed in context?
ConceptualWhatcomplexity 2

Neither is read like continuous prose. A diagram is scanned spatially and microcopy is encountered beside a control during an action. Review them at their real size, with neighbouring labels and realistic states; a sentence that reads well in a document can still fail on the screen.

Key takeaways

  • Choose a diagram for relationships, not decoration.
  • Describe the teaching job before styling the picture.
  • Write and test alt text as part of authorship.
  • Microcopy names the consequence present at a decision.
  • Review both at their real size and state.

Where this lesson leads

Move from the explanatory job to an accessible visual and then to tested interface language.
✓Relationship
✓Structure
✓Alt text
→State-aware microcopy
→Context testing
→Reusable visual patterns

Keep making meaning visible

Write the description first, and half the pictures do not get commissioned.

▶ Try the playground
© Pawan Nayar · LLOS.ai · 2026 — Diagrams and microcopy.Original pedagogy, voice, and design — all rights reserved.