Balancing Aesthetics and Usability in Medical User Interface Design: 9 Key Trends

As the influence of technology in our everyday lives continues to grow, the standard for aesthetically pleasing and contemporary user interface (UI) designs in the healthcare space continues to evolve.

From flat design to material design, and gestural controls to long form content scrolling, healthcare professionals’ and patients’ expectations for what a medical device should look and behave like are influenced by the UI trends seen in consumer products.

Unfortunately, many of the contemporary UI trends in the consumer space do not translate well to safety-critical applications in the medical space. In the consumer space, an incorrect button press or an overlooked header typically do not have dire consequences. However, such use errors in the medical space can result in harm.

To address this topic, we recently presented a poster titled “Balancing Aesthetics and Usability in Medical User Interface Design” at the 2018 Human Factors and Ergonomics Society (HFES) Healthcare Symposium.

In the poster, we highlighted some common contemporary user interface (UI) design trends and provided tips for creating UIs that are both aesthetically pleasing and safe. We received positive feedback from conference attendees, including representatives from large medical device manufacturers, pharmaceutical companies, product development firms, and electronic medical record (EMR) manufacturers. During our conversations with attendees, one theme emerged – designers are constantly grappling with balancing safety and usability with aesthetics. A number of attendees voiced their appreciation that our poster clearly addressed some of the very topics with which they have struggled.

Below, we highlight nine common UI trends and tips for designing a UI that is both contemporary and safe.

1) Skeuomorphic vs. Flat design

Flat design, the minimalist approach that is devoid of gradients and drop shadows, has become synonymous with modern and clean aesthetics. However, a lack of these visual cues makes it difficult for users to quickly differentiate interactive controls from static text. In contrast, skeuomorphic design elements retain ornamental design cues that  help users quickly identify interactive controls, but at the cost of looking dated.

Design tips:

• Use flat design for secondary and/or non-critical controls, or when other on-screen cues help users differentiate interactive controls from static text (e.g., when there is only 1-2 buttons).
• Explore using subtle gradients and drop shadows that give controls a nuanced 3-D appearance without being heavy-handed.

2) Icons with labels

As screens have become smaller, screen real estate has become more precious. In an effort to reduce visual complexity (and eliminate the need for translations), many designers have taken an icon-only approach to labeling controls. While this creates a clean look, icon-only labels are subject to misinterpretation, especially in medical device UIs where control labels might not have straightforward pictorial equivalents.

Design tips:

• When possible, pair icons with concise text labels that help clarify the control’s function.
• Use a clean san serif typeface (e.g., Helvetica Neue) and simple icons to help reduce visual complexity.
• Consider using text labels that are all capital letters. Capital letters can make labels look cleaner because all letters are the same height (note: never use all caps for blocks of text).

3) Meaningful graphics

We have seen an increased use of graphics and icons in general. There is no doubt that graphics add considerably to screen appeal. However, graphics that are overly-detailed, unclear, or unnecessary create visual clutter and confusion. Graphics should be simple and visually appealing, and used when they enhance communication and appeal. In essence, graphics should only be used if they are meaningful.

Design tips:

• Use simple illustrations that guide users through a process. Use simple icons that help users quickly locate a control (e.g., a plus on an “Add patient” control) or interpret a device’s status (e.g., an animated drop indicating an infusion is active).

4) Scrolling

Relying on scrolling enables designers to create a cleaner-looking design by limiting the amount of visible information on a single screen. Scrolling effects such as parallax scrolling, and the use of simulated physics, can even entice and “delight” users. However, users are likely to accept a more complex screen if it prevents having to scroll. Furthermore, when critical information and/or controls are pushed “below the fold,” users are prone to make potentially harmful use errors.

Design tips:

• When possible, present all primary information and controls on the top level or provide a clear affordance for accessing additional information and controls (e.g., tabs, “View all” control).
• When scrolling is necessary, ensure there are strong visual cues that users can scroll (e.g., a persistent scroll bar or displaying partial content at the bottom edge of the screen).
• Ensure scrolling dynamics feel natural and pleasing (e.g., smooth motion, acceleration, bounce).

