Skip to content

examples.md

Latest commit

 

History

History
58 lines (41 loc) · 2.77 KB

examples.md

File metadata and controls

58 lines (41 loc) · 2.77 KB
Raw

Examples

Short, genericised walk-throughs. They show the thinking, not finished screens.

Example 1 — Level 1 text sketch settles a small change

Question: a results-list row shows a status pill and a date. The ticket asks to "add the next action". Does it fit, or does the row need restructuring?

A text sketch is enough — no repo:

[ RESULTS LIST ]
┌────────────────────────────────────────────────────────┐
│ Patient name        Status ▸ [Awaiting]   Due: 12 Jul   │
│                     Next:  Chase result                 │  ← new line
├────────────────────────────────────────────────────────┤
│ Patient name        Status ▸ [Action]     Due: overdue  │
│                     Next:  Book review                  │
└────────────────────────────────────────────────────────┘

Decided: the next action sits on a second line within the row, not a new column — a column would crowd the date on narrow widths. Open: does "Next" need its own icon, or is the label enough? (accessibility lens: label alone is fine; don't add colour-only meaning.)

The decision was made without building anything. Stop here.

Example 2 — escalating to a Level 2 skeleton

Question: the same list must handle a patient with eight attributes where most have two. Text can't tell us whether the row survives. This is the signal to build.

Objects and states first (sequence step 2):

  • row → default, expanded, overdue
  • status → awaiting, action, complete, discharged

What the skeleton tests: does the row hold its shape when fed the worst case? Build it greyscale, with the real long content and the empty case, no accents:

<!doctype html>
<link rel="stylesheet" href="css/tokens.css">
<main>
  <!-- annotations are bracketed and obviously placeholder at L2 -->
  <article class="row">
    <h3>[longest realistic patient name]</h3>
    <ul><!-- 8 attributes, real labels, illustrative values --></ul>
    <p class="muted">[ next action ]</p>
  </article>
</main>

Decided: at eight attributes the row must collapse to a summary with an expand control. Open: what's the default — collapsed or expanded? Needs a clinician's view on how often the full list is read at a glance.

Only now, if stakeholders need to see it, does it climb to a Level 3 demo — theme it via the brand layer in tokens.css, move these bracketed annotations into a side panel, and make the copy real.