Jul 8, 2018
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.
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:
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:
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:
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:
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:
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:
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:
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:
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:
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: