Your VIs: Good, Bad, or Ugly?

Publish Date: Feb 27, 2009 | 1 Ratings | 4.00 out of 5 | Print | Submit your review

Table of Contents

  1. Thinking in G

Alignment, grouping, and color are three factors to consider when creating professional-looking VIs.

Having worked on the LabVIEW development team at National Instruments for more than 11 years, I have seen hundreds, if not thousands, of VI user interfaces. This experience has taught me that adherence to three key design considerations – alignment, grouping, and color – goes a long way in making a VI look professional. NI LabVIEW software provides tools to make these adjustments fast and easy.

Keep in mind that a common misconception is that appearance is the only deciding factor on whether a VI is good, bad, or ugly. No matter how pretty the VI, if the controls do not make sense or are poorly placed, it falls into the “bad” category. So, always start a user interface with an eye for usability, and ask yourself who is going to be using the VI and what task he or she is trying to complete. Make sure your interface terminology makes sense and the workflow is clear.

Usability engineering is a vast topic left for another day, so, instead, I will cover how to make a VI look good – or, at least, not look ugly.

Alignment

Before you align controls, you often want to make them the same size so that they line up on both sides. One way to do this is by using the sizing tools in the Resize Objects pull-down menu on the front panel toolbar. First select the objects you want to make the same size. Then set them all to the same width and/or height using the ring commands or the Resize Objects dialog.

 Figure 1. Use the Align Objects or Distribute Objects pull-down menu to align your controls.

For some objects, such as buttons, you also can set the width and height in the object’s Properties dialog. In LabVIEW 8.6 and later, you can select multiple objects of the same type and change their properties at the same time.

The alignment grid makes quick, coarse alignment of front panel controls and indicators effortless. There are times, however, when you want more control.

To manually align controls, use the Align Objects pull-down menu on the panel’s toolbar. Use the Distribute Objects pull-down menu to spread them out evenly. With a little experimentation, you can quickly see the effects of these tools.

If you want to turn off the alignment grid temporarily, you can disable it in Tools>>Options or from the Edit menu. If you want to see what your panel looks like without the grid, you can hide the alignment grid in Tools>>Options, but a trick I use is to toggle the VI into Run mode with the keyboard shortcut <Ctrl-M>. The same keyboard shortcut toggles it back to Edit mode.

Grouping

It is tempting to use a frame decoration every time you need to create a group, but too many boxes can create a cluttered look. Visual noise makes it hard for a user to know where to start looking. Simply leaving more empty space (white space) around a group is an effective and attractive way to set it off from the other parts of the panel.

Figure 2. These images illustrate two versions of the same front panel, one using decorations for grouping and the second using more white space. The one that uses white space (right) looks less cluttered and is easier on the eyes.

Color

Color can group items, but bad color choices can make a panel look garish. The LabVIEW Color dialog can help you select consistent and appropriate colors. View the different sections in Figure 3 and, in the following paragraphs, learn how you should use them.

Figure 3. Use the Color dialog to help you choose the best colors for your panel.

The bar along the top of the Color dialog lets you pick pure black, pure white, or any shade of gray in between. These are good choices for large areas, such as the panel. The second bar from the top contains muted colors. These are good for medium-sized areas, such as controls. Finally, the third bar contains saturated colors. These are for small areas such as LEDs and graph plots. Do not overuse these bright colors or your panel will scream for visual attention.

The User row of boxes contains colors that you can define in Tools>>Options. These are helpful if you want to use the same colors frequently. The History row of boxes helps you reuse colors that you selected recently. The button at the bottom right-hand corner brings up your system’s color selection dialog, which you can use to enter a specific RGB color value. Lastly is the System section. When you use these colors, the color that you see is only the current value of the color. End users can change appearance properties in the system (outside of LabVIEW) and remap these colors to whatever they want.

The important thing to remember about system colors is that you should not juxtapose them with nonsystem colors. A common mistake is to have black text on top of a background that is the system Panel and Object color. Then, when the end user changes the system theme to High Contrast Black, the background changes to black and the text stays black, which makes it disappear.

Design to Impress

Whether your VIs are meant for another user or for your own personal applications, applying design concepts like alignment, grouping, and color can help your VIs look more professional and go a long way in making them look “good” rather than “ugly.”

 – Christina Rogers  

Christina Rogers is a senior software engineer in the LabVIEW R&D group at National Instruments and the author of the “Eyes on VIs” blog. She holds a bachelor’s degree in computer engineering from Pennsylvania State University and a master’s degree in computer science and engineering from the University of Michigan.

Find more advice on user interfaces in LabVIEW and subscribe to the author’s blog, “Eyes on VIs.” 

1. Thinking in G

 Are you interested in learning more about software engineering from another blog? Check out “Thinking in G,” by blogger Jim Kring, the principal engineer at JKI; the leader of the online community, OpenG; an active contributor to the LabVIEW Advanced Virtual Architects (LAVA) forums; and coauthor of the book, LabVIEW for Everyone. This LabVIEW Champion offers insight and useful tips to help programmers of all levels.

Subscribe to “Thinking in G.”

This article first appeared in the Q1 2009 issue of Instrumentation Newsletter.

Back to Top

Bookmark & Share


Ratings

Rate this document

Answered Your Question?
Yes No

Submit