Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ux bootcamp small

553 views

Published on

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

Published in: Design
  • Be the first to comment

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

×