Lecture # 5

Part-II
Read this part prior live lecture thoroughly, it includes different
animations and design outlines, This will be interactive, difficulties will
be discussed.
2
 chapter 5

Interaction Design
Basics

3
Cont’d
• NAVIGATION DESIGN
• SCREEN DESIGN AND LAYOUT
 the systems

info and help management messages

start

navigation design add user remove user

local structure – single screen

global structure – whole site

main remove
confirm
screen user

add user

5
 Levels
• As we stressed, the object of design is not just a computer system or
device, but the socio-technical intervention as a whole. However, as
design progresses we come to a point where we do need to consider
these most tangible outputs of design.
• Imagine yourself using a word processor. You will be doing this in some
particular social and physical setting, for a purpose.
• But now we are focusing on the computer system itself. You interact at
several levels:

6
Levels
• Widget Choice
• The appropriate choice of widgets and wording in menus and buttons will help you know how
to use them for a particular selection or action.
• Screen Design
• need to find things on the screen, understand the logical grouping of buttons.
• Navigation within the application You need to be able to understand what will
• happen when a button is pressed, to understand where you are in the interaction.
• Environment The word processor has to read documents from disk, perhaps some
are on remote networks. You swap between applications, perhaps cut and paste.
• You can see similar levels in other types of application and device, as Table 5.1
shows
think about structure
• Within a screen
• Later ...
• Local
• Looking from this screen out or page out
• Global
• Structure of site, movement between screens
• Wider still
• Relationship with other applications

8
local

from one screen looking out

9
goal seeking

goal
start

10
goal seeking

goal
start

progress with local knowledge only ...

11
goal seeking

goal
start

… but can get to the goal

12
goal seeking

goal
start

… try to avoid these bits!

13
four golden rules
• knowing where you are
• knowing what you can do
• knowing where you are going
• or what will happen
• knowing where you’ve been
• or what you’ve done

14
where you are – breadcrumbs

shows path through web site hierarchy

top level category sub-category

web site this page

live links
to higher
levels
15
beware the big button trap

things other things

the thing from

more things
outer space

• where do they go?

• lots of room for extra text!

16
modes
• lock to prevent accidental use …
• remove lock - ‘c’ + ‘yes’ to confirm
• frequent practiced action
• if lock forgotten
• in pocket ‘yes’ gets pressed
• goes to phone book
• in phone book …
‘c’ – delete entry
‘yes’ – confirm
… oops !

17
global

between screens
within the application

18
hierarchical diagrams

the system

info and help management messages

add user remove user

19
hierarchical diagrams ctd.
• parts of application
• screens or groups of screens

• typically functional separation

the systems

info and help management messages

add user remove user

20
navigating hierarchies
• deep is difficult!

• misuse of Miller’s 7 ± 2
• short term memory, not menu size

• optimal?
• many items on each screen
• but structured within screen

see /e3/online/menu-breadth/ 21
think about dialogue
what does it mean in UI design?

Minister: do you name take this woman …

Man: I do
Minister: do you name take this man …
Woman: I do
Minister: I now pronounce you man and wife

22
think about dialogue
what does it mean in UI design?

Minister: do you name take this woman …

• marriage service
• general flow, generic – blanks for names
• pattern of interaction between people
• computer dialogue
• pattern of interaction between users and system
• but details differ each time

23
network diagrams

main remove
confirm
screen user

add user

• show different paths through system

24
network diagrams ctd.
• what leads to what
• what happens when
• including branches

• more task oriented then hierarchy

main remove
confirm
screen user

add user

25
wider still

between applications
and beyond ...

26
wider still …
• style issues:
• platform standards, consistency
• functional issues
• cut and paste
• navigation issues
• embedded applications
• links to other apps … the web

27
28
 Dix , Alan

Finlay, Janet
Abowd, Gregory
Beale, Russell

screen design and layout

basic principles
grouping, structure, order
alignment
use of white space

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
29
basic principles
• ask
• what is the user doing?
• think
• what information, comparisons, order
• design
• form follows function

30
available tools
• grouping of items
• order of items
• decoration - fonts, boxes etc.
• alignment of items
• white space between items

31
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
…… … … …

32
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

33
decoration
• use boxes to group logical items
• use fonts for emphasis, headings
• but not too many!!

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

Willy Wonka and the Chocolate Factory

boring but
Winston Churchill - A Biography readable!
Wizard of Oz
Xena - Warrior Princess

Willy Wonka and the Chocolate Factory

Winston Churchill - A Biography
Wizard of Oz
fine for special effects Xena - Warrior Princess
but hard to scan
35
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

36
alignment - numbers

think purpose! 532.56

179.3
which is biggest?
256.317
15
73.948
1035
3.142
497.6256
37
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
38
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

39
multiple columns - 2
• use leaders

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

40
multiple columns - 3
• or greying (vertical too)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

41
multiple columns - 4
• or even (with care!) ‘bad’ alignment

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

42
white space - the counter

WHAT YOU SEE

43
white space - the counter

WHAT YOU SEE

THE GAPS BETWEEN

44
space to separate

45
space to structure

46
space to highlight

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

defrost settings
type of food
time to cook

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

3) time to cook
2
4) start
3

4 49
• grouping of items physical controls
• 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)

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

centred text in buttons

? easy to scan ?

51
physical controls

• grouping of items
• order of items
• decoration
• alignment
• white space
• gaps to aid grouping
gaps to aid grouping

52
53
user action and control

entering information
knowing what to do
affordances

54
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
?
Name: Alan Dix
Address: Lancaster

• natural order for entering information

• top-bottom, left-right (depending on culture)
• set tab order for keyboard entry

N.B. see extra slides for widget choice 55

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

56
affordances
mug handle
• psychological term
• for physical objects ‘affords’
grasping
• shape and size suggest actions
• pick up, twist, throw
• also cultural – buttons ‘afford’ pushing
• for screen objects
• button–like object ‘affords’ mouse click
• physical-like objects suggest use
• culture of computer use
• icons ‘afford’ clicking
• or even double clicking … not like real buttons!

57
appropriate appearance

presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation

58
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)

59
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)

60
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

61
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?

62
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

  63
64
prototyping

65
iteration and prototyping

getting better …
… and starting well

66
prototyping
• you never get it right first time
• if at first you don’t succeed …

OK?
design prototype evaluate done!

re-design

67
pitfalls of prototyping

• moving little by little … but to where

• Malverns or the Matterhorn?

1. need a good start point

2. need to understand what is wrong

68