How to Make Eye Catching User Interfaces

Charlotte Nicolaou
Technical Marketing Engineer

Agenda
1.

Definitions, rules, and advice

(not specific to LabVIEW, but important)

2.

Some cool UI techniques for LabVIEW

(and why you would consider using them in your application)

3.

Brief intro to XControls

ni.com

Some General Rules

1.

Do not be innovative

2.

Less is more

3.

Think about your user

ni.com

1. Do Not Be Innovative
Use familiar elements
Buttons

Icons
Terminology

Dialogs
Menus

ni.com

2. Less Is More

Too much on screen at once is distracting

Allow your user to focus on what is important

Animations, decorations have their place, but use sparingly

ni.com

3. Think About Your User

They probably do not know as much as you

Give clear instructions

Keep them updated

Forgive mistakes

What device will they be using?

ni.com

Mouse, keyboard?

Touch screen large buttons

Outdoors high contrast

6

Lets Take a Look at Some UIs

Windows Desktop App

Small Touch Screen App

ni.com

Windows Desktop App

https://decibel.ni.com/content/docs/DOC-10962

ni.com

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

ni.com

Less is more

Think about your user

Allow user to hide less

important displays
Hide the LabVIEW
toolbar
Do not persist one-time
configuration controls
for no reason use
temporary dialogs
Customize the run-time
menu

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

Using Panes

Title Area

Menu/Commands

Expandable
Content Area

Status Bar
ni.com

10

Hiding Panes

ni.com

11

Status Bar

ni.com

12

Keeping the User Updated

ni.com

13

Custom Controls - Add Decals to Buttons

ni.com

14

Small Touch Screen App

https://decibel.ni.com/content/docs/DOC-10963

ni.com

15

Applying the Rules

Small Touch Screen

ni.com

Do not be innovative

Less is more

Use large controls

and indicators that
resemble their
physical equivalents
Simple is best

Screen real estate is

valuable; use it
wisely
Use trays, tabs, or
different screens to
stretch screen
space

16

Think about your user

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

ni.com

17

Hidden Tab Controls

Sliding Tab Control

Main Content Tab Control

ni.com

18

Hidden Tab Controls

Heres another example

Can be found on the

community page here:
https://decibel.ni.com/content/
groups/ui/blog/2011/11/30/slidin
g-containers-in-labview

ni.com

19

XControls
When you should use XControls

To create reusable components with dynamic

behavior

To encapsulate extended functionality or

cosmetics

When you should not use XControls

To accomplish pure cosmetic changes

When working on a single-shot application

https://decibel.ni.com/content/docs/DOC-13819

ni.com

20

XControls Thermometer Example

See how this was made at:

http://www.ni.com/tutorial/3198/en/

ni.com

21

Using XControls

Manage XControls via the Project Explorer

XControls appear as regular terminals
You start with shell code

IconView

Terminal View

ni.com

22

Structure of an XControl
Properties
(Optional)

XControl

Methods
(Optional)

Abilities
(Mandatory)
ni.com

23

XControl Abilities

Required components for proper function

Represented by VIs or Controls
Four mandatory abilities:

ni.com

Data
State
Faade
Init

24

Next Steps
Check out the LabVIEW UI Interest Group
http://decibel.ni.com/content/groups/ui
Creating Modern Touch UIs in LabVIEW Walkthrough
http://content.jki.net/creating-modern-touch-uis-in-labviewwebinar/?utm_source=VIPM+Downloads&utm_campaign=7733299a6dCreating_Modern_Touch_UIs_in_LV_Announcement&utm_medium=email&utm_t
erm=0_497177bf2a-7733299a6d-408573153&goal=0_497177bf2a-7733299a6d408573153
Interesting talk on UI design
https://www.youtube.com/watch?v=Is2O666qDPs
10 Tutorials for Quick UI Improvements
http://www.ni.com/tutorial/14131/en/
Step by Step Tutorial for X Controls
http://www.ni.com/tutorial/3198/en/