Ux bootcamp small

1

UX BOOTCAMPDESIGNING FOR USER EXPERIENCE

CHARLIE MULHOLLAND AND FRANK KLOOS

SCHOOL OF DESIGN AND COMMUNICATIONCOMMUNICATION AND MULTIMEDIA DESIGN 

JANUARY 7, 2013

2

DESIGN FOR USER EXPERIENCE

• WHAT IS USER CENTERED DESIGN (UCD)?• WHY UCD?• GOALS, CONTEXTS & MENTAL MODELS • USER RESEARCH

• BASIC ELEMENTS OF HCI

• PROTOTYPING • USABILITY TESTING

• Q & A

WHAT IS USER CENTRED DESIGN (UCD)?

3

WHAT IS UCD?

• UCD IS A DESIGN PHILOSOPHY THAT PUTS THE THE NEEDS OF ACTUAL USERS OF A PRODUCT / SERVICE AT THE CENTRE OF ALL DECISIONS ABOUT THE PRODUCT:

• HOW IT SHOULD WORK; HOW IT SHOULD LOOK; HOW INFORMATION SHOULD BE ORGANIZED; AND HOW TECHNOLOGY SHOULD SUPPORT IT

• UCD IS ‘USER-CENTRIC’ AND AIMS TO PROVIDE POSITIVE USER EXPERIENCES

POSITIVE USER EXPERIENCE (UX)

Source: cc licensed ( BY ND ) flickr photo by andyversus: http://flickr.com/photos/andyversus/4234209759/

WHY UCD?

6

UCD

User

THE DIFFICULTIES OF EVERYDAY LIFE: AN EXAMPLE…

…where you normallygot this screen

If you pressed No without reading (and lots of people did) the transaction stopped without giving

you your money or an explanation why

When there was no paperyou got this screen…

THE ROOT OF THE PROBLEM

MOST PEOPLE USE ATM’S ON “AUTOPILOT”

Source: cc licensed ( BY NC SA ) flickr photo by stevelyon: http://flickr.com/photos/chicanerii/2264345223/

THEY AREN’T THINKING ABOUT RECEIPT PAPER…

UCD IS NECESSARY BECAUSE…

• USERS LOOK AT THE WORLD AND OUR PRODUCTS FROM THEIR PERSPECTIVE

• AND THEIR BEHAVIOUR AS USERS IS DEFINED BY THEIR:

GOALS

MENTAL MODELS

CONTEXT

• UCD HELPS US UNDERSTAND THESE THINGS

12

GOALS, CONTEXTS & MENTAL MODELS

13

GOALS: USERS USE PRODUCTS TO ACHIEVE GOALS

14

Source: cc licensed ( BY NC SA ) flickr photo by ...-Wink-...: http://flickr.com/photos/intherough/8126243257/

TYPES OF GOAL

• END GOALS• Holes in walls• Getting from A to B

• EXPERIENCE GOALS• Feeling in control• Understanding things• Not feeling stupid

• LIFE GOALS• Being happy• Being successful

15

UCD aims to help understand user goals

CONTEXT (IS KING)

16

UCD aims to help understand use context

MENTAL MODELS

• A MENTAL MODEL IS A DEVICE WE USE TO HELP US MAKE SENSE OF SITUATIONS AND ARTEFACTS

• WE APPLY THEM TO HELP US UNDERSTAND AND ACT IN THE WORLD

17

USER MENTAL MODELS ≠ CREATORS MENTAL MODEL

18

Source: cc licensed ( BY ND ) flickr photo by alexyorke: http://flickr.com/photos/alexyorke/4251522065/

REPRESENTED MODEL

19UCD aims to help make the represented model more like the user’s mental model

USER RESEARCH

20

RESEARCH APPROACHES USEDTechnique Information that can be

obtainedMajor benefits (voordelen) Major drawbacks (nadelen)

Be the user Tacit knowledgeImpact of trade-offs on functionality for the use

Process knowledge

Depth of knowledgeBelief in identified needsIdentifying potential problems

InspirationGood for initial research / hypotheses

Can be difficult to articulate to others

