Results screen

What this screen does

Somebody has opened a result. They may have arrived from a notification, from a list of results, or from a tile they tapped on the home screen. In the notification case they may have been thinking about it since it arrived.

They want three things, in this order: what is my number, where does it sit relative to the range this test is compared against, and what, if anything, do I do now. The screen answers those three and then stops. The provenance, the history and the boundary note are below the fold by design, because they are context rather than answer.

What this screen deliberately does not do. It does not diagnose. It does not rank the person against other people. It does not recommend a treatment. It does not decide the clinical status: if a status is shown, a rule owned by the product assigned it, and the screen is rendering that rule's output. And it does not put an interstitial in front of a result the person has already chosen to open. Softening the approach to a result is the job of the flow before this screen (Result disclosure), not of a barrier here.

Composition

The proposed part hierarchy, with the material rung each surface sits on. Rungs are given by position rather than by name so that this page cannot drift from The ladder, which names them.

ResultsScreen                          page ground
├── Header                             page ground
│   ├── BackControl                    returns to where the reader came from
│   └── Title                          the test, in the reader's words
├── ResultCard                         one rung above the page
│   ├── Value                          the largest element on the screen
│   ├── RelativeTime                   when it was measured, not synced
│   ├── RangeBar
│   │   ├── Band                       one continuous shape, no coloured zones
│   │   ├── Marker                     distinct by shape, not only by colour
│   │   └── Endpoints                  numbers and the sentence that says them
│   ├── StatusPill                     only when a rule assigned a status
│   └── Summary                        the sentence carrying the whole meaning
├── MeaningSection                     page ground
│   ├── Term                           plain-English expansion, inline
│   └── Prose                          what this does and does not mean
├── CareCard                           one rung above the page
│   ├── Action                         one action, specific
│   └── Timing                         by when, and what if not
├── ProvenanceSection                  page ground
│   ├── Source                         who measured it, on what
│   └── DateTime                       absolute, not relative
└── DisclaimerNote                     page ground, lowest emphasis

Three composition rules this screen exists to demonstrate:

The card is the only surface off the page ground. Elevation is meaning here: exactly the result and the action are lifted, so that lifting reads as "this is the answer" rather than as decoration. A screen where every section is a card has no hierarchy left to spend.

CareCard is conditional, not decorative. It appears when there is a real action with real timing, and is absent otherwise. A permanently present card with "no action needed" in it teaches the reader to skip the position where the real action will one day be.

One status pill, or none. The status never colours the card, the band or the marker. See The two colour axes. If no clinical rule assigned a status, the screen shows no status and no colour stands in for one.

Preview

The specimen above is assembled entirely from parts that already ship: ResultCard as the answer, Term for the one word that needs expanding, CareCard for the single next step, RelativeTime carrying the absolute measurement instant in the provenance line, DisclaimerNote to close the surface, and Surface as the ground beneath them. Card is not a ground the specimen places: it arrives as a registry dependency of CareCard, which is built on it. The frame renders at phone, tablet and desktop widths (390, 744 and 1180 pixels) so the reading order and the one-status-pill rule can be checked against something rendered rather than argued from prose. One part of the composition is not a component: source-citation has no code on the roster, so provenance appears here as a plain paragraph the product writes, exactly as the ResultCard demo already renders it.

Safety notes

• A result with no range is not a result with an empty bar. When no reference range applies, the screen says so in words and omits the bar entirely. An empty bar reads as a missing result.
• Out of range is a position, never a verdict. The summary sentence describes where the value sits. It does not say abnormal, high risk or bad, and system-wide it does not say normal. See Reference ranges.
• One measurement is not a trend. Nothing on this screen may imply direction from a single point. Where history exists it belongs on the trends screen, reached from here rather than inlined as an arrow.
• Provenance is not optional for a device reading. Who measured it and with what changes how much weight it can bear, and the screen must be able to say so rather than presenting every number as equally authoritative.
• The value and the range are in the same unit, from one conversion at the edge of the system. Unit systems covers this. A view-layer conversion is how a screen shows a value and a band that disagree.
• Stale is stated. If the result is old enough that the reader might otherwise take it as current, the screen says when it was measured in absolute terms and de-emphasises it, rather than continuing to present it as news. Uncertainty and staleness sets the rule.
• The screen never animates the value into place. A number counting up is unreadable while it moves, and the movement suggests significance the number may not have. See Motion in health UI.
• The disclaimer is placed by rule, in the same position on every result screen, so that it is findable rather than merely present.

Accessibility

Landmarks and headings. One main landmark, and one H1 that names the test. The result, the meaning, any action and the provenance are H2s in that order. The heading outline read on its own is a usable summary of the screen.

Focus on entry. Focus lands at the start of the main content, on the heading that names the test. It does not land on the back control, and it does not land on the first interactive element inside the card. A reader arriving from a notification should hear what they opened before they hear how to leave it.

Reading order matches visual order. The order is title, value with unit, measurement time, range and position, summary sentence, meaning, action, provenance, boundary. This is the check the screen is most likely to fail: a card that visually leads with the number but places the status pill first in the DOM announces a verdict before the fact.

The bar is an enhancement over a sentence. Everything the RangeBar conveys is in the summary sentence: the value, the unit, both endpoints, and where the value sits between them. A reader who never perceives the graphic loses speed and nothing else. Alt text and descriptions covers it.

Colour independence. The marker is distinguishable from the band by shape and contrast; the status is a word and an icon before it is a colour. Verified in greyscale and under all three simulated colour-vision deficiencies. Colour independence is the rule.

Contrast. Every pair on the card is measured against the published floor in both themes, including the marker against the band, which is the pair most likely to fail. Contrast conformance sets the floor.

Text at 200%. The card reflows; the value never truncates and its unit never wraps away from it; the bar may give way to the sentence. Text resizing and zoom governs that.

Terms are reachable by keyboard. A Term expansion that depends on hover is unavailable on touch and to keyboard users, and this screen is where unfamiliar words concentrate.

Reduced transparency and reduced motion both hold: the card falls back to its opaque rung with the contrast floor intact, and the screen presents complete with no entrance animation carrying meaning.

Status