Design

How do we come up with new (good) designs for interactive systems?

Why is it so difficult?

What is design?

achieving goals within constraints

goals - purposewho is it for, why do they want it

constraintsmaterials, platforms

trade-offs

Interactions and Interventions

design interactions not just interfaces not just the immediate interaction e.g. stapler in office – technology changes interaction style

designing interventions not just artefacts not just the system, but also …

• documentation, manuals, tutorials• what we say and do as well as what we make

Why is HCI Design Difficult?

Difficult to deeply analyze human behavior

May be too close to the domain Cost/features may be considered over

good human factors

Creativity is challenging!

How to be creative?

Ideas come from Imagination Analogy Observation of

current practice Observation of

current systems

Borrow from other fields Animation Theatre Information

displays Architecture ..… metaphor

How do we create and develop new interface ideas and designs?

Challenge: design fixation

Keep an open mind Don’t get wedded to an idea Don’t let design review become about

whose idea wins

The process of design

what iswanted

analysis

design

implementand deploy

prototype

interviewsethnography

what is therevs.

what is wanted

guidelinesprinciples

dialoguenotations

precisespecification

architecturesdocumentation

help

evaluationheuristics

scenariostask analysis

The Star Model

Evaluation

Conceptual/formal design

RequirementsspecificationPrototyping

task/functionalanalysis

Implementation

The Star Model (Hartson and Hix, 1989)

The Tao of UCD

DESIGN IMPLEMENT

USE &EVALUATE

User-Centered Design Process

1. Understand constraints/context

2. User analysis

2. Task analysis

4. Function allocation

5. Define usability criteria

All of the above included in requirements definition and task analysis.

User-Centered Design (cont’d)

6. Design UI - including help and documentation Consider alternatives! Apply formative evaluation techniques & iterate

7. Build & test prototypes Apply formative / summative evaluation techniques &

iterate

8. Build & test the real application Apply summative evaluation techniques & iterate

9. Release, update and maintain Apply summative evaluation techniques & iterate

Other HCI design “methods”

Usability engineering Focus on usability metrics and evaluation

Iterative design Participatory design

User as participant in the design process Contextual design

Based around contextual inquiry, focusing on the customer

Discussion

What do methods have in common? Where do they differ? How would you choose or adapt a

method?

SE traditional ‘waterfall’ lifecycle

Requirements analysis

Design

Code

Test

Maintenance

Spiral Lifecycle model

From cctr.umkc.edu/~kennethjuwng/spiral.htm

Discussion

How would you incorporate HCI design into larger SE design frameworks?

Design rationale

Recall: design is achieving goals within constraints

How do you document theConstraints?Alternatives?Decisions?

In class exercise – observe someone On your cell phone

Look up most recently called and return call

Add each other’s name to the phone book

Swap phones Now look up your name and call yourself

What did we learn?

What was surprising? What problems did you observe? How would this be different in real

world? How did you feel about being

observed?

Know Thy User

You want to knowWho your users areWhat they are doingWhen they are doing itWhy they are doing itWhat tools they are usingHow they are using them

Know They User

Physical attributes(age, gender, size, reach, visual angles, etc…)

Physical work places(table height, sound levels, lighting, software version…)

Perceptual abilities(hearing, vision, heat sensitivity…)

Cognitive abilities(memory span, reading level, musical training, math…)

Personality and social traits(likes, dislikes, preferences, patience…)

Cultural and international diversity(languages, dialog box flow, symbols…)

Special populations, (dis)abilities

Design implications

Consider the implications:

Fact Implications

Users 16-80 yrs Range of text sizes

Range of grip strength

Some French speakers Multilingual interface

Astronaut users Extensive training available

Military context Aesthetics less of an issue

Ruggedness is critical

What are the implications?

Young, busy professionals. Product for use in their home/personal lives

Busy professionals. Product for use in the office, discretionary use.

Range of office workers. Product for us in the office, mandatory use.

Persona

Description of user and what user wishes to do

Be specific/detailed, even give names and picture

Three personas for ATM usage followAdapted from User Interface Design

and Evaluation, The Open University Developed by Cooper (1999)

Felix (representing teenage ATM users)

Felix is 13 and gets pocket money each week. He

spends it with his friends, so doesn’t make regular

deposits. He does receive gifts for his birthday,

Christmas, etc. and saves that money for special

purchases, such as a computer games console or trendy

clothes. He has an ATM card allowing him to make

withdrawals when needed for his purchases.

Sandra (representing young adults thru middle age)

Sandra is 30, is married to Jason, has two children Todd(6)

and Carly (18 months). They live in a subdivision that is about

three miles from the town center, where the bank and stores

are located. Jason uses the car for work, and works long

hours, leaving at 6:45 am and returning at 8:00 pm. Sandra

does not drive, so has to use public transportation. She tries to

run errands and shop while Todd is in school, so she only has

to take Carly to town with her. She typically needs to make two

trips to town each week to get everything done. She uses a

stroller with Carly, and the bank is one flight up via escalator, so

she prefers to use the ATM outside the first floor, even though

there is no canopy to protect customers from bad weather.

Grandpa Marvin (representing middle age to senior citizens)Marvin is 68 years old, and his social security is

deposited into his bank account at the start of each

month. He goes to the bank every week, withdrawing

enough cash for the week - for miscellaneous

