Professional Documents
Culture Documents
HCI Lecture11
HCI Lecture11
Lecture 11
Interaction Paradigms
Screen Design and Layout
basic principles
grouping, structure, order
alignment
use of white space
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
An ordering screen
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
ABCDEFHIJKLM
NOPQRSTUVWXYZ
Alignment - text
• You read from left to right (English and European)
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
532.56
which is biggest? 179.3
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
• use leaders
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
Multiple Columns
• Graying or change the color for next row.
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
Multiple Columns
• or even (with care!) ‘bad’ alignment
• Example of design tradeoff
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
White Spaces - the counter
• Space between letters is called counter
• Ignore the content … concentrate on screen
– If elements that are supposed to be related look
separate, something is wrong.
Spaces to Separate
Space to structure
Space to highlight
Physical controls
• grouping of items
– defrost settings
defrost
– type settings
of food
typetoof
– time food
cook
time to cook
Physical controls
• grouping of items
• order of items
1) type of heating
1) temperature 1
2)2) temperature
time to cook
3)3) time
startto cook
2
4) start
3
4
Physical controls
• grouping of items
• order of items
• decoration
– different colours
different colours for different
for different functions
functions
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
• Clear logical layout Address: Lancaster
– groupings
– natural order for entering information
Name: Alan Dix
• top-bottom, left-right (depending on culture)
• set tab order for keyboard entry Address: Lancaster
Knowing What to do
• Often not clear what element is active, what is
passive?
– Bold button representing state of the system or
action that will be performed
presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation
Presenting Information
• purpose matters
– sort order (which column, numeric alphabetic) name size
– text vs. Diagram chap10
chap1 17
12
chap10
chap5 12
16
chap11
chap1 51
17
chap12
chap14 262
22
• softens design choices chap13
chap20
chap14
chap8
83
27
22
32
• e.g. re-ordering columns …… …
Aesthetics and Utility
• aesthetically pleasing designs
– increase user satisfaction and improve productivity
• beauty and utility may conflict
– backgrounds behind text
… good to look at, but hard to read
Colour and 3D
• both often used very badly!
• colour
– colour over used because ‘it is there’
– beware colour blind!
• 3D effects
– good for physical effects and some graphs e.g. 3D pie charts
• 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