7/29/2019 GUI.ppt

1/39

Graphical User Interfaces

Andy Mayer

7/29/2019 GUI.ppt

2/39

References

1. Ritter, D.J. LabVIEW GUI Essential

Techniques. McGraw Hill, 2002.- Quotations from Page 10/11, Page 22 Figure 2-5, and Appendix B

2. Mullet, K. & Sano, D. Designing Visual

Interfaces Communication Oriented

Techniques. Prentice Hall, 1995.

3. LabVIEW Style Guidehttp://www.ni.com/pdf/manuals/321393d.pdf#labview_style_guide

7/29/2019 GUI.ppt

3/39

What goes into a GUI [1]

The look (10%)

Aesthetic quality of organization and layout

Color choices

Font choices

Graphic elements

Overall visual impression

Consistency

7/29/2019 GUI.ppt

4/39

What goes into a GUI [1]

The feel (30%)

GUI object choices Does behavior matchfunctionality

GUI object location, proximity Affect on taskflow

Access to critical and frequently used items

Navigation and freedom of movement

Appropriate feedback for each user action

Interface text: button, menu, and dialog labelsand messages

7/29/2019 GUI.ppt

5/39

What goes into a GUI [1]

Conceptual elements (60%)

System metaphors

Ease of use

The power of each GUI action

Depth of GUI

Flexibility and capacity for growth and change

7/29/2019 GUI.ppt

6/39

The Software Development Process

Process experts

Users

Programmers

7/29/2019 GUI.ppt

7/39

Successful Software: Avoiding

Unpleasantly Surprised Users

Early GUI

Prototypes

User interaction Watch users interacting with the program

Good understanding of the usage model

User buy-in

7/29/2019 GUI.ppt

8/39

Evolving User Understanding

[1]

7/29/2019 GUI.ppt

9/39

How Users Navigate

Exploration and unveiling process

Expected functionality

Analogies to the real world Forgiveness

# clicks to perform an action

7/29/2019 GUI.ppt

10/39

Efficient Interfaces

Streamlined design

Simplification

Leverage Reduction

7/29/2019 GUI.ppt

11/39

The Final Product

The programmer mostly looks at the code

The user only looks at the GUI

Programmers often put relatively little

effort into what the customer is actually

evaluating

7/29/2019 GUI.ppt

12/39

Helping the User

Short term memory

Consistency

Users will attempt to add meaning to

elements whether or not the programmer

intended it

7/29/2019 GUI.ppt

13/39

Visual Techniques Use of Color

Use of color

3-5 colors

Incremental impact of each additional color

Dont do this Dont do this Dont do this

7/29/2019 GUI.ppt

14/39

Visual Techniques - Layout

Ratios

Grids

Templates To frame or not to frame

7/29/2019 GUI.ppt

15/39

Alignment

Visual weight

7/29/2019 GUI.ppt

16/39

An Example before Part 2

7/29/2019 GUI.ppt

17/39

GUI Design Checklist [1]

The GUI reflects the users mental model

rather than the implementation model

Program features and functions support

only required user goals.

No superfluous features have been added

simply because they are easy to implement or

as a result of the personal biases of the

programmers

7/29/2019 GUI.ppt

18/39

GUI Design Checklist [1]

The GUI design reflects the expected

characteristics and abilities of the user

population

Visual, physical, and cognitive abilities

Cultural and technical background

Domain experience

Education level

Etc..

7/29/2019 GUI.ppt

19/39

GUI Design Checklist [1]

The GUI design reflects any unusual

characteristics of the users environment

Dangerous or hazardous work areas

Excessive noise

Bright or dim lighting

Etc..

7/29/2019 GUI.ppt

20/39

GUI Design Checklist [1]

The design is optimized for human

perception and information processing

abilities

Short term memory considerations

Recognition over recall

7/29/2019 GUI.ppt

21/39

GUI Design Checklist [1]

All user classes are adequatelyrepresented and the potentially diverseneeds of user classes are balanced

appropriately

All GUI items are prioritized. Critical and

frequently accessed items are prominentand more easily accessed than lessimportant items

7/29/2019 GUI.ppt

22/39

GUI Design Checklist [1]

All unnecessary GUI controls and

indicators have been eliminated

The GUI heirarchy geometry is optimized

to reduce panel clutter and to minimize the

total number of clicks required to access

each function

7/29/2019 GUI.ppt

23/39

