Vous êtes sur la page 1sur 22

LabVIEW

Programming Techniques
The Good, the Bad, and the Ugly
Greg McKaskle
Senior Group Manager
Fri Aug 18
10:15-11:30 a.m., 1:45-3:00 p.m.
Ash (10A)
ni.com
ni.com

This session reviews the most common user interface (UI) design issues facing
virtual instrument (VI) designers. We will start with VIs needing help,
diagnose the problems, and see how to improve them. We will also cover some
new LabVIEW 6i features that make interfaces easier to build and program.

Expanding Your Business with Marketing

Mkt1 1

Good, Bad, or Ugly?

ni.com
ni.com

This screen was inspired by something we saw at NIWeek last year. To protect
the innocent and make it a good teaching example, weve simplified and
changed it to suit our purposes.

Expanding Your Business with Marketing

Mkt1 2

Good, Bad, or Ugly?

ni.com
ni.com

This is one of the VirtualBench components. While not perfect, its


appearance is much more professional than the previous panel. It is modeled
after real-life instruments and should be familiar to the end user. By building
on the interface of traditional instruments, it builds on the work of professional
designers.

Expanding Your Business with Marketing

Mkt1 3

Who are We to Judge?


<Industrial design degree?
<Graphic design degree?
<We are critics!
<We have experience with the real world
We rely on familiar interfaces to guide us
Our goal is to recognize our limits, to mimic and
copy the professionals
ni.com
ni.com

The most common complaint about VI panels is that they dont look professional. That
may be because they are being designed by people like us with little background,
formal training, or experience doing user interface design. We dont expect graphics
designers to design great circuits or software, and they dont expect us to design great
advertisements or posters. What can be done about this?
We need to learn some tricks and techniques from the professionals. We need to copy
their most common examples and experiment less with what we think may be cool. We
also need to apply a bit more attention and gray matter to the panel.
An analogy is the video camera. Many of us own or know someone that owns a video
camera. All of us have seen a movie in a theater. How many of us expect to be able to
make a professional quality movie with our video camera? Is the problem with the
camera or the person looking through the viewfinder? By paying attention to movies
and applying a critical eye to our own work, we can learn some techniques which will
then make our home movies much more professional. Similarly, we need to pay
attention to the interfaces we see everyday and learn how and why they work, then
apply a critical eye to the panels we build. These professional interfaces are all around
us the copying machine, the VCR, the stereo, the oscilloscope, and so on.
There are also some very good books on this topic. See the bibliography for
suggestions.

Expanding Your Business with Marketing

Mkt1 4

Agenda
<Examples (VIs, stereo, car, newspaper)
<Association
<Colors
<Tab control guidelines
<UI features in LabVIEW 6i

ni.com
ni.com

We will be looking at several VIs and everyday objects to learn about some of
the most useful UI design principles.
Association Grouping or associating objects together is too often overlooked,
and VIs are often made worse when trying to fix association problems.
Color Its not that complicated with a few rules of thumb, but color is often
overused when trying to compensate for other panel problems.
Fonts Your computer has dozens installed. How do you decide which ones to
use, and how many of them should you use?
Tab Controls LabVIEW 6i now has a tab control in the palettes. What are
some good and bad uses of the tab control?
A quick review of a few new diagramming features in LabVIEW 6i that make
it much easier to build User Interface VIs.

Expanding Your Business with Marketing

Mkt1 5

Example 1 Whats Wrong With It?

ni.com
ni.com

The first thing that jumps out at you are the bright colors. Why are there so
many? Why are they so bright?
The second thing is that there are too many labels. It looks like the
programmer that built this needed a name to refer to every object.
These are problems with the panel, but they are symptoms of a bigger
problem.

Expanding Your Business with Marketing

Mkt1 6

First, Lets Remove the Color

ni.com
ni.com

