122 lines
6.9 KiB
Markdown
122 lines
6.9 KiB
Markdown
---
|
|
name: healthcare-ui-design
|
|
description: Design clinical and patient-facing healthcare web UIs that prioritize safety, clarity, and regulatory compliance while integrating all backend actions strictly through APIs.
|
|
---
|
|
|
|
# Healthcare UI Design Skill
|
|
|
|
## Overview
|
|
|
|
Design healthcare user interfaces for clinical workflows, patient portals, and medical record systems. Prioritize patient safety, regulatory compliance (HIPAA, FDA 21 CFR Part 11), and clarity under high-stress conditions. Ensure all backend activity is API-driven.
|
|
|
|
## When to Use
|
|
|
|
- Designing clinical dashboards, patient intake forms, or electronic health record (EHR) screens.
|
|
- Creating patient-facing portals for appointment scheduling, lab results, or medication management.
|
|
- Reviewing existing healthcare UIs for compliance, accessibility, and usability.
|
|
- Defining API-first UI workflows for clinical data entry and retrieval.
|
|
|
|
## Quick Reference
|
|
|
|
| Attribute | Value |
|
|
|-------------|-------|
|
|
| **Domain** | Healthcare, clinical, patient-facing |
|
|
| **Standards** | HIPAA, FDA 21 CFR Part 11, WCAG 2.1 AA, ISO 62366-1 (Usability Engineering) |
|
|
| **Tone** | Safety-critical, precise, compliant |
|
|
|
|
## Core Instructions
|
|
|
|
### 1) Patient Safety First
|
|
|
|
- Display critical information (allergies, drug interactions, alerts) prominently and persistently.
|
|
- Use color coding with redundant text/icon indicators (never color alone per WCAG 2.1).
|
|
- Require explicit confirmation for high-risk actions (medication orders, dosage changes).
|
|
|
|
### 2) Regulatory Compliance
|
|
|
|
- Implement audit trails for all data modifications (who, what, when).
|
|
- Support electronic signatures per FDA 21 CFR Part 11 where applicable.
|
|
- Enforce session timeouts and re-authentication for sensitive operations (HIPAA).
|
|
- Display patient identifiers consistently (minimum two identifiers per ISO 62366-1).
|
|
|
|
### 3) Clinical Workflow Efficiency
|
|
|
|
- Minimize clicks for high-frequency tasks (vitals entry, medication administration).
|
|
- Support barcode scanning for patient wristbands and medication verification.
|
|
- Provide keyboard shortcuts for power users in clinical settings.
|
|
- Design for interruption recovery (clinicians are frequently interrupted mid-task).
|
|
|
|
### 4) API-First Rule
|
|
|
|
All backend activity must go through APIs. Never assume direct database access. Keep UI optimistic where safe and reconcile with API responses. Apply strict error handling for clinical data integrity.
|
|
|
|
## Cognitive UX Evaluation
|
|
|
|
For cognitive science-based evaluation of clinical UI designs -- particularly the Attention Mind (reducing cognitive load in high-stress clinical environments), Language Mind (clear medical terminology and error messages), and Emotion Mind (trust signals for patient-facing interfaces) -- reference `skills/cognitive-ux-framework/`.
|
|
|
|
## Accessibility
|
|
|
|
- WCAG 2.1 AA minimum; AAA for patient-facing interfaces.
|
|
- Large touch targets (minimum 48x48px) for tablet-based clinical entry.
|
|
- High contrast mode for bright clinical environments.
|
|
- Screen reader compatibility for visually impaired patients.
|
|
|
|
## Common Pitfalls
|
|
|
|
- Displaying too much information simultaneously (cognitive overload in clinical settings).
|
|
- Relying on color alone to indicate alert severity.
|
|
- Missing confirmation dialogs on irreversible clinical actions.
|
|
- Inadequate session timeout policies for shared clinical workstations.
|
|
- Not designing for interruption recovery in clinical workflows.
|
|
|
|
## Cognitive UX Evaluation
|
|
|
|
For cognitive science-based evaluation of clinical UI designs — particularly the Attention Mind (reducing cognitive load in high-stress clinical environments), Language Mind (clear medical terminology and error messages), and Emotion Mind (trust signals for patient-facing interfaces) — reference `skills/cognitive-ux-framework/`.
|
|
|
|
## Motivation & Engagement in Clinical UX
|
|
|
|
From Hodent (2022) *What UX Is Really About* — Self-Determination Theory (SDT) applied to clinical software.
|
|
|
|
Clinicians disengage from or work around clinical software when their fundamental motivational needs are violated. Design must satisfy all three SDT needs:
|
|
|
|
### Competence (Feeling Skilled and In Control)
|
|
- New staff need more scaffolding: wizards, contextual help, pre-populated suggestions
|
|
- Experienced clinicians need shortcuts: keyboard shortcuts, quick-entry fields, saved templates
|
|
- Never design a one-size-fits-all workflow — it makes experts feel clumsy and beginners feel lost
|
|
- Show competence growth: highlight when a user masters a new workflow
|
|
- Feedback timing: visual acknowledgment within 100ms; meaningful response within 1 second
|
|
|
|
### Autonomy (Meaningful Choice, Not Forced Paths)
|
|
- Rigid workflow sequences that cannot be adjusted cause resistance and workarounds
|
|
- Provide clear, well-labelled escape hatches when the standard path does not fit the clinical situation
|
|
- Allow users to customise common actions, shortcuts, and default values
|
|
- Explain *why* a constraint exists (regulatory, safety-critical) — clinicians respect justified constraints; they resist arbitrary ones
|
|
|
|
### Relatedness (Connection to Shared Purpose)
|
|
- Connect individual data entry actions to visible patient outcomes where possible
|
|
- Team context: show who else is viewing or editing a record
|
|
- Surface alerts that connect a clinician's action to downstream team members
|
|
- Avoid creating a feeling of "I'm just entering data into a machine"
|
|
|
|
---
|
|
|
|
## Cognitive Load in High-Stress Clinical Environments
|
|
|
|
Clinical settings impose maximum intrinsic cognitive load. Every design decision must ruthlessly eliminate extraneous load.
|
|
|
|
### Core Principles
|
|
- **Recognition over recall is mandatory:** Clinicians under stress cannot remember; display everything needed for a decision on the current screen. Never require mental calculation or cross-screen navigation for critical decisions.
|
|
- **Interruption recovery:** Save state aggressively. On return to a screen after interruption, show a clear "where were you?" banner: "You were entering vitals for [Patient Name]. Continue?"
|
|
- **Error prevention over error recovery:** In clinical contexts, the cost of an error is severe. Force a deliberate pause before irreversible actions (medication orders, dosage changes, record deletions). Require explicit confirmation with specifics shown: "Administer 500mg Paracetamol to [Name]. Confirm?"
|
|
|
|
### Critical Information Display
|
|
- Allergies and contraindications must be visible before any prescribing action — not one click away
|
|
- Drug interaction warnings must interrupt the workflow (not a passive banner) for severe interactions
|
|
- Vital signs outside normal range must be visually distinct through colour, size, AND icon — never colour alone
|
|
|
|
### Anxiety Reduction (Emotion Mind)
|
|
- Preview outcomes before committing: "You are about to sign off [Document Type] for [Patient Name]"
|
|
- Show costs, fees, and complete information before the final confirmation step in patient-facing billing
|
|
- Allow easy exit from any flow without losing progress — autosave in the background
|
|
- In patient-facing interfaces: use calm, reassuring language; avoid clinical jargon
|