5) Placeholder text vs. labels

In an effort to “kill two birds with one stone,” there is a trend to replace entry field labels with in-field placeholder text. However, the placeholder text disappears once the user types something into the field, leaving a screen of unlabeled information that can lead to misinterpretation and entry errors. Fields should always be labeled, and placeholder text should be used as an additional hint, description, or example of the information required.

Design tips:

• When possible, have clear, visible labels that are presented outside of the entry field.
• Use placeholder text to provide an example of the expected data format. Ensure the placeholder text is sufficiently legible and is automatically replaced by entered text.
• If there is limited space, consider using adaptive in-field labels that animate to the top of the field once a user starts to enter text.

6) Spinners vs. traditional controls

New methods of data input, such as spinners, have become standard in mobile interfaces. While spinners allow users to rapidly cycle through digits, our research has shown that spinners are prone to use errors. Some users struggle to precisely select the intended value, often overshooting the value or inadvertently touching the spinner and changing the value. As such, some users have described spinners as cumbersome and frustrating.

Design tips:

• Consider using more traditional numerical entry controls (e.g., up/down arrows,
  numerical keypad), but updating their visual style to make them seem more contemporary.
• When appropriate, consider using other newer data input methods to increase speed and accuracy (e.g., calendar widget for entering dates).

7) Text size and legibility

Many modern designers use small text to reduce visual density and create screens that have a clean, airy look. However, presenting critical information using small text makes the information less legible and increases the potential for harmful mistakes. Using larger text sizes can make a screen seem more crowded and dated, but legibility should take priority when presenting critical information. Using a larger text size is often essential when the intended users are likely to have visual impairments.

Design tips:

• When in doubt, use larger text to present critical information. Users are likely to value clear and easy-to-read information over a slightly cleaner-looking screen. 
• To reduce complexity, consider using a light font variant for presenting non-critical information.
• Use concise and clear prompts to reduce the amount of text on the screen. Establish a strong visual hierarchy and use spacing to give screens a balanced and organized appearance. 

8) Stylized typefaces and legibility

Typography helps give UIs distinct personalities. Stylized text can create a particular vibe. Most modern interfaces use clean and stylish san serif typefaces. However, some san serif fonts have over-stylized numeric characters or small decimal points that can lead to dangerous misinterpretations. For example, with some typefaces, the number “1” can start to look like a 7. On the right, the first “11.1 mL/hr” clearly reads as 11.1, while the fonts below start to look more like “77.7”.

Design tips:

• Carefully consider whether certain characters (e.g., i I, l L, 1, 7) are prone to misinterpretation.
• Reserve stylized text for headers, or other short text strings where legibility is less critical.
• Ensure the x-height (distance between the baseline and the mean line of lower-caseletters) of the typeface are appropriately sized. When the x-height is too tall, characters can become less recognizable. 

9) Clear entry fields and controls

In an effort to create clean, minimal designs, some designers have distilled fields down to a point that they lack clarity and create confusion. For example, we have seen input fields reduced to a single line, appearing more like a demarcation line than an entry field requiring user input. To reduce cognitive load and increase efficiency, we recommend rendering fields and controls so they clearly communicate their function.

Design tips:

• Use more traditional button and field shapes that users are more likely to perceive as interactive controls. For example, over time an empty box has come to represent an entry field.
• Explore using flat fills and/or subtle gradients to create a minimal look without sacrificing clarity.
• Integrate value-added dynamics (e.g., auto-advancing to the next field, real-time feedback on data formatting) to make the user experience feel more modern.

Valerie Ng is Senior UX Designer and Jon Tilliss is Design Director at UL Wiklund. Learn more about medical device human factors research and design at UL Wiklund.

Related human factors engineering resources:

• Human factors engineering (HFE) and usability testing support for medical devices
• Webinar: HFE for medical devices