Creating Quality UIs with LabVIEW

Prepared for Oregon LabVIEW Oregon User Group Meeting Dec. 2010 www.ni.com/portland

Minh Tran Oregon Field Sales Engineer

1

Agenda
1. Definitions, rules and advice
(not LabVIEW specific, 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 program First thing user notices Make the users job easier Dont be frustrating

UI and Usability

UI
Superfluous eye candy Visual elements that help the user perform a task in an efficient manner

Background Task or Process

Usability
4

Some General Rules

1. Dont be innovative 2. Less is more 3. Think About Your User

1. Dont Be Innovative
Use familiar elements

Buttons Icons Terminology Dialogs Menus

1. Dont Be Innovative
Still some license for creativity

Dont change the way similar looking things behave Polish, dont 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 dont 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

Lets Take a Look at Some UIs

Windows Desktop App Small Touch Screen App Informative Kiosk Display

10

Windows Desktop App

11

Applying the Rules

Desktop Windows Application

Dont be innovative
Use System Controls Add familiar icons to task buttons Use X to close application

Less is more
Allow user to hide less important displays Hide the LV toolbar Dont persist one-time configuration controls for no reason use temporary dialogs Customize the runtime menu

Think About Your User

Create a status bar and use the busy cursor to update user Use tooltips to clarify functionality Allow the user to cancel long tasks Use panes to let user resize your application

12

Use Appropriate Controls

You can change your default type in ToolsOptionsFront Panel

13

Add Decals to Buttons

14

Add Decals to Buttons How To

How to Add Decals to Buttons
1. 2. 3. Drop a System OK Button on the front panel. Right click on the control and select AdvancedCustomize EditImport Picture to Clipboard and select your image PNG files work best since transparency is preserved Right click on the control and select Import Picture from ClipboardDecal Click the wrench icon to change customize mode Move the decal or the text so they arent overlapping Save your custom control

4. 5. 6. 7.

Reuse tip: If you give your customized control an icon and save it in <LabVIEW>\user.lib it will show up in the controls palette under User Controls. http://www.youtube.com/watch?v=2NdqXh67mak

15

Tooltips

16

Tooltips How to

1.Right- click on control > Properties 2.Select Documentation Tab 3.Fill-in Tip Strip field
http://www.youtube.com/watch?v=NGeElmr1q2g

17

Hide the LabVIEW Toolbar

18

Hide the LabVIEW Toolbar - Demo

1. VI Properties > Window Appearance

http://www.youtube.com/watch?v=2CbKuBVGzo0

19

Customizing the Run-Time Menu

20

Customizing the Run-Time Menu - Demo

1.Edit > Run-Time Menu 2.Create Event handling code

http://www.youtube.com/watch?v=wkpiAmHFddM

21

Spawning Dialogs

22

Spawning Dialogs - Demo

1.VI Properties > Window Appearance > Dialog 2.VI Properties > Window Run-Time Position http://www.youtube.com/watch?v=L-hNmzQ9tFc

23

Using Panes

Title Area

Menu / Commands
Expandable Content Area

Status Bar
24

Using Panes Demo

1. Right-Click on Front Panel > System > Containers > Vertical/Horizontal Splitters 2. Right-click on Splitters, configure properties 3. Right-click on objects, Scale Object with Pane

http://www.youtube.com/watch?v=hZ180R7ADto

25

Hiding Panes

26

Status Bar

27

Busy Cursors

28

Busy Cursors - Demo

1.Right-click Block Diagram > Dialog & User Interface > Cursor 2.Set Busy/Unset Busy VI http://www.youtube.com/watch?v=_mosr-oTgRM

29

Keeping the User Updated

30

Small Touch Screen App

31

Applying the Rules

Small Touch Screen
Dont be innovative Use large controls & indicators that resemble their physical equivalents Simple is best

Less is more
Screen realestate is valuable, use it wisely Use trays, tabs or different screens to stretch screen space

Think About Your User Glare may be an issue use more contrast Touch screens require more spacing Users fingers may obscure part of the screen
32

Tab Controls
Tab controls are a familiar way to put more information on a screen than would otherwise fit Since the tabs themselves can be hidden and changed programmatically they are also useful for some less obvious UI techniques
33

Hidden Tab Controls

Sliding Tab Control

Main Content Tab Control

34

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
35

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.
36

Informative Kiosk Display

37

Applying the Rules

Informative Console Display

Dont be innovative
Take inspiration from TV, websites or similar applications

Less is more
Show only the important information in an instantly recognizable way

Think About Your User

Passive audience visual appeal is more important

38

Panel Background

39

Panel Background - Demo

1. Right-click on Scroll Bar > Properties 2. Pane Properties > Browse 3. Select Position

http://www.youtube.com/watch?v=gxXJfonTlFc

40

Create Decorations in PowerPoint

41

Create Decorations in PowerPoint - Demo

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. Open Microsoft PowerPoint Insert Tab > Shapes Right-Click > Format Shape Gradient Fill Select Gradient Top 1 Adjust Stop Position and Transparency Select Gradient Stop 2 Adjust Stop Position and Transparency Select Line Color Adjust parameters Select Shadow Adjust Paramaters Right-click on Shape, select Save as Picture, Save as PNG to preserve Transparency In LabVIEW go to Edit > Import Picture to ClipBoard > Select File Created CTRL+ V Reposition as necessary, right click Move To Back http://www.youtube.com/watch?v=gjYfqhlv2hQ

42

Transparent Indicators

43

Transparent Indicators - Demo

1. Classic String Indicator 2. Toolbox > Color Selector > Transparent 3. Click Indicator

http://www.youtube.com/watch?v=jgUB1oDmf-4

44

Transparent PNGs in a Picture Ring

45

Transparent PNGs in a Picture Ring - Demo

1. Classic Picture Ring 2. Edit > Import Picture to Clipboard 3. Right Click on Picture Ring > Import Picture After 4. Recolour Tool > Select Background of Picture Ring and make Transparent 5. Right-Click Picture Ring > Visible Items > Uncheck all

http://www.youtube.com/watch?v=AmDLCsnOegw

46

Heavily Customized Controls

47

Free Stuff - UI Interest Group

http://decibel.ni.com/content/groups/ui

48

Key Take Aways

The Rules
1.

2. 3.

Dont be innovative Less is more Think about your user

Take advantage of what LabVIEW gives you:

Transparency Different Controls/Control Customization Panes/Tabs

UI Interest Group on the community

49