BV Logo (L)BV Logo (R)

Interface Designer's Workshop__


Simple design tips that may help you improve your panel designs
Here are some simple techniques and suggestions that may help you to design better looking and more user-friendly VIs.

 


1) Define an overall design theme or concept first!

Just as it is not possible to build a useful application without some degree of initial planning, it is also very unlikely that a user interface will be intuitive, well designed and aesthetically pleasing without some consideration in the early design phase. While an interface can be upgraded or modified "after the fact", you will have much more control of the outcome if you consider your destination before embarking on the journey. The first step is to start with a concept. Define, in a general sense, how the user will interact with the panel. (Through buttons? A menubar? A bank of switches? etc.) Start to consider the layout placement of the key interface "must-haves" (a large data graph, a "start" button etc.). At this point, it is not important to develop a complete, concrete solution, but start with a general concept or theme. As you start to flesh out the design, this initial concept will start to become more concrete and undergo an evolutionary process. If all design decisions are governed by this evolving concept, your design should remain consistent, on-track, and the multitude of design decisions should be easier to make.

Back to top


2) Whenever possible, involve users in the process.

Clearly, the objective of any software development project is to provide end-users with a useful tool - the true measure of your application's effectiveness will lie in how completely end-users can understand and interact with your GUI. Because no one understands the users' perspective more profoundly than the users themselves, it makes perfect sense to seek user feedback throughout the development process. Begining with requirements-gathering and task analysis (based on user feedback), you should also plan to enlist the help of users to evaluate preliminary GUI prototypes. User feedback throughout the process can help you uncover design flaws and oversights early in the process - before fixing them becomes problematic and costly. Also plan for follow-up testing and additional development time to address any shortcomings uncovered in the final product. Adopting an iterative development cycle and including users throughout the process will ultimately lead to higher quality applications and greater end-user acceptance of your software,

Back to top



3) Add elements economically and reuse elements consistently

As you begin to add interface elements to your design, be judicious and start with the critical items first. You may find that the interface can start to become cluttered before you have finished adding all of the elements you had originally planned. If this happens, you may have to modify your preliminary design concept. Some items may need to be moved to pop-up subVI panels or displayed in a different, more economical display format (e.g. a graph rather than several numeric displays). Look for ways to reuse layout, design and display components on subVI panels. Not only will this reinforce an organized, professional presentation, it will also save you time when you start to build subVI panels since many of the design decisions will have been made while assembling the first panel.

Back to top



4a) Choose an effective color palette

When deciding on a "color scheme" for your panel, the best course of action is to define a limited color palette at the outset. Two or three fairly muted basic colors for background and major interface components and a few (no more than 3) complimentary, bright, highlight colors chosen to draw attention to critical indicators, controls, icons, or perhaps a logo. Generally the "highlight" colors should be used sparingly for maximum impact.

Choosing Color Combinations That Work:

Choosing a combination of colors that will not only work together, but also help convey an appropriate message for your application can be a challenge. If you have a good eye for color and good taste, you will definitely have an edge. If you take your color choices seriously, you might want to check with a local graphic design or art supply shop for a graphic designer's color wheel - a cardboard device which helps you to choose colors which "match". A much more direct alternative however would be to download the "LabVIEW™ Color Palette Generator VI" available from our Free Samples page.

4b) Use colors thematically and consistently

In the early design stages, decide what role color will play in your design. Will color be used to convey information such as operational status? Perhaps you would like to use color as an "aid to navigation" or to make your design more accessible and intuitive. Or maybe you would just like to add cosmetic color elements to create visual interest. In short, choose a color usage "theme" and use the same theme for all of the subVI panels in your application. This approach does have a practical advantage: when you have taken the time to make these choices once, you will not have to go through the process of selecting a new color palette and theme for every subVI in your application.

Back to top



5) Take advantage of custom controls and indicators

The designers of LabVIEW™ have provided a very powerful framework for customization by including support for custom controls and indicators. Many LV programmers rarely if ever take advantage of this valuable resource, and as a result, many LV panels tend to take on a somewhat generic look. Custom controls and indicators add a unique identity to your panels, and are indispensable for displaying data in the most appropriate, effective, and intuitively obvious way. Rather than displaying a tank level using the native "generic" tank indicator, why not build a custom indicator that accurately represents the "real world" appearance of the tank?

Back to top



6) Look for innovative ways to use built-in controls & indicators

Sometimes, a very effective interface component can be created by using the built-in controls in unconventional ways. For example, graphs, charts and plots don't necessarily need to display acquired or calculated data, they might also be marshaled for user interface feedback. For example, you might employ a waveform graph to provide feedback for an operator defined parameter curve, or consider using an intensity graph in addition to (or in place of) a numeric display to provide visual feedback for a temperature setpoint. One of our favorite tricks is to use attribute nodes to hide unit labels (i.e. ml/min, degrees C, Volts etc.) until they are explicitly requested by the operator. An alternative spin is to enable units displays only when the mouse pointer is in close proximity to an indicator. This helps reduce panel clutter, but still provides unit information to the operator. Look at your application and see what innovations you can devise.

Back to top



7) Start with "ease-of-use" as your primary design criteria

While the functionality and integrity of the underlying code are of paramount importance, developers of high quality software devote equal attention to the user experience. There is a good reason for this - the best features of your application are of little use if the operator can't figure out (or remember) how to access them.

In most cases, you will generally discover that a little forethought and a clear vision of the user interface functionality actually helps to streamline the logic flow of the diagram and in fact, makes the "wiring" (coding) stage flow more smoothly. "Ease of use" and "clarity of purpose" definitely demand more time in the planning stages, but the time saved in the subsequent development, support and operator training phases prove this initial investment of time to be a wise investment indeed.

Back to top



8) Add custom graphics, a logo, or even a background image.

The LabVIEW™ design team has gone to great lengths to include a variety of graphic import capabilities that allow you to make your product look unique, professional and complete. Importing graphic images for use in custom controls and indicators is relatively simple and adds a unique identity to your application. A bitmap of your company logo or a subtle background texture can add a professional "finish" to your application's appearance.

Certainly, the integrity of the underlying logic is extremely important, but if you feel the appearance is not equally important, you might want to consider some points outlined on the "Custom Interface ...Why?" page.

Add some custom graphics or a logo. It's not that difficult and it will definitely add individuality and style to your panels. Don't let all that extra effort and devotion on the part of the LabVIEW™ design team go to waste!

NOTE: If you do not have the resources or experience to generate high quality graphic images, BetterVIEW can provide professional quality custom graphics at very competitive prices. We have a variety of image libraries and completed graphics that might be easily modified to your particular application, or if you need something specific, we can build it to order. Drop us a line and let us know what you're looking for... We can help!

Back to top