Weve removed all of the color information, and it didnt fix the problem.
Why did we do this? As a test, to see if the major problem was the coloring.
The panel is less colorful, but its still a mess.

Expanding Your Business with Marketing

Mkt1 7

Remove Text Labels

ni.com
ni.com

Getting rid of the labels and rearranging the knobs in a grid helps a lot.
Obviously the knobs are too small to operate now, but we can see how the
panel got into the shape it was in. The programmer labeled everything and
used knobs that made it difficult to put things into a grid. To fix this
association problem, they may have added even more labels and grabbed the
coloring tool.

Expanding Your Business with Marketing

Mkt1 8

Pack into a Tighter Grid

ni.com
ni.com

Replacing the knob with a slider lets the user pack the elements tighter and
take up a lot less panel read estate. Weve also regrouped the controls on the
right and the indicators on the left. This might not fly depending on what the
importance of these elements is, but its a good practice in general.

Expanding Your Business with Marketing

Mkt1 9

Another Option

ni.com
ni.com

In some cases maybe the customer really wants color to identify the items. Try
using background blobs or borders rather than coloring all of the elements. In
this case, maybe the colors match the color of the machine or a sign on the
machine. These are just a decoration or a color numeric placed behind the
groups of controls.

Expanding Your Business with Marketing

Mkt1 10

Association
<Most important technique
<Idea is to separate and group logically
<Use:

Color
Borders
Spacing
Combination

ni.com
ni.com

Association or grouping of objects is probably the most common problem that


VIs have.
The idea is to somehow simplify what the user has to look at by grouping and
associating small objects into larger ones that are more comfortable. You dont
want your user to feel like they are looking at the cockpit of a 747 unless they
have to. Try to give them the simplest interface you can that focuses on what
they need access to.
There are four common tools or techniques that you can and should learn how
to use in order to associate objects. They are color, spacing, borders, and, of
course, a combination of these is often what is called for.

Expanding Your Business with Marketing

Mkt1 11

Association Color
<Not the best technique for associating
<It is the most overused technique
Strong, brute force approach
Best used when spatial arrangement cannot be
controlled
Contrast is more important than color

<The red fox jumped over the lazy dog.

ni.com
ni.com

First, well look at color. Its not the best tool to use, and is often the worst tool,
immediately giving that not professional feeling to a panel. When
professionals use color, they use it with finesse and control. There will be more
on color later in the presentation.
Many panels have association problems that are fixed using color much as a
players in a sporting event will wear different color jerseys for different teams.
Often, the user grabs the coloring tool and applies jersey colors to various
controls to associate them. If the association isnt strong enough, then the color
isnt strong enough, leading to optical yellow buttons next to acid green slides
and the like, what I call circus panels.
What are some situations when color is a good choice for associating? One case
is when the objects location cannot be controlled. In the example above, we
cant rearrange the letters to separate the vowels from the consonants or it
would make for difficult reading. Adding space around the letters or underlining
them doesnt seem to work nearly as well. Giving the vowels and consonants
slightly different colors maintains text readability, but distinguishes them when
the user wants to count them.
Similarly, scatter plots will frequently use color to distinguish between points
on different plots. If we draw temperatures as red circles and pressures as blue
crosses, then it is easy to see the overall relationship between the data, and still
easy to focus on just one point. Again, this is a situation where the location of
the point contains other information and you dont have complete freedom over
it. This technique breaks down with many plots and its a good idea to add
space to stack the plots vertically.
Expanding Your Business with Marketing

Mkt1 12

Association Borders
<Notice the one at the top of the slide?
<Used extensively in news media
<Can be a line, box, or transition in texture
<Match the border weight to other objects

ni.com
ni.com

