Building better UX for IoT devices
Article By : Jason Clarke
This article explains what to consider when building a modern embedded GUI for IoT devices.
Smartphones have created an interesting challenge for internet of things (IoT) development teams as consumers, industrial workers, medical professionals, and more desire a sophisticated mobile experience across all their devices. Original equipment manufacturers (OEMs) need to deliver better user experience (UX) while sourcing cost-effective microprocessor (MPU) and microcontroller (MCU) platforms that have less resources and stricter power constraints than mobile hardware.
Based on our customer experiences, creating effective UX is a matter of understanding how device size, power, and memory impact graphical user interface (GUI) design and components. This article explains what to consider when building a modern embedded GUI for IoT devices.
Working with device size
To accommodate users wanting more portability in their devices, screens are dramatically decreasing in size (no more so than the wearables segment). These smaller form factors make UX design more challenging, as there’s less screen space to work with, and difficulties in reusing the same GUI assets across a diversified product line/
As Jean-Louis Dolmeta, responsible for the STM32 microprocessor ecosystem at STMicroelectronics recently explained, “Typically, an R&D team may spend up to two to three years for a new development platform once they issue a product. OEMs must reduce that time to money and remove risk to avoid re-spins of a product and reduce cost of the development so they may enter the market quicker at higher margin and with profitable growth.”
To meet these challenges, embedded GUI developers should consider these factors:
- Since users can only see a small number of items at a time, using scrolling or wrapped menus helps to focus their attention and declutter the screen.
- To ensure users don’t have to spend more time than necessary on a screen, use minimal text with high contrast and bright colors. If possible, replace strings with icons to reduce the task load on users.
- To minimize rework across product models of different sizes, consider using SVG graphics assets that are easy to scale. As they consume runtime CPU cycles to resize, having development tools that scale them for you as part of the deployment process is ideal.
Understanding power efficiency
Energy is a precious resource when it comes to MPU and MCU development and embedded GUI teams must pay careful attention to when and how power is being drawn:
- For wearables and smaller devices, use sleep mode to conserve power and wake the screen only when the user needs it, such as at the press of a button or movement detection by an accelerometer.
- White and bright colors draw more power than dark colors so consider adding a dimming layer to the screen when it isn’t being used or using a muted UX design palette to draw less power.
- For UX that requires both 2D and 3D elements, using a hybrid rendering approach reduces overhead on the graphics pipeline as the most power-optimized GPU can be dynamically selected based on the content type (see Figure 1).
Optimizing graphics and memory
If not planned and optimized carefully, graphics can consume a lot of memory or cause runtime issues that detract from the overall user experience. Even before coding starts, it’s worthwhile to consider these items when building a rich graphical experience:
- With differences in access time between memory types, it’s generally a good idea to store dynamic content in RAM (such as the image framebuffer) and persistent data in flash (such as the application’s code).
- JPG, PNG, BMP — all image formats have their pros and cons on runtime performance and memory storage. Encoded formats such as these require system resources to decode before rendering so it may be beneficial to use raw file formats that can be drawn directly to the screen (this webinar explains how to choose between formats).
- Animations can be processor intensive, especially when trying to recreate a smartphone-like experience with smooth screen transitions and menu drop-downs. Using performance tools helps optimize animation overhead and it’s a good idea to baseline CPU and memory utilization right from the beginning of development.
- The choice of framerate for screen transitions and animations will impact performance — a higher rate may make visual elements run smoother but if the system cannot keep pace, frames are likely to be dropped by the hardware.
Conclusion
Most users are not aware of the tradeoffs between UX elements and the hardware that powers them but, as embedded GUI developers, these decisions must be well thought out. This article covered the most frequent UX and development choices for screen size, power consumption, and graphics that we encounter — the next step is to apply them to your IoT device projects.
This article was originally published on Embedded.
Jason Clarke is co-founder and V.P. sales at Crank Software, an AMETEK company, helping embedded GUI product teams bridge the gap between design vision and customer expectations to deliver market-leading UX using Crank Storyboard.
