1. ‘Proper’ interface design: the design process
Three key activities
Understand user requirements (various methods)
Prototype & build the interface (programming environments software tools)
Evaluate & refine (expert reviews, usability testing and experiments)
But these may be interwoven through ‘iterative design’

2. The Traditional Waterfall Model of Systems Design
Requirements
Design
Implement
Test
Maintain

3. The Human Centred Design Cycle
Context: Users, tasks, hardware, software, materials, physical and social environments
From: ISO Human Centred Design Process for Interactive Systems (1999)
Plan the user-centred process
Understand and specify
the context of use
Evaluate Designs
Against User Requirements
Specify the user and
organisational requirements
Produce Design Solutions
Meets requirements

4. Putting them together: user-centred & iterative system design
Iterations
Maintain
Test
Implement
Design
Requirements
Environment
USER
Computers
Task

5. Different perspectives on design
Social and organisational perspective
Draws on sociology and management
Focuses on organisational fit, environment, collaboration and legal and ethical issues
Design perspective
Draws on art and design
Considers aesthetic, cultural and marketing aspects of interaction design
Individual and cognitive perspective
Draws on psychology
Focuses on individual capabilities, task performance and dialogue
User
requirements

6. Understanding Users From an individual cognitive perspective
From an organisational and social perspective
From an art and design perspective

7. The individual cognitive perspective
Cognitive capabilities
Task analysis
The Keystroke level model
Fitt’s Law

8. Capabilities of Human Beings - Perception
Cognitive psychology tells us a great deal about how we interpret information from our senses
Relevant here is Gestalt Psychology – we use five principles to organise what we see into a meaningful whole
Proximity
Similarity
Symmetry
Continuity
Closure

9. What do you see?
similarity
continuity
proximity
symmetry
closure

10. Design implications from Gestalt Psychology
Proximity – group related items close together and separate unrelated ones
Alignment – place related items along an imaginary line. Align items of equal importance and indent subordinate ones
Consistency – make related items look the same
Contrast – make unrelated items look different

11. Human capabilities - memory
Hierarchical model of memory
Sensory memory – buffer for sensory data that is mostly thrown away
Short term memory – limited amount of information for 30 seconds to two minutes
Long-term memory – virtually unlimited, but takes effort
Chunking – users can remember seven plus or minus two chunks of information
is three chunks
It is much easier to recognise information than to recall it
Interruptions
Resuming a task after an interruption relies in short term memory
A delay of more than 8-10 seconds will cause an interruption

12. Design implications arising from human memory
Minimise load on short term memory by
Relying on recognition rather than recall
Helping users chunk information
Cope with interruptions by
Keep delays below the critical threshold
Warning users about how long delays will be
Providing memory aids to help resume tasks after interruptions

13. Task Analysis
Methods for understanding the fine details of tasks that users carry out with a system
Needed for designing and refining interfaces and preparing documentation and training materials
Capture task related data
Task listings
Interrelationships between tasks (sequence/hierarchy)
Criticality of tasks
Frequency of tasks
Difficulty of tasks
Pacing of tasks
Information/knowledge required for tasks

14. The process of task analysis
Task elicitation
Interviews
Direct observation
‘Think aloud’
Task representation
Using diagrams, pseudo language, tables etc
Feedback and refinement
Discuss with users
Input to design
Discuss with designers and identify specific design consequences

15. Tasks and subtasks E.g., for an email system .. Send message
Read message
Reply to message
Forward message
Save Message
Keep address book
Start a new address book
Add someone to the address book
Change information about someone
Remove someone from the address book

16. Sequence User ‘Fred Bloggs’ User ‘Freda Bloggs’ Write letter
Get envelope
Address envelope
Put stamp on envelope
Put letter in envelope
User ‘Freda Bloggs’

17. GOMS
Model human problem solving strategies in terms of a hierarchy of:
GOALS - user’s overall goals and memory points
OPERATORS – the basic actions that the interface supports (select menu item, press button)
METHODS - different routes to achieving a goal
SELECTION- rules to say which method a given user will select under particular circumstances

18. Example 1 1. Borrow a book from the Library Selection rule:
Do 1.2 if the book is not found on the expected shelf
1.1. Go to
the Library
1.2. Use catalogue
to find book
1.3. Retrieve book
from shelf
1.4. Take book to
the counter
Selection rule
Do and if the book is not directly visible on browsing the catalogue listing
1.2.1 Access
catalogue
1.2.2 Select
search screen
Enter
search criteria
Identify
required book
Note
location