Can be costlyDifficult to be some users

Observe the user critically

Tacit knowledgeProcess knowledgeBehavioursMental model

Learn the language of the user

Find unarticulated needs

Can be difficult to translate into words for others (data collection and use essential here)

Can be costlyTakes timeHawthorne effect

Talk to users Large volumes of detailContext specific needsGoals, needs, behavioursMental model

SpeedBreadth of information

Poor for process, and unarticulated needs

Interviewer biasInterviewee reactions to interviewer

Hawthorne effect

Adapted from: Rosenau, M.D., et. At, 1996. The PDMA Handbook of New Product Development, New York, NY: John Wiley & Sons Inc., p. 158

BEING THE USER IS ABOUT

• OBSERVING YOURSELF AS YOU ASSUME THE ROLE OF THE USER• Having a ‘child’s mind’• Delaying judgement• Thinking aloud and recording your thoughts

ONE TECHNIQUE: USER TRIP

• TAKING A SHORT TRIP IN THE ROLE OF THE USER• Trying things that the user does

• PREPARE• Decide your point of view

• Who are you (role, expertise, etc.)

• Decide what are you going to simulate

• OBSERVE / NOTE• Use the “thinking aloud protocol” while on the trip to observe yourself

• Option 1 – do this with another who observes and listens to you• Option 2 – record yourself• Option 3 – make note REALLY quickly afterwards (least good option)

• CONCLUSIONS• Review your notes: What was good, what not so good/frustrating, where are the potential

problems and solutions• Imagine what this means to your design problem, draw conclusions and write them down

OBSERVING THE USER IS ABOUT

• UNDERSTANDING THE EFFECT OF CONTEXT• Environment• Others involved• Goals• Problems

24

AN OBSERVATION FRAMEWORK

What?

Space What is the space like? Describe it (indoors / outdoors, public / private, quiet / noisy, calm / busy, etc.) and/or make a map of it.

Actors What are the relevant details of the people you are observing (names may be important in some situation – but you do not always know them)?

Activities What are the actors doing and why?

Objects What objects are present? (furniture, PC, papers, remote control, etc.) What objects are they using or are influencing their behaviour?

Events Is what you are observing part of a special event? (Not always relevant)

Goals What are the actors trying to achieve by carrying out these specific acts?

Feelings What is the mood of the individuals - how are they feeling?

Sayings What are the actors saying?

Adapted from: Preece, J., Rogers, Y. and Sharp, H., Interaction Design: Beyond Human-Computer Interaction, New York NY: John Wiley & Sons, Inc, 2002, p. 368

SOME BASIC HCI ELEMENTS

26

Interaction DesignCognitive PsychologyVisual DesignMetaphorsPerceptionInterface Design…

FEEDBACK, FEEDFORWARD & AFFORDANCE

27

• FEEDBACK TELLS THE USER WHAT’S HAPPENING.

• FEEDFORWARD INDICATES THE CONSEQUENCE OF AN

ACTION BEFORE DOING IT.

• AFFORDANCE IS A NATURAL WAY OF TELLING THE USERS

HOW SOMETHING WORKS.

FEEDBACK, FEEDFORWARD & AFFORDANCE

28

FEEDBACK

FEEDBACK, FEEDFORWARD & AFFORDANCE

29

FEEDFORWARD

FEEDBACK, FEEDFORWARD & AFFORDANCE

30

AFFORDANCE

FEEDBACK, FEEDFORWARD & AFFORDANCE

31

Feedforward: the label indicates the outcome of the action.

Feedback: the icon indicates the status of the device.

Affordance: the icon and the color animation unconsciously instructs users how to unlock.

PROTOTYPING

COMMON PRINCIPLES

• TESTING ON TARGET AUDIENCE• TEST INTERACTION, VISUALS AND TONE OF VOICE.• GET A FEELING FOR YOUR DESIGN• FINDING MISTAKES, BEFORE SPENDING TIME AND MONEY (IN

PRODUCING CODE)• CONVINCING STAKEHOLDERS• SOME PEOPLE WILL ONLY SEE “IT” WHEN IT’S VISUAL AND

INTERACTIVE

