LabVIEW
Jimmy Ko () NI Marketing Engineer
Agenda
1. Definitions, rules, and advice 2. Some cool UI techniques for LabVIEW
3. Some reusable components / resources
What Is a UI?
Literally: User Interface () How user interacts with the program First thing the user notices Make the users job easier Not 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
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
Lets 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 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 LabVIEW toolbar Do not persist onetime 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 the user resize your application
Use Appropriate Controls
You can change your default type in ToolsOptionsFront Panel
Add Decals to Buttons
Tooltips
Recolor Graphs
Hide the LabVIEW Toolbar
Customizing the Run-Time Menu
Spawning Dialogs
Using Panes
Title Area
Menu/Commands
Expandable Content Area
Status Bar
Hiding Panes
Status Bar
Busy Cursors
Keeping the User Updated
Small Touch Screen App
Applying the Rules
Small Touch Screen
Do not be innovative Use large controls and indicators that resemble their physical equivalents Simple is best Less is more Screen real estate 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
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
Informative Kiosk Display
Applying the Rules
Informative Console Display
Do not be innovative
Take inspiration from TV, Web sites 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
Panel Background
Create Decorations in Other Tools
Transparent Indicators
Transparent PNGs in a Picture Ring
Heavily Customized Controls
Useful Stuff UI Interest Group
http://decibel.ni.com/content/groups/ui
Useful Stuff LabVIEW Pro
Key Takeaways
The Rules
1. Do not be innovative 2. Less is more 3. Think about your user
Take advantage of what LabVIEW gives us
Transparency Different controls / control customization Panes / tabs
UI Interest Group & LabVIEW Pro
