This document discusses ways to improve user interface design in LabVIEW. It emphasizes making the UI desirable through attractive colors, graphs, and layouts that follow principles like the golden ratio. The UI should also be accessible to those with color blindness through use of textures, icons, and supplemental text. Elements should be findable using consistent layouts, searchable dropdowns instead of long lists, and animation. Credibility comes from consistency in navigation, terminology and responsive designs. The overall goal is to remove friction, aim for an enjoyable and intuitive experience, and focus on users' needs above all else.
2. Adding Movement & Modernization to Your UI
LabVIEW Can Do That?
Steven Dusing
Systems Engineer
Dan Freve
Project Director
3. Established in 1996, DMC serves customers worldwide from offices in
Chicago, Boston, Denver, Houston, New York, Reno, Seattle, and St. Louis.
employees & growing
170+
DMC Overview
4. Areas of Expertise
Manufacturing Automation
& Intelligence
Test & Measurement
Automation
Microsoft Consulting
Services
Custom Software &
Hardware Development
12. Desirable: Attractive Colors
Adobe Color Wheel for
choosing colors
Guidelines
Choose 1-2 colors
2-3 shades of each
Neutrals for the rest
Grab colors from your
website
desirable
13. Desirable: Graphs
Use DISTINCT colors with SAME INTENSITY
LabVIEW graph default colors do not have the same intensity
desirable
14. Desirable: Unique Colors
Every color can be thought of as
RGB: [Red, Green, Blue]
HSV: [Hue, Saturation, Value (Luminosity/Lightness)]
Only changing Hue maintains color “intensity”
desirable
15. Desirable: The Golden Ratio
https://www.canva.com/learn/what-is-the-golden-ratio/
desirable
20. Accessible: Color Vision Deficiency
Affects about 2 out of every 25 people
accessible
http://blog.usabilla.com/how-to-design-for-color-blindness
21. Accessible: Color Vision Deficiency
Graph colors are essential to identify data meaning
Difficult to pick colors that work for everyone
accessible
accessible
Normal Vision Deuteranopia (~1.5%) Deuteranomaly (~5%)
22. Accessible: Using Texture
Add texture/patterns so color is not the only indicator
Same data, but much easier to read
accessible
accessible
Normal Vision Deuteranopia (~1.5%) Deuteranomaly (~5%)
23. Use text to supplement color indication
Use icons - the “Universal” language
Accessible: What You Can Do accessible
26. Findable: Dropdowns vs Searchbars
Which do you use more often in your application? Why?
Stop being selfish with long lists – allow searches
findable
30. Findable: The Practical Problem with Dialogs
Application
Menu
Print Records
Exit
Tool Pane
Start
Stop
Tools
Login
Navigation
Graph
Data
Performance
Status Bar
findable
?
Tank
Settings
34. Useable: What is Friction?
Friction is anything that prevents the user from accomplishing their goals
Causes Result
Busy
Inconsistent
Unnecessary
Confusion
Hesitation
Thinking
Unfamiliar
useable
35. Useable: The “I Need To See Everything” Challenge
Different tabs or subpaneled views won’t suffice
What about putting everything on one UI?
useable
37. Useable: Dealing with Dynamic User Needs
Too Many Variables
Users/needs are not consistent
Needs and features change over time
Potential Solutions
Show All Information to the User so they have it all at their disposal
Overwhelming
Separate Information on Tabs
Too restricting
Put Information in Floating Popups
Too cluttered
The “Quest” for a Dynamic way of presenting information
useable
38. Each box is a subpanel that will
allow for customizable placement
of an interface module
39. Interface 3
Interface 2
Interface 1
Interface modules just need to be
a multiple of the grid cell size.
The framework handles merging
the cells together
41. Credible: Consistency Breeds Credibility
Without consistency, you lose comprehension
Without comprehension, you lose trust
Without trust, you lose credibility
credible
42. UI Responsiveness relies on UI update speed.
Many ways to improve speed
One important concept is to Defer Panel Updates (especially with trees/listboxes)
Hover buttons
Credible: Responsive Design credible
44. Useful: UX Hierarchy of Needs useful
mockplus.com/blog/post/tips-to-become-a-successful-uiux-designer
zedalabs.com/nomadsummit/
Is it engaging, responsive, and aesthetically
pleasing? Does it keep their interest?
Is it intuitive, frictionless, and designed with the end
user’s process and goals in mind?
Is it consistent and simple?
Does it work?
Does it serve a purpose?
46. Remove Friction
Consistency and Responsiveness
Aim for Enjoyable
Wow, that’s a lot. Here are the key takeaways:
UI is still important
Think about ALL users
Use Animation
desirable
Takeaways
useful
credible
useable
findable
accessible
47. Download the DMC Animation Toolkit:
https://www.dmcinfo.com/services/test-and-measurement-automation/labview-
programming/labview-ux-toolkit
Color Generator
Slider
Hover Buttons
DMC GUI Suite: https://goo.gl/Njq9iQ
Adobe Color Wheel: https://color.adobe.com
Explore other toolkits & create an amazing UX!
What Next?
Questions? Contact Us!
www.dmcinfo.com sales@dmcinfo.com
312.255.8757