layers-interaction-flow

What this skill does

# /layers-interaction-flow

*Assumes `/layers-intro` has been loaded. This skill is a library of techniques, not a script — see "How to use these skills" there.*

The interaction structure and flow layer defines how a person interacts with the product: the places they navigate, the affordances available, the content presented, and the flow between states. It sits above the conceptual model (which defines *what exists*) and below the surface (which defines *how it looks*).

A breadboard is always for a particular user in a particular situation doing a particular job. Know which job story before you start.

---

## The decisions this layer makes

- The distinct places this flow moves through
- What the user can do in each place, and where each action leads
- What content each place needs to show
- What happens on failure paths, empty states, and edge cases
- Whether the flow is as simple as it can be while still serving the job

If the conceptual model beneath isn't stable, flows built on it often need redoing — check that first.

---

## Disciplines — what keeps a flow honest

- **Every affordance has a named destination.** "Submit → where?" If you can't name it, it's an unmade decision.
- **Edges are required steps, not afterthoughts.** Breadboard the failure paths (validation, server error, disconnection, timeout, concurrent edit), the empty and loading states, the post-action state, and the cancel path. Each gap is an unmade design decision — name it.
- **No broken objects.** For each conceptual-model object in this flow, its attributes and actions should be available together — not scattered across screens with no cross-linking.
- **No isolated objects.** Each model relationship should be visible and navigable in the flow, or there should be a deliberate decision that it needn't be.
- **Vocabulary matches the model's ubiquitous language.**
- **Naming places is a design decision** — descriptive and user-meaningful ("Referral dashboard", not "Page 3").
- **Keep it minimal.** More than 5–6 places for a single job story is a signal to look for what can be collapsed.

---

## Breadboard notation

```
Place name
- affordance → destination place
- affordance → destination place
[ content shown in this place ]
```

---

## Techniques

Breadboarding is the default; the rest serve particular situations.

| Technique | Use it when |
|---|---|
| **Breadboarding** (Ryan Singer / Shape Up) | Default. Text notation that forces interaction logic to be settled before visual design makes changes expensive. |
| **Walk the flow as the user** | Narrate: "I'm a user who [situation]. I arrive at [place], I see [content], I want to [motivation], so I [affordance]…" Walk the happy path, then every edge. The fastest way to find unmade decisions. |
| **User story mapping** (Jeff Patton) | Complex product, many user types, incremental planning. Activities → tasks → stories across a timeline. |
| **Task analysis** | Redesigning an existing flow — decompose the current task to find where friction, errors, and workarounds concentrate. |
| **Service blueprinting** | Flow spans channels or involves backstage operations (staff, systems, third parties). |
| **Critical User Journeys** | Deciding which flow to work on — the minimal path to core value (high-traffic, high-revenue, metric-critical). |
| **Flow diagram** (`graph LR`) | Orientation only — flow through time reads left to right. The text breadboard stays the primary artefact; the diagram loses conditional detail. |

---

## Working with the designer

Settle which job story the flow serves, where the user starts, and what success looks like. If redesigning, describe the current flow first — it reveals decisions already made, many of them unintentionally. Then name the places, map affordances and destinations, and walk the flow including its edges, applying the disciplines above. Conditions — when an affordance is or isn't available — are often where the real decisions hide.

Offer the technique that fits: breadboarding for most flows, task analysis for a redesign, story mapping when there's a lot to plan. Do the next useful thing, not all of them.

Capture only the residue: the breadboard (places, affordances, destinations, content, key conditional states), a flow diagram if it aids orientation, the open decisions (gaps and unresolved edge cases), and risks that depend on unsettled lower-layer decisions.

A breadboard defines interaction logic without committing to visual form. Before moving to surface, make sure the conceptual model beneath is stable.