Your GUI is a culmination of aligning your brand with your product goals and hardware capabilities. The product’s user interface design should be easy to understand and fulfill what you want the user to accomplish when interacting with the display. These items also need to remain within the scope of the display technology and hardware capacity. In order to have all these items aligned, it is necessary to do some serious planning beforehand. Use these three tips to plan and design a successful GUI for your embedded systems application:

  1. Determine Your Product Goals

    Knowing your product goals seems like a very obvious thing; however, if the overall product goals are not constantly referenced, the purpose of the GUI can often derail. Your product goals will help guide the reason for the GUI and what should be achieved when the user is interacting with it. The objectives for the GUI should support the overall product goals.

    Part of the product development process includes knowing where and how your product will be used. Your product’s environment will dictate the type of materials used, how the product will be produced, and what type of special certifications will need to be met.

    You can also use your product’s environment to determine the user interface. For example, will your product be at eye-level with the end-user spending a few minutes interacting with it? Or might it be at a low plane where the user only takes a quick second to read what is shown on the display? These types of questions can be helpful when deciding the goals of your GUI.

    It is also important to prioritize all the required items versus optional, supportive elements that you want your GUI to accomplish. If your supportive elements are quite extensive, consider alternative methods to display the optional information, like on a cloud-based app. With prioritized requirements, you’ll be able to make agile decisions that won’t hold up development if you run into limitations with your hardware.

  2. Know Your Hardware Capabilities

    Your embedded systems developer will know about your selected hardware and display technology, but do you know? Get familiar with the general specifications of them both. This includes understanding the microcontroller power and the overall size of the display's active area. These items will guide the size and layout of the design. It will also help you determine how much processing power you have for certain graphic elements such as icons, typefaces, font sizes, and more. For instance, if the design uses large images, the MCU may only have enough space to hold one additional font.

    In addition, the input of information from the user to your product will help guide the GUI. A display with a touchscreen will have a very different GUI than one that relies on buttons. A successful interface will take that into account and maximize the layout and design for the input method. By being familiar with the general specs of your hardware, you can make better informed decisions on the look and behavior of your GUI.

  3. Align Your Styles

    The visual appeal of the GUI adds to the user's impression of your product. Give your user a consistent experience throughout your product and brand with well-designed graphics. To keep elements organized, create a human interface guideline that captures both the style and behavior of the GUI. These guidelines will cover everything from font sizes and colors to different behavior states and notification messages.

    It is important to be very exact within these guidelines as they will be the reference for the software developer implementing the GUI. If there is an undefined item, the developer may implement a solution which may or may not lead to a surprising, unexpected result. Keep all team members aligned with the styles and behaviors with a well-defined human interface guideline.

Your product’s user interface is very important as it gives a lasting impression to your user. Ensure your GUI is user-friendly through planning and forethought. When mapping out your product’s graphical user interface, take into account the end-product’s goals, hardware capacity, and your brand’s style. With a well-planned GUI, your product is on the right path to success.

Image
3 Tips to Plan Successful GUI infographic

Date first published: 28 Nov 2017