Smart Data, Smart UIs
Hardly any LabVIEW Coders come from the computer science world. Even less are sensible to UI Design while it is vital to win users' loyalty. How to organize the UI? Which control or indicator to choose to make it intuitive and clear while caring about the space and the complexity?
Simple data
LabVIEW (users) love graphs. It's probably the most iconic UI element out there and serves a great purpose: give a meaningful 2D (or 3D!) representation of a collection of data. On the down sides, graphs are heavy UI elements, and they take a lot of space for a small set of data (although we all tried to plot the 64 DAQ channels of that board on the same graph and said it would be fine if the window was maximized on a full HD monitor...) In a large majority of applications, we don't want to display data as streams but as tags. Simple indicators that erase the previous data when refreshed.
In fact, almost all the indicators in the palettes work like this, so the choice is yours! And that's where we are not so good for two reasons:
- we think about tags as single and isolated pieces of data, so we pick a single and isolated representation for each of them. Sometimes we use clusters or arrays because it's convenient (Hey, it also avoids lots of wires and connector terminals, it gotta be more than convenient!). We usually think about physically gathering these indicators on the UI afterwards. Too late!
- we tend to use a display that fits most the original data type. "Oh, this temperature is a double precision scalar so we must put it into a gauge or numeric indicator!". There's no law about this, do as you please even if it requires a conversion.
Annnnd usually these facts lead to unefficient UIs like this:
It's not like it's ugly at all, we can tell there are sections, elements are aligned, and it probably works like a charm. But unfortunately a lot of space is wasted and the color scheme does not help to easily identify the sections.
Native aggregated containers
I usually work around these two above pitfalls with two words: planning and minimalism. Easier to say than to apply... Yet, planning helps clear your mind and draw a line toward the final application look. Choose your UI early in the development. All the modern and proper software development cycles recommend that. Show a prototype to the stakeholders, they are usually happy with a such initiative. And minimalism because it's modern and beautiful (see my first post here).
Now, you need to choose the UI elements that conform with this minimalism. There comes a palette that beginners rarely look at: List, Table & Tree. Go ahead and take a tour (System palette please)!
Listboxes don't really enable you to gather different data so we'll pass on them.
Tables are another story. They are a much better display for 2D arrays, cleaner and more compact than an array. The main point is that tables elements are strings and you know that a wide variety of data types can be easily converted into a string with no specific effort.
You can also customize the headers and give each cell a special treatment if need be (like the color) when arrays just can't.
MultiColumn Listboxes (sometimes referred as to MCL) are even more interesting! A MCL is a great combo of a table and a listbox: a table that offers selection and navigation as well as the edition of the existing items. As such, it's a rich UI element thanks to its information density and its intuitivity. Unfortunately, just like the previous guys, a MCL cell is strongly-typed: you can't insert anything else than strings in it. How convenient it would be to have items like enums or checkboxes in a MCL... See you soon LabVIEW NXG!
The last palette item is the tree. It sits there because it's nice to collapse/expand parts of a MCL, and because a tree allows you to display a hierarchical view. They may not be perfect (the API to programmatically edit it—ouch—, strongly-typed elements), they are very good at what they are made for. Trees share many features with the MCL to make it more user-friendly. They also support drag-and-drop operations, etc. Look at the project explorer, that's a good source of inspiration. The CEF framework also uses the tree as key element.
Start using this palette and you should make your end users happy. Watch out for the next article about these controls and you'll discover some simple hacks that empower these UI elements even more ;)