As you can see, designing for embedded devices has its own specifics and challenges when compared to designing for mobile devices. The key to success is to keep learning and working as a team with your firmware developers from the very beginning. Learn the development platform capabilities and limitations and find a creative solution to work around them. Understand the screen you are designing for, how and where it will be used. Always preview and test the design on the real screen before getting too deep into development. Finally, involve your clients continuously by demoing the user interface on the real screen and getting the client’s feedback.
Designing UI for Embedded Devices: Four Factors to Remember
The recent trend toward Internet of Things (IoT) technologies resulted in a myriad of familiar consumer electronics and home appliances equipped with new features and complex LCD control screens. “Smart” coffee machines, fridges, stoves, amongst other products, all suddenly came integrated with new features and Internet connectivity. Before, manufactures could get away with simple user interfaces (i.e. LEDs, 7-segment displays, overlays) if the product performed its basic functions, but with consumer expectations heightened by today’s complex and visually appealing mobile apps, the new wave of “smart” devices must also have user interfaces (UI) that are engaging, enticing and easy to use.
One common pitfall for UI designers is to think there is not much of a difference between embedded devices and mobile applications. After all, it is all about aesthetics and usability. However, environments are so vastly different in requirements, functionality and capability that the UI designer needs to consider multiple factors, limitations and constraints when designing for embedded, compared to mobile apps. Creating a beautiful user interface for embedded systems requires experience and knowledge in both the general UX/UI design process and a good understanding of development platforms and libraries available for the embedded world.
Here is the list of the four very important considerations UI designers must keep in mind when designing user interfaces for embedded systems:
1. Development platform and libraries
When designing for mobile, UI rules are defined by the platform documentation. Both Android and iOS have extensive guides for UI and the design possibilities are almost limitless, constrained only by imagination and the budget.
In the case of embedded UI, however, the designer needs to know what type of platform the application will be built for and what libraries will be used to build the GUI. There are less established UI guidelines for embedded applications compared to mobile applications (e.g.: Google Material Design Guide, iOS Developers Guide). UI for embedded are often custom and influenced by the specific function of the device and the specific needs of the customer. That is why knowing the characteristics of the selected platform and/or library helps UI designers to create a better user interface for controlling the device and its functions.
The general advice for UI designers would be to have a meeting with the GUI developer and discuss technical details, such as development platforms, libraries, and potential limitations influenced by hardware early on. Ask the developer for reference information about the library (E.g.: emWin) or embedded UI development platforms (E.g.: Crank Software, QT, TouchGFX), what default control elements look like, what can be customized, and what are the limitations. Look for examples of previous apps designed with these tools. For example, if the selected library does not support elaborate animations and transitions, there is no point to spend time on this. It’s better to save time and use what is working well. Communication between teams early on, helps avoid redundancy in the workflow, the need to redesign the UI, or a UI implementation that was not desired by the designer; thus saving time in the long run.
2. LCD screen type
The type of LCD screen used in the device is an important consideration for UI design. The majority of modern devices with LCD screens utilize touch functionality. In some cases (such as certain industrial applications) touch function on LCD is not desirable, but for this comparison, we will focus on touch LCD screens.
There are two types of touch LCD: resistive and capacitive.
Resistive touch screens register pressure applied to the screen. These screens are more durable but less responsive compared to the capacitive touch. The user needs to press with added force to operate it. We can see such screens used on devices that require operators to use gloves (for example medical or industrial applications). These screens have less contrast resulting in a duller look compared to capacitive touch screens. To accommodate for these screen specifics when designing UI, it is better to increase the size of the elements that could be pressed. Keep in mind that gestures like drag will be harder to do on such a screen, in comparison to a capacitive screen. It will be better to use high contrast colours for UI elements and their various states to make them more noticeable for the user.
The capacitive touch screen utilizes the conductivity of the human body to register touch. Screens with capacitive touch are brighter and higher in contrast. Although the sensitivity of the screen may vary between the manufacturers, generally capacitive touch LCDs are very sensitive and support multiple touches. Such screens are more expensive and less robust compared to resistive touch, but are more responsive and produce beautiful graphics. These are often used in consumer electronics such as smartwatches and smart home devices. User interfaces for capacitive touch screens can utilize multiple gesture controls, micro-interactions, and animations. These types of screens will be great for colorful and photo-based graphics.
3. Screen size vs. resolution
The size and resolution of the screen also influences the overall layout and design complexity of the screens. There are numerous LCD screens available that have very high resolution but are compact in size. Most UI designers use Sketch, Figma, and Adobe XD to design user interfaces, but these programs do have limitations for embedded devices. LCD screens come in various sizes and resolutions and as a result, the UI designer might run into several issues. One is the issue of scale when designing for high-resolution screens. For example, the artboard you are designing on might appear bigger than the actual screen in real life. This could lead to a false impression of space, when in reality the screen is much smaller. When LCD is low resolution, there could be issues with pixelated graphics and poor visibility. For such screens it is best not to use thin and fine detailed graphics as they will not translate well onto the screen. To avoid disappointments, it is a good idea to always preview and test the design on the real screen size before implementation to ensure the size of UI elements is appropriate.
4. Application environment and end-use
When we design UI for mobile apps we usually focus on balancing customer and business needs. There is rarely a specific consideration of the environment where the app will be used. However, when we design UI for embedded devices the environment could play an important factor. For example, the device could be mounted on the wall, placed on the desk, or installed as part of the office equipment. In all cases, the designer should ask questions about the environment. Does the screen need to be visible from far? Would a screen that blends into the environment be preferable? Also consider factors that impact the usability of the device, such as lighting conditions, visibility requirements, time of day the users will operate the device, temperature, where the device will be installed, and the average screen level and distance from the end user’ eyes. Thinking about the environment, how the device will fit into it and how it will be used helps the designer to make better UI decisions and anticipate future problems that might arise.
All Blogs