Healthcare UI Design

Platform Notes

• Optional helper plugins may help in some environments, but they must not be treated as required for this skill.

Healthcare UI Design

Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com, +256 784 464178.

Use When

• Designing or reviewing EMR/EHR dashboards, patient portals, telehealth flows, medication management, mood/symptom trackers, or aging-care interfaces across mobile, tablet (bedside), and clinician desktop.
• Laying out clinical safety surfaces: allergies banner before prescribing, drug-interaction warnings, two patient identifiers, out-of-range vitals flagging, autosave/interruption recovery, session timeout.
• Choosing the calm-blue healthcare palette and three-signal status design (color + icon + text), or a specialty palette (soft lilac for mental health, high-contrast for aging/ICU).
• Mapping HIPAA, FDA 21 CFR Part 11 e-signatures, ISO 62366-1, or HL7 FHIR requirements onto concrete UI patterns.

Do Not Use When

• The accessibility/WCAG conformance work is the whole task and platform-agnostic — use the sibling accessibility-wcag-2-2-compliance skill (this skill applies WCAG within clinical context, not full audits).
• The task is product/sector strategy or positioning rather than UI design — use sector-strategies.
• The work is non-healthcare UI with no clinical safety, PHI, or patient-context constraints.

Required Inputs

• Target platform(s) and primary user: patient/community-health-worker (mobile), bedside nurse or rounding physician (tablet, both orientations), or physician/admin (desktop).
• App type from the quick-start guide (patient portal, EMR/EHR, telehealth, mental health, aging care, medication mgmt, ICU/emergency, wellness).
• Applicable regulatory regime (HIPAA / FDA / ISO 62366-1 / FHIR) and any branding constraints over the OS-native font stack.

Workflow

1. Confirm clinical task, accountable roles, patient identity, urgency, environment, and harm scenarios with the clinical safety owner.
2. Map authoritative data provenance, freshness, access, consent, audit, interoperability, and unavailable/partial states.
3. Design role-appropriate hierarchy, critical alerts, orders/medications, confirmation, escalation, and safe interruption recovery.
4. Adapt the flow across required devices, input modes, assistive technologies, text sizes, and connectivity conditions.
5. Test synthetic critical journeys and failure paths with clinical, privacy, security, and accessibility reviewers; stop release on unresolved critical hazards.

Decision Rules

Capability Contract

• Must inspect approved clinical, privacy, interoperability, and hazard evidence; review is read-only unless implementation is authorised.
• May edit/test in-scope UI using synthetic/de-identified data. Do not access PHI, make clinical decisions, change care rules, or claim HIPAA/WCAG/regulatory certification.

Degraded Mode

• If clinical owner, harm analysis, data provenance, privacy basis, or emergency escalation is missing, stop the affected design/release decision.
• Without a safe test environment, provide a synthetic prototype and verification matrix marked unverified. Recover failures by entering a safe state, preserving audit context, escalating to the named role, and retesting the hazard path.

Quality Standards

Clinical safety, patient comprehension, privacy, accessibility, and explicit uncertainty outrank visual novelty; high-risk workflows require qualified domain review before release.

Anti-Patterns

• Treating colour as the only severity cue. Correction: add text, iconography, priority, and programmatic semantics.
• Hiding stale or partial data behind normal styling. Correction: expose timestamp, provenance, and unavailable fields.
• Using destructive clinical actions without patient/order review. Correction: confirm critical identity and consequence fields.
• Copying a consumer dashboard into a clinician workflow. Correction: optimise for role, urgency, density, and interruption.
• Claiming compliance from a visual checklist. Correction: record scope/evidence and require authorised legal/security review.

Outputs

• A clinical UI accessibility audit covering WCAG, error tolerance, alarm fatigue, and clinician workflow findings.
• A PHI handling note covering display, redaction, timeout, audit-trail, and equivalent privacy requirements when regulated health data is in scope.
• Implementation guidance, review findings, templates, or generated artifacts for the healthcare surface.

References

• doctrine/design-doctrine.md — the anti-slop charter; clinical UIs must still read as deliberately designed, not templated.
• doctrine/references/ai-slop-banned-fonts.md, doctrine/references/pairing-principles.md, doctrine/references/type-scale-and-spacing.md — typography, pairing, and scale rules for the colour/typography choices below.
• doctrine/references/system-font-fallbacks.md — the deliberate device-common fallback tier (relevant to the OS-native font note in Mobile Typography).
• Use the references/ directory for deep detail after reading the core workflow below.

Examples

• examples/clinical-screen-worked.md — worked spec for an inpatient vitals dashboard (bedside tablet): safety-first information hierarchy, three-signal status/alert design, WCAG 2.2 AA accessibility, error-prevention on vitals entry, and trust cues.

Overview

Healthcare UIs must do three things simultaneously: keep patients safe, keep clinicians efficient, and earn trust from both. Every pixel carries clinical weight — wrong colors, buried alerts, or confusing navigation can harm real people. Design for the worst moment a user will ever have in your app.

References: See references/ for deep-dive guides on each topic.

Platform Strategy

