chapter 4

paradigms
why study paradigms
Concerns
• how can an interactive system be developed to ensure its usability?
• how can the usability of an interactive system be demonstrated or measured?

History of interactive system design provides paradigms for usable

designs
Paradigms of interaction

New computing technologies arrive,

creating a new perception of the
human—computer relationship.
We can trace some of these shifts in
the history of interactive technologies.
The initial paradigm
• Batch processing

Impersonal computing
Example Paradigm Shifts
• Batch processing
• Time-sharing

Interactive computing
single computer supporting multiple users
Example Paradigm Shifts
• Batch processing @#$% !
• Timesharing
• Networking

???

Community computing
Example Paradigm Shifts
• Batch processing C…P… filename Move this file here,
• Timesharing dot star… or was and copy this to there.
it R…M?
• Networking
• Graphical displays % foo.bar
ABORT
dumby!!!

Direct manipulation
Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor

Personal computing
Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
• WWW

Global information
Example Paradigm Shifts
• Batch processing • A symbiosis of physical and
electronic worlds in service of
• Timesharing everyday activities.
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous
Computing
Personal computing

• computers for visualizing and manipulating data, ability to abstract details

Programming toolkits
the right programming toolkit provides building blocks to producing complex interactive
systems

Video Display Units

Future of computing in small, powerful machines dedicated to the individual
A system is more powerful as it becomes easier to user

Kay at Xerox PARC – the Dynabook as the ultimate personal computer

Window systems and the WIMP interface
• humans can pursue more than one task at a time

• 1981 – Xerox Star first commercial windowing system

• windows, icons, menus and pointers now familiar interaction mechanisms

Direct manipulation
• 1982 – Shneiderman describes appeal of graphically-based interaction
• Interaction style which users act on displayed objects of interest
• visibility of objects
• incremental action and rapid feedback
• reversibility encourages exploration
• syntactic correctness of all actions
• replace language with action
• effects are immediately visible on the screen
• 1984 – Apple Macintosh

• the model-world metaphor

• What You See Is What You Get (WYSIWYG)
Hypertext
• 1945 – Vannevar Bush and the memex

• key to success in managing explosion of information

• mid 1960s – Nelson describes hypertext as non-linear browsing structure

• hypermedia and multimedia

Computer Supported Cooperative Work (CSCW)

• CSCW removes bias of single user / single computer system

• Can no longer neglect the social aspects

• Electronic mail is most prominent success

The World Wide Web
• Hypertext, as originally realized, was a closed system
• Critical mass of users lead to a complete transformation of our
information economy.
 Dix , Alan

Finlay, Janet
Abowd, Gregory
Beale, Russell
chapter 5
interaction design basics
(screen design and layout)
basic principles
grouping, structure, order
alignment
use of white space

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
available tools
• grouping of items
• order of items
• decoration - fonts, boxes etc.
• alignment of items
• white space between items
grouping and structure
logically together  physically together

Billing details: Delivery details:

Name Name
Address: … Address: …
Credit card no Delivery time

Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
order of groups and items
• think! - what is natural order

• should match screen order!

• use boxes, space etc.
• set up tabbing right!

• instructions
• beware the cake recipie syndrome!
… mix milk and flour, add the fruit
after beating them
decoration
• use boxes to group logical items
• use fonts for emphasis, headings
• but not too many!!

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
alignment - text
• you read from left to right (English and European)
 align left hand side

boring but
Willy Wonka and the Chocolate Factory readable!
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess

Willy Wonka and the Chocolate Factory

Winston Churchill - A Biography
fine for special effects but hard Wizard of Oz
to scan Xena - Warrior Princess
alignment - names
• Usually scanning for surnames  make it easy!

Alan Dix


Janet Finlay
Gregory Abowd
Dix , Alan

Finlay, Janet


Russell Beale Abowd, Gregory
Beale, Russell
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
alignment - numbers

think purpose! 532.56

