Ux bootcamp small
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Ux bootcamp small

on

  • 384 views

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

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

Statistics

Views

Total Views
384
Views on SlideShare
383
Embed Views
1

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Presentation Transcript

  • 1. UX BOOTCAMPDESIGNING FOR USER EXPERIENCECHARLIE MULHOLLAND AND FRANK KLOOSSCHOOL OF DESIGN AND COMMUNICATIONCOMMUNICATION AND MULTIMEDIA DESIGNJANUARY 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 RECEIPTPAPER…
  • 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 & MENTALMODELS 13
  • 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. 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 18Source: 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 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. 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 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. 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. PROTOTYPING PROCESS 33
  • 34. PROTOTYPINGWHERE TO START• FORMULATE QUESTIONS BEFOREHAND• DETERMINE WHAT TO TEST• DO IT QUICK & DIRTY• FAKE IT „TILL YOU MAKE IT 34
  • 35. PROTOTYPINGWHERE TO START: WRITE A SCENARIOwww.usabilitynet.org 35
  • 36. PROTOTYPINGWHERE TO START: DRAW A STORYBOARD 36
  • 37. PROTOTYPINGWHERE TO START: DETERMINE A KEY USERPATH 37 wireframes.linowski.ca/
  • 38. PROTOTYPING: LOW FIDELITYWHERE 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: PAPERPROTOTYPING 41
  • 42. PROTOTYPING TOOLS: PAPERPROTOTYPING TOOLS: DIGITAL 42
  • 43. PROTOTYPING TOOLS: PAPERPROTOTYPING TOOLS: DIGITAL 43
  • 44. PROTOTYPING TOOLS: PAPERPROTOTYPING TOOLS: DIGITAL 44
  • 45. PROTOTYPING TOOLS: PAPERPROTOTYPING WITH PATTERNS
  • 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. http://www.youtube.com/watch?v=9wQkLthhHKA 47
  • 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. USABILITY TESTING 49
  • 50. USABILITY TESTINGSETUP 50
  • 51. USABILITY TESTINGSETUP FOR MOBILE DEVICES 51
  • 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. 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. Q&A 54
  • 55. THANK YOU FOR YOUR ATTENTION! Frank Kloos @boven_water Charlie Mulholland @charliem5 55