UI/UX Best Practices for Canvas App Development
Designing for care teams means designing for speed, clarity, and minimal disruption. Below are key best practices to help your application feel intuitive, context-aware, and seamless within the EHR environment.
Application Name: Choose a name that clearly reflects your app’s use case. Ensure it is unique and avoids confusion or potential conflicts with existing healthcare brands or trademarks.
Application Icon: Use a transparent background and ensure the icon is free of sensitive or inappropriate imagery. It should align with your brand identity, be clearly distinguishable from other healthcare brands, and avoid any trademark or branding conflicts.
Application Iframe URL: Ensure the URL provided is production-ready; do not accept URLs that point to development, demo, or local environments.
Select the Right App Size for Workflow Fit
Your app will overlay the EHR, so choosing the right size is critical for usability and care team satisfaction. You can configure this in the Vim Hub manifest under the Size setting:
- Classic (365px width x 90vh)
Best for most use cases. Balances space and flexibility, users can interact with both your app and the EHR simultaneously. - Large (800px width x 90vh)
Ideal for apps with data-dense tables or multi-step actions. Use when screen real estate is essential for usability. - Full Screen (100vw x 100vh)
Best for apps that temporarily take over the user’s workflow. Be cautious as this view blocks EHR access while open and can disrupt multitasking.
You can set a default static size for your app in the app manifest (see instructions here). Additionally, you can adjust the app’s size dynamically based on your business logic, without requiring user input (instructions here). For greater user control, consider adding increase/decrease size buttons that call the dynamic resize function, this empowers end users to adjust the app’s size themselves (same instructions as above, with a UX component). For reference, check out the size icons in the top right header of the Canvas demo app.
Use Notification Badges Thoughtfully - Highlight relevant updates using Vim’s notification badge, a red icon with a numeric count. This can remain visible even when the app is open, but use sparingly to avoid fatigue. Avoid leaving badges active unless they reflect an actionable, time-sensitive update.
Push Notifications: Be Timely, Not Noisy - Push notifications are a great way to re-engage users when Vim Hub is closed. Use them to deliver brief, high-value updates tied to the current workflow or patient. Be concise, workflow-relevant, and avoid disrupting care teams mid-encounter unless essential
Auto Popup: Prioritize Timing and Relevance - Your app can auto-expand when specific business logic is triggered. Use this feature to bring users in at the right moment—when your app adds the most value. Avoid automatic expansion on every patient or non-patient workflow and reserve for critical, time-sensitive actions.
App Always Available: Use with Intent - Enable “always available” if your app needs to be accessible at all times. It will appear grayed out when inactive to minimize distraction. Use only for apps relevant across all workflows
Patient Header: Reinforce Context - By default, Vim Hub includes a patient context header showing first name, last name, DOB, age, and insurance. This ensures your app is anchored to the right patient at all times if your app is only available when in a specific patient record. Recommended for patient-specific apps only.
EHR Workflow Resources
We provide access to a comprehensive range of EHR data you can read and write. We recommend enabling only the workflow resources that are truly relevant and essential for your app’s use case. The specific EHR access you request will be visible to practices and end users during their review process on your app’s description page. As part of app submission, we will also review that your requested access appropriately aligns with your app’s functionality.
Summary: Design for Context, Clarity, and Minimal Friction
When building apps for clinical workflows:
- Respect screen space and cognitive load
- Engage users with the right message at the right time
- Keep the experience lightweight, responsive, and easy to dismiss or ignore when not relevant