Top tips for developing wearable GUIs on microcontrollers

Build better wearable GUIs on MCU devices by learning the impacts of memory, graphics and battery life on UX design and software development decisions.

The market for wearable devices is booming, fueled by consumers wanting an array of services at their fingertips and more cost-effective and energy-efficient hardware entering the space. Still in its infancy, wearable technology presents a volatile market to break through, with vendors like Apple, Samsung, and Zepp Health (formerly Huami) jockeying for top position, and development teams adopting new techniques to overcome the critical tradeoffs between user experience (UX) and battery life.

As more wearables OEMs realize the value of microcontroller-based devices, it behooves us to explain how to take advantage of these low-power, resource-constrained platforms to deliver a UX that competes with the high-end hardware used by the Apple and Android ecosystems.

Based on our decades of experience working with embedded graphical user interfaces (GUI), and our recent projects working with customers like Zepp Health, here are our top recommendations for developing wearable GUIs for microcontrollers (MCU).

1. Reducing & optimizing memory use

Perhaps the biggest challenge for wearables GUI development is squeezing the UX designer’s vision onto a hardware platform with little room for large image assets and complex transitions. Memory is consumed by two things, code and data, and the better we get at optimizing them, the fewer tradeoffs we have to make.

The first step in streamlining your application’s memory use is to determine how much space it requires. Whether it’s design time or right before user testing, it’s worthwhile to establish regular baselines for your memory budget and allocations to know where and when to make adjustments.

For example, the graphic below (taken from the second section in our Guide to Wearables GUI Development) illustrates how to calculate the memory required for your frame buffer. The allocation is a function of your display’s resolution and color depth, and the total memory required needs to take the total number of framebuffers that your application requires (3D applications commonly use additional depth and stencil buffers).

In addition to the framebuffer, you need to figure out the application’s code and data footprints. Once you have those baselines, you can use measurement and profiling tools, application logs, and runtime observation to find and isolate any memory issues after significant changes to the app.

Our smartwatch customer case study offers one example of this:

“Using Storyboard’s Application Footprint Preview, we knew right away that all the layers and fonts in the initial UX design would overwhelm the amount of flash we had. We decided to collapse screen layers and use Storyboard’s glyph export editor to strip out unused font characters to save space without impacting the designer’s intent.”

Storyboard’s Application Footprint Preview and glyph export editor (highlighted)

2. Minimizing power consumption on MCUs

High-resolution displays, location sensors, heart rate monitors, and Bluetooth radios are some of the consumer-driven features that require more battery power. But wearables users want battery life measured in weeks, not hours. Newer fitness bands even claim one month of use before recharging.

“One of the main reasons why wearable devices are still not as widely used by the medical profession as they could be is because of the need to charge the battery regularly. The patient may forgot to do so, or it might be necessary for a caregiver to take responsibility for doing it.” - Power aspect of medical wearables, Electronic Specifier

Longer timelines are achieved through better battery, processor, and display technologies, and with the smart application of power management schemes through either hardware or application logic.

Two power-saving techniques we recommend in our wearables e-book are:

1. Trigger sleep mode as much as possible, only waking the GUI when there’s a user event like a tap or accelerometer input.
2. As the display is the largest consumer of battery power in wearable applications, dim the backlight when the device is not active or is under low-light conditions. This can be achieved by lowering the backlight’s illumination level or by using a dimming layer in the GUI.

3. Creating an effective wearable UX

To compete with the top players in the wearables market requires an understanding of the techniques and elements they use to deliver a UX that consumers love. Style, personality, and tone play just as important a factor as graphics performance and application latency.

There are four key considerations when designing UX for wearables:

1. Usability - with smaller displays comes more challenges to overcome in terms of the amount of information displayed and the size of interaction surfaces. Large, high-resolution images and long text strings should be eliminated in favor of short, simplified elements that communicate action and information quickly.
2. Complexity - a wearables device is not a mobile phone or tablet, and the user expectation is typically “glance once, tap fast”. You cannot have too many elements cluttering the screen nor too many navigation layers between screens, otherwise your users will get lost or frustrated by the experience.
3. Focus - wearables are usually paired with phones, tablets, or desktops, and should act complementary to these devices, not as a replacement. Focus your UX on the basic and core features only, and think through the actions between devices. If it makes sense to reflect a smartwatch action on a paired smartphone or tablet (like a notification dismissal), ensure your UX is designed to do so effectively.
4. Differentiation - while it’s tempting to copy the UX design and behavioral choices of popular vendors, attracting new users and maintaining brand loyalty are better achieved by being different. Balancing the uniqueness of a brand against consumer’s high expectations is something that one of our customer’s succeeded at:

“We researched the top luxury brands to see what they were doing in terms of watch faces, screen elements, animations, and more, and used that as the foundation for us to build upon. As we were running on a more cost-effective platform, our UX had to be brilliant while also casting a wider net to a broader audience than, say, Skagen, Swatch, or Hermes.”

4. Optimizing graphics at runtime

Like code optimization, getting your graphics to perform well is a function of size and execution, or render, time. Wearable GUIs for microcontrollers in particular have limited space and processor resources, so the more complex your graphics are, the harder it’ll be to get them running.

There’s a lot that goes into optimizing graphics, so we have a separate blog and video dedicated to optimizing images and fonts, and another one dedicated to frame rates. We also recommend reading this case study:

“With some of the busier watch faces, we wanted to offload as much rendering as possible to free up the CPU for other tasks. We chose to use Storyboard’s built-in support for VGLite and found that it just worked right away, retrieving images from flash memory and using hardware-accelerated graphics to get the performance we needed.”

Summary

Wearables are here to stay and the vendors that take the time and effort to build rich features on top of power-efficient hardware will be the ones winning market share. By understanding the impacts of MCU memory, graphics, and battery life on UX design and software development decisions, you’re better positioned to be that wearables market leader.

Interested in more technical tips on developing wearables GUIs for MCUs? Download our free guide now: