MATLAB App Designer Components

MATLAB App Designer was created to help test engineers build custom GUIs for HMI (Human-Machine Interface) feedback. Users can drag SVG components from a toolbox and arrange them to suit a variety of test cases. Assets included gauges, dials, digital displays, sliders, and switches.

Component Sets

Default sets included components for automotive dashboards, audio controls, and the recording of scientific data. There were several requirements for the component set including the obvious; clarity, scalability and complete vector graphics (no rasterized elements). But a less expected specification was that they accurately reflect real-world objects.

Design Process

I began the process by exploring the basics of simple gauge and dial construction using a flat graphic style, then, once the general concepts were in place, advanced to adding skeuomorphic frame and shadows elements using a variety of gradient types.

From a purely visual standpoint, the finished product looked really great. However, for a user-standpoint, I had concerns that the chrome-rim styling created an artificial limit on both the size and number of ticks labels that could feasibly fit into the gauges. Consequently, my recommendation for future sets was to step away from realism and move to a more data-focussed set (as below). In this revised set, tick labels have no physical boundaries (making for a more scalable design) and gauges have a much stronger visual indication than the previous red needle, by means of a power-bar style colour fill. In testing these proved easier to read at a glance and from distance.

Data-Focussed Component Set