3. THE LANGUAGE OF INTERFACE DESIGN

Design decisions at different levels of visual form LevelExample Pixel. Graphic atomsA, 3 _ graphic fragmentsWord, 2002, scale Graphic formA graph of indicator ViewsA window or single cohesive display screen workspaceThe 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 –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 –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 –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 –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 –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 bar graphs Balances with trend charts

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 a bar graph Additivity with nomographs Additivith with trend charts

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 Multiplication with trigonometric relations Mutiplication with nomographs

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 Polar graphics, the polar star and basic polygon graphics Configural features of a line graph Mass data display

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 Close proximity meters Connected 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 Variables against a background

Structural display options –Linear structures –Spatial structures –Symbolic structures Linear arrangements spiral

Structural display options –Linear structures –Spatial structures –Symbolic structures map Matrix with independent dimensions

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 relationshipsBasic nomographs