> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://blueprint.ziro.health/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://blueprint.ziro.health/_mcp/server.

# UI/UX Design

Health application design requires a different approach than consumer app design. The stakes are higher, the users more diverse, and the constraints more complex.

## Health-Specific UX Heuristics

Beyond standard usability heuristics, health apps must consider:

* **Error prevention**: A mistake in a health app can have clinical consequences. Design to prevent errors, not just recover from them.
* **Visibility of clinical status**: Patients and clinicians need to quickly understand where things stand.
* **Match between clinical and digital**: Use medical terminology consistently. Don't invent new names for established concepts.
* **Consistency with clinical workflows**: Your app should fit into how care is actually delivered.
* **Recognition over recall**: Patients managing multiple conditions shouldn't have to remember details.

## Design System Considerations for Health

A health design system should include:

| Component    | Health-Specific Consideration                                              |
| ------------ | -------------------------------------------------------------------------- |
| Typography   | Large minimum sizes for aging users, clear hierarchy for clinical data     |
| Color        | Colorblind-safe palettes, culturally appropriate colors, red/green caution |
| Data display | Tables, charts, trends — optimized for quick clinical decisions            |
| Forms        | Minimized data entry, smart defaults, voice input support                  |
| Alerts       | Tiered urgency, non-alarming notification design, clear action steps       |
| Navigation   | Simple, consistent, with quick access to critical features                 |

## Prototyping and Testing with Health Professionals

Testing with healthcare professionals requires adaptation:

* **Recruitment**: Clinicians are time-constrained. Plan for shorter sessions.
* **Context**: Test in clinical environments or realistic simulations.
* **Scenarios**: Use clinically accurate scenarios, not generic tasks.
* **Measures**: Task completion time matters more than preference.
* **Compliance awareness**: Testers will notice regulatory issues.

## Accessibility in Health UI

Health apps must serve users of all abilities:

* **Vision**: High contrast, scalable text, screen reader compatibility for health data
* **Motor**: Large touch targets, voice input, support for assistive devices
* **Cognitive**: Clear language, consistent navigation, error prevention
* **Hearing**: Captions for video content, visual indicators for alerts

## Data Density Challenges

Health apps often need to display complex data. Strategies include:

* Progressive disclosure: Start simple, reveal detail on demand
* Trend-first: Show the pattern before the individual data point
* Clinical summaries: AI-generated summaries of what matters most
* Configurable dashboards: Let clinicians choose what to display

***

## Related Chapters

* [Industrial Design](/product-lifecycle/industrial-design) — Physical product UX
* [Accessibility as Baseline](/design-patterns/accessibility) — Deep dive on accessibility
* [Design Patterns Library](/design-patterns) — Reusable UI patterns for health