NI LabVIEW UI Tips & Tricks

Dipl.-Ing. (FH) Bernd Fasching

National Instruments Germany
Agenda

1. Definitions, rules, and advice

(not specific to LabVIEW, but important)

2. Some cool UI techniques for LabVIEW

(and why you would consider using them in your application)

3. Where to go to download some reusable components

(because everybody loves free stuff)
What Is a UI?

• Literally: User Interface

• How user interacts with the program

• First thing the user notices
• Make the user’s job easier
• Not be frustrating
Some General Rules

1. Do not be innovative.

2. Less is more.

3. Think about your user.

1. Do Not Be Innovative

Use familiar elements

• Buttons
• Icons
• Terminology
• Dialogs
• Menus
1. Do Not Be Innovative

Still some license for creativity

• Do not change the way similar
looking things behave.
• Polish, do not reinvent.
2. Less Is More

• Too much on screen at once is distracting.

• Allow your user to focus on what is important.

3. Think About Your User

• They probably do not know as much as you

Explain what buttons do.

Keep them informed about what your program is doing.

• Know how the user plans on using your application

Mouse, keyboard?

Touch screen  large buttons

Outdoors  high contrast
Let’s Take a Look at Some UIs

• Windows Desktop App

• Small Touch Screen App
• Informative Kiosk Display
Windows Desktop App
Applying the Rules

Desktop Windows OS Application

Do not be innovative Less is more Think about your user

• Use system controls. • Allow user to hide • Create a status bar

• Add familiar icons to less important and use the busy
task buttons. displays. cursor to update user.
• Use X to close • Hide the LabVIEW • Use tooltips to clarify
application. toolbar. functionality.
• Do not persist on • Allow the user to
one-time cancel long tasks.
configuration controls • Use panes to let the
for no reason -> user resize your
temporary dialogs application.
• Customize the
run-time menu.
Use Appropriate Controls

You can change your default type in Tools»Options»Front Panel

Add Decals to Buttons
Using the "Missing" System Control Suite

• Free download from „UI Interest Group“

• Installed in the LabVIEW controls palette
Tooltips
Recolor Graphs
Hide the LabVIEW Toolbar

File >> VI Properties >> Window Appearance >> Customize

Customizing the Run-Time Menu

Edit >> Run-Time Menu

Dialogs
 Using Panes
Title area

Menu/
commands
Expandable
content area

Status bar
Hiding Panes
Keeping the User Updated – Status Bar
Keeping the User Updated - Busy Cursors

• Examples for busy cursors

• LabVIEW cursor palette

Keeping the User Updated – Progress Bar
… Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo …

Windows Desktop App

Small Touch Screen App
Applying the Rules

Small Touch Screen

Do not be Think about your

Less is more
innovative user
• Use large • Screen real • Use more
controls and estate is contrast.
indicators that valuable; use it • Touch screens
resemble their wisely. require more
physical • Use trays, tabs, spacing.
equivalents. or different • Users’ fingers
• Simple is best. screens to stretch may obscure part
screen space. of the screen.
Tab Controls

• Tab controls are a familiar way to put more

information on a screen.

• Because the tabs can be hidden and

changed programmatically, they are also
useful for some less obvious UI techniques.
“Hidden” Tab Controls

Sliding tab control

Main content tab control

Sliding a Control – Move.vi

• Moves an object to the desired position

• Moving half the remaining distance in each loop iteration
gives a natural sliding appearance
Putting It Together
When the Menu Button is clicked, slide
the invisible tab control into view.

Store the old position of

the menu so we can slide
it back.

When a new view is selected,

change the Main Content Tab
Control to the selected page.

Again, store the old position of the

menu so we can slide it back.
… Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo …

Small Touch Screen App

Informative Kiosk Display
Applying the Rules

Informative Console Display

Do not be Think about

Less is more
innovative your user
• Take inspiration • Show only the • Passive audience
from TV, web important  visual appeal
sites or similar information in an is more
applications. instantly important.
recognizable
way.
Panel Background

Change panel background with pane properties.

Create Decorations in PowerPoint

• Save PowerPoint objects as graphic.

• Import graphic in LabVIEW.

Edit» Import Picture to Clipboard

Supported graphics files:
GIF, JPG, CLP, EMF, WMF, BMP, PNG, or animated MNG
Transparent Indicators

• Transparent indicators look like comments.

• Change value programmatically.
• Example: Transparent PNGs in a Picture Ring
… Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo …

Informative Kiosk Display

Use Drag and Drop

NI Example Finder: Drag and Drop

Using a Subpanel

1. Determine a top-level VI as framework for subpanel.

2. Develop size appropriate, modular subVIs.
3. Dynamically run subVI.
4. Dynamically insert subVI into subpanel.
Subpanel – Options Dialog

Displaying subpanels based on user selections

… Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo … Demo …

Dock-Undock with Subpanels

Free Stuff – UI Interest Group

http://decibel.ni.com/content/groups/ui
 Free Stuff – UI Interest Group
Gallery of Examples

Credit: Simon Hogg

NI Community UI Interest Group
 Free Stuff – UI Interest Group
Gallery of Examples

Credit: Simon Hogg

NI Community UI Interest Group
 Free Stuff – UI Interest Group
Gallery of Examples

Credit: Jonathan Cohn – Bloomy Controls

Free Stuff – Graphics

• Import picture to clipboard

• Use PowerPoint
• Already installed graphics

C:\Users\....\Documents\LabVIEW Data\Glyphs
• Icon library on web

http://zone.ni.com/devzone/cda/tut/p/id/6453
• UI Interest Group

http://decibel.ni.com/content/groups/ui
Key Take-Aways

• The “Rules”
1. Do not be innovative.
2. Less is more.
3. Think about your user.

• Take advantage of what LabVIEW gives you

Transparency

Different controls/control customization

Panes/tabs/subpanels

• UI interest group on the community

Questions?