Use when a clinical, EHR/EMR, patient portal, telemedicine, medication, wellness, or ageing-care interface needs safety-centred web, mobile, or tablet UX. Do not use for medical advice, clinical-rule authoring, or compliance certification; require authoritative clinical and legal owners.
Use when a clinical, EHR/EMR, patient portal, telemedicine, medication, wellness, or ageing-care interface needs safety-centred web, mobile, or tablet UX. Do not use for medical advice, clinical-rule authoring, or compliance certification; require authoritative clinical and legal owners.
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
Input
Source
Evidence
Clinical task, roles, urgency, and harm scenarios
Clinical safety owner and practitioners
Approved workflow, escalation, and hazard analysis
Patient data, consent, privacy, and jurisdiction rules
Legal/privacy/security owners
Verified policy, minimum-necessary access, and audit requirements
Device, environment, interoperability, and accessibility constraints
Engineering, operations, research
Supported platforms, data states, latency, and user needs
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
Confirm clinical task, accountable roles, patient identity, urgency, environment, and harm scenarios with the clinical safety owner.
Map authoritative data provenance, freshness, access, consent, audit, interoperability, and unavailable/partial states.
Adapt the flow across required devices, input modes, assistive technologies, text sizes, and connectivity conditions.
Test synthetic critical journeys and failure paths with clinical, privacy, security, and accessibility reviewers; stop release on unresolved critical hazards.
Decision Rules
Condition
Choice
Wrong-choice failure
Information affects immediate clinical action
Persistent, prioritised alert with acknowledgement/escalation
Toast-only feedback is missed and may cause harm
Data is stale, partial, or unavailable
Label provenance/time and block unsafe inference
Normal-looking stale data invites clinical misuse
Action changes medication/order/care
Review critical fields and require authorised confirmation
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
Output
Consumer
Evidence and acceptance
Healthcare interaction and safety specification
Clinical, product, engineering
Roles, data provenance, critical actions, alerts, privacy, and recovery are explicit
Clinical UI evidence pack
Safety, privacy, accessibility QA
Hazard paths, stale/partial states, identity, audit, and representative devices are tested
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.
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")
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
