COSC 4107: Human Computer Interaction Lecture 2: Understanding and conceptualizing interaction
Human Computer Interaction · Human Computer Interaction Lecture 11 INTERACTION DESIGN 1 Today [s...
Transcript of Human Computer Interaction · Human Computer Interaction Lecture 11 INTERACTION DESIGN 1 Today [s...
12-Dec-15
Lecture 11- Interaction Design 1
Human Computer InteractionLecture 11
INTERACTION DESIGN
1
Today’s Lecture
• Screen Design and Layout
– basic principles
• Ask What is the user doing?
• Think What information is required? What comparisons may the user need to make? In what order are things likely to be needed?
• Design Form follows function: let the required interactions drive the layout.
2
12-Dec-15
Lecture 11- Interaction Design 2
Available Tools for Screen Design and Layout
• Grouping of items
• Order of items
• Decoration - fonts, boxes etc.
• Alignment of items
• White space between items
3
Grouping and Structurelogically together physically together
An ordering screen
Billing details:NameAddress: …Credit card no
Delivery details:NameAddress: …Delivery time
Order details:item quantity cost/item costsize 10 screws (boxes) 7 3.71 25.97
…… … … …
4
12-Dec-15
Lecture 11- Interaction Design 3
Order of groups and items
• think! - what is natural order
• should match screen order!
– use boxes, space etc.
– set up tabbing right!
5
Decoration
• Use boxes to group logical items
• Use fonts for emphasis, headings
• But not too many!!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
6
12-Dec-15
Lecture 11- Interaction Design 4
Alignment - text
• You read from left to right (English and European)
align left hand side
Willy Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects
boring butreadable!
7
Alignment - names
• Usually scanning for surnames make it easy!
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
8
12-Dec-15
Lecture 11- Interaction Design 5
Alignment - numbers
which is biggest?
532.56
179.3
256.317
15
73.948
1035
3.142
497.6256
9
Alignment - numbers
visually:
long number = big number
align decimal points
or right align integers
627.865
1.005763
382.583
2502.56
432.935
2.0175
652.87
56.34
10
12-Dec-15
Lecture 11- Interaction Design 6
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
11
Multiple Columns
• use leaders
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
12
12-Dec-15
Lecture 11- Interaction Design 7
• Graying or change the color for next row.
Multiple Columns
Name Marks
Ali 10
Akram 20
zahid 40
13
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
Multiple Columns
• or even (with care!) ‘bad’ alignment
• Example of design tradeoff
14
12-Dec-15
Lecture 11- Interaction Design 8
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.
15
Spaces to Separate
16
12-Dec-15
Lecture 11- Interaction Design 9
Space to structure
17
Space to highlight
18
12-Dec-15
Lecture 11- Interaction Design 10
Physical controls
• grouping of items
– defrost settings
– type of food
– time to cooktype of food
time to cook
defrost settings
19
Physical controls
• grouping of items
• order of items
1) temperature
2) time to cook
3) start
4
4) start2
2) temperature
3
3) time to cook
1
1) type of heating
20
12-Dec-15
Lecture 11- Interaction Design 11
Physical controls
• grouping of items
• order of items
• decoration
– different colours
for different functions
– lines around related
buttons
different colours for different functions
lines around related
buttons (temp up/down)
21
Physical controls
• grouping of items
• order of items
• decoration
• alignment
– centered text in buttons
? easy to scan ?
easy to scan
centred text in buttons
22
12-Dec-15
Lecture 11- Interaction Design 12
Physical controls
• grouping of items
• order of items
• decoration
• alignment
• white space
– gaps to aid grouping
gaps to aid grouping
23
User Action and Control
entering information
knowing what to do
affordances
24
12-Dec-15
Lecture 11- Interaction Design 13
Entering Information
• forms, dialogue boxes– alignment (different label lengths)
• Clear logical layout– groupings
– natural order for entering information• top-bottom, left-right (depending on culture)
• set tab order for keyboard entry
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster
25
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
• consistent style helps
– Use standard icons for save, open, delete etc.
– Use web underlined links
26
12-Dec-15
Lecture 11- Interaction Design 14
Affordances
• psychological term• for physical objects
– shape and size suggest actions• pick up, twist, throw• Push-up buttons (affordance due to
3D look)
– also cultural • E.g. radio buttons and check boxes• for screen objects - button–like object
‘affords’ mouse click• icons ‘afford’ clicking or even double clicking
mug handle
‘affords’grasping
27
Appropriate Appearance
presenting informationaesthetics and utility
colour and 3Dlocalisation & internationalisation
28
12-Dec-15
Lecture 11- Interaction Design 15
Presenting Information
• purpose matters– sort order (which column, numeric alphabetic)
– text vs. Diagram
• softens design choices • e.g. re-ordering columns
chap1
chap10
chap11
chap12
chap13
chap14
…
17
12
51
262
83
22
…
sizename size
chap10
chap5
chap1
chap14
chap20
chap8
…
12
16
17
22
27
32
…
name size
29
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
30
12-Dec-15
Lecture 11- Interaction Design 16
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
– but not if over used …e.g. text in perspective!!
31
Bad use of Color
• 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?
32
12-Dec-15
Lecture 11- Interaction Design 17
Across Countries and Cultures
• localisation & internationalisation– changing interfaces for particular cultures/languages
• globalisation– try to choose symbols etc. that work everywhere
• simply change language?
• 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
33