expenditures. Regular bills are paid by check. He stands

in line for a live teller, as he prefers the social interaction

to using an ATM, even though his new artificial hip makes

standing in line uncomfortable. He does not have an

ATM card.

Example: bus stop kiosk

Make a persona

Interacting with Users

Observation

Think Out Loud

Cooperative Evaluation

Questionnaires

Interviews

Focus groups

Ethnography - learn by immersion/doing

Observation & Thinking Out Loud Watch user(s) doing activity of interest

to you Video or audio record (with

permission) Think out loud - encourage user to

verbalize what they are thinkingNot everyone is good at thisHard to keep it up for long time while

also doing something; need breaks

Observing Tips

Carefully observe everything about users and their environment

Think of describing it to someone who has never seen this activity before

What users say is important, so are non-verbal details

Cooperative (Participative) Evaluation Sit with user doing activity of interest to you Talk with user as the do their activity

Ask questions• Why are you doing that?• How did you know the result was what you

wanted?• Are there other ways to achieve the same goal?• How did you decide to do things this way?

Relaxed version of thinking out loud Observer and participant can ask each other

questions

Example: bus stop kiosk

What things could you observe? How could you use think aloud or

coop eval? What kinds of information would you

be looking for?

Interviews

Structured Efficient Require training

Unstructured Inefficient No training

Semi-structured Good balance Often appropriate

Semi-Structured Interviews

Predetermine data of interest - know why you are asking questions - don’t waste time

Plan for effective question types• How do you perform task x?• Why do you perform task x?• Under what conditions do you perform task x?• What do you do before you perform…?• What information do you need to…?• Whom do you need to communicate with to …?• What do you use to…?• What happens after you…?• What is the result or consequence of…?• What is the result or consequence of NOT…?

Example: bus kiosk

Who could you interview? What information would you be

looking for? What would you ask them?

Focus Groups

Get at people’s desires, motivations, values and experiences

Group of individuals - 3 to 10 Use several different groups with different roles or

perspectives And to separate the powerful from those who are not Careful about few people dominating discussion

Use structured set of questions More specific at beginning, more open as progresses Allow digressions before coming back on track

Relatively low cost, quick way to learn a lot Audio or video record, with permission

More practice

Pair up with someone from your group Create a small set of interview

questions to gather information about user(s) of your project

Interview a pair from another groupGroup, or one at a time, your choice

Impressions? What did you learn?

Questionnaires

General criteriaMake questions clear and specificAsk some closed questions with range

of answers• Sometimes also have a no opinion option,

or other answer option

Do test run with one or two people

Seven-point Likert Scale (use odd #)

Could also use just wordsStrongly agree, agree, neutral,

disagree, strongly disagree

Evaluation QuestionnairePlease complete the following questionnaire by indicating how strongly you agree or disagree with thefollowing statements. Your responses will be kept confidential and will be used only for improving theinterface that you worked with in this experiment.

1. I felt that the computer agent’s help was worthwhile. 1-----2------3------4------5------6------7Strongly Strongly Disagree Agree

2. I found the computer agent to be intrusive. 1-----2------3------4------5------6------7Strongly Strongly Disagree Agree

3. I found the computer agent's help to be distracting. 1-----2------3------4------5------6------7Strongly Strongly Disagree Agree

Questionnaires - Example

Typical Open-Ended Questions Why do you do this (whatever the task is you are

studying) How do you do this?

Gets at task-subtask structure Then ask about each subtask

Why do it this way rather than some other way? Attempts to get user to explain method so you can

assess importance of the particular way of doing task What has to be done before you can do this?

To understand sequencing requirements

Other Typical Questions

Rank the importance of each of these tasks (give a list of tasks)

List the four most important tasks that you perform (this is an open question)

List the pieces of information you need to have before making a decision about X, in order of importance

Are there any other points you would like to make? (open-ended opinion question; good way to end)

Typical Open-Ended (cont’d)

Please show me the results of doing this Do errors ever occur when doing this?

If answer is ‘yes,’ then learn why occur How do you discover the errors, and how do

you correct them?

(Adapted from Nielsen et al, CHI ‘86)

Example: bus stop kiosk

Questionnaire: what could you do with this?

Tradeoffs of interview, focus group, questionnaire

Ethnography

Deeply contextual study Immerse oneself in situation you want to

learn about (has anthropological and sociological roots) Observing people in their cultural context

Behavior is meaningful only in context For UI designers: improve system by finding

problems in way it is currently being used

Field Tools and Techniques

In person observation Audio/video recording Interviews

“Wallow in the data”

Observations

Things of interest to evaluator Structure and language used in work Individual and group actions Culture affecting work Explicit and implicit aspects of work

Example: Office work environment Business practices, rooms, artifacts, work

standards, relationships between workers, managers, …

Why is Ethnography Useful?

Can help designer gain a rich and true assessment of user needs Help to define requirements

Uncovers true nature of user’s job Discovers things that are outside of job

description or documentation Allows you to play role of end-user better

Can sit in when real users not available Open-ended and unbiased nature promotes

discovery may yield more unexpected revelations

Drawbacks of Ethnographic Methods Time required

Can take weeks or months for large systems Scale

Most use small numbers of participants just to keep somewhat manageable

Type of results Highly qualitative, may be difficult to

present/use Acquired skill – “learn by doing”

Identifying and extracting “interesting” things is challenging