How to Design Advanced User Interfaces with LabVIEW

Table of contents

UI Design: A Lost Art?

1. Customize the UI appearance

2. Reasonably organize complex UI

3. Tell the user when the program is running slowly

More related resources

If you’re still filling the default gray front panel with modern or classic controls, you haven’t even really touched the user interface (UI) design yet.

If a well-structured and fully functional program flowchart is like the meat of a sandwich, then a beautiful and practical UI is the upper and lower layers of bread. Maybe you will ask if it is indispensable? Maybe not, but it is this appearance that makes it different.

Figure 1. Small changes lead you to design a more beautiful and easy-to-use UI step by step

UI Design: A Lost Art?

If you ask NI LabVIEW developers what they like most about LabVIEW, they will give you a variety of answers, such as the convenience of processing real-world signals, the efficiency improvement of using advanced tools, or the very natural programming method of graphical data flow. Developers often overlook the "graphical" advantage of LabVIEW. It is these graphical interface front panels that constitute the "half of the country" of each VI.

Writing beautiful code is an important part of every application. After all, a program that doesn’t work is a worthless investment. As LabVIEW continues to expand and is used in more and more complex applications, developers must invest more effort in improving the aesthetics of application development, because even a perfectly functional program is less valuable if its interface confuses users.

Figure 2. Although the two VIs have the same functionality, the stopwatch-shaped control makes it easier for users to identify the stopwatch function.

Here are three LabVIEW tips to help you improve your program so that it has a UI that looks and functions better.

1. Customize the UI appearance

The easiest way to improve the appearance of the UI is to replace the LabVIEW default gray front panel background and the "new control panel" with other elements. Simply change the background color of the front panel, use external resource images to beautify your UI, or simply use the system control template. You can get a unique interface appearance without investing a lot of time in customization. In addition, system input controls and display controls are very familiar to most users because they are specially designed to have the style of the operating system. This allows users to quickly become familiar with the functions, making them easier to use. [page]

Customizing controls adds richness and flexibility. Using the LabVIEW Control Editor, you can dissect each control to separate and modify each of the underlying graphical components that make up the control. This technique makes each control more stylized, recognizable, or more representative of the real-world signal it represents. From adding model textures to buttons to modifying instrument background images, control customization is one of the most popular ways to improve the appearance of the LabVIEW UI.

2. Reasonably organize complex UI

However, as your application expands in scope, you often have to add a lot of information to your LabVIEW front panel. Fortunately, if you don't need to display all the controls at the same time, LabVIEW has two simple tricks to simplify the work of dealing with complex UIs.

Tab controls are a commonly used UI component that effectively encapsulates UI functionality into several different parts. They are easy to use and more flexible than most people think. Add a tab control to your front panel, and then fill the tabs with other input and display controls. You can increase and decrease the number of tabs, change the transparency of the tabs, select the physical position of the tabs to display categories vertically, and even add pictures to the tabs.

However, the ease of use gained by using tabs comes at the expense of scalability. Because of the size of the user's monitor, the number of tab controls that can be added is limited. You should consider this detail carefully before developing. In addition, although most of the content is not visible, the tab control loads all input and display controls into memory at once. This may have an adverse effect on the performance of the program.

An extensible UI organization method is to use LabVIEW subpanel technology. With subpanels, you can create countless subVIs, so that you can dynamically fill the subpanel controls with specific subVI content when appropriate. With LabVIEW subpanels, you can decide when to load the display content into memory or release it, which allows you to better control the program.

3. Tell the user when the program is running slowly

Nothing is more frustrating than a program that is stuck while performing a large number of long operations. For a long operation, it is very important to inform the user of its start, end, and progress in a timely manner.

LabVIEW comes with built-in busy cursor and progress bar controls that can be used to easily notify users when the program is processing tasks in the background. When you know the detailed flow of program execution—such as frequent iterations of various For loops—using a system horizontal progress bar is an effective choice.

Your application may have a long loading process when the user first starts it. You can create a splash screen to let your users know that your program has successfully started while informing them of the loading process. By taking advantage of front panel transparency and centered splash screens, LabVIEW can easily create a professional product with only a few minor changes to properties.

Figure 3. You can easily create and use a splash screen to notify the user of slow loading.