Download - Interface Design I: Basic Principles of Information ... · 1 11/7/01 CS4: HCI lecture 9 1 Interface Design I: Basic Principles of Information Presentation Rob Procter 11/7/01 CS4:

1

11/7/01 CS4: HCI lecture 9 1

Interface Design I: Basic Principles of Information Presentation

Rob Procter


Introduction• How do we design effective information displays?

– Pay attention to how information is used

• How do we get users to focus attention on important data?

• How do we cue interaction?• Cognitive psychology provides basic guidelines for

visual design • Design practice provides guidelines for more complex

design decisions• People have substantial perceptual differences

– Age may be a major factor

2


Basic Information Needs• Navigation:

– Where am I? – How did I get here? – What can I do here?– Where can I go from here? – How do I get there?

• Problems of satisfying these needs and robustness principle:– In rich information environments such as the WWW– In highly constrained environments such as mobile devices


Visual Perception

• Some characteristics of the visual system:– Flicker sensitivity: critical flicker frequency (CFF)

depends on retinal position

– Visual acuity: minimum perceptible angle is approx 1” of an arc

– Sensitive to geometric properties

– Sensitive to movement and change

3


Visual Perception• An active process:

– Raw data + recognition schemas; bottom up and top down

– Global analysis isolates informative areas, perceptual landmarks

– Proceeds through a series of serial data acquisitions– Integration in space and time gives sensation of

parallel data acquisition

• Users may not know “where to look”


Physiological Guidelines• Colours must be considered in context

• Avoid simultaneous display of highly saturated, spectrally extreme, colours

• Avoid pure blue for text, thin lines and small shapes

• Avoid red and green in periphery of large displays

4


Cognitive Guidelines

• Use colour sparingly, i.e., 5+/- 2 colours• Use colour to draw attention• Use colour to reflect organisation and establish

relationships• Be consistent• Follow conventions, but investigate first• Design initially in monochrome and don’ t rely

on colour alone


Guidelines for Text

• Legibility: soft copy quality is improving

• Case:

• Formatting: Don’ t make edges of text too interesting�� : �� "!#�"!�$• Size: 10 pt. is smallest recommended

Normal reading is done most easily if the text is in both upper and lower case

ALL UPPER CASE IS HARDER TO READ THAN A MIX OF UPPER AND LOWER CASE

5


Graphics• Graphics has re-emerged after a long period dominated by text

– Better for overviews

– Short search paths

– Distinguishes connectedness from adjacency

– Supports manipulations such as zooming, bridging different levels of abstraction

• Long history of use has provided a wealth of guidelines:– Typography

– Graphics• Edward Tufte

– Comics

– Film


Icons• Boundaries should be solid, closed and contrast-

bounded• Technological icons minimise culturally variable

interpretations• Use representation hierarchy to direct recognition and

interpretation• Keep them simple

– over-elaborate effects may hinder interpretation

• Supplement with labels where appropriate• Colour aids identification• Animation aids comprehension

6


Icon Evaluation

• Semantics:– Does icon represent its meaning well?

• Visual syntax:, rules of composition– How does it look?– How does it relate to others?– Is it consistent in use of orientation, scale,

colour?

• Pragmatics:– Is it easy to distinguish?– Is it easy to select?


Comparison of Icon Styles

7


Layout

• Include all (but only) essential information

• Consistency of placement aids interpretation

• Proximity effect suggests relationships so group items semantically

• Make boundaries clear

• Establish a consistent visual syntax/hierarchy


Layout Example

8


Visualisation Example 1: London Underground Map


Visualisation Example 2: Hierarchical structures

9


Visualisation Example 3:

Representing distribution of search terms in documents


Visualisation Example 4: The perspective wall

10


Interactivity

• Distinguish active elements from passive ones

• Make it clear how to activate and what will happen– Buttons afford pushing

– Sliders afford pulling

– Dials afford radial turning


Some example interactors

11


Animation

• Good attention getter

• Good for signalling changes– Salient objects should never just appear/disappear

• Use for effecting display overlaps– Fades, dissolves, etc.

– Helps maintain sense of continuity

• Comic and film narrative conventions


Sound

• Map properties of interaction on to sound dimensions:– Pitch

– Loudness

– Duration

– Rhythm

– Timbre – characteristic sound ‘quality’

• Interface sound design is typically arbitrary and synthetic

12


Sound

• Confirmatory feedback

• Monitoring state, ‘background information’– Disk, printer noise etc.

– Example of user improvisation in use of ‘data’

• Reducing reliance on visual system

• Grabbing attention


Further Reading

• Dix et al. chapter 15, p. 583-90; chapter 16

• Newman and Lamming, chapter 15, p. 388-94

• Tufte, Visual Explanation, Graphics Press, 1987

Download - Interface Design I: Basic Principles of Information ... · 1 11/7/01 CS4: HCI lecture 9 1 Interface Design I: Basic Principles of Information Presentation Rob Procter 11/7/01 CS4:

Top Related