A lecture by Charlie Mulholland and Frank Kloos on UX design for technovanza.org

1. UX BOOTCAMP
DESIGNING FOR USER EXPERIENCE
CHARLIE MULHOLLAND AND FRANK KLOOS
SCHOOL OF DESIGN AND COMMUNICATION
COMMUNICATION AND MULTIMEDIA DESIGN
JANUARY 7, 2013
1

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
2

3. WHAT IS USER CENTRED DESIGN
(UCD)?
3

4. 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

5. POSITIVE USER EXPERIENCE (UX)
Source: cc licensed ( BY ND ) flickr photo by andyversus: http://flickr.com/photos/andyversus/4234209759/

6. WHY UCD?
6

7. User

8. THE DIFFICULTIES OF EVERYDAY LIFE:
AN EXAMPLE…

9. THE ROOT OF THE PROBLEM
When there was no paper …where you normally
you got this screen… got 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

10. MOST PEOPLE USE ATM‟S ON
“AUTOPILOT”
Source: cc licensed ( BY NC SA ) flickr photo by stevelyon: http://flickr.com/photos/chicanerii/2264345223/

11. THEY AREN‟T THINKING ABOUT RECEIPT
PAPER…

12. 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

13. GOALS, CONTEXTS & MENTAL
MODELS
13

14. GOALS: USERS USE PRODUCTS TO
ACHIEVE GOALS
14
Source: cc licensed ( BY NC SA ) flickr photo by ...-Wink-...: http://flickr.com/photos/intherough/8126243257/

15. 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

16. CONTEXT (IS KING)
16
UCD aims to help understand use context

17. 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

18. USER MENTAL MODELS ≠ CREATORS
MENTAL MODEL
18
Source: cc licensed ( BY ND ) flickr photo by alexyorke: http://flickr.com/photos/alexyorke/4251522065/

19. REPRESENTED MODEL
UCD aims to help make the represented model more 19
like the user‟s mental model

20. USER RESEARCH
20

21. RESEARCH APPROACHES USED
Technique Information that can be Major benefits (voordelen) Major drawbacks (nadelen)
obtained
Be the user Tacit knowledge Depth of knowledge Can be difficult to articulate
Impact of trade-offs on Belief in identified needs to others
functionality for the use Identifying potential Can be costly
Process knowledge problems Difficult to be some users
Inspiration
Good for initial research /
hypotheses
Observe the user Tacit knowledge Learn the language of the Can be difficult to translate
critically Process knowledge user into words for others (data
Behaviours Find unarticulated needs collection and use essential
here)
Mental model
Can be costly
Takes time
Hawthorne effect
Talk to users Large volumes of detail Speed Poor for process, and
Context specific needs Breadth of information unarticulated needs
Goals, needs, behaviours Interviewer bias
Mental model Interviewee 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

22. 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

23. 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

24. OBSERVING THE USER IS ABOUT
• UNDERSTANDING THE EFFECT OF CONTEXT
• Environment
• Others involved
• Goals
• Problems
24

25. 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

26. SOME BASIC HCI ELEMENTS
Interaction Design
Cognitive Psychology
Visual Design
Metaphors
Perception
Interface Design 26
…

27. FEEDBACK, FEEDFORWARD &
AFFORDANCE
• 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.
27

28. FEEDBACK, FEEDFORWARD &
AFFORDANCE
FEEDBACK
28

29. FEEDBACK, FEEDFORWARD &
AFFORDANCE
FEEDFORWARD
29

30. FEEDBACK, FEEDFORWARD &
AFFORDANCE
AFFORDANCE
30

31. FEEDBACK, FEEDFORWARD &
Feedback: the icon indicates
AFFORDANCE the status of the device.
Feedforward: the label indicates
the outcome of the action.
Affordance: the icon and the
color animation unconsciously
instructs users how to unlock. 31

32. 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

33. PROTOTYPING PROCESS
33

34. PROTOTYPING
WHERE TO START
• FORMULATE QUESTIONS BEFOREHAND
• DETERMINE WHAT TO TEST
• DO IT QUICK & DIRTY
• FAKE IT „TILL YOU MAKE IT
34

35. PROTOTYPING
WHERE TO START: WRITE A SCENARIO
www.usabilitynet.org 35

36. PROTOTYPING
WHERE TO START: DRAW A STORYBOARD
36

37. PROTOTYPING
WHERE TO START: DETERMINE A KEY USERPATH
37
wireframes.linowski.ca/

38. PROTOTYPING: LOW FIDELITY
WHERE TO START: DETERMINE A KEY USERPATH
38

39. PROTOTYPING: HIGH FIDELITY
39

40. 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

41. PROTOTYPING TOOLS: PAPER
PROTOTYPING
41

42. PROTOTYPING TOOLS: PAPER
PROTOTYPING TOOLS: DIGITAL
42

43. PROTOTYPING TOOLS: PAPER
PROTOTYPING TOOLS: DIGITAL
43

44. PROTOTYPING TOOLS: PAPER
PROTOTYPING TOOLS: DIGITAL
44

45. PROTOTYPING TOOLS: PAPER
PROTOTYPING WITH PATTERNS

46. USABILITY TESTING
METHODS OF RESEARCH
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 Users completing Questionnaire Discussion about
sociocultural representative tasks and/or critical aspects
phenomena brainstorming
Observing in Observer / Conducted by Moderator
natural moderator interviewer
environment
46

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

48. USABILITY TESTING
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
48

49. USABILITY TESTING
49

50. USABILITY TESTING
SETUP
50

51. USABILITY TESTING
SETUP FOR MOBILE DEVICES
51

52. 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

53. RECOMMENDED READING
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)
53

54. Q&A
54

55. THANK YOU FOR YOUR ATTENTION!
Frank Kloos
@boven_water
Charlie Mulholland
@charliem5
55