Written by Michelle Murphy

There is a lot of innovative technology coming out of the medtech industry right now. It’s fun and exciting to be a part of this. At Frontend.com, I get the chance to work on the design of cutting edge medical device products, services, and interfaces. 

Let’s be honest though — this field can be intimidating for designers starting out. Human factors guidelines manuals IEC 62366-1:2015 and ANSI/AAMI HE75 have so much information that it’s a challenge making sense of it all. For this reason, I’ve written this article as an introduction to designing clinical device interfaces. It’s also suitable for more seasoned UX professionals looking to pick up some tips that you can’t find in the manuals, and for anyone else in the medtech space who is wondering what’s involved. 

Please note, this article is based on my own experience designing medical User Interfaces. Always reference up-to-date guidelines, and of course, test your designs. 

Before designing, (I won’t go into this in detail in this article), get to know the device and procedure inside out by conducting a task analysis. Surgical procedures, particularly emergency ones, may sometimes only be accessible via rigs, online videos and manuals. 

It’s also important to conduct primary research with all stakeholders and familiarise yourself with other device interfaces that your target users may interact with.  

Critical tasks should be reviewed in advance if these have been provided, however, they may not become available until close to the testing phase. Reviewing these can keep focus on important tasks during the design phase. Here are my top tips once you reach the design phase:

01 — Streamline Tasks

Discoverability, surprises and moments of delight may all be appropriate for consumer products such as Spotify. In an emergency and life threatening situation... not so much. Here are some steps to follow:

  • Make setup and operation foolproof. The medical device might not be used too often. So a user should be able to pick it up and know how to setup and operate it, to the extent possible. Note that this may not always be possible with highly complex devices. However, in such cases, contextual prompts and troubleshooting can help to guide users towards correct action.
  • Focus tasks by only showing what is useful at any given time.
  • Reduce manual input of data where possible. This can be achieved for example by bringing in data from EHR systems, or automatically filling-in text fields (if not risky).
  • Use interrupts during critical tasks to confirm actions. Buttons for critical actions should be located away from frequent touch targets.
  • Be explicit. Leave no room for error by providing precise wording during tasks, particularly during critical actions.
  • Avoid covering important information, such as vitals or treatment values, with other UI components, during tasks. 
Example of a critical action.
Example of a critical action.

02 — Use Conventions and Affordances

Medical device interfaces are not a place for design experimentation. Items on screen should always behave as users expect. A lot can be borrowed from mobile and tablet UI conventions, as users have now become accustomed to these. But designers should know where to draw the line. While common consumer UI frameworks have now done away with many affordances (think of Android’s Material Design), medical device users should never need to guess where to click.

  • Use affordances such as conventional button forms and/or drop-shadows, and incorporate interaction styles. 
  • Use conventional styles and behaviours of navigation, pagination, grids, drawers, and toggles etc. All such items should also be located where users would expect to find them. 

03 — Know Your User's Interaction Limitations

  • Research the task and context. Should a device be completely touchscreen or incorporate physical knobs or dials? The user may need to use multiple devices simultaneously and may not be able to focus solely on a UI. 
  • Screen touch targets should be much bigger than on mobile UIs. A way to achieve this without making the design appear clunky is by reducing the size of UI buttons graphically, but maintaining their surrounding physical touch target dimensions. 
  • Beware of scrolling. This is particularly relevant for devices used in emergency situations, contact with fluids that might make hands slippery and smear touchscreens, users wearing gloves, and hardware limitations such as certain resistive screens. Because touch targets need to be so large, it is tempting to overcome this by trying to fit everything onto one ‘page’. Well-designed interfaces will show only what is useful at a given time. 
  • Make clickable items easy to find by avoiding designs where components jump around the screen or change location. Muscle memory can be developed during frequent tasks if the buttons are fixed. 
  • Consider frequently-used button placement on touchscreens; hands should not block important information during monitoring.
  • Optimize fonts for legibility, paying particular attention to maximise differentiation between numeric values, and check the viewing distances required for various tasks by reviewing guideline manual ANSI/AAMI HE75

