UX for Small Embedded IOT and Medical Device Screens
As a result of ongoing digital transformation, many industrial and IoT devices have small, embedded computer touch screens for control of the device. These screens are in the ballpark of small tablet-sized or smartphone-sized screens or even smaller than a phone screen. Designing the interface for those small, embedded screens is a challenge, but one that our team has experience and confidence in.
You might be thinking: Small screens on smartphones are everywhere! It’s a well understood practice!
That's true. But small embedded screens are significantly different to design for than smartphones. Although some design aspects are the same, there are more differences than similarities. And where smartphones are relatively consistent across the brands in terms of hardware and app design, embedded screens come in a myriad of physical sizes, pixel densities, and contexts of use that are very different from smartphones. It can make creating a good user experience for them a tough puzzle to solve.
Embedded screen UX design does share the need to pay attention to the sizing of elements with phone and tablet design. But then things diverge. Smartphone apps have highly templatized solutions for layouts, which make them easier and faster to design. This typically occurs when popular platforms have matured due to the large customer base and the demand for devices and apps. Unlike smartphone apps, embedded apps are still very individualized to their particular content domains and hardware choices.
Using an embedded device with a touch control screen is a very different experience than using a smartphone. It begins with the hardware and ends with the users. To give you context, here’s an overview of both the similarities and key differences around designing UXs for smartphones versus the types of small embedded touch screens found on industrial control panels and medical devices.
Embedded Device vs. Smartphone UX Design Principles
There are a few similarities between embedded and smartphone design – in particular the size of elements.
Size of elements
Embedded screen design shares with phone and tablet screen design close attention to the sizing of elements. For instance, touch targets for easy interaction and font sizes for easy readability are both issues that extend across the full spectrum of small screens (although the solutions will be different depending on the screen specifications).
Also similar: the need to carefully consider the size or amount of content on each screen in order not to overcrowd the space or overwhelm the user. Good design will ensure the chunks of content make coherent sense and are efficient space-wise.
Although sizing elements appropriately is shared by phone, tablet and embedded screens, as you read the differences below, you will realize that fitting elements onto small embedded screens while maintaining good usability is a major challenge.
Here are key differences between embedded and smartphone design:
Screen type
Smart phones have capacitive screens, which make them highly responsive to touch but require an ungloved or specially gloved hand. A high percentage of embedded screens are inductive, meaning they are sensitive to pressure. You’re able to use them with gloves – even heavy work gloves – a necessity for many industrial control use cases.
Screen frames
Embedded screens often have edges around the screen that frame the screen and stand up from the screen, from a few millimeters to as much as a half an inch. This frame affects how easy it is to hit touch targets close to the edges, and can also affect how easy it is to see things near the edges. This is something the designer needs to consider when developing a UX and visual design strategy.
Landscape orientation
Most embedded screens are landscape orientation, unlike smartphones that favor portrait.
Fixed screens
Most embedded devices have screens that are fixed into the device. You can’t hold the screen with your hands like you do a phone. If the device with the embedded screen moves, then the screen moves with the device. If the device is fixed, then the screen is fixed. When you hold a smartphone you have more control of your hands – and therefore of the screen – and can hit targets easily. But a fixed position screen is more difficult to manipulate, making it more difficult to accurately hit a touch target. To compensate, designers often specify larger targets on embedded screens.
Location relative to line of sight
Since devices with embedded screens have many use cases – everything from medical infusion pump to smart toaster – the location of a particular device’s screen in relation to a user’s line of sight will vary from product to product. For instance, a smart toaster will typically be placed on a kitchen counter – standard height 36 inches – for convenient use.
But the infusion pump may hang from a pole that can be wheeled from patient room to patient room. The height of the pump could vary somewhat according to the height of the clinician using it or the room it is used in or the proximity of other medical devices in the space. In the case of a smart gas-line detector, which is a handheld tool used in manufacturing, the device’s screen will be at arm’s length of the user as they hold and manipulate the tool.
Screen visibility in different lighting conditions
Some devices are intended to be used in low-light environments, such as a dark room, while others are aimed at extreme-brightness environments, such as on a rooftop under full-sun conditions. Both extremes decrease screen visibility and readability so designers must be cognizant of use environments when designing the UX.
Varying specs
Embedded screens come in a variety of sizes, pixel density, aspect ratios, and performance capabilities so that they can accommodate the requirements of a variety of products. This diversity creates many challenges for a designer who must orchestrate all the variables to achieve a good user experience. One of the biggest design challenges is to make a low-resolution, low-performance screen deliver the elevated look and feel typical of higher-end technology. To create this type of user experience, designers typically add as much visual feedback as possible to create a feeling of performance.
Regulatory requirements
Embedded screens are used in many regulated, safety critical applications, for instance medical devices, air traffic controls and vehicle navigation systems. Accommodating regulatory requirements adds another dense layer of responsibility onto the designer, who must make the user experience very clear and easy to understand in order to mitigate risk involved in using the interface.
Advice for Creating an Appealing Embedded User Experience
Don Goetz, Associate Director User Experience, and Giuliana Leone, Senior Visual Designer, along with the rest of our team at ICS and our design studio Boston UX, have worked on a spectrum of complex embedded medical device and industrial projects, including immunoassay diagnostic testing equipment, cleanroom status monitoring device, and an innovative human organ-transportation device.
Reflecting on these experiences, here they offer actionable strategies and best practices for designing for small-screen embedded devices.
According to Don, to lay the groundwork for a good user experience an embedded UX designer should start with these three actions:
1. Obtain the exact specifications of the screen
This is essential because the color depth, pixel density, and size in inches hugely impact the interactive experience. With those specs, the UX designer can determine a minimum – but reasonable – touch-target size, as well as make informed predictions about the readability of various font sizes.
2. Draw out workflow diagrams and determine how to break the content into screens
Medical devices, IoT and industrial applications often have a clear workflow with multiple steps, and devices like these with small, embedded screens always seem to have an abundance of content. For this reason it is imperative to carefully determine what content absolutely must appear on main screens, and what content can be hidden – accessible by a tap or two. And, the UX designer must then make it crystal clear to the user how to navigate to all of the screens in order to access the information they need.
3. Consider using icons or abbreviations for buttons and links rather than full text
Though Don concedes that it might take the user a bit more time to learn what the icons mean – and abbreviations are a challenge when presenting information in multiple languages – he stresses that both techniques “help to condense the space occupied by interactive controls, which ultimately improves the user experience.”
In terms of visual design, Giuliana prioritizes these three key elements at the outset of any embedded project:
1. Obtain the screen size and recreate it in a Figma file to show the exact size
Be sure to take into consideration the resolution and bit depth because they will impact the image quality.
2. Determine the minimum touch-target size, and investigate how users will interact with the screen
For instance, generally men wearing heavy work gloves require a different target size than women wearing latex gloves.
3. Explore screen-to-user distance
How far will users be from the screen? The designer needs this information in order to specify appropriate text size. For example, with a smartphone the user can move the device closer or farther away from their eyes to increase reading comfort. But with embedded devices, the screen-to-user distance is typically fixed. “The most common feedback from users during UX/UI testing is that the text is too small – something to keep in mind when specifying font size - it needs to be larger than you initially think it should be.’
The Takeaway
Designing software for small embedded touchscreens on industrial control panels and medical devices poses more complex challenges compared to designing for smartphones. Differences in screen size, operating environments, interaction paradigms, and integration requirements underscore the importance of a specialized approach built on a user-centered and context-aware design philosophy to ensure usability in these critical domains.
For more on designing for embedded devices, read Embedded Software Design More Challenging than Web or Mobile, and Does Your Device Need Dark Mode?