Which Platform, Which Role

Never design a single layout for all three. Each has distinct interaction model, ergonomic constraints, and cognitive load profile.

Mobile Design (Phones — < 768px)

Core Principles

• One-handed by default. Primary actions sit in the thumb zone (bottom 40% of screen).
• Bottom navigation (4–5 tabs max): Home, Messages, Appointments, Records, Profile.
• Single-column layout. No side-by-side clinical data — patients read under stress.
• 2–3 tap rule. Any critical task reachable in ≤ 3 taps from home.
• Touch targets. Minimum 48×48px for all interactive elements; 56px for aged or motor-impaired users.

Mobile Navigation

Bottom Tab Bar (always visible):
[Home] [Appointments] [Messages] [Records] [Profile]

Avoid: hamburger menus as primary nav, deep nested stacks (>3 levels)
Use: modal sheets for quick actions, FAB for single primary action

Key Mobile Screens

Patient Home Dashboard

• Greeting with patient name (trust signal)
• Next appointment card (most important info first)
• Medication reminders with time badges
• Recent lab results with status indicators (no color alone — add text: "Normal", "High", "Low")
• Quick actions: Book, Message Doctor, Refill

Telehealth Entry

• One-tap "Start Consultation" button (minimum 56px height, full-width)
• Pre-call checklist: camera, mic, internet check with visual pass/fail
• No waiting in dark UI — show animated "Connecting…" with estimated wait

Medication Reminder

• Large pill illustration + medication name in 20px+ bold
• Dose, timing, and instructions on one screen — no scrolling required
• "Taken" / "Skip" / "Snooze" — clear three-state action
• Red badge only for overdue doses — not for every reminder

Mood / Symptom Tracker

• Slider or large emoji-scale for quick entry (not typed input)
• Maximum 3 questions per session — cognitive load is high for unwell users
• Progress bar showing streak (gamification for chronic disease management)

Mobile Typography

• Body text: minimum 18px (older patients, low-light scenarios)
• Headings: 26–32px
• Labels / captions: 14px minimum
• Line height: 1.6× font size
• Font: deliberate OS-native system stack (SF Pro on iOS, the Android system face) — fastest load and platform familiarity in a safety-critical context; this is a documented device-common fallback, not a default reflex (see doctrine/references/system-font-fallbacks.md). For a branded patient-facing layer, pair a distinctive display face over it per doctrine/references/pairing-principles.md

Mobile Color

