Healthcare UI design is the visual layer of a clinical product: the colour, type, density and icons that render a decision on screen. In most software a UI mistake costs a moment of confusion. In a clinical one it can cost a misread dose.
Writing on this topic splits into two camps: screenshot galleries with no reasoning, and UX strategy pieces wearing a UI label. Neither gets into the actual visual mechanics, the kind that decide whether a number gets read correctly at 3am.
This post is the companion to our healthcare UX design guide, which covers the flows, the HIPAA decisions baked into a screen, and alert fatigue as a workflow problem. Here we stay one layer down, in the pixels.
A critical alert cannot rely on colour alone
Red means danger. Except when it doesn't.
Colour blindness affects a meaningful share of clinicians and patients. A design built on red versus green alone will fail some readers on day one. That's not an edge case. It's a predictable failure.
Lighting is the second problem. A colour calibrated on a design monitor can wash out on a ten year old bedside screen, or under harsh ward lighting at 3pm. What reads as urgent red in a design file can read as pale pink at the bedside.
And colour has no built in meaning. A user has to learn that red means critical and amber means warning. If nobody told them, or they're covering a shift they don't normally work, the convention does nothing.
The fix is redundant coding. Critical status gets a shape, a distinct icon, and a text label that names the condition, not just a hue. Colour reinforces the message. It never carries it alone.
A useful test: turn the screen to greyscale. If the critical alert disappears, the design isn't done.
Typography is a patient safety mechanic
This is the part that gets skipped most often, and it's the one that matters most.
Use tabular figures for lab values and any numeric column. Many fonts render digits at different widths, so a "1" is narrower than an "8". In a proportional font, a column of numbers won't align, and a reader can't scan down it and compare rows. If your font ships tabular figures, font-variant-numeric: tabular-nums switches them on and every digit gets the same width. If it doesn't ship them, the declaration does nothing and the font itself is the thing to change.
Align numbers on the decimal, right aligned. The real failure mode is a misread decimal point. Read fast, under interruption, and 1.0 can look like 10. That gap isn't a typo. It's a tenfold dosing error. Careful decimal alignment is what makes the two numbers visually distinct at a glance, instead of after a second look.
Never let a unit and a value separate across a line break. "120" on one line and "mg" on the next reads, to a rushed eye, as just "120". And never render a unit smaller than the number it qualifies. Shrink the unit and it gets skipped.
Last, distinguish a value from its reference range. Colour, weight or position, whichever you pick, a reader should never have to work out which number is theirs and which is the normal band.
Run this check on a real screen: paste a table of lab values into the product's actual font at actual size. If the decimal points don't line up in a straight column, tabular figures are off, and the layout is one misread away from a doubled dose.
Density is a deliberate contrast, not a global setting
A clinician's screen and a patient's screen can show the same underlying data. They should not look alike.
A clinician using a monitoring dashboard is trained, and often interrupted mid task. They need everything at once: current vitals, trend, medication due, next task. Dense and glanceable is the right call, because scanning beats clicking through a stack of screens.
A patient opening a portal to check a lab result is anxious, and uses the product rarely. One number, one decision, one screen. Sparse is the right call for the opposite reason. Too much at once reads as noise, or worse, as something to fear.
The mistake is shipping one density and skinning it twice, a light theme for patients and a dark theme for clinicians over the same layout. A dashboard trying to serve both audiences ends up serving neither. If you're mapping out the general craft of laying out a dense numeric screen, our guide to a dashboard's grid and hierarchy craft covers what keeps density legible instead of overwhelming.
Icon systems have jobs, not just vibes
The usual advice is to use medical icons to build trust. That's decoration talk. In a real clinical product, an icon has a job.
A route of administration icon distinguishes oral, IV and topical at a glance, so a nurse scanning a medication list can find the right entry before reading it closely. A dosage form icon separates a tablet from a liquid from an injection. A vital sign icon flags heart rate versus oxygen saturation versus temperature before the number even registers.
Every icon that isn't doing one of those jobs is noise. On a screen where a clinician has seconds and a hundred data points competing for attention, a decorative icon costs attention it can't spare.
And an icon never carries a safety critical meaning alone, for the same reason colour doesn't. Pair it with a label. A stylised syringe next to a dose is a hint. A syringe icon, plus the word "IV", plus the dose, is information.
Alert hierarchy needs an actual spec
Alert hierarchy usually gets treated as a colour choice: avoid harsh reds, soften the palette. That's one lever out of five.
A real tiering spec uses size, colour, motion, position and redundant text. It has to make the tiers visibly different from each other, not just technically different.
| Tier | Size | Colour | Motion | Position | Text | |---|---|---|---|---|---| | Critical | Largest | Reserved, used nowhere else | Single pulse, not constant flash | Fixed, top of screen | Names the condition | | Warning | Smaller | Different reserved colour | None | Inline with related content | Short label | | Informational | Smallest | Neutral | None | Wherever relevant | Easy to dismiss |
The test isn't whether each tier looks fine on its own. It's whether someone glancing at the screen for half a second can tell which tier they're looking at, without reading a word. If two tiers look similar, the reader has to stop and read to tell them apart, and reading costs time they may not have. Reuse the critical treatment for a warning "to be safe" and it stops meaning anything.
Vital signs and charts: the real decisions
A number on its own tells you where a patient is. A chart tells you where they're headed, and that's usually the more useful question.
A sparkline works when the shape matters and the space doesn't allow more. Think of a small trend line next to a current heart rate on a ward list. It shows direction without demanding a second screen.
A full trend view earns its space when the trajectory itself is the point. Picture a blood pressure chart over a multi day admission, where a clinician needs to see the pattern, not just the latest reading.
In both cases, show the normal range as a band behind the line, not just a number in a legend. A value plotted against its context reads instantly. A value plotted alone forces the reader to remember the normal range, or go look it up.
When a value is out of range, drop the chart and go big: a single large number, styled the way a critical alert is styled elsewhere in the product. The point of that screen isn't analysis. It's that someone acts now.
Touch targets for gloved and tremor affected hands
The 44 by 44 point minimum you know from mobile guidelines is a floor. It's sized for a healthy adult thumb, no glove, no interference. A clinical target built to exactly that minimum is already too small for the hands actually using it.
Clinical hands wear gloves, which reduce precision immediately. Patient hands, especially in an older or post surgical population, may have tremor, which reduces it further. Size up from the floor, and give real space between adjacent controls, not just padding around the label.
The riskiest layout is a confirm button next to a discard button with barely a gap. A mis-tap there isn't a minor annoyance. It can undo real work, or worse.
None of this holds up on assumption. It has to be checked with a real device, real gloves, and ideally a real user under real ward lighting, not a screen reviewed at a desk. That's the gap our UX audit guide walks through: testing whether a person can actually read and use a screen under the conditions they'll really be in.
Dark mode on a night ward is a clinical decision
Dark mode rarely comes up in this conversation, and on a ward at night it isn't a style choice.
A bright screen at 3am wakes a sleeping patient in the next bed, and it costs a clinician their dark adaptation for the minutes after they look away, right when she needs to see a dim room clearly. An overnight clinical product needs a real dark mode, not a filter dropped onto the light theme.
Build it properly. Never use pure black as the background. High contrast edges against true black halate on modern screens, a kind of glow around text and icons that hurts readability instead of helping it. Use a very dark, slightly warm grey instead, and pull back the contrast of secondary text so the screen doesn't compete for attention all at once.
Keep the alert hierarchy from earlier intact in dark mode too. A critical alert that only distinguishes itself through a colour that reads fine in daylight has already broken the redundant coding rule once the ward lights go down.
Healthcare UI design has no room for decoration
Eight decisions, one through line. In most software the visual layer is aesthetic, and a bad choice costs a moment of friction. In a clinical interface it's the last thing between a clinician and a misread number, and getting it wrong costs more than friction.
None of this replaces the UX work underneath it, the decisions covered in the companion piece linked above. A flow can be exactly right and a product can still fail if the typography lets 1.0 read as 10, or an alert only works in daylight.
If you're shipping a clinical interface and want the visual layer checked against how it's actually used, not just how it looks in a style guide, that's the kind of product design work we do.