GUI Design Checklist [1]

Panel layouts and GUI object placement

logically reflect user tasks sequences

The user is never required to jump between

panels or applications to complete a singletask

Where possible, all necessary controls for

each task are accessible from a single panel

7/29/2019 GUI.ppt

24/39

GUI Design Checklist [1]

The user is not required to manually copy

information displayed on one panel into a

control on another panel.

The program automatically transfers shared

information between panels and eliminates

unnecessary busywork for users

7/29/2019 GUI.ppt

25/39

GUI Design Checklist [1]

Tedious, mundane, and predictable tasks

are automated to improve user efficiency,

but not at the expense of adequate user

control Qualified users are permitted to modify or

bypass automation as necessary

7/29/2019 GUI.ppt

26/39

GUI Design Checklist [1]

Tool tips, control descriptions, and

keyboard shortcuts have been included for

power users

User actions and task sequences lead

naturally from one to the next

7/29/2019 GUI.ppt

27/39

GUI Design Checklist [1]

The function of all GUI items is visually

apparent and all objects including custom

controls behave as expected.

GUI buttons look and respond like real

buttons from the physical world and dont

produce unexpected outcomes

7/29/2019 GUI.ppt

28/39

GUI Design Checklist [1]

GUI metaphors, visual or otherwise, are

natural and consistent with their real-world

counterparts

The GUI adheres as necessary to

applicable standards documents and

company wide style guides.

7/29/2019 GUI.ppt

29/39

GUI Design Checklist [1]

Direct user feedback has been collected

and all design shortcomings have been (or

will be) addressed in subsequent iterative

cycles.

Documentation and help files have been

created with the same level of enthusiasm

and attention to detail as the software.

7/29/2019 GUI.ppt

30/39

GUI Design Checklist [1]

Panels appear immediately uncluttered andorganized.

The style and mood of the GUI design areappropriate for the application and its expectedusers

The design style is consistent from one panel tothe next, and all panel look as though theybelong to the same application.

7/29/2019 GUI.ppt

31/39

GUI Design Checklist [1]

A limited number of unique design elementscontrol and indicator types, colors, fonts,proportions, and so forth are used consistentlyand thematically thereby creating a sense of

application-wide unity

Limited color palettes have been selected and

applied consistently to enhance both aestheticsand mental model development. Bright colors are used sparingly to attract the users

attention.

7/29/2019 GUI.ppt

32/39

GUI Design Checklist [1]

The layout of each panel creates a visual

hierarchy, drawing the users eyes to the most

important items first.

GUI items are arranged and ordered to reflect

natural visual scanning patterns (left to right, top

to bottom in Western cultures). Task sequences

are mapped directly to the natural scanning

patterns to improve user productivity.

7/29/2019 GUI.ppt

33/39

GUI Design Checklist [1]

Positive and negative space have been usedeffectively to make panel design appearbalanced and uncluttered.

GUI text, control labels, and menu text is clear,descriptive and concise. Controls have been grouped to permit the elimination

of redundant label text.

Error messages are brief, informative, and designedto help users locate and overcome difficulties.

Unnecessary technical jargon has been eliminatedfrom panels and dialog boxes.

7/29/2019 GUI.ppt

34/39

GUI Design Checklist [1]

The selected font style, size, and colorcombinations provide adequate readabilityfor users with common visual deficiencies.

Where panel resizing is permitted, panelshave been designed to resize gracefully.

Bitmapped graphics have been avoided onresizing panels and the number of decorationelements have been kept to a minimum.

7/29/2019 GUI.ppt

35/39

GUI Design Checklist [1]

GUI panels targeted for cross-platform

deployment have been verified visually on

all target platforms.

Panels have been designed to provide a

pleasing visual presentation, but form

always follows function.

7/29/2019 GUI.ppt

36/39

Example - old

7/29/2019 GUI.ppt

37/39

Example - new

7/29/2019 GUI.ppt

38/39

7/29/2019 GUI.ppt

39/39

References

1. Ritter, D.J. LabVIEW GUI Essential

Techniques. McGraw Hill, 2002.- Quotations from Page 10/11, Page 22 Figure 2-5, and Appendix B

2. Mullet, K. & Sano, D. Designing Visual

Interfaces Communication Oriented

Techniques. Prentice Hall, 1995.

3. LabVIEW Style Guidehttp://www.ni.com/pdf/manuals/321393d.pdf#labview_style_guide