Draw the idea, not the topic

Think of the last ten blog posts you opened. I'd bet at least half had the same kind of header image: a laptop on a wooden desk, a rocket for a launch, a lightbulb for an idea, a magnifying glass for anything about search.

Here's a quick test for any of them. Cover the title and look only at the picture. Can you tell what the article claims? Not what it's about, what it says. Usually you can't. The picture shows the topic. It tells you nothing about the idea.

That gap, between drawing the topic and drawing the idea, is the one thing that shapes how we think about illustration more than anything else.

Decorative pictures aren't neutral

It's tempting to think a decorative image is harmless: at worst it takes up some space. The research on learning says otherwise.

Shannon Harp and Richard Mayer called them seductive details: material that is interesting and loosely related to the topic, but doesn't carry the point. In their 1998 study ("How seductive details do their damage", Journal of Educational Psychology), adding that kind of material to a science lesson made people understand the lesson worse, not better. Highlighting the important parts didn't fix it. Moving the seductive details to the end weakened the damage; putting them first made it worse.

Mayer later folded this into what he calls the coherence principle: people learn better when extraneous material is left out rather than included. The reason is simple. Attention and working memory are limited, and an irrelevant picture still has to be looked at, decoded and set aside. It competes with the thing you actually wanted the reader to get. The effect seems strongest for exactly the people most articles are written for: readers who are new to the subject.

So the useful question isn't "does this page need an image?" It's "what is this image doing?"

An illustration is a metaphor you can see

The picture that helps is almost always a metaphor: one thing understood in terms of another. That's not a designer's trick. In Metaphors We Live By (1980), George Lakoff and Mark Johnson argued that metaphor is how we think about abstract things in the first place. We spend time, waste it, save it, because we understand time through money.

Maggie Appleton, who has drawn a lot of explanations of programming concepts, puts this to work in her case study How to Draw Invisible Programming Concepts. She maps a source (something physical and familiar) onto a target (the abstract idea), so that the qualities they share carry over. Her examples: CSS selectors as painting different parts of a house, a router as a metro map.

The part I find most useful is her point that a metaphor hides and highlights. Every metaphor shows some properties of the idea and leaves others out of the frame. Picking a metaphor is really choosing which part of the idea matters most for this reader, right now.

How we look for one

None of this needs drawing skill. It needs a sentence and a list.

1. Write the one sentence the reader should leave with. Not the title. The claim. "Retrying a request is safe if the endpoint is idempotent" is a claim. "Idempotency" is a topic.

2. List what's true about the idea. For idempotency: doing it twice has the same effect as doing it once; the extra attempts are harmless; the system remembers the first one.

3. Look for a physical thing with the same shape. The lift button: you press it, the lift is called; you press it five more times out of impatience, still one lift. Everyone has done this. The metaphor carries the whole claim in one object.

4. Check what it hides. The lift button says nothing about how the system remembers the first press, or what happens if the lift breaks halfway. If your article is about that, you need a different picture.

5. Run the swap test. Put the image next to the title of a different article. If it still fits, it hasn't said anything yet. A laptop fits every article about software. A lift button fits one.

A few more that pass the test:

• Rate limiting as a bouncer at a club door: not a wall that keeps everyone out, a person letting people in at a pace the room can take.
• Technical debt as interest on a loan: the problem isn't the shortcut, it's that you keep paying for it every month you don't fix it.
• A cache as the fridge next to the cooker: the shop has everything, the fridge has what you'll need in the next ten minutes, and sometimes the milk in it has gone off.

That last one shows the "hides and highlights" point well. The fridge highlights speed and staleness. It hides eviction rules completely. For a post about cache invalidation, it's perfect. For one about LRU, it's the wrong picture.

One object is usually enough

When a metaphor works, it rarely needs company. One lift button, drawn large, with space around it, does more than a lift button surrounded by servers, arrows, clouds and a small potted plant. The extra objects are the seductive details again: they make the image look busier and the idea harder to find.

This is also why we try to keep every image on the same paper as the text around it, without frames or shadows. A framed picture reads as a separate thing to look at. An object on the page reads as part of the explanation.

When not to illustrate

Sometimes the honest answer to "what is this image doing?" is "nothing". A short reference page, a changelog, a list of settings: these don't have one idea to carry, and a picture there is decoration by definition. Leaving it out is a design decision too.

The rule we keep coming back to is short. Draw the idea, not the topic. If you can't say the idea in one sentence yet, the picture isn't the problem.

Sources

• Harp, S. F., & Mayer, R. E. (1998). How seductive details do their damage: A theory of cognitive interest in science learning. Journal of Educational Psychology, 90(3), 414–434.
• Mayer, R. E. Multimedia Learning, chapter on the coherence principle (Cambridge University Press).
• Lakoff, G., & Johnson, M. (1980). Metaphors We Live By. University of Chicago Press.
• Maggie Appleton, How to Draw Invisible Programming Concepts: Part I and Metaphors We Web By.

I'm Sorin, I run site-uri.ro, a small web studio in Romania. This post was written with AI assistance.