Beyond The Good, the Bad, and the Ugly

Rob Humfeld Certified LabVIEW Architect Senior Project Engineer for Innoventor, Inc August 17, 2005

Who here is a professional GUI Designer?

Do you write LabVIEW programs? Are you involved in the design of them? Does someone pay you to write them? Does anyone else use them?

Yes, YOU are a professional GUI designer!

Whats in a name?
The Good, The Bad, and The Ugly Greg McKaskle, NI Week 2000 Focused on Screen Layout and LabVIEW features:
Examples (VIs, stereo, car, newspaper) Association Colors Tab control guidelines UI features in LabVIEW 6i

Where did I go from there?

About Face 2.0: The Essentials of Interaction Design by Alan Cooper and Robert Reimann The Design of Everyday Things by Donald Norman The Essential Guide to User Interface Design by Wilbert Galitz LabVIEW GUI: Essential Techniques by David Ritter

How do I define a good GUI?

A good GUI makes the user more effective by making the accomplishment of the users selected task(s) as efficient and pleasant as possible.
-- Rob Humfeld

In other words, it is the face of good software

Another View
Galitzs Principles of GUI Design A good GUI will afford the following properties:
Aesthetically Pleasing Clarity Compatibility Comprehensibility Configurability Consistency Control Directness Efficiency Familiarity Flexibility Forgiveness Predictability Recovery Responsiveness Simplicity Transparency Trade-offs

Too much here to cover right now, but lots to chew on.

OK, so how do I create a good GUI?

Three layers to a GUI

The Look
How the software is visually perceived

The Feel
How the software interacts with the user

The Foundation
How the underlying software is conceived/designed

The Look
Considerations for a good-looking GUI screen Screen Layout Color Selection Decorations and their effect Covered well in the original GBU

Example from Original GBU

Example from Original GBU

Colors Removed

Example from Original GBU

Text Density Reduced

Example from Original GBU

Improved Ordering and Grouping

Example from Original GBU

Color Added to Emphasize Grouping

Example from Original GBU

Still more work to do exercise left to the user

The Look: Aesthetically Pleasing

Draw the path that the eye takes Goal: simple path
Less confusion Feels better
GOOD BAD

The Look: Aesthetically Pleasing

Group, Align, and Order related elements Use Whitespace & Decorations to create groupings Align for easier reading Order Based on importance

The Look: Aesthetically Pleasing

Use Distribution to create Balance and Symmetry
BAD

GOOD

The Look: Aesthetically Pleasing

Use Ordering to contribute to meaning We (Westerners) read left-right / top-down Important items nearest top-left Indenting denotes hierarchy

The Look: Simplicity

K.I.S.S. Principle: Keep It Simple, Stupid
One focused goal for each screen
or for each page of a tab control

Each screen element has meaning and purpose Move peripheral functions from screen to menu No matter how cool your interface is, less of it would be better.
-- Alan Cooper

The Look: Consistency

Consistency creates Predictability creates Comfort Consistency of Terminology Location Iconography Colors

The Look: Clarity

The user must be able to easily understand the meaning and purpose of every screen element Avoid Abbreviations Visually communicate control function Use Tip Strips

The Look: Familiarity

Utilize concepts the user is already familiar with

The Look: Tips

Use captions on left with colon Left-Align captions for columns of controls Like-Size, left-align controls in columns Use rings on panel, enums in diagram Never use horizontal scrollbars for text or tables Do not allow table entry (MCListbox with dialogs) Put buttons along left side or bottom Tab controls create natural groupings

The Feel
The goal is to create a good user experience Select appropriate controls Maintain good software flow Guide the user to success Protect the user from failure

The Feel: Select Appropriate Controls

Base selection on each control and indicators purpose

Buttons are controls; Lights are indicators Enums are not appropriate for front panels Tables are not appropriate as controls Arrays are never appropriate Cluster borders are generally distracting

The Feel: Maintain Good Software Flow

A good GUI allows the user to get Into The Zone Design intuitive navigation Eliminate excise Minimize use of dialogs

The Feel: Guide the user to success

A good GUI teaches and helps the user Example: Example:

The Feel: Protect the user from failure

Make errors as impossible as possible.
-- Alan Cooper

Dont allow the user to do something stupid Check validity of user input Hide / disable invalid controls
This can be very challenging for graphs

The Feel: Tips

Controls are controls; indicators are indicators Specify numeric display format and precision Say No! to numeric auto-formatting Remember data that was input last time Use Tip Strips Use Enabling/Disabling of controls Clearly indicate required inputs Key design question for each screen: What is the user most likely to want to do?

The Foundation
A good GUI is the face of GOOD SOFTWARE Software Development Process
Specify Requirements Design the solution Implementation Integration and Testing Support and Expansion

with customer feedback involved in each step

The Foundation: Serve the User

A good GUI helps accomplish the users goals
GUIs should avoid implementation models in favor of users mental models
-- Alan Cooper

Software is written for the user, not the programmer What is the users mental model of their task(s)? Example: Pointers

The Foundation: Requirements

Know Your User(s)
What are their goals? expectations? experiences? What are their (varying) levels of expertise? Where does their pain lie? Note: Different users have different needs

Understand the Context

How do the user(s) tasks meet the company goals? Are the user(s) tasks a subset of a larger process?

The Foundation: Software Architecture

Architecture of the system impacts the system GUIs Separate data collection and data display Use User Events and/or Queues to pass data Use state machines or queued message handlers

The Foundation: Tips

Record and maintain a consistent vocabulary
Review vocabulary with the user

Create a solid software architecture Use advanced design patterns

State Machines Queued Message Handlers Event Structure/User Events Object-Oriented Programming

So, How do you make a good GUI?

1. Build on a solid Foundation
Follow software development process Focus on the users goals and needs Create Powerful underlying conceptual elements Design a solid architecture

So, How do you make a good GUI?

2. Plan a positive Feel
Select appropriate controls Maintain good software flow Guide the user to success Protect user from failure

So, How do you make a good GUI?

3. Create a pleasant Look
Create a good screen layout Select appropriate colors Use Decorations Effectively

GUI Success
A good GUI makes the user more effective by making the accomplishment of the users selected task(s) as efficient and pleasant as possible.
-- Rob Humfeld

How do you know you if you are successful?

Prototype to evaluate GUI design Solicit and incorporate user feedback early in the process Test, Test, Test !!!

References
About Face 2.0: The Essentials of Interaction Design by Alan Cooper and Robert Reimann The Design of Everyday Things by Donald Norman The Essential Guide to User Interface Design by Wilbert Galitz LabVIEW GUI: Essential Techniques by David Ritter

Focus Feel Philosophy Look LabVIEW