3. THE LANGUAGE OF INTERFACE DESIGN

1
3. THE LANGUAGE OF INTERFACE DESIGN
2
Design decisions at different levels of visual
form
Level Example
Pixel .
Graphic atoms A, 3 _
graphic fragments Word, 2002, scale
Graphic form A graph of indicator
Views A window or single cohesive display screen
workspace The entire display application
3
Elements of these design decisions

• Forms of reference
• Propositional forms
• Iconic forms
• Analogical forms
• Analog and digital forms
• Context
• salience

4
Single variable display options
The bar graph

• Single variable display options
• A variable within limits
• A variable with a constraint
• A variable with a normal value
• A variable changes with time, or where the rate
  of change of the variable is of interest

The meter
Combined analog and digital display
5
Single variable display options

• Single variable display options
• A variable within limits
• A variable with a constraint
• A variable with a normal value
• A variable changes with time, or where the rate
  of change of the variable is of interest

The pie graph
6
Single variable display options

• Single variable display options
• A variable within limits
• A variable with a constraint
• A variable with a normal value
• A variable changes with time, or where the rate
  of change of the variable is of interest

Indicating normality
7
Single variable display options
The trend chart

• Single variable display options
• A variable within limits
• A variable with a constraint
• A variable with a normal value
• A variable changes with time, or where the rate
  of change of the variable is of interest

Indicating rate and direction of change
8
Multivariate display options
Balances with bar graphs

• Multivariate display options
• Variable balance, or variable variable
• Variables are additive
• Variables are multiplicative
• Multiple variables determine system state
• Multiple variable balance
• Multiple variables with interacting constraints

Balances with trend charts
9
Multivariate display options
Additivity with a bar graph

• Multivariate display options
• Variable balance, or variable variable
• Variables are additive
• Variables are multiplicative
• Multiple variables determine system state
• Multiple variable balance
• Multiple variables with interacting constraints

Additivity with nomographs
Additivith with trend charts
10
Multivariate display options
Multiplication with trigonometric relations

• Multivariate display options
• Variable balance, or variable variable
• Variables are additive
• Variables are multiplicative
• Multiple variables determine system state
• Multiple variable balance
• Multiple variables with interacting constraints

Mutiplication with nomographs
11
Multivariate display options
Polar graphics, the polar star and basic polygon
graphics

• Multivariate display options
• Variable balance, or variable variable
• Variables are additive
• Variables are multiplicative
• Multiple variables determine system state
• Multiple variable balance
• Multiple variables with interacting constraints

Configural features of a line graph
Mass data display
12
Multivariate display options
Close proximity meters

• Multivariate display options
• Variable balance, or variable variable
• Variables are additive
• Variables are multiplicative
• Multiple variables determine system state
• Multiple variable balance
• Multiple variables with interacting constraints

Connected meters
13
Multivariate display options
Variables against a background

• Multivariate display options
• Variable balance, or variable variable
• Variables are additive
• Variables are multiplicative
• Multiple variables determine system state
• Multiple variable balance
• Multiple variables with interacting constraints

14
Structural display options

• Structural display options
• Linear structures
• Spatial structures
• Symbolic structures

Linear arrangements
spiral
15
Structural display options

• Structural display options
• Linear structures
• Spatial structures
• Symbolic structures

map
Matrix with independent dimensions
16
Structural display options

• Structural display options
• Linear structures
• Spatial structures
• Symbolic structures

Hierarchy of elements in a tree representation
A network arrangement
Mimic diagrams and other diagrams
17
How to develop a new visual form

• Do you need to show a single value or multiple
  values together?
• Are there any physical principles or textbook
  graphs that show how the values relate?
• Are there any geometric relationships that you
  can use?

Common geometric relationships
Basic nomographs