32

PROTOTYPING PROCESS

33

PROTOTYPING

WHERE TO START

• FORMULATE QUESTIONS BEFOREHAND• DETERMINE WHAT TO TEST• DO IT QUICK & DIRTY• FAKE IT ‘TILL YOU MAKE IT

34

PROTOTYPING

WHERE TO START: WRITE A SCENARIO

35www.usabilitynet.org

PROTOTYPING

WHERE TO START: DRAW A STORYBOARD

36

PROTOTYPING

WHERE TO START: DETERMINE A KEY USERPATH

37

PROTOTYPING: LOW FIDELITY

WHERE TO START: DETERMINE A KEY USERPATH

38

39

PROTOTYPING: HIGH FIDELITY

PAPER PROTOTYPING

• FEEDBACK, EARLY IN DESIGN PHASE• QUICK, ITERATIVE EXPERIMENTS• FOCUS ON CONCEPT AND INTERACTION• DRIVES COMMUNICATION• NO CODE DEMANDED• BEING CREATIVE WITH YOUR HANDS: IS GOOOOD FOR YOUR

BRAINS :-)

40

PROTOTYPING

41

PROTOTYPING TOOLS: PAPER

PROTOTYPING TOOLS: DIGITAL

42

PROTOTYPING TOOLS: PAPER

PROTOTYPING TOOLS: DIGITAL

43

PROTOTYPING TOOLS: PAPER

PROTOTYPING TOOLS: DIGITAL

44

PROTOTYPING TOOLS: PAPER

PROTOTYPING WITH PATTERNS

PROTOTYPING TOOLS: PAPER

USABILITY TESTING

46

OBSERVE WATCH ASK TALK

Ethnography Usability testing Interviews Focus groups

1-on-1 or group 1-on-1 1-on-1 Typically 4-9 people

Field observation of sociocultural phenomena

Users completing representative tasks

Questionnaire and/or brainstorming

Discussion about critical aspects

Observing in natural environment

Observer / moderator

Conducted by interviewer

Moderator

METHODS OF RESEARCH

47

http://www.youtube.com/watch?v=9wQkLthhHKA

USABILITY TESTING

48

Usability testing is finding out how an individual

user navigates, finds information, has interaction

and performs tasks with a product or service.

It is a one-on-one ‘watch and learn’ approach

USABILITY TESTING

49

USABILITY TESTING

50

SETUP

USABILITY TESTING

51

SETUP FOR MOBILE DEVICES

USABILITY TESTING

GUIDELINES WHILE TESTING

• COMPENSATE YOUR PARTICIPANTS (E.G. CANDY)• GATHER PARTICIPANT’S INFORMATION ON:

- BACKGROUND AND FRAME OF REFERENCE- TRIGGERS AND CONDITIONS TO THE ACTIVITY

• AVOID OPINION-BASED QUESTIONS• ASK OPEN QUESTIONS, DIG DEEPER IF THE USER IS BRIEF• GIVE OPEN TASKS, INSTEAD OF GUIDING THE USER• STIMULATE THINKING ALOUD• ASK THE USER ABOUT EXPECTATIONS WHILE TESTING

52

RECOMMENDED READING

53

JESSE JAMES GARRETT: THE ELEMENTS OF USER EXPERIENCE (UCD)DAN SAFFER: DESIGNING FOR INTERACTION (IXD)

STEVE KRUG: DON'T MAKE ME THINK (USABILITY)STEVE KRUG: IT'S NOT ROCKET SURGERY (USABILITY TESTING)SUSAN WEINSCHENK: 100 THINGS EVERY DESIGNER NEEDS TO KNOW ABOUT PEOPLE (COGNITIVE PSYCHOLOGY)MARK BOULTON: A PRACTICLE GUIDE TO DESIGNING FOR THE WEB (VISUAL DESIGN)TODD ZAKI WARFELL: PROTOTYPING: A PRACTITIONER'S GUIDE (PROTOTYPING)

Q & A

54

THANK YOU FOR YOUR ATTENTION!

55

@charliem5

Charlie Mulholland

@boven_water

Frank Kloos