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
Plan the user-centred process
From ISO 13407 0 Human Centred Design Process
for Interactive Systems (1999)
Understand and specify the context of use
Specify the user and organisational requirements
Evaluate Designs Against User 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
• Fitts 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
• www.bestbookbuys.com 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
• Write letter
• Get envelope
• Address envelope
• Put stamp on envelope
• Put letter in envelope
• User Freda Bloggs
• Get envelope
• Address envelope
• Write letter
• Put letter in envelope
• Put stamp on envelope

17
GOMS

• Model human problem solving strategies in terms
  of a hierarchy of
• GOALS - users 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 1.2.2 and 1.2.3 if the book is
not directly visible on browsing the catalogue
listing
1.2.1 Access catalogue
1.2.2 Select search screen
1.2.5. Note location
1.2.3. Enter search criteria
1.2.4. Identify required book
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
Task Criticality Difficulty Frequency
Prepare food H M H
Put meal in oven H L H
Select programe H M/H H
Set autosensor H M M/H
Set to defrost M M L
Set timer H H M
Listen for bell M L H
21
User and task requirementscognitive 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 1.20 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 2 2KM 2H 5.1
  seconds

26
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

Target
D
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 peoples 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 artistdesigner 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 werent 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 Vincis Mona Lisa sfumato
48
Ambiguity of context
Marcel DuChamps Fountain
49
Ambiguity of relationship
Van Lieshouts 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