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

5. Booking a Plane Ticket

6. Phone Number
( ) - -
You must fill in all required fields

7. Your User Interface (UI) Isn’t Everything
http://jcmanagement.co/ux-vs-ui/

8. Principles of UX
Design
http://semanticstudios.com/user_experience_design/
useable
useful
desirable
accessiblefindable
credible
valuable
Peter Morville’s UX Honeycomb

9. useable
useful
desirable
accessiblefindable
credible
valuable
 Controls and Indicators
 Color Selection
 Graphs

10. Desirable: Attractive Interface desirable
 LabVIEW NXG controls/indicators

11. Desirable: Attractive Interface desirable
 Use 3rd party GUI suites to save time

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

16. Desirable: Unique Colors
 Without Golden Ratio
desirable
 With Golden Ratio

17. Desirable: Graphs desirable

18. Desirable: Graphs desirable

19. useable
useful
desirable
accessiblefindable
credible
valuable
 Color Vision Deficiency
 Using Texture
 Icons

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

24. Accessible: Icon Caution
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Common Icons with Labels Common Icons without Labels Unique Icons without Labels
Percent of Users to Correctly Predict Icon Functionality
https://www.usertesting.com/blog/2015/08/04/user-friendly-ui-icons
accessible

25. useable
useful
desirable
accessiblefindable
credible
valuable
 Application Layout
 Animation
 Dropdowns vs Searchbars

26. Findable: Dropdowns vs Searchbars
 Which do you use more often in your application? Why?
 Stop being selfish with long lists – allow searches
findable

27. Title Bar
Menu Bar
Navigation
Status Bar
Tool Pane Body
Findable: Application Layout findable

28. Findable: Leveraging External Consistency findable

29. Findable: The Practical Problem with Dialogs 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

31. Findable: A Dialog Alternative findable

32. Findable: Animation Toolkit findable

33. useable
useful
desirable
accessiblefindable
credible
valuable
 Friction
 Information Overload
 Dynamic UI Case Study

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

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

40. useable
useful
desirable
accessiblefindable
credible
valuable
 Consistency
 Responsive Design

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

43. useable
useful
desirable
accessiblefindable
credible
valuable
 UX Hierarchy of Needs

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?

45. Principles of UX
Design
http://semanticstudios.com/user_experience_design/
useable
useful
desirable
accessiblefindable
credible
valuable
Peter Morville’s UX Honeycomb

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

48. www.dmcinfo.com
sales@dmcinfo.com
312.255.8757
Questions? Contact Us…