Creating Medical Device Interfaces (UI/UX) More User-Friendly

At present, the healthcare industry, which includes both goods and services for treating patients, experiences large-scale digitization of the market. Partially, this movement is caused due to the Covid-19 pandemics, and partially, because humanity became more tech-savvy and created demand for faster, better, simpler, and more convenient medical services. Hence, every decent medical service provider tries to win over customers by giving users freshly-released mobile applications that will satisfy their health-related needs.

In the third quarter of 2020, there were 47,140 available medical apps on the Play Market and 48,608 medical apps at the App Store. What’s more, according to Statista, the increase of the global medical care market will reach about $100 billion this year. According to Deloitte, the opportunities of the sector are high and will rise at a CAGR of 5% up till 2023. So, a number of healthcare apps will make attempts to improve customer experiences. But, have you ever wondered how many medical device interfaces really meet customer needs? Or the needs of the healthcare professionals? What does it take to make UI/UX app design user-friendly today? Let’s find out.

Application’s UI/UX: What’s Important?

The FDA defines a software medical device as software intended to be used for one or more medical purposes without being part of the hardware. As this software device represents an app, there’s not only functionality that gains all the attention but also the app’s design.

UI/UX design is one of the best means to enhance product quality and gain a large audience of faithful users. Especially, when it comes to healthcare, where everything should be clear, timely, and consistent. To achieve the desired, both UI and UX should be great in appearance and experience to promote the real value of the medical organization to healthcare service users.

• Medical device UI design

In a device, UI stands for User Interface and indicates the aesthetic harmonious visual part of the application design rather than product functionality. Its mission is to turn user heads with the app’s unique visual part and produce a refined effect. UI includes typography, color, layout arrangement, and component style. But having only a perfect UI isn’t going to work wonders. That’s when UX comes forward.

• Medical device UX design

UX, in its turn, stands for User Experience and is the functionality part (the backend) of the UI. It is the user interaction with the product that UX builds-up in the right direction. If the UX is good, it answers the following questions positively:

1. Can users achieve their objectives quickly?

2. Is the app usability easy enough for the user?

3. Is the design intuitive to guess what the user needs?

4. Is the app appropriate for a global audience and people who have accessibility challenges?

Based on these questions, we can predict possible design deviations and provide recommendations on how to avoid them. For example,

• If the screen is overloaded with components…

The app’s interface, especially medical user interface design, has to be unburdened by numerous components on the main screen. The more there is stuff on the screen the harder it is for the user to find specific information. In case of emergencies, any informational search will be impossible. Thus, to prevent screen overload it would be wise to accumulate all the additional information in pop-up windows. E.g. background logos and brand identity so they wouldn’t stand out attracting users’ attention. But also, usage of simpler graphics, empty space as a user resting point, and laconic text are to be taken into account. Overloaded screens are intimidating and require more time to get used to. And medical apps should be as “clean” and to the point as the doctor’s robe.

• If the navigation is unclear…

Moving from one screen to the other is performed with the help of the navigation items. Every transition between the screens should be easy, logical, consistent, and in a seamless flow. So, every app has a road map or a user flow of the items it can show to its potential users. If the road map is consistent and every step taken by the user is logical – everything’s ok. But if every step asks you to go in several places without having any logic, and going back to the main screen seems impossible – what’s user-friendly in that? Medical device interfaces have to be supported with clear navigation that would allow to perform logical actions and understand/learn the app functionality easier. If the user has a task to set an appointment with the doctor and each item requires numerous steps and several actions deprived of common logic – it is likely that the user will not be happy with the process all along. Broken navigation items that simply don’t work the way they should also state that the user experience will be negative.

• If there is no alignment…

In medical device user interface design alignment is used to organize elements, group them, achieve balance, create structure, make elements connect, and produce clear and accurate output. To make alignment consistent through all the screens, designers use grids or key-lines. A grid is a line-crossing two-dimensional structure used to organize visual content. It is made of vertical, horizontal, and angular lines. UI/UX designers use grids to perform accurate design and meet layout consistency and flexibility. The grid allows to adjust all the components on the screen accordingly and make them visually attractive. If the icons are different in size and shape and are scattered across the grid, it will distract the user visually and evoke irritation or other negative feelings. Visual disbalance seems like a trinket, but for the person using the app, it may become one of the most common things that bring too much dissatisfaction.

• If there are too many colors…

