Grid & layout
Where things are, and — more importantly in clinical software — the guarantee that they stay there. A control that moves under a clinician's finger is a use error the interface caused.
Overview
Most layout systems optimise for flexibility. This one optimises for positional memory. A clinician who has used AcuteLine for a week reaches for the acknowledge control without looking; a layout that relocates it — because an alarm arrived, because a panel expanded, because a longer name wrapped — spends that skill and replaces it with a search.
Predictable
The same kind of thing appears in the same place on every screen. Identity above, signals below it, content beneath, actions where they were last time.
Reserved
Regions that can receive urgent content exist whether or not they hold any. Space is allocated in advance so arrival never displaces anything.
Reflows, never truncates
At any width or zoom the layout rearranges. It does not clip, and it does not shorten clinical content to fit.
Layout regions
Every patient-scoped screen has the same five regions in the same vertical order. The order is the reading order and the DOM order, and it is not configurable.
Region 3 is allocated at layout time and occupies its space whether or not an alarm exists. This is deliberate and slightly wasteful: it means an arriving Critical alarm cannot push the content below it downwards. Without reservation, an alarm firing while a clinician is reaching for a row moves that row — and they open a different patient. Layout shift is a wrong-patient mechanism, not a polish issue.
- Identity precedes signal. Region 2 above region 3, so a finding is never read before knowing whose it is — see Patient header.
- Signal precedes content. Region 3 above region 4, so an alarm is above the work rather than inside it.
- The action bar does not float. A primary action that follows the scroll position is a primary action in a different place each time.
The column grid
A 12-column grid with a 16 px gutter inside the content region. Twelve divides cleanly into halves, thirds and quarters, which covers every layout this system needs.
| Band | Columns | Margin | Typical layout |
|---|---|---|---|
| Compact · 320–639 | 4 | 16 px | Single column. Side panels become sequential. |
| Small · 640–1023 | 8 | 24 px | Content plus one collapsible panel. |
| Medium · 1024–1279 | 12 | 24 px | Content 8, side panel 4. |
| Default · 1280–2559 | 12 | 32 px | The design baseline. Content 8, panel 4, or 6/6 comparison. |
| Large · 2560+ | 12 | 32 px | Same layout, scaled — see Scaling. Not more columns. |
Above the Default band the grid does not gain columns and the layout does not gain panels. The extra pixels buy legibility at distance, because the clinician at a 4 K reading monitor is further away, not closer. Adding content instead of scale is the most common way a large-display deployment ends up worse than the one it replaced.
Layout shift is a hazard
Content that moves after first paint is treated here as a defect class, not a performance metric. Three rules:
- Reserve space for anything asynchronous. Alerts, counts, images, lazily fetched values — the space exists before the content arrives, and a skeleton occupies it.
- Never insert above the viewport. New content entering above the scroll position moves everything under it. Where new items are genuinely higher priority, they are staged and announced rather than inserted — the same mechanism as Data grid.
- Fix the height of anything that can change length. A two-line finding becoming three must not resize its row; the row is sized for the longer case.
Reflow and zoom
- Operable at 320 px and 200 % zoom with no horizontal scrolling, per SC 1.4.10. Regions stack in DOM order; nothing is dropped.
- Sticky elements unstick at high zoom. A sticky masthead plus patient header can consume half a magnified viewport, so above a threshold they scroll normally — the identity is still first in reading order.
- Wide content scrolls inside its own container. A data grid or ECG strip scrolls horizontally within its region; the page itself never does.
- Reflow before truncation, always. Where neither is possible, the layout is wrong at that width and should drop a lower-priority region instead.
The alert region occupies its space with nothing in it. An arriving alarm changes what is on screen, never where anything is.
No reserved region. The first alarm pushes the content down by its own height, mid-reach.
Outcomes of use
What this contributes to, in the terms of Usability & context of use.
- Effectiveness — the control activated is the one aimed at. Layout stability is the whole of this, and it is invisible when it works.
- Efficiency — positional memory. An experienced clinician stops reading the screen to find things, which is the largest efficiency gain any layout can offer.
- Satisfaction — an interface that does not move is experienced as trustworthy. One that reflows under the hand is experienced as unreliable, whatever else it does well.
Do's and don'ts
The action bar sits in a fixed region, so a clinician reaches for it without looking.
(floating action button, follows the scroll)
A floating action button. The primary action is somewhere different every time the page moves.
Below the breakpoint the panel stacks. Everything stays reachable by scrolling down.
Horizontal page scroll. Content exists off-screen with nothing to indicate it is there.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1).
- Alert region reserved at layout time. Mitigates: an arriving alarm displacing a control mid-reach, producing wrong-patient or wrong-action selection.
- Fixed region order, identity before signal. Mitigates: reading a finding without knowing whose it is.
- No insertion above the viewport. Mitigates: content moving under the pointer.
- Rows sized for their longest state. Mitigates: resize on content change during interaction.
- Reflow, never truncate. Mitigates: clinical content clipped at narrow widths or high zoom with no indication.
- Wide displays scale rather than densify. Mitigates: a large-display deployment becoming less legible at its real viewing distance.
Related
- Spacing — the gaps inside these regions.
- Scaling & displays — what happens above the Default band.
- Elevation — what may render above the layout.
- Patient header · Alert Banner — regions 2 and 3.