• Primary brand: calm blue (#3A7BD5 or equivalent) — do not use aggressive or saturated primaries
• Success: green (#10B981) — with text label
• Warning: amber (#F59E0B) — with text label
• Danger/alert: red (#EF4444) — with text label, never color alone
• Background: white or very light grey (#F9FAFB) — never dark backgrounds for patient-facing

Tablet Design (768px – 1280px)

Who Uses Tablets in Healthcare

• Ward nurses at patient bedside (portrait, one-handed while holding tablet)
• Rounding physicians reviewing records on the move (landscape, two-handed)
• Intake staff at reception (landscape, stationary, keyboard attached)
• Physiotherapists / Allied health during sessions with patient

Core Principles

• Both orientations must work. Portrait for bedside use, landscape for data review.
• Glance-first layout. Most important information visible without scrolling in portrait mode.
• Hybrid navigation. Bottom tab bar in portrait; sidebar nav in landscape.
• Touch AND keyboard. Tablet users frequently have Bluetooth keyboards; support Tab key and keyboard shortcuts.

Tablet Navigation

Portrait:  Bottom navigation (same as mobile)
Landscape: Persistent left sidebar (200px) + content area
           Sidebar collapses to icon-only (64px) when content needs more space

Key Tablet Screens

Nurse Rounding Dashboard (Landscape)

• Patient list (left panel, 280px): name, room, acuity color strip, last vitals time
• Patient detail (right panel): vitals chart, medications, notes, tasks
• Quick vitals entry inline — no modal, no navigation away
• "Next Patient" button bottom-right — supports fast ward rounds

Vitals Entry Form (Portrait)

• One metric per screen: BP → HR → SpO2 → Temp → Weight
• Large numeric keypad input (no small text fields)
• Previous reading shown for comparison
• Auto-flagging out-of-range values before submission

Patient Assessment / Intake (Landscape)

• Two-column form layout: questions left, patient context right
• Progress indicator: "Step 2 of 5"
• Autosave every 30 seconds — interruptions are constant
• "Interrupt & Resume Later" button — saves partial form with timestamp

Tablet Typography

• Body: 16px minimum (larger than mobile not needed — viewing distance is closer)
• Data tables: 14px with 1.4× line height for density
• Touch targets: same 48×48px minimum
• Consider: increase to 20px body for patient-facing tablet kiosks

Desktop Design (Clinician Workstations — ≥ 1280px)

Core Principles

• Density over simplicity. Clinicians need maximum information on screen — avoid mobile-style empty space.
• Left sidebar navigation — persistent, labeled, with keyboard shortcuts shown.
• Power-user workflows. Keyboard shortcuts for every critical action. Document them in a help overlay (? key).
• Multi-panel layouts. Patient context (left) + current task (center) + reference/alerts (right).
• Mouse + keyboard. Hover states, right-click menus, drag-and-drop are valid desktop-only patterns.

Desktop Navigation

┌─────────────┬────────────────────────────┬───────────────┐
│  Left       │       Main Content         │  Right Panel  │
│  Sidebar    │                            │  (Contextual) │
│  200px      │       ~60% width           │  280px        │
│  • Patients │                            │  • Alerts     │
│  • Schedule │                            │  • Messages   │
│  • Orders   │                            │  • Notes      │
│  • Reports  │                            │               │
└─────────────┴────────────────────────────┴───────────────┘

Key Desktop Screens

EHR Patient Summary

• Persistent patient header (always visible): name, DOB, MRN, allergies banner, active alerts
• Tabbed record sections: Summary | Medications | Labs | Imaging | Notes | History
• Inline ordering — never navigate away from patient context to place an order
• Timeline view option: chronological clinical events as a swimlane

Clinical Dashboard (Physician)

• My Patients panel: acuity-sorted, color-coded by status
• Tasks panel: pending orders, results needing review, messages
• Alerts panel: critical lab values, drug interactions, overdue actions
• Calendar strip for today's appointments

Medication Ordering

• Search with smart autocomplete (generic + brand names)
• Drug interaction warnings appear inline as user types — not after submission
• Dosage calculator for weight-based medications
• Two-step confirm: "Review" then "Sign" — separate from initial entry

Lab Results Review

• Reference ranges displayed next to every result
• Trend sparkline for each metric (last 5 readings)
• Critical values highlighted: bold + red + icon (three signals, not just color)
• One-click to message patient or order follow-up

Desktop Typography

• Body / data: 14px (dense clinical workflows benefit from tighter text)
• Navigation labels: 13px
• Patient name / primary headings: 18–22px
• Data table rows: 14px, 1.4× line height, alternating row shading

Color System (All Platforms)

Trusted Healthcare Palette

Rules:

• Never use color as the only indicator — always add text label or icon
• Red is reserved for true emergencies — overusing it creates alert fatigue
• Soft blues and greens reduce patient anxiety; avoid harsh saturated primaries for patient-facing
• Mental health / behavioral apps: consider soft lilac (#C4B5FD) as primary — reduces stigma

Specialty Palettes

• Aging care / accessibility apps: Higher contrast ratios; avoid subtle grey-on-grey
• Emergency / ICU dashboards: Darker backgrounds acceptable; high-contrast alert colors
• Wellness / fitness: Vibrant greens (#10B981, #059669) and teals (#14B8A6) — suggest vitality

Accessibility (Non-Negotiable)

• WCAG 2.1 AA minimum for all healthcare UIs; AAA for patient-facing
• Contrast ratio: 4.5:1 for body text; 3:1 for large text (≥18px)
• All interactive elements keyboard-navigable; visible focus ring (3px outline, 2px offset)
• Screen reader: semantic HTML, ARIA labels, role="alert" for dynamic clinical updates
• Touch targets: 48×48px minimum on all touch interfaces
• Never use only color, shape, or sound to convey critical information

Patient Safety Rules (Always Enforced)

1. Allergies visible before any prescribing screen — persistent banner, not one-click away
2. Drug interactions interrupt workflow for severe interactions — modal, not passive banner
3. Confirmation dialogs for irreversible actions — show specifics: "Administer 500mg Paracetamol to Jane Doe. Confirm?"
4. Two patient identifiers on every clinical screen (name + DOB or MRN)
5. Out-of-range vitals flagged with color + icon + text (three independent signals)
6. Autosave every 30 seconds — clinicians are interrupted constantly; partial data must not be lost
7. Session timeout warning 2 minutes before auto-logout on shared workstations

Regulatory Compliance

App Type Quick-Start Guide

Anti-Patterns (Never Do)

• Color alone to indicate severity — always add text/icon
• Medical jargon in patient-facing interfaces without plain-language alternative
• Hover-only controls on touch platforms
• Modal dialogs for non-critical information (kills clinical flow)
• Identical layouts for mobile and desktop (different cognitive contexts)
• Alert fatigue through overuse of red / notification badges
• Forgetting landscape orientation on tablet
• Tiny touch targets (<44px) in a context where users may have gloves, tremors, or stress

Pre-Delivery Checklist

• Two patient identifiers on every clinical screen
• Allergies banner visible before any prescribing action
• Critical alerts use color + icon + text (three signals)
• All touch targets ≥ 48×48px (≥56px for aging/accessibility)
• WCAG 2.1 AA contrast ratios verified
• Keyboard navigation tested (Tab, Enter, Arrow keys only)
• Screen reader tested (VoiceOver / TalkBack)
• Session timeout configured and warning shown
• Audit trail implemented for all data writes
• Confirmation dialogs on all irreversible actions
• Interruption recovery: autosave + resume banner
• Tablet: portrait AND landscape tested
• Mobile: one-handed reach for all critical actions
• Desktop: keyboard shortcuts documented in help overlay