Globally, according to WHO, more than 1 billion people have a visual impairment or are challenged to live with poor eyesight conditions every day. The inability to see accurately and function in a world full of colors can be tiresome. However, technology advancements allow us to understand the needs of color-blind people and find the color contrast that will suit their needs. So, it is highly advisable to use color contrast when creating a medical device user interface design. This way, color blind people and people suffering from color deficiency (red-green or blue-yellow) will have the possibility to distinguish elements according to color contrast and brightness. However, using just colors isn’t going to make visually impaired users understand where there is a mistake, so it is good to sign icons with the help of the text.

Color is a great way to transmit an idea, make an app vivid, visually attractive, seamless, communicating the right information, giving meaningful feedback while interacting with users, and providing users help in data visualization. So, every user interface has to have a color palette limit. If it’s a medical application, this limit is inevitable. Not every color suits healthcare representation. Why do medical apps require a specific palette? The basic aim is to make app users feel calm, conformable, and confident that they will obtain the necessary help. The atmosphere of a kind may be achieved only with the help of suitable colors that represent well-being and patience. E.g. blue (symbol of strength, calmness, and trust), green (natural color pointing out to health), white (indicating cleanliness and transparency), or even pink (the color of children and women). The list can be endless. According to Stanford Medicine Web Color Palette, there are such colors as greys (6 hues), blues (6 hues), accents (6 colors), and red (3 colors). This palette is considered to be one of the most appropriate for healthcare purposes. But even having the choice of these colors, we do not recommend using them all at once.

• If the typography/language are complex to perceive…

Wrong text font and super complex terms might be the wrong choice for an app, even for a medical one. Fonts should be: distinctive (Open Sans, Roboto, Helvetica, Montserrat, and Avenir), of big size, and have a contrast between text and background (WCAG recommendations with 3 levels of success criteria). Fonts, which are calligraphically attractive may not be as readable as users would like to. So, it is a matter of convenience and usability rather than sophisticated aristocratic curves. When there is an emergency and the healthcare application is the only means to get quickly through to the doctor, the irrelevant font would be an obvious obstacle in understanding. Misunderstanding is one of the biggest medical errors that occur quite often and sometimes lead to patient hospitalization.

• If the icons seem non-refined and there are inconsistencies…

Inconsistencies in the design are less appealing to the end-users. What’s important, inconsistencies become visible to users as early as they open the app and this feature is critical to a positive user experience.

Our Recommendations

• Scaling your design for different devices

To ensure quality text, simplicity, and usability of a medical application, UI/UX designers test the clickability of every button and its scalability with regards to different sizes of device screens. This is called adaptive design. According to Interaction Design Foundation, the adaptive design belongs to a graphical user interface or GUI design that can adapt to different sizes of the screen on any device. Adaptive design works with the system detecting the browser size and selecting the layout most appropriate for it. What concerns buttons, these are also to be adjusted to the screen size to promote better user experience and convenient clickability. Elderly patients find it hard to click the relatively small button due to age-related vision deterioration and hand tremors. Doctors usually wear gloves, which makes their screen touch less sensitive.

• Color contrast, Web accessibility, and WCAG criteria

Color contrast based on the tables with text vs contrast proportion should be adjusted to meet the needs of every end-user. Especially, not forgetting the vulnerable groups such as people with eyesight disparities and other functional disabilities that may not have full web accessibility due to color contrast reasons. Such design is called inclusive. This type of design promotes good web accessibility features. In some countries, accessibility is demanded by law, legal rights, and moral reasons. To achieve this, designers use WCAG standard criteria. Failing to provide full inclusiveness for customers will end with millions of people being excluded from a potentially useful medical application.

• Testing

The process of testing your application design, prototyping, analyzing, and refining a product is called iterative design. This design cycle is inevitable to produce a refined application with seamless design and all the features of every key user group taken into account. So, we try to create clickable prototypes that we test on real users before they go into production.

• UI/UX Heuristics

UI/UX Heuristics is all about usability. For example, communicating clearly what the system’s state is, giving feedback to the user after every action, building a relationship of trust based on mutual communication are the pillars of user-app interaction. Also, usability requires ensuring users can understand the meaning of the text within the app by doing solid research of medical terminology to promote the success of the app from the start. And, finally, usability is in supporting the easiness of navigation, improving learnability with the help of consistency, giving the user the ability to recognize information not to remember it, have shortcuts and personalization options, and keep the UI/UX focused on essential features.

Wrapping Up

User-friendly medical device interfaces can be easily created with a team of expert designers and care. Only understanding user needs and adjusting a medical app to all the user groups can help achieve outstanding UI/UX for medical devices. If you still have some questions on the topic or need a medical app interface solution – get in touch with us and let’s talk!