Borders, rules, and lines, all refer to graphical elements used to separate objects or
group them together to define their association. These are often used in printed
material, and somewhat in computer dialogs, but they are also often overused.
Weight refers to the thickness or boldness of the line. The computer screen does
not allow for the same level of control in thickness, so you will often need to use
shades of gray to fine tune the borders. The lines on the left of the graphic show
different weights and styles. The first and second line are the same width, one
pixel, but the first looks thinner because it is a lighter shade of gray. Note that a
double rule, or two lines barely separated, looks different than a thick gray line.
Gradients, 3D bevels, and chisel lines are also all valid borders and use of them is
a matter of style.
Many Web pages impose borders by changing the texture of the background
graphic. If you use this, keep it very subtle.
System dialogs are a good place to look at border usage, but be careful with boxes.
They are valuable borders, but can make a very bold, noisy grid, and often you
only need consistent spacing to form a grid. Also, a somewhat algorithmic
approach to grouping boxes will lead to boxes within boxes within boxes. While
not immediately confusing, it looks less professional than using a simple line or
white space to separate the items.

Expanding Your Business with Marketing

Mkt1 13

Association Spacing
<Most effective technique
<Books, presentations, and
computer keyboards rely on
white space to associate
<Spacing defines a grid and
separates items into groups

ni.com
ni.com

White space, or spacing, is the most important tool to learn to use. It is always the first
tool to turn to when you need to associate things, and often the only tool you will
need. You often want to make spacing consistent between associated items so that
they form a pleasing grid for the user to navigate. Then use larger spacing to make
some items stand out from the grid. Pay attention to the spacing between the object
and the window or screen border. Just like a page margin in a book, this space helps
frame the items professionally in the window.
For good examples of this, look at your copying machine, stereo, maybe your remote
control (though many of them are done poorly). Perhaps the best example is the
keyboard on your computer. The arrow keys, the numeric keypad, the function keys,
the numbers on the top row, and the rest are arranged onto separate little grids. There
may be some subtle coloring, but most organization is done with spacing. Imagine if
the keys were arranged in ASCII order and color were used to group them!
One reason that spacing is the best tool to use is that we learn it and practice it daily
from a very early age. When we first learn to read and write, there are lines on the
paper to help us associate the letters. Since this becomes second nature to us, we dont
realize how important it is until these rules are broken. The graphic on the right breaks
more and more of these rules as you read the sentence, and serves to remind us of how
much these association rules aid us in reading.

Expanding Your Business with Marketing

Mkt1 14

Association Combinations
<Combination
Look at professional interfaces and learn
individual techniques first
Then learn how to combine them

<Real world examples newspaper, stereo,


keyboard, copying machine, toolbars

ni.com
ni.com

If you only learn one technique, let it be control over white space. It is the
most rewarding and least intrusive. You can then use borders and color to
convey additional information or you can use them to add a bit of style or
mood to the panel.
Again, use your stereo, your car, or other real world ideals to guide you, and
frequently its much more difficult to criticize your own work than that of
others. It may be a good idea to bring in an impartial observer to learn what
they think of the interface. Beware that their suggestions may be really bad!
They may encourage you to grab the paint brush and apply some jerseys to the
controls to associate them. Try to focus more on the problem they have with
the interface and less on the solution that pops into their head. Most
importantly, be prepared to spend some time, make up some alternatives for
them to choose between, and experiment.

Expanding Your Business with Marketing

Mkt1 15

Colors How Much is Enough?


<Only two types of color
Neutral colors (for coloring large objects)
Highlight colors (for coloring small objects)
Neutral colors
Highlight colors
System color picker

Transparent
color

Color
history

ni.com
ni.com

For the most part, you can pretend that there are only two types of colors
neutral and highlight. The exceptions, like a red sports car exterior, are done
intentionally to draw attention because something is out of the ordinary. Your
cars dashboard, seats and carpet are probably a neutral color. The
speedometer needle and the warning lights in the dashboard are highlight
colors.
Keep these things in mind when making a panel. You need most things to be
complimentary neutral colors that vary primarily in their brightness. You can
then get away with a few highlight colors for plots, meter needles, company
logo, and so on.
You can use highlight colors for big things then make the highlights black or a
dark color. If done correctly, you will get an industrial look that is cool and
unusual. On the other hand, many toys look this way, so be sure not to overdo
it. Instead of an industrial look you will wind up with a Tonka toy look.

