The AI Learning Hub Journal

Describing Screens and Flows

Describe a screen like a room, and a flow as numbered stepswhat is there, what can be pressed, and what changes after — that is enough to build fromTHE SCREEN — TOP TO BOTTOM, LIKE A ROOMJoin the listyour emailJoinThanks — checkyour inboxsay what is at the topname every controlsay what pressing it doessay what changes afterthe press — not justwhat triggers it"clean and modern" carries no information —it gets you someone else's tasteTHE FLOW — SCREENS PLUS ARROWS, NUMBERED1lands on the home page2presses Book3picks a date and time still free4enters name and email5sees a confirmation with details6I get an email — behind the sceneslater, the same numbers are your test script —"step 4 fails" beats "booking is broken"BORROW INSTEAD OF INVENTING — NAME PATTERNS PEOPLE ALREADY KNOW"like a normal checkout" says a lot in four words — and point at the exact part of a site you likeNAME THE PARTS, THE PRESSES, AND WHAT CHANGES AFTERthat twenty-second description is specific enough to build from and short enough to write
Walk through the screen top to bottom and write the flow as numbered steps — the same numbers become your test script later.

Describe It Like a Room

The most reliable way to describe a screen is to walk through it. Do it the way you would describe a room to someone on the phone. What is at the top, what is in the middle, what is at the bottom. What the person sees first, what they can press, and what happens when they do. "A page with a heading, one box for an email address, and a green button that says Join. After pressing it, the form disappears and a short thank-you message appears in its place." That is specific enough to build and short enough to write in twenty seconds. Compare it with "a clean modern signup page". That contains no information at all, and it will get you somebody else's idea of clean and modern.

  • Top to bottom, left to right — the order things appear on screen
  • Name every control and say what pressing it does
  • Say what changes after the action, not only what triggers it
  • "Clean and modern" carries no information; describe the parts instead

Flows Are Screens Plus Arrows

A flow is what happens across screens: someone lands here, does this, ends up there. Write it as numbered steps, in the voice of the person doing it. "1. Lands on the home page. 2. Presses Book. 3. Picks a date and a time from the ones still free. 4. Enters name and email. 5. Sees a confirmation with the details. 6. I get an email." Numbered steps do two jobs at once. They are a build instruction, and they are a test script. When something breaks later, you can walk the same numbers and say precisely which step failed. That is far more useful than reporting that booking is broken.

  • Write flows as numbered steps in the user's voice
  • Include what happens behind the scenes, like the email you receive
  • The same numbered steps become your test script later
  • "Step 4 fails" is a far more useful report than "booking is broken"

Borrow Instead of Inventing

You do not have to describe common patterns from scratch, and you would do it worse than the conventions people already understand. Say "like a normal checkout", or "a two-column layout with the list on the left and the details on the right", or "the same sign-in flow every site uses". Naming an established pattern communicates a great deal in a few words. It also produces something users already know how to operate. It is fine to point at an existing site you like. Describe the specific thing you want from it: "the way their pricing page lays out three tiers side by side". Be specific about which part you mean. "Make it like theirs", without saying which aspect, gets you a coin flip.

  • Name familiar patterns rather than describing them element by element
  • Conventional layouts are conventional because people already understand them
  • Point at a real example, but say exactly which aspect you want
  • Invent only where your idea genuinely differs from the norm

Prefer slides, quizzes, and saved progress? Read this lesson in the library — free, no sign-up.