Designing high-quality graphical user interfaces (GUI) for devices with hardware constraints can be difficult. But this article demonstrates some ways to maximize design efficiency to make it easier. More efficient GUIs use less memory, CPU and GPU power when handling moving parts and animation, and allow the designer more room to be creative with their designs, instead of worrying about their hardware constraints.
Design with common elements
The example below shows a simple menu screen with some common elements:
- Each ICON_X is a button that would change the GUI to a different colored screen.
- The HOME button returns the GUI to the home screen.
- The HOURS:MINUTES:SECONDS element remains in the upper right corner for all screens.
- The ICON_X buttons and HOME button remain in the same location regardless of which ICON_X buttons selected.
If a GUI developer were to design a menu layout by copying and pasting the “TimeAndIconBanner” element (the top bar displaying HOURS:MINUTES:SECONDS, and the bottom bar displaying the Icon Buttons) for each of the screens in this GUI, the result is several duplicate objects in the GUI model. In the image below, each Card in the Deck Object that makes up the “IconScreens” contains the same TimeAndIconBanner element.
The TimeAndIconBanner element is a part of each individual screen under IconScreens, and the multiple instances of TimeAndIconBanner require a redraw of that element every time the screen is changed, resulting in unnecessary RAM and CPU usage.
To optimize this design and others like it, designers should isolate the common elements, TimeAndIconBanner in this case, and move them to a single instance one level up, as shown below.
Only one TimeAndIconBanner element now lives at the same level as IconScreens. This hierarchy illustrates the most efficient arrangement of design components, resulting in a corresponding change in the z-order of these groups within Altia Design, meaning that the highest level TimeAndIconBanner group is shown above the lower IconScreens group on the display.
Design with moving parts
Consider an animated speedometer. If the GUI is designed such that the entire screen is redrawn, instead of just the needle, more memory will be required for this GUI. Maintaining the static background image and animating only the needle on top creates the most efficient and memory-saving design. Another place to squeeze out some extra performance can be in reducing your fps. Some animations may not require the hardware’s maximum frame rate to achieve a satisfactory smoothness, and with Altia Design its simple to experiment and find a lower fps that works in your design.
If you would like to learn more about how Altia can help you optimize your GUIs to deliver the best performance using the least memory and power, we invite you to schedule a demo with a member of our expert GUI team today.