179.3
which is biggest?
256.317
15
73.948
1035
3.142
497.6256
alignment - numbers

visually: 627.865
long number = big number 1.005763
382.583
align decimal points 2502.56
or right align integers 432.935
2.0175
652.87
56.34
multiple columns
• scanning across gaps hard:
(often hard to avoid with large data base fields)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 2
• use leaders

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 3
• or greying (vertical too)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 4
• or even (with care!) ‘bad’ alignment

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
white space - the counter

WHAT YOU SEE

white space - the counter

WHAT YOU SEE

THE GAPS BETWEEN

physical controls

• grouping of items
• defrost settings
defrost settings
• type of food
type of food
• time to cook
time to cook
physical controls

• grouping of items
• order of items
1) type of heating
1) type of heating
2) temperature 1
2) temperature
3) time to cook
3) time to cook
4) start
2
4) start
3

4
physical controls

• grouping of items
• order of items
• decoration
• different colours
different colours for different
for different functions
functions

• lines around related

lines around related
buttons buttons (temp up/down)
physical controls

• grouping of items
• order of items
• decoration
• alignment
• centered text in buttons
centred text in buttons
? easy to scan ?
? easy to scan ?
physical controls

• grouping of items
• order of items
• decoration
• alignment
• white space
• gaps to aid grouping
gaps to aid grouping
user action and control

entering information
knowing what to do
affordances
entering information
Name: Alan Dix
• forms, dialogue boxes Address: Lancaster

• presentation + data input


• similar layout issues Name: Alan Dix
• alignment - N.B. different label lengths Address: Lancaster

• logical layout
• use task analysis (ch15)
• groupings
• natural order for entering information
?
Name: Alan Dix
Address: Lancaster

• top-bottom, left-right (depending on culture)

• set tab order for keyboard entry

N.B. see extra slides for widget choice

knowing what to do
• what is active what is passive
• where do you click
• where do you type
• consistent style helps
• e.g. web underlined links
• labels and icons
• standards for common actions
• language – bold = current state or action
appropriate appearance

presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation
presenting information
• purpose matters
name size
• sort order (which column, numeric alphabetic)
• text vs. diagram chap10
chap1 17
12
chap10
chap5 12
16
• scatter graph vs. histogram chap11
chap1 51
17
chap12
chap14 262
22
chap13
chap20 83
27
• use paper presentation principles! chap14
chap8 22
32
…… …

• but add interactivity

• softens design choices
• e.g. re-ordering columns
• ‘dancing histograms’ (chap 21)
aesthetics and utility
• aesthetically pleasing designs
• increase user satisfaction and improve productivity
• beauty and utility may conflict
• mixed up visual styles  easy to distinguish
• clean design – little differentiation  confusing
• backgrounds behind text
… good to look at, but hard to read
• but can work together
• e.g. the design of the counter
• in consumer products – key differentiator (e.g. iMac)
colour and 3D
• both often used very badly!
• colour
• older monitors limited palette
• colour over used because ‘it is there’
• beware colour blind!
• use sparingly to reinforce other information
• 3D effects
• good for physical information and some graphs
• but if over used …
e.g. text in perspective!! 3D pie charts
bad use of colour
• over use - without very good reason (e.g. kids’ site)
• colour blindness
• poor use of contrast
• do adjust your set!
• adjust your monitor to greys only
• can you still read your screen?
across countries and cultures
• localisation & internationalisation
• changing interfaces for particular cultures/languages
• globalisation
• try to choose symbols etc. that work everywhere

• simply change language?

• use ‘resource’ database instead of literal text
… but changes sizes, left-right order etc.
• deeper issues
• cultural assumptions and values
• meanings of symbols
e.g tick and cross … +ve and -ve in some cultures
… but … mean the same thing (mark this) in others

 
prototyping
iteration and prototyping

getting better …
… and starting well
prototyping
• you never get it right first time
• if at first you don’t succeed …

OK?
design prototype evaluate done!

re-design