‘proper’ interface design: the design process three key activities understand user requirements...
TRANSCRIPT
‘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’
The Traditional Waterfall Model of Systems Design
Requirements
Design
Implement
Test
Maintain
The Human Centred Design Cycle
Plan the user-centred process
Understand and specify the context of use
Specify the user and organisational requirements
Produce Design Solutions
Evaluate Designs Against User Requirements
Meets requirements
Context: Users, tasks, hardware, software, materials, physical and social environments
From: ISO 13407 0 Human Centred Design Process for Interactive Systems (1999)
Putting them together: user-centred & iterative system design
USER
Requirements
Design
Test
Implement
Maintain
Task
Computers
Environment
Iterations
Different perspectives on design
User requirements
Individual and cognitive perspectiveDraws on psychologyFocuses on individual capabilities, task performance and dialogue
Social and organisational perspectiveDraws 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
Understanding Users
From an individual cognitive perspective
From an organisational and social perspective
From an art and design perspective
The individual cognitive perspective
Cognitive capabilities Task analysis The Keystroke level model Fitt’s Law
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
What do you see?
proximity
similarity
symmetry
continuity
closure
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
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
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
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
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
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
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
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
Example 1 1. Borrow a book from the Library
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
1.2.1 Access catalogue
1.2.2 Selectsearch screen
1.2.3. Enter search criteria
1.2.4. Identify required book
1.2.5. Note location
Selection rule:Do 1.2 if the book is not found on
the expected shelf
Selection ruleDo 1.2.2 and 1.2.3 if the book is not directly visible on browsing the catalogue listing
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
Example 2
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
User and task requirements:cognitive models - keystroke level model
Predict performance times for common operations based on knowledge of human motor system
7 basic operatorsK - 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)
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
Typical KLM timesOperatorK
B
P
HDMR
RemarksPress key good typist (90 wpm) average typist (40 wpm) non-typistMouse button press down or up clickPoint with mouse Specific movement Average movementHome hands to/from keyboardDrawing Mentally prepareResponse from system
Time (s)
0.120.281.20
0.100.20
Fitts’ law1.100.40domain dependent1.20measure
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
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
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
TargetX(initial cursor position)
D
S
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
The Organisational and Social Perspective
Socio-technical methods (e.g., UTMS) Legal and ethical issues Ethnography Participatory Design
Different perspectives on design
User requirements
Individual and cognitive perspectiveDraws on psychologyFocuses on individual capabilities, task performance and dialogue
Social and organisational perspectiveDraws 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
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
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
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
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
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.”
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
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
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
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
Legal and ethical issues?
Different perspectives on design
User requirements
Individual and cognitive perspectiveDraws on psychologyFocuses on individual capabilities, task performance and dialogue
Social and organisational perspectiveDraws 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
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
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
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.”
Probe pack
Inspires new street furniture
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
Ambiguity of Information
Leonardo Da Vinci’s Mona Lisa
“sfumato”
Ambiguity of context
Marcel DuChamps “Fountain”
Ambiguity of relationship
VanLieshout’s Bais-ô-Drôme
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