The future of UI design for embedded systems

It’s time for embedded user interfaces to catch up to the rest of the world.

We already know this, since you can’t read an article or go to a conference without someone saying “our users want their smartphone experience in their car and on their fridge!” The allure of blending powerful features and beautiful user experiences comes too easily, and embedded systems often are found lacking.

So why are we falling behind and what market forces are driving us to catch up?

With less power comes more responsibility

There’s a common belief in the sliding scale of hardware-to-UI-capability ratio, in the sense that the smaller the platform, the less you can do with the UI. While true in a strictly functional sense—if you don’t have 3D hardware acceleration, you can’t use 3D hardware acceleration—it’s often the case that the application architecture, graphics library limitations, and suboptimal performance result in embedded user interfaces that look like this:

Instead of this:

We know this has to do with not having enough development time and resources to squeeze as much out of the hardware as possible but users are left scratching their heads as to why it's easier to operate a smartphone that does fifty things than a dishwasher that does only one thing.

It certainly doesn’t have to be this way. Not only are CPU and GPU hardware capabilities increasing, right down to the MPU, UI toolkits are getting better. Check out the recently announced ARM Dynamiq processors and Mali-G72 GPU, or the first MCU with an integrated 2D GPU and integrated DDR2 memory from Microchip Technology Inc. We’re being offered more speed and capability than ever before and with less power consumption and heat.

And it’s only getting better. Embedded processors have traditionally been slow to adopt cutting-edge components, being more concerned with power, heat, and longer in-service times. But with the Internet of Things, smart homes, connected cars, and a host of other trends that have become reality, the demand for faster, more capable embedded UI devices by both consumers and industry is just getting started.

So, what can embedded UI teams look forward to? A look at the forces transforming the technology world right now provides the answers.

UI design is equal to code

This 2017 Design in Tech Report, presented at SXSW Interactive, offers an analysis of design trends changing the face of tech. Three points stand out as particularly relevant for embedded systems, by the very fact that users are demanding more out of their UIs and that more customers are on their way. The IoT market alone is expected to grow to 75.4 billion devices by 2025.

Perhaps the biggest change is that designers, or at least the unique skillset of UI design, is becoming a priority for development teams. Developers know how to create, test, and optimize apps, but it’s the lack of a designer’s knowledge that results in so many of the “traditional-looking” UIs that are still being churned out by embedded teams.

Only by making the job of the designer equal to that of the developer can products be made beautiful, useful, engaging, and functional—qualities that drive adoption and brand loyalty. The report points out that not only have Facebook, Amazon, and Google grown their art and design personnel by 65 percent in the past year, two out of every five designers are now involved in code development.

We’re seeing this with embedded software teams as well, as bringing a designer’s mindset into the developer’s machine is the surest way to achieve UX and commercial success. Even more so the designer and the developer need to be able to work in parallel while managing UI design iterations without delaying the end project.

UI design must be inclusive

“Adopting an inclusive design approach expands a tech product’s total addressable market.”
- 2017 Design in Tech Report

The report observes that, historically, technology products weren’t designed for a broad range of users, rather they were built to be used by the people who created them. This exclusivity has softened over time, of course, with a whole industry devoted to user research and feedback, but again, smartphones continue to move the UX goalpost for embedded. Why can’t every device operate with just one button, a simplified set of graphics, and be understood by everyone around the world?

Users don’t care that your graphics library doesn’t support pixel shaders or hardware acceleration. Embedded systems are highly technical but cannot survive by serving only a technical audience, especially as they sell into newer consumer-dominated markets all over the world. UIs must be thought out, designed, and built for not only maximum usability but inclusivity as well—whether it's geographic, cultural, or socioeconomic—to satisfy global user expectations.

Although originally intended for the web, the World Wide Web Consortium’s guidelines for accessibility, usability, and inclusion apply equally to embedded systems because, at the end of the day, all our users are human.

“Inclusive design, universal design, and design for all involves designing products, such as websites, to be usable by everyone to the greatest extent possible, without the need for adaptation. Inclusion addresses a broad range of issues including access to and quality of hardware, software, and Internet connectivity; computer literacy and skills; economic situation; education; geographic location; and language — as well as age and disability.”

One major example of a company tackling this head on is Microsoft, check out their inclusive design toolkit.

The key to inclusivity is designing UI elements that are simple and unambiguous while eliciting an emotional connection. In this way, your UI is less frustrating to use and more likely to be used.

To design embedded UIs that include, rather than alienate, as broad an audience as possible, it’s the designer to the rescue. Unlike developers, they have the specific techniques and experience with distilling diverse personas into a usable design, so your product ends up with better UX/UI that also happens to be easy to use by everyone.

The need for supporting this diversity has found its way into the makeup of design teams, as the Design in Tech Report shows:

UI design unlocks value

“Design tool companies and design community platforms occupy new positions of value for tech.”
- 2017 Design in Tech Report

Software like Adobe Photoshop, GIMP, and Sketch are just a few of the many examples of design tools that have democratized graphic design, lowering the barrier to UI excellence, and reducing time to release (does anyone do back-of-the-napkin sketches anymore?).

The same applies to embedded UI tools. Our developers have mostly moved away from using graphics primitives to use mid-level libraries, such as OpenGL and Direct3D, with higher-level platforms such as Qt gaining popularity. With these pre-packaged, easier to use toolkits, building UIs has also become democratized. Anyone can take a Qt widget and run with it.

The problem is, to unlock the maximum value out of all that design effort, you need to go one step further and not get locked into how pre-packaged libraries look and behave.

“Every dollar invested in UX brings 100 dollars in return. That’s an ROI of a whopping 9900 percent.”
- Good UX is Good Business: How to Reap Its Benefits, Forbes

Going straight from the designer's tool to deployment, with little to no modification of the design, is the only way to ensure your product offers the best UX/UI. Otherwise, development tradeoffs (software limitations, pre-canned widgets, resource constraints, power, time, etc.) will chip away at your optimal experience.

Storyboard is one such tool, with built-in parallel workflows between the designer and developer to reduce the common frustrations and friction between them. By working side-by-side, the designer can focus on creating the best UX/UI possible, the developer can focus on the back-end, and the whole application is created, tested, and deployed within one single environment. The app also happens to run on a highly-optimized engine tuned for a variety of platforms and architectures.

This video from last year’s Apple WWDC event sums up why smart design matters:

“When you put so much hard work and creativity into an app, you really want it to reach people. But ultimately, everyone will experience your app in their own way and if you think about the millions of people who could use your app, you have to consider how diverse their perspectives are.”

The key statement here is that we all want our products to reach people, in terms of both usability and market share. Using collaborative tools that make design equal to code is just the way to do it.

Aptera’s founders, Chris Anthony and Steve Fambro, are pursuing an aggressive schedule to bring their first vehicle with a Storyboard-built embedded HMI to market in less than one year. Read why they chose Crank Storyboard.

To see how easy it is to put design into action, try the sample applications included in our free 30-day Storyboard trial: