UX BOOTCAMPDESIGNING FOR USER EXPERIENCECHARLIE MULHOLLAND AND FRANK KLOOSSCHOOL OF DESIGN AND COMMUNICATIONCOMMUNICATION ...
DESIGN FOR USER EXPERIENCE•   WHAT IS USER CENTERED DESIGN (UCD)?•   WHY UCD?•   GOALS, CONTEXTS & MENTAL MODELS•   USER R...
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...
POSITIVE USER EXPERIENCE (UX)Source: cc licensed ( BY ND ) flickr photo by andyversus: http://flickr.com/photos/andyversus...
WHY UCD?           6
User
THE DIFFICULTIES OF EVERYDAY LIFE:AN EXAMPLE…
THE ROOT OF THE PROBLEM When there was no paper                   …where you normally  you got this screen…               ...
MOST PEOPLE USE ATM‟S ON “AUTOPILOT”Source: cc licensed ( BY NC SA ) flickr photo by stevelyon: http://flickr.com/photos/c...
THEY AREN‟T THINKING ABOUT RECEIPTPAPER…
UCD IS NECESSARY BECAUSE…• USERS LOOK AT THE WORLD AND OUR PRODUCTS FROM  THEIR PERSPECTIVE• AND THEIR BEHAVIOUR AS USERS ...
GOALS, CONTEXTS & MENTALMODELS                           13
GOALS: USERS USE PRODUCTS TO ACHIEVE GOALS                                                                                ...
TYPES OF GOAL• END GOALS  • Holes in walls  • Getting from A to B• EXPERIENCE GOALS  • Feeling in control  • Understanding...
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...
USER MENTAL MODELS ≠ CREATORS MENTAL MODEL                                                                                ...
REPRESENTED MODEL UCD aims to help make the represented model more   19            like the user‟s mental model
USER RESEARCH                20
RESEARCH APPROACHES USED     Technique                           Information that can be                       Major benef...
BEING THE USER IS ABOUT• OBSERVING YOURSELF AS YOU ASSUME THE ROLE OF THE  USER  • Having a „child‟s mind‟  • Delaying jud...
ONE TECHNIQUE: USER TRIP•   TAKING A SHORT TRIP IN THE ROLE OF THE USER    •   Trying things that the user does•   PREPARE...
OBSERVING THE USER IS ABOUT• UNDERSTANDING THE EFFECT OF CONTEXT  •   Environment  •   Others involved  •   Goals  •   Pro...
AN OBSERVATION FRAMEWORK                                        What?Space                                   What is the s...
SOME BASIC HCI ELEMENTS     Interaction Design     Cognitive Psychology     Visual Design     Metaphors     Perception    ...
FEEDBACK, FEEDFORWARD &AFFORDANCE• FEEDBACK TELLS THE USER WHAT‟S HAPPENING.• FEEDFORWARD INDICATES THE CONSEQUENCE OF AN ...
FEEDBACK, FEEDFORWARD &AFFORDANCE    FEEDBACK                          28
FEEDBACK, FEEDFORWARD &AFFORDANCE    FEEDFORWARD                          29
FEEDBACK, FEEDFORWARD &AFFORDANCE    AFFORDANCE                          30
FEEDBACK, FEEDFORWARD &                Feedback: the icon indicatesAFFORDANCE      the status of the device.              ...
PROTOTYPINGCOMMON PRINCIPLES• TESTING ON TARGET AUDIENCE• TEST INTERACTION, VISUALS AND TONE OF VOICE.• GET A FEELING FOR ...
PROTOTYPING PROCESS                      33
PROTOTYPINGWHERE TO START•   FORMULATE QUESTIONS BEFOREHAND•   DETERMINE WHAT TO TEST•   DO IT QUICK & DIRTY•   FAKE IT „T...
PROTOTYPINGWHERE TO START: WRITE A SCENARIOwww.usabilitynet.org               35
PROTOTYPINGWHERE TO START: DRAW A STORYBOARD                                    36
PROTOTYPINGWHERE TO START: DETERMINE A KEY USERPATH                                           37  wireframes.linowski.ca/
PROTOTYPING: LOW FIDELITYWHERE TO START: DETERMINE A KEY USERPATH                                           38
PROTOTYPING: HIGH FIDELITY                             39
PAPER PROTOTYPING•   FEEDBACK, EARLY IN DESIGN PHASE•   QUICK, ITERATIVE EXPERIMENTS•   FOCUS ON CONCEPT AND INTERACTION• ...
PROTOTYPING TOOLS: PAPERPROTOTYPING                           41
PROTOTYPING TOOLS: PAPERPROTOTYPING TOOLS: DIGITAL                             42
PROTOTYPING TOOLS: PAPERPROTOTYPING TOOLS: DIGITAL                             43
PROTOTYPING TOOLS: PAPERPROTOTYPING TOOLS: DIGITAL                             44
PROTOTYPING TOOLS: PAPERPROTOTYPING WITH PATTERNS
USABILITY TESTINGMETHODS OF RESEARCHOBSERVE             WATCH                ASK              TALKEthnography         Usab...
http://www.youtube.com/watch?v=9wQkLthhHKA                                             47
USABILITY TESTINGUsability testing is finding out how an individualuser navigates, finds information, has interactionand p...
USABILITY TESTING                    49
USABILITY TESTINGSETUP                    50
USABILITY TESTINGSETUP FOR MOBILE DEVICES                           51
USABILITY TESTINGGUIDELINES WHILE TESTING• COMPENSATE YOUR PARTICIPANTS (E.G. CANDY)• GATHER PARTICIPANT‟S INFORMATION ON:...
RECOMMENDED READINGJESSE JAMES GARRETT: THE ELEMENTS OF USER EXPERIENCE (UCD)DAN SAFFER: DESIGNING FOR INTERACTION (IXD)ST...
Q&A      54
THANK YOU FOR YOUR ATTENTION!          Frank Kloos             @boven_water          Charlie Mulholland             @charl...
Upcoming SlideShare
Loading in …5
×