04 — Use Colour Deliberately

  • Beyond carefully incorporating the brand’s colour into the interface, you should use colour purposefully, for example, to signify states, status, alerts, and gas/liquid/medications.
  • Unless there is a valid reason to do so, only use yellow, orange, and red to denote alert states.
  • Colours should comply with ADA (Americans with Disabilities Act) guidelines. This includes not relying on colour alone to convey meaning, and complying with colour contrast standards. 
  • Be mindful of localisation. Colours can have an entirely different meanings in different cultures.
  • Backgrounds should be a neutral colour to avoid competing with other information. Black backgrounds with bright values can be very effective for monitoring in dark environments. 
  • Test your designs on the relevant hardware and refine as necessary. Some medical-grade screens can make colours appear washed out, leading to a reduction in contrast. 

05 — Reduce Cognitive Load

Too much information can distract, confuse, or overwhelm the user. This is often the case with many older medical device interfaces that were designed by engineers, with no UX oversight. 

  • Strip back the UI to only what is necessary. Complex diagrams can lead to the user missing or misinterpreting important information.
  • Where multiple alarms are present, it is important not to overwhelm the user by presenting all at once. Specific ISO guidelines around alarms can be found here.
  • During monitoring, consider what values are most important and draw that information out. This can change depending on the stage of usage/treatment. In general, monitored values should be much bigger than labels; this will help focus the user.
  • Consider a monitoring and standby mode; certain features may only be necessary when interacting with the device.

06 — Incorporate Animations

Animations can guide users towards specific actions and also reassure them that the device is working properly. Animations can show:

  • Progress through a task. 
  • Feedback that the user has completed tasks correctly.
  • Animated infographics of the device inner workings/delivery of treatment (if helpful). 
  • Live data animations, of vital signs for example, can reassure the viewer that the device is not frozen. 
  • Troubleshooting animated diagrams pinpointing areas of the device that require attention and guiding users towards the correct action.

07 — Adopt a Clean Look and Feel

The frequency of medical device software updates is generally less than in other industries because of the exhaustive 510k approval process required. As a result, many medical device interfaces that are in use today can look dated. 

  • Future-proof your design by going for a clean, simple, and not-too-trendy style. 
  • Consider using well-established icons in use on mobile platforms. While some icons are locked down by ISO, others such as alarm icons, are merely guidelines. I have found certain ISO icons, which were designed before smartphones were commonplace and when conventions had not yet been developed, to be unintuitive. While ISO recommends not straying far from these icons, you can still add your own styling over these, or even use new ones if your choice is validated through user testing. 
Comparing ISO icons with contemporary Material Design icons.
Comparing the ISO 'No Alarm' and 'GPS' icons with their contemporary Material Design counterparts.

08 — Be Objective

Personal taste and preferences are not valid reasons for making medical UI design decisions. If all of the above guidelines are followed, your design will be objective by default. 

  • Record your objective reasons for design decisions of both discarded and current designs throughout the process, then bring them up in design reviews. 
  • Reference ISO/HE75 guidelines in reports and reviews. This can help get stakeholder’s onboard with the new design. 

09 — Track Changes

Because the UI is constantly in flux during the design phase, it can be extremely burdensome and tedious to document, version, and map all changes to files and features when multiple people are working on a large-scale prototype. All of this is, unfortunately, required by the FDA for compliance. I have not found a tool that solves this challenge yet. Here are some steps that you can take to help documenting go more smoothly:

  • Once the design has reached a relatively stable stage, record any changes made, pinpointing exact features. 
  • Only share designs with stakeholders once daily, on a newly versioned file. Uploading designs to the cloud ad-hoc can result in a versioning/mapping nightmare. The file version number should be visible on every screen of the UI.
  • Keep a record of who has requested the feature be changed and when, what actions were taken (if any) and the reason, and who made the changes. I have also found this to be good practice when working on non-medical projects. If done efficiently, this can double up as a to-do list. 

10 — Add Value

Medical devices that do the job adequately are not enough, particularly when there are multiple competitors in the market. To stay ahead, it is imperative to think beyond the primary usage of the device. 

  • Research all stakeholders that come into contact with the product/service. They provide insight into opportunities for improvement.
  • Think beyond the primary task. Can the device interface also be used for guiding setup, training, troubleshooting, ordering supplies, or guided tear-down? This can have the added benefit of reducing support costs further down the line.

In summary, designing medical device interfaces can be challenging, but once you create fool-proof task flows, stay on top of regulations, and test your prototype thoroughly, your designs should be a success. If you have any questions about creating or updating your clinical device interface, product, or service, or if are interested in joining our team, contact us at Frontend.com.