How can I make better user interfaces with LabVIEW?

I could go on and on about user interface design, but I'll assume you want the short and sweet version.

Prettier Panels

The trick to making your VI panels look neat and professional is to keep them clean and simple. Don't overcrowd your panels. Pay attention to fundamental design principles like consistency and alignment. More on this below.

Resist the urge to pack VI panels with controls and indicators like a can of sardines, with no space between them. Controls and indicators should be placed in logical groups. You can use several techniques to distinguish these groups. Empty space is simple and effective. Lines and boxes create strong groupings, but too many of them can overpower your layout. Alignment also groups things together, and suggests sub-categories.

Color can be used to create groups, but use it sparingly and in combination with other techniques. There are numerous problems with color. For one thing, no matter what colors you use, you will probably find some people that think they are ugly. And for another, your VI may be used in a way that the color is distorted (such as on a low color monitor) or by a person who is color blind. If you do use color, make sure you use colors that are in the same family. For example, don't mix primary colors with pastels.

In addition to grouping, keep consistency in mind. For example, LabVIEW (6 and later) provides three different styles of controls and indicators: classic, 3D, and dialog. Make sure all your controls and indicators are the same style. If you need a control that is not available in the style that you are using, try to make it look as similar as possible. For example, a classic graph can look at home with dialog controls if its frame is transparent.

Make sure your controls and indicators are neatly aligned and distributed. LabVIEW makes this easy by using the alignment and distribution tools in the toolbar. Simply select the items that need to be aligned, and then choose from the ring whether to align them along their top, bottom, left, or right edges.

Be wary of large text sections on your panel. If you name your controls and indicators well, you can often avoid large blocks of explanatory text.

Finally, don't expect that you can make every panel look prettier by coating it with fancy graphics. Appropriate graphics can make a good design look even better, but no ugly panel has ever been saved by animated dancing gerbils.

Example VI

Bad/Ugly:

To make your VI panel look like a system-native application, use dialog controls as much as possible. The dialog controls palette provides these special controls, indicators, and cosmetics. Rather than mimicking real-world controls from stand-alone instruments, these controls look like items in system-native dialogs.

They have other special properties that aren't immediately obvious. First, they change appearance drastically on different operating systems. The OK button looks like a square flat button on Windows 2000, and a rounded button on Mac OS 9. This adaptation happens automatically when you take your VI to another platform.

In addition, dialog controls use symbolic colors and fonts, which I will explain next.

The easiest way to understand symbolic colors is to look at the Windows display properties dialog. Here you can redefine the color scheme for your entire system. Windows 2000 comes with various schemes, such as "Lilac." Change your appearance scheme and see what happens. Each scheme defines a set of colors for things such as window titlebars and window backgrounds.

The LabVIEW color picker (6 and later) allows you to color objects with symbolic colors. For system-native appearance, use only system colors for everything on your panel.

Symbolic fonts are similar to symbolic colors. For system-native appearance, use only the dialog font.

Summary

• Try to keep panels clean and simple.
• Use empty space, lines, alignment, and color to group items on a panel.
• Use consistent style.
• Use good terminology in control and indicator labels.
• For system-native appearance, use dialog controls, symbolic colors, and symbolic fonts.

For more information about user interface design with LabVIEW, refer to the NIWeek 2002 presentation "The Good, the Bad, and the Ugly."