Entering the world of medical device has been an eye-opening experience. Unlike traditional branding, packaging, or consumer goods, the medical device field hasn’t historically relied on the aesthetics or user experience of a product to dictate its success. In other words, designing for a user’s most optimal experience has long been on the back burner. Especially in emergency medicine.
But a bad user experience in healthcare isn’t just bad design – it’s valuable time, money, and (possibly) lives lost. A poorly designed user interface increases the cognitive load on healthcare workers, which in turn, increases the time it takes to properly diagnose and treat a patient.
That’s why it’s so important to make sure a device’s UX or UI follows a few basic usability guidelines. Here are a few of the most impactful guidelines to follow for a user-friendly interface.
Did you know that 21.7 million US adults have vision issues? Designing for accessibility shouldn’t just be about meeting legal requirements. It should be about the consideration of all your users and their abilities. The contrast ratio of an image/ typographic element and its background is vital in making sure that all users can properly read text within your UI. And in the medical world, time spent deciphering text could affect diagnosis and treatment of a patient.
Punchkick: A Beginner’s Guide to Designing for Accessibility
https://www.punchkick.com/user-research/user-experience/2019/05/28/designing-for-accessibility
Punchkick has a great guide to understanding the basics of designing for accessibility. Not only do they provide readers with the history of the accessible design movement, they cover the four core elements of WCAG (see below) with helpful tips and tricks to accompany each one.
The Web Content Accessibility Guidelines
https://www.w3.org/WAI/standards-guidelines/
For contrast ratios in particular, The Web Content Accessibility Guidelines (WCAG) are a great place to start if you’re lost when making decisions about typographic color. Abide by these ratios when building out your graphic guidelines.
- Body text: 4.5:1
- Large text: 3:1
- Black and white text : 21:1
Web AIM Contrast Checker
https://webaim.org/resources/contrastchecker/
But perhaps the most helpful contrast ratio tool is this contrast checker from Web AIM. Just enter the hex codes of your type and background and voila – you’ll know if your design meets accessibility standards for vision-impaired users.
Although it may seem like your team are the experts when it comes to the ins and outs of your product, there is a group of people even more important – the users. Sometimes (many times) the designer knows best, but in the end, it’s operators and clinicians who will be interacting with your UX on the regular.
We recently redesigned the UI of our Operator Portal and were able to host zoom calls with operating technicians at clinical sites. Using Figma screen prototypes, technicians could comment on their experience with the new UI before development began. Here are some other amazing tools for user testing and iteration.
Prototyping in Figma
https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma
Check out Figma’s easy-to-follow guide to prototyping. If you haven’t heard of it yet, Figma is a collaborative user interface design tool where designers and developers can connect to build UX flows. After a flow’s built out, the program is also great for user testing.
Useberry + Figma
https://www.useberry.com/integrations/figma/
Useberry can be used as an integration to Figma, by providing designers and product teams with a slick environment for more in-depth user testing. They can even provide you with a pool of audiences to test with.
Invision’s Guide to Usability Testing
https://www.invisionapp.com/defined/usability-testing
Invision defines the difference between User and Usability testing with this simple how-to guide for conducting your own walkthroughs.
When combined with color, type, and shape, iconography is another way to give users the information they need to make decisions quickly. Instead of just filling an “emergency stop” button red, adding an icon can allow users to recognize it faster. But for many teams, the limiting factor of creating an icon system is the technical aspect of designing it. Why reinvent the wheel? These iconography portfolios are open source and ready for you to use.
Material Design Icons
https://materialdesignicons.com
FontAwesome
ionicons
There are countless ways to improve a device’s user experience. Accessibility, contrast, iconography, and user testing are just pieces of the larger UX puzzle. Better user experience = better patient outcomes.