In this post, embedded systems expert Jacob Beningo offers tips to help developers get started with their first embedded GUI development project, from hardware to UX design.
Graphical user interfaces, GUIs, have been finding their way into a wide range of embedded applications in the manufacturing, automotive, medical, and wearable device industries. Many of these applications have traditionally been headless systems but adding a GUI can dramatically improve the usability of the device.
Embedded developers just getting started with GUIs may not be familiar with how to go about doing so. In this post, we will explore five tips for getting started with your first embedded GUI.
When developing a GUI for the first time, it can be tempting to dive into the user experience (UX) design, file formats, and tools very early. While getting a jump start on these activities is certainly encouraged, developers should make sure that they get hardware to experiment on as fast as possible (or, at least, find a target-specific simulator). Developing a successful graphical user interface requires a developer to understand the underlying graphics accelerating hardware, the software framework used to interact with that hardware, and the graphical user interface itself.
A first time GUI developer will gain many insights by getting a development board and experimenting with it. GUIs often start simple as the developer learns what is necessary to build a successful and efficient GUI.
Wireframes are a fantastic tool for designers and developers to help understand what they are building, and the complexity involved. A wireframe is nothing more than a two-dimensional outline that provides the blueprint for what will be built. The wireframe will often show the organization of the GUI, the placement of buttons, graphs, user data, various pages, and much more.
The wireframe can be thought of as the blueprint for the GUI, much like how the architectural design of the software acts as the blueprint for the code. Designers and developers will find that it’s much easier to design and build wireframes than trying to implement them directly on the hardware. The wireframes can be quickly iterated upon and even simulated off-chip. At the end of the day, wireframes are critical to getting the GUI design right the first time and efficiently.
Embedded engineers are often very talented, but engineers tend to lack the artistic flare necessary to design a good embedded UX. Engineers often design GUIs that are functional from an engineering perspective and usually not very friendly to the average user. While an engineer’s design can be useful to prove out technical pieces and evaluate GUI development, it is highly recommended that teams consult an artist, a designer, or a combination of both.
An artist is able to help the team design a GUI that looks good, feels good to the user, and has an appropriate color scheme. Artists often have a knack for spatial organization which can help with a more user friendly and functional GUI. Leveraging an artist can be easily done using a local resource or by finding someone on a third-party job site which often provides access to very talented skills at a relatively low price point.
Every GUI consists of two main parts: a front-end and a back-end. The front-end contains software tasks that manage user interactions and make the system do something that the user requested. The back-end often feeds the front-end and manages all the background activities such as the graphics interface, touch features, sensors, networking, and more.
A successful GUI requires that the interactions between the GUI engine and the main application are properly coordinated. Coordinating the behaviors between the back and front ends are critical to having a clean and fast GUI. Developers should make sure they understand their GUI framework’s behaviors and carefully craft their software architecture to take its strengths into account.
GUI development is not a solo endeavor. To be successful you must have the right team members with the right tools. In fact, a good design will often go beyond the immediate team. It’s highly recommended that teams enlist potential customers to test and provide feedback on the GUI.
For example, if your application targets a wearable device, have several partners or end users experiment with the GUI and tell you if it is:
End users can provide all kinds of feedback that can be used to improve the GUI design. Don’t just rely on your team or upper management to provide the feedback. I’ve seen several times where a team member or team will develop what they think is a fantastic GUI, only to have it flop in front of the customer.
Getting started with your first embedded GUI is an exciting time. However, it can also be a difficult process if industry best practices and recommendations are not followed. In this post, we’ve explored a few tips that are often overlooked by first time GUI designers. By following these tips, you’ll find that your first GUI design will go little more smoothly and end with better results in fewer iterations.