19. Example 2 GOAL: ICONIZE-WINDOW [select GOAL: USE-CLOSE-METHOD
MOVE-MOUSE-TO-WINDOW-HEADER
POP-UP-MENU
CLICK-OVER-CLOSE-OPTION
GOAL: USE-L7-METHOD
PRESS-L7-KEY ]
User Sam:
Rule 1: Use the CLOSE-METHOD unless another rule applies
Rule 2: If the application is ‘blocks’ use the L7-METHOD

20. Other information about tasks
Criticality
Difficulty
Frequency
Prepare food H M
Put meal in oven L
Select programe
M/H
Set autosensor
Set to defrost
Set timer
Listen for bell

21. User and task requirements: cognitive models - keystroke level model
Predict performance times for common operations based on knowledge of human motor system
7 basic operators
K - keystroking - actually striking keys
B - pressing a mouse button
P - pointing, moving the mouse at a target
H - homing - switching the hand between mouse and keyboard
D - drawing lines using the mouse
M - mentally preparing for physical action
R - system response (may be ignored)

22. M-operators in KLM
Initiating a task – pause while user considers what should be done
Making a strategy decision – which option to take?
Remembering something – e.g., a filename
Finding something on the screen (here the location is not well known)
Verifying that what has been done or is about to be done is correct

23. Typical KLM times Operator K B P H D M R Remarks Press key
good typist (90 wpm)
average typist (40 wpm)
non-typist
Mouse button press
down or up
click
Point with mouse
Specific movement
Average movement
Home hands to/from keyboard
Drawing
Mentally prepare
Response from system
Time (s)
0.12
0.28
1.20
0.10
0.20
Fitts’ law
1.10
0.40
domain dependent
measure

24. Example of KLM Deleting a file from the desktop on a Mac
Method 1: drag to the wastebasket
Operator sequence:
Initiate the deletion (M)
Find the file icon (M)
Point to file icon (P)
Press and hold mouse button (B)
Drag file icon to wastebasket (P)
Release mouse button (B)
Total predicted time = 2M + 2P + 2B = 4.8 secs

25. Example of KLM Deleting a file from the desktop on a Mac
Method 2: using an accelerator key
Operator sequence:
Initiate the deletion (M)
Find the file icon (M)
Point to the file icon (P)
Click – i.e., press and release mouse button (BB)
Move hand to keyboard (H)
Press ‘Apple’ and ‘Delete’ keys (KK)
Move hand back to mouse (H)
Total predicted time = 1P + 2B KM +2H = 5.1 seconds

26. (initial cursor position)
Fitts’ Law
Predicts the time taken to move a pointer to hit a target on the screen
Movement time = a + b log2 ( distance / size + 1)
distance is distance to the target on the screen
size is size of the target on the screen
a and b are empirically determined constants that differ for different devices – typically 50 and 150 respectively
time is in milliseconds D
Target X
(initial cursor position) S

27. Design implications
Task analysis provides generally useful information to support the design of:
Menu structures
Groupings of items on the display
Short-cuts
The need for customisation
Error prevention and handling

28. The Organisational and Social Perspective
Socio-technical methods (e.g., UTMS)
Legal and ethical issues
Ethnography
Participatory Design

29. Different perspectives on design
Social and organisational perspective
Draws on sociology and management
Focuses on organisational fit, environment, collaboration and legal and ethical issues
Design perspective
Draws on art and design
Considers aesthetic, cultural and marketing aspects of interaction design
Individual and cognitive perspective
Draws on psychology
Focuses on individual capabilities, task performance and dialogue
User
requirements

30. Socio-technical models
Methods that take account of organisational factors
Identify the different stakeholders a system
Identifies the requirements of each through interviews and structured meetings
Benefits from the output:
Specification of particular requirements for a product
A specification of overall context of use of a product
Early understanding of requirements for evaluation/testing
Benefits from the process:
Helps to ensure a shared view among design team
Buy in from stakeholders

31. User Skills and Task Match (UTSM)
Identify the stakeholders
Primary – those who directly use the system
Secondary – those who provide input to it or receive output from it
Tertiary – those who are otherwise affected by the system
Facilitating – those who are involved in development or support

