3. THE LANGUAGE OF INTERFACE DESIGN

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

ViewsA window or single cohesive display screen

workspace The entire display application

Elements of these design decisions

• Forms of reference

– Propositional forms

– Iconic forms

– Analogical forms

• Analog and digital forms

• Context

• salience

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 bar graph

The meter

Combined analog and digital display

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

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

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 trend chart

Indicating rate and direction of change

Multivariate display options

• Multivariate display options– Variable balance, or variabl

e = variable– Variables are additive– Variables are multiplicative– Multiple variables determin

e system state– Multiple variable balance– Multiple variables with inter

acting constraints

Balances with bar graphs

Balances with trend charts

Multivariate display options

• Multivariate display options– Variable balance, or variabl

e = variable– Variables are additive– Variables are multiplicative– Multiple variables determin

e system state– Multiple variable balance– Multiple variables with inter

acting constraints

Additivity with a bar graph

Additivity with nomographs

Additivith with trend charts

Multivariate display options

• Multivariate display options– Variable balance, or variabl

e = variable– Variables are additive– Variables are multiplicative– Multiple variables determin

e system state– Multiple variable balance– Multiple variables with inter

acting constraints

Multiplication with trigonometric relations

Mutiplication with nomographs

Multivariate display options

• Multivariate display options– Variable balance, or variabl

e = variable– Variables are additive– Variables are multiplicative– Multiple variables determin

e system state– Multiple variable balance– Multiple variables with inter

acting constraints

Polar graphics, the polar star and basic polygon graphics

Configural features of a line graph

Mass data display

Multivariate display options

• Multivariate display options– Variable balance, or variabl

e = variable– Variables are additive– Variables are multiplicative– Multiple variables determin

e system state– Multiple variable balance– Multiple variables with inter

acting constraints

Close proximity meters

Connected meters

Multivariate display options

• Multivariate display options– Variable balance, or variabl

e = variable– Variables are additive– Variables are multiplicative– Multiple variables determin

e system state– Multiple variable balance– Multiple variables with inter

acting constraints

Variables against a background

Structural display options

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

Linear arrangements

spiral

Structural display options

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

map

Matrix with independent dimensions

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

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