Ux bootcamp small

351
-1

Published on

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

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
351
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • The idea of user experience is important to UCDThe aim of UCD is to deliver positive user experiences and to prevent or reduce the effect of negative user experiencesThere are many ways the this can be achieved
  • ▼This can be seen in the Postbank example•Postbank rightly worked out that there are (at least) two types of customer that use the PIN automaats: ones that want a receipt and ones who do not.•They also noted that they had to customers who wanted a receipt need to know if they cannot have one due to lack of paper•What they forgot was how people actually use PIN automaats - they function on autopilot, they are worried about other things (their security, the people behind them, what they're doing next, the state of their finances etc., etc.)
  • ▼This can be seen in the Postbank example•Postbank rightly worked out that there are (at least) two types of customer that use the PIN automaats: ones that want a receipt and ones who do not.•They also noted that they had to customers who wanted a receipt need to know if they cannot have one due to lack of paper•What they forgot was how people actually use PIN automaats - they function on autopilot, they are worried about other things (their security, the people behind them, what they're doing next, the state of their finances etc., etc.)
  • People don’t buy drills they buy holes in walls!
  • Context affects the way you think, the way you act, the way you use AND what is possible!
  • A mental model is some-one’s understanding of how something works – we apply it to situations and artefacts we encounter to help us understand and act
  • The user’s mental model is rarely the same as the creators mental model – this is especially so with interactive media products. The creator understands how the thing really works. The goal of the designer is to ensure the represented model (the interface) is as close to the user’s mental model
  • When telling the user what he’s doing or what’s the system status, we’re giving him control. When in control people decide better and feel happier. By using feedforward and affordances we can implicitly say to the user how to use an application. This requires no explanation or training. Affordances tell the user how to interact with something while feedforward explains what are the outcomes of that interaction. This results in something considered intuitive and easy to use.
  • When telling the user what he’s doing or what’s the system status, we’re giving him control. When in control people decide better and feel happier. By using feedforward and affordances we can implicitly say to the user how to use an application. This requires no explanation or training. Affordances tell the user how to interact with something while feedforward explains what are the outcomes of that interaction. This results in something considered intuitive and easy to use.
  • When telling the user what he’s doing or what’s the system status, we’re giving him control. When in control people decide better and feel happier. By using feedforward and affordances we can implicitly say to the user how to use an application. This requires no explanation or training. Affordances tell the user how to interact with something while feedforward explains what are the outcomes of that interaction. This results in something considered intuitive and easy to use.
  • When telling the user what he’s doing or what’s the system status, we’re giving him control. When in control people decide better and feel happier. By using feedforward and affordances we can implicitly say to the user how to use an application. This requires no explanation or training. Affordances tell the user how to interact with something while feedforward explains what are the outcomes of that interaction. This results in something considered intuitive and easy to use.
  • When telling the user what he’s doing or what’s the system status, we’re giving him control. When in control people decide better and feel happier. By using feedforward and affordances we can implicitly say to the user how to use an application. This requires no explanation or training. Affordances tell the user how to interact with something while feedforward explains what are the outcomes of that interaction. This results in something considered intuitive and easy to use.
  • Sanne mobile testkitlatenzien
  • Ux bootcamp small

    1. 1. UX BOOTCAMPDESIGNING FOR USER EXPERIENCECHARLIE MULHOLLAND AND FRANK KLOOSSCHOOL OF DESIGN AND COMMUNICATIONCOMMUNICATION AND MULTIMEDIA DESIGNJANUARY 7, 2013 1
    2. 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. 3. WHAT IS USER CENTRED DESIGN(UCD)? 3
    4. 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. 5. POSITIVE USER EXPERIENCE (UX)Source: cc licensed ( BY ND ) flickr photo by andyversus: http://flickr.com/photos/andyversus/4234209759/
    6. 6. WHY UCD? 6
    7. 7. User
    8. 8. THE DIFFICULTIES OF EVERYDAY LIFE:AN EXAMPLE…
    9. 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. 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. 11. THEY AREN‟T THINKING ABOUT RECEIPTPAPER…
    12. 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. 13. GOALS, CONTEXTS & MENTALMODELS 13
    14. 14. GOALS: USERS USE PRODUCTS TO ACHIEVE GOALS 14Source: cc licensed ( BY NC SA ) flickr photo by ...-Wink-...: http://flickr.com/photos/intherough/8126243257/
    15. 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. 16. CONTEXT (IS KING) 16 UCD aims to help understand use context
    17. 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. 18. USER MENTAL MODELS ≠ CREATORS MENTAL MODEL 18Source: cc licensed ( BY ND ) flickr photo by alexyorke: http://flickr.com/photos/alexyorke/4251522065/
    19. 19. REPRESENTED MODEL UCD aims to help make the represented model more 19 like the user‟s mental model
    20. 20. USER RESEARCH 20
    21. 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 effectAdapted from: Rosenau, M.D., et. At, 1996. The PDMA Handbook of New Product Development, New York, NY: John Wiley & Sons Inc., p. 158
    22. 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. 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. 24. OBSERVING THE USER IS ABOUT• UNDERSTANDING THE EFFECT OF CONTEXT • Environment • Others involved • Goals • Problems 24
    25. 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. 26. SOME BASIC HCI ELEMENTS Interaction Design Cognitive Psychology Visual Design Metaphors Perception Interface Design 26 …
    27. 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. 28. FEEDBACK, FEEDFORWARD &AFFORDANCE FEEDBACK 28
    29. 29. FEEDBACK, FEEDFORWARD &AFFORDANCE FEEDFORWARD 29
    30. 30. FEEDBACK, FEEDFORWARD &AFFORDANCE AFFORDANCE 30
    31. 31. FEEDBACK, FEEDFORWARD & Feedback: the icon indicatesAFFORDANCE 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. 32. PROTOTYPINGCOMMON 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. 33. PROTOTYPING PROCESS 33
    34. 34. PROTOTYPINGWHERE TO START• FORMULATE QUESTIONS BEFOREHAND• DETERMINE WHAT TO TEST• DO IT QUICK & DIRTY• FAKE IT „TILL YOU MAKE IT 34
    35. 35. PROTOTYPINGWHERE TO START: WRITE A SCENARIOwww.usabilitynet.org 35
    36. 36. PROTOTYPINGWHERE TO START: DRAW A STORYBOARD 36
    37. 37. PROTOTYPINGWHERE TO START: DETERMINE A KEY USERPATH 37 wireframes.linowski.ca/
    38. 38. PROTOTYPING: LOW FIDELITYWHERE TO START: DETERMINE A KEY USERPATH 38
    39. 39. PROTOTYPING: HIGH FIDELITY 39
    40. 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. 41. PROTOTYPING TOOLS: PAPERPROTOTYPING 41
    42. 42. PROTOTYPING TOOLS: PAPERPROTOTYPING TOOLS: DIGITAL 42
    43. 43. PROTOTYPING TOOLS: PAPERPROTOTYPING TOOLS: DIGITAL 43
    44. 44. PROTOTYPING TOOLS: PAPERPROTOTYPING TOOLS: DIGITAL 44
    45. 45. PROTOTYPING TOOLS: PAPERPROTOTYPING WITH PATTERNS
    46. 46. USABILITY TESTINGMETHODS OF RESEARCHOBSERVE WATCH ASK TALKEthnography Usability testing Interviews Focus groups1-on-1 or group 1-on-1 1-on-1 Typically 4-9 peopleField observation of Users completing Questionnaire Discussion aboutsociocultural representative tasks and/or critical aspectsphenomena brainstormingObserving in Observer / Conducted by Moderatornatural moderator interviewerenvironment 46
    47. 47. http://www.youtube.com/watch?v=9wQkLthhHKA 47
    48. 48. USABILITY TESTINGUsability testing is finding out how an individualuser navigates, finds information, has interactionand performs tasks with a product or service.It is a one-on-one „watch and learn‟ approach 48
    49. 49. USABILITY TESTING 49
    50. 50. USABILITY TESTINGSETUP 50
    51. 51. USABILITY TESTINGSETUP FOR MOBILE DEVICES 51
    52. 52. USABILITY TESTINGGUIDELINES 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. 53. RECOMMENDED READINGJESSE JAMES GARRETT: THE ELEMENTS OF USER EXPERIENCE (UCD)DAN SAFFER: DESIGNING FOR INTERACTION (IXD)STEVE KRUG: DONT MAKE ME THINK (USABILITY)STEVE KRUG: ITS NOT ROCKET SURGERY (USABILITY TESTING)SUSAN WEINSCHENK: 100 THINGS EVERY DESIGNER NEEDS TO KNOWABOUT PEOPLE (COGNITIVE PSYCHOLOGY)MARK BOULTON: A PRACTICLE GUIDE TO DESIGNING FOR THE WEB(VISUAL DESIGN)TODD ZAKI WARFELL: PROTOTYPING: A PRACTITIONERS GUIDE(PROTOTYPING) 53
    54. 54. Q&A 54
    55. 55. THANK YOU FOR YOUR ATTENTION! Frank Kloos @boven_water Charlie Mulholland @charliem5 55

    ×