32. Key questions for each stakeholder
What do they have to achieve?
How is success measured?
Sources of job satisfaction and stress
What knowledge and skills do they have
Their attitude to work and computers
Frequency and fragmentation of tasks
Issues affecting responsibility, security or privacy
Physical work conditions

33. Ethnographic observation
An ethnographer participates, overtly or covertly, in people’s daily lives for an extended period of time, watching what happens, listening to what is said, and asking questions
aim to understand the ‘situatedness’ of interaction
what actually happens (versus what people say happens)
trained observers take notes, collect materials and video
they then analyse them
used in debriefings and data sessions

34. Example ethnographic study: Air Traffic Control (Bentey et al, 1992)
“The air traffic control system is (deliberately) organised to minimise explicit coordination and cooperation between controllers. For example, so long as flights are as planned, the handover of a plane from a controller in one sector to a controller in an adjacent sector does not require any communication between them. A task-based systems analysis would therefore fail to reveal the subtle and complex cooperation which is actually going on. This cooperation only became apparent through the ethnographic studies.”

35. Participatory design
Involve users as members of the design team from the start of the process (rather than as experimental subjects of passive participants)
Aims to ensure buy-in from users
Highly iterative
Originated in Scandinavia where it is promoted in law and widely used
Less practised elsewhere, perhaps due to cost and ‘power’ issues

36. Participatory design methods
Brainstorming ideas
Rapid and open
Non-judgemental – neutral facilitator
Some on-the-fly structuring of ideas
Role play – designers take on the role of users and vice versa
Storyboarding – express the design in cartoon style

37. Participatory design methods
‘No tech’ prototyping – mocking up the system with pen, paper, cardboard, glue etc
‘Low tech’ prototyping – e.g., storyboarding the outward appearance of a system using common tools (e.g., Powerpoint)
Body-storming and wizard-of-oz interfaces
Software Prototyping

38. Which prototyping method?
Location in the design cycle
Resources available
Costs associated with getting it wrong
Cost-benefit comparison of approaches (Hall, 2001)
Method
Time to construct and evaluate
Number and % of major problems revealed
Average number of problems revealed/user
Cardboard prototype
Approx 3 days
14 (67%)
8.5
Software with touch-screen
Approx 3 weeks
19 (90%)
13.5

39. Legal and ethical issues?

40. Different perspectives on design
Social and organisational perspective
Draws on sociology and management
Focuses on organisational fit, environment, collaboration and legal and ethical issues
Design perspective
Draws on art and design
Considers aesthetic, cultural and marketing aspects of interaction design
Individual and cognitive perspective
Draws on psychology
Focuses on individual capabilities, task performance and dialogue
User
requirements

41. Art and Design Perspective
Aim to understand peoples broader aspirations and values
Various techniques from art, design and marketing
Emerging directions for interfaces – ambiguous, provocative and reflective

42. Focus Groups
Structured discussion meetings with small groups of people to test attitudes towards particular issues
Groups carefully chosen to reflect a broader population
Gender, age, income, location
Results feedback through briefings and documents, often along with an analysis that proposes key concepts

43. Cultural Probes
“The artist–designer approach is openly subjective, only partly guided by any ‘objective’ problem statement. Thus we were after ‘inspirational data’ with the probes, to stimulate our imaginations rather than define a set of problems.
We weren’t trying to reach an objective view of the elders’ needs through the probes, but instead a more impressionistic account of their beliefs and desires, their aesthetic preferences and cultural concerns.
Using official-looking questionnaires or formal meetings seemed likely to cast us in the role of doctors, diagnosing user problems and prescribing technological cures.”

44. Probe pack

45. Inspires new street furniture

46. Ambiguous interfaces
Ambiguity is traditionally seen as a problem in interface design
And yet for hundreds of years artists have deliberately been using ambiguity to provoke and engage audiences and lead them to reflect
As a broad guideline, three kinds of ambiguity
Ambiguity of information
Ambiguity of context
Ambiguity of relationship

47. Ambiguity of Information
Leonardo Da Vinci’s
Mona Lisa
“sfumato”

48. Ambiguity of context
Marcel DuChamps
“Fountain”

49. Ambiguity of relationship
Van
Lieshout’s Bais-ô-Drôme

50. Ambiguity in systems design?
Mobile phones - connection status and face saving
Mobile games – Uncle Roy All Around You
Ambiguous information (clues)
Ambiguous relationships
To the game
To remote players
To bystanders