Formats›A mockup, in seven lines

A mockup, in seven lines

A reusable format. Take it, fill it, use it again — for a screen, an object, a service, a room. Nothing in it is specific to one medium.

Download mockup-format.md The file you fill in. Plain text — open it in any editor, or hand it to an agent.

What this is for

A mockup is a thing you make in order to find something out, and then do not keep. It is not a small version of the thing and it is not the first version of the thing. It is an instrument.

Almost everything that goes wrong with mockups goes wrong in the same place: the fake parts are not named, so somebody reads a drawn number as a real one, or a hardcoded list as a working search, and a decision gets taken on evidence that was never there. The FAKE line is the whole of this format. The rest is around it.

It is also the only format here with an expiry. BINNED says when you throw it away, and it is decided before you start, because a mockup nobody threw away is how a prototype becomes a product without anybody choosing to build one.

The format

THE QUESTION    what you are making it to find out

REAL            what in it actually works
FAKE            what is drawn, hardcoded or pretended — every bit of it
WHO LOOKS       who you put it in front of, and what you ask them to do
NOT EVIDENCE    what it cannot tell you, however it goes
BINNED          when you throw it away, decided now

NOT THIS        it is not the thing, and none of it survives into the thing

A question above, a refusal below, and five lines between.

What each line is asking

THE QUESTION. What you are making it to find out. If the answer is to show it to people, that is not a question and you are making a demonstration, which is a different object with different rules. A mockup you could not be surprised by is not worth building.

REAL. What actually works. Usually very little, and saying so early stops the mockup quietly growing a working half nobody planned.

FAKE. What is drawn, hardcoded or pretended — and the discipline is that it is every bit of it, not a representative sample. This is the line the whole format exists for. An unnamed fake part does not read as fake; it reads as working, and the person you are showing it to has no way to tell. They will then answer your question about something that does not exist.

WHO LOOKS. Who you put it in front of, and what you ask them to do. Have a look and tell me what you think gets you a critique of the drawing. Find the cheapest one and stop gets you an answer to your question.

NOT EVIDENCE. What it cannot tell you, however it goes. A mockup with hardcoded data cannot tell you whether the search is any good; a paper one cannot tell you whether the thing feels fast. Write it down before you look, because afterwards a good session makes everything it touched feel established.

BINNED. When you throw it away, and decided now. A date, or a condition — the day the question is answered. This is the line people leave out and it is the one that decides whether you end up with a product built out of a sketch.

NOT THIS. It is not the thing, and none of it survives into the thing. If some of it must survive, say which part and treat that part as built rather than mocked — with the decisions in it taken deliberately, which is what mockup code never has.

A worked one

THE QUESTION    Will somebody scroll past the first three to find a
                cheaper one, or stop at the top?

REAL            The list scrolls. That is all.
FAKE            The prices, the names, the photographs, the ordering,
                the filter (it does nothing), the count at the top, and
                the fact that there are only eleven of them.
WHO LOOKS       Six people who have never seen it. Asked to find the
                cheapest and stop, and nothing else.
NOT EVIDENCE    Nothing about whether people trust the prices, because
                the prices are invented. Nothing about speed.
BINNED          The day the sixth person has been through it.

NOT THIS        Not the list screen. When the real one is built, it is
                built from nothing that is in here.

Note the length of FAKE against the length of REAL. That ratio is normal and a mockup where it looks the other way round is usually a half-built thing with a question attached to it afterwards.

How to use it

  1. Write THE QUESTION, then FAKE, before you make anything. FAKE written first tells you how little you actually need to build.
  2. Show the FAKE line to whoever looks, out loud, before they start. It costs ten seconds and it is the difference between an answer and a compliment.
  3. Ask them to do something, not to react to it.
  4. Write NOT EVIDENCE down before the session, not after. Afterwards, everything the mockup touched will feel like it was tested.
  5. 🔴 Bin it on the day you said. If you cannot, the reason is worth more than the mockup was.

Three ways a mockup fails

The fake parts are not named. Somebody makes a decision about the ordering, or the price, or the wording, and none of those were real. The session went well, which is what makes this expensive.

It answers a question nobody asked. You learn that people liked the layout. You were trying to find out whether they would scroll.

It survives. The hardcoded list is still there a year later, behind three features that were built on top of it, and nobody remembers it was a stand-in for a question that was answered in an afternoon.

Prayas Abhinav. Licensed CC BY 4.0 — copy it, change it, build on it, including commercially. Say where it came from, and if you changed it.

Take a copy: mockup-format.md. Yours to alter.