‘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