Expanding Your Business with Marketing

Mkt1 16

Color Blind?

ni.com
ni.com

Are you color blind? Do you know someone that is? Ive heard exaggerated claims
about the percentage of engineers that are color blind, and the extent to which they are
color blind. Im not an expert, but I think this must be based on the engineers
wardrobe choice, not their eyesight. This is a simple color blind test. It is obviously
not completely accurate because it is being displayed on a monitor that isnt calibrated.
Several people who suspect they are color blind have failed the test while most others
pass it.
The wheel at the top right shows a spectrum of colors, and you probably see it
correctly. The wheels below depict how a person with strong color blindness perceives
the same wheel.
The three dot clusters to the left are from a classic colorblindness test. If you look at a
printout of this slide, you will not be able to make out the numbers because there is no
contrast, only slight color differences. Everyone should see the number 12 in the
leftmost dot cluster. Depending on the degree and type of colorblindness, you may not
be able to see the 2 in the top or 5 in the lower dot clusters.
There is a good Web site discussing the types of color blindness, the percentages of
occurrence, and reasons for it. If you are writing the panel for only your use, then you
dont need to worry about color blindness. If you intend to have others use your
panels, then a quick test is to print them on a laser printer or a grayscale printer. If you
cant tell the items apart with contrast only, then you are going to run into problems.
Just lighten or darken the colors until they appear distinct on the printout, or use plot
symbols, borders, labels, or other distinguishing marks.
The Web site is http://members.aol.com/nocolorvsn/color.htm

Expanding Your Business with Marketing

Mkt1 17

Fonts A Few Guidelines


<Use very few fonts on a panel

Two or three fonts is probably the limit


One is often the right number
Vary the size, weight or boldness instead

<Use serif fonts for printed blocks of text


<Use non-serif or sans-serif fonts for screen

ni.com
ni.com

Serif fonts have little feet and flourishes on them, primarily at the bottom or
baseline. Serifs make it much easier and faster to read large bodies of text
that is why newspapers and published books use them. They arent very
legible onscreen, and arent necessary for titles and larger text so its best not to
use them unless the material is destined for the printer.
Screen resolution and sans-serif fonts are one of the primary reasons that it is
more difficult to read material online compared to a printed manual or page.
Notice that the default for PowerPoint is to use a sans-serif font for the slide
display, but a serif font for the notes below the slide. Interestingly, the screen
version of the notes is done with a sans-serif font.
This is one of those little things that people may not really notice, but it adds
to the professionalism.

Expanding Your Business with Marketing

Mkt1 18

Tab Control Guidelines


<LabVIEW 6i includes a built-in tab control
It allows more information on a panel
It simplifies the programming and the UI

<It is not foolproof

ni.com
ni.com

The tab control allows you to group together controls that should be visible
and invisible at the same time making your diagram programming easier. It
lets the user navigate between high-level categories arriving at a slightly
modal display that is independent of the other tabs, but not application or
system modal. It fits a real-world metaphor a collection of manila folders.
And it looks cool.
Sounds great. That means that they are the new next thing that will be
overused and abused just like globals, color, and every other new feature. This
is your chance to be more professional, avoid some of the pitfalls, and make
some really nice interfaces using tabs.
So, what are the problems?

Expanding Your Business with Marketing

Mkt1 19

Tab Control No-Nos


<Use descriptive names
<Avoid many rows of tabs
<Avoid scrollbars if possible
<Avoid having tabs perform actions

ni.com
ni.com

If it only makes sense for the user to visit the pages in a certain order, then hide the tab controls
tabs and advance it with a Next and Previous button making a wizard. Vague names will also
lead to a find and seek routine the user must navigate. Use names as descriptive as possible, but
like menus, they must be very short.
More than two rows of tabs will cause confusion, since tab rows get reordered with each user
click.
It is possible to use scrollbars to place all the tabs on one row, but only see a few at a time. This
will do in a pinch, but is not preferred. That many tabs probably means that there are too many
items in one grab-bag dialog. Break the dialog into more than one, or use a listbox, tree control,
or ring to select pages rather than tabs.
What does it mean when a user changes tabs? This is a gray area, and you will get different
opinions. You almost certainly do not want tab changes to initiate actions like running,
aborting, free running, or pausing an activity. These are actions that should be attached to a
menu item or an action button. There is probably some amount of feedback between the buttons,
and often you dont want the contents of the tab to change. This is one of those things that you
can do, but probably shouldnt unless you are absolutely sure of yourself.
What about committing the users changes when they change tabs? Are they done making
changes to that page? If there are some consistency checks on inputs, should they be done when
changing tabs, only when OKd, or when each control is modified? This is up to you. You
probably want to avoid having a tab change bring up a dialog saying that something is wrong
with the current page and they cant leave that page until they get it right. You also want to
avoid having the user get a list of mistakes that they made on various tabs while editing, but you
didnt notify them until they hit OK. Different platforms and systems take different approaches.
It isnt an easy question, and doesnt have an easy answer.
At this point you can open tab.vi and demonstrate some of these problems like many rows if you
like.

Expanding Your Business with Marketing

Mkt1 20

Control Features in LabVIEW 6i


<3D controls and line decorations
<Multiple scales on graphs and charts
<Multicolumn listbox
<Color ramp for rotary controls
<Digital graph, logic analyzer display

ni.com
ni.com

The most enabling UI feature in LabVIEW 6i is a diagram feature. Attribute nodes can now be located in
subVIs where they are shared across multiple panels and clean up top-level diagrams. Use them carefully or
you will introduce race conditions that are difficult to debug. In the past you knew an attribute was being
changed somewhere on the diagram and you could even Find each and every attribute. Now the Control
reference can be passed to any number of subVIs running in parallel and making changes to the UI without
synchronization. It is a great power user feature, but beware of the debugging headaches.
3D controls may be the most noticeable feature in LabVIEW 6i. Some of the controls look nice, but they are
not a quick fix for poorly designed panels. Use the same rules for association and coloring, and your panels
should look nice.
Graphs and charts now have good support for multiple scales, scale name labels, and programmatic control
over more attributes.
There is a new control that works well for lists of multicolumn data, like file system lists that include the data
or size.
You can popup on a meter or gauge and make visible the rotary color ramp. It allows you to associate a color
with arbitrary markers on the scale so that you can have color bands and color ranges beneath the needle.
Digital graph and logic analyzer display. The waveform graph now knows how to plot lines and groups of
lines much like a logic analyzer. Use the mask data element to specify which bits are placed into which plot
and in which order.
You can now give your buttons or other controls a tip strip in addition to the information that shows in the
help window.
Once you have associated controls using space, borders, or white space, group them to maintain the
association and manipulate them as a group. You can also lock decorations and other background objects so
that they will stay in the background. They will not be accidentally deleted or moved, and you can also popup
to drop new controls as if they were just a part of the background.
There are many other control and panel attributes/properties that allow for better programmatic control over
how the UI works. The value of the control can be read/written to from the property node making it possible
to update lots of properties and the data all at once with less flicker. There is also a panel attribute for turning
off updates while lots of attributes or data values are updated, then restore the value to update the panel.

Expanding Your Business with Marketing

Mkt1 21

Editor Features in LabVIEW 6i


<Control references
A SubVI can make attribute changes
Use it to share code and clean up diagrams

<Tip Strips on controls


<Group and Lock
<New control and panel attributes

ni.com
ni.com

Expanding Your Business with Marketing

Mkt1 22