ux bootcamp small
DESCRIPTION
A lecture by Charlie Mulholland and Frank Kloos on UX design for technovanza.orgTRANSCRIPT
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: 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 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