Webbt user_centred_demos

769 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
769
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webbt user_centred_demos

  1. 1. User centred demosWeBBT 2012Hanne Sidarow; U-sentricMathijs Verstraete; CUO/IBBT/K.U.Leuven FutureHealth Department
  2. 2. Agenda1- Introduction to human centreddesign2- Methods and tools3- DIY
  3. 3. User eXperience More than usability… Accessibility   Playability   Func.onality   UX   Sociability   Usability   Likeability  
  4. 4. Microwave racingMicrowave racingà stuur ik morgen doorhttp://www.youtube.com/watch?v=Bzy5hVvbei8
  5. 5. Test early
  6. 6. Human Centred design process
  7. 7. Observation
  8. 8. User & task analysis“Know your user!”•  Fly on the wall•  Diary•  Contextual observation•  Safari
  9. 9. DiaryIn context datagatheringText, drawing,pictures,video ,...
  10. 10. Cardsorting“Your website or app from a customer point of view” Card sorting •  10 - 15 users •  Categorising & labelling •  Mental model of the user
  11. 11. Personas
  12. 12. Customer experience mappingHow does your customer experience your product?From the very beginning (awareness)… until long after the useof it…
  13. 13. Creation
  14. 14. Scenarios & storyboarding
  15. 15. Prototyping
  16. 16. Co-creation
  17. 17. Evaluation
  18. 18. Expert review•  Informationarchitecture•  Labels•  Navigation•  Lay-out (colour/font/...)•  Readability•  Accessibility•  Error messages•  Consistency•  ...
  19. 19. User testing“Real user testing” •  5users •  Real users •  Real tasks •  85 % of the usability hits •  Recording & logging of all user reactions and feedback
  20. 20. Wizard of OzTest without a working prototypeFake interactionEarly feedbackLow cost
  21. 21. Eyetracking
  22. 22. Guidelines & Tools
  23. 23. Usability checklists Norman’s Seven Principles for Transforming Difficult Tasks into Simple Ones Shneiderman’s eight golden rules of interface design Nielsen’s ten usability heuristicshttp://www.flickr.com/photos/themm/130146412
  24. 24. Nielsen: 10 heuristics
  25. 25. 1“VISIBILITY OF THE SYSTEM STATUS” http://www.flickr.com/photos/38514078@N00/341504116
  26. 26. http://www.flickr.com/photos/38514078@N00/4791581
  27. 27. 2“MATCH BETWEEN THE SYSTEM AND THE REAL WORLD” http://www.flickr.com/photos/
  28. 28. http://drupal.org/node/1009716 http://www.iphoneuxreviews.com/? p=114http://vis.berkeley.edu/courses/cs160-sp10/wiki/index.php/HeuristicEvaluation-WeiWu
  29. 29. 3“USER CONTROLAND FREEDOM” www.flickr.com/photos/randz/3965289665/
  30. 30. 3“USER CONTROLAND FREEDOM”http://courses.csail.mit.edu/6.831/archive/2008/lectures/L12-user-control-freedom/L12-user-control-
  31. 31. http://www.iphoneuxreviews.com/?p=114 4 “CONSISTENCYAND STANDARDS”
  32. 32. http://www.behance.net/thomasdavies/frame/6755
  33. 33. 5 “FLEXIBILITYAND EFFICIENCY/EASY OF USE”
  34. 34. 6 “AESTHETICAND MINIMALIST DESIGN”35 / 54 http://www.flickr.com/photos/opalsson/34540193
  35. 35. http://vis.berkeley.edu/courses/cs160-sp10/wiki/ index.php/HeuristicEvaluation-WeiWu http://www.iphoneuxreviews.com/?p=114
  36. 36. 7“ERROR PREVENTION”
  37. 37. http://http://vis.berkeley.edu/courses/ touchedspace.wordpress.cocs160-sp10/wiki/index.php/ m/2011/10/06/in-remotes- aim-for-recognition-rather-HeuristicEvaluation-WeiWu than-recall/ 8 “RECOGNITION RATHER THAN RECALL”
  38. 38. 9“HELPAND DOCUMENTATION” http://www.flickr.com/photos/gi/1275556
  39. 39. 10“HELPUSERSRECOGNIZE,DIAGNOSE,ANDRECOVERFROMERRORS” http://www.flickr.com/photos/furryscalyman/7730305
  40. 40. http://shastawriter.hubpages.com/hub/Guidelines-for-Building-a-Usable-Websitehttp://www.iphoneuxreviews.com/?p=114
  41. 41. Accessibility:
  42. 42. Lay-out: Patternshttp://designinginterfaces.com/patterns/http://ui-patterns.com/http://developer.yahoo.com/ypatterns/http://developer.yahoo.com/ypatterns/about/stencils/http://quince.infragistics.com/#/Mainhttp://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface-design-patterns/
  43. 43. Lay-out: Icon setsStandardized vs. Homemade designshttp://www.freeiconsweb.com/http://www.iconarchive.comhttp://userinterfaceicons.com/preview.phphttp://www.veryicon.com/icons/system/
  44. 44. Methods:http://www.usewell.be/#/methods/http://www.designmethodenfinder.de/http://www.usabilitynet.org/tools/methods.htmhttp://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/UsabilityMethodsToolboxHandbook.pdf
  45. 45. Tools: PrototypingBalsamiq, Visio, Axure, Omnigraffle…http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/http://garmahis.com/reviews/wireframe-tools/http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes
  46. 46. Tools: Testinghttp://www.usefulusability.com/24-usability-testing-tools
  47. 47. Do it Yourself !
  48. 48. Exercise•  Design a paper prototype•  Based on a persona characteristic•  To do: §  Design paper prototype §  User test §  Adapt prototype, based on user test
  49. 49. Paper prototyping•  What? –  Interactive, visual representation of the user interaction –  Material = paper –  Interactive prototype •  Contains: information, interactions, visuals, content,...•  The system‘works’ –  Simulate interactivity –  Facilitator is ‘the computer’ –  Scenario: functionalities of system •  Facilitator does not explain the interface (↔ storyboard)
  50. 50. Paper prototyping•  Why? –  Fast –  Low cost –  Interactive –  Lots of feedback –  Adapt easily –  No program skills needed Illustration by Kevin Cornell
  51. 51. Paper prototyping•  What is not paper prototyping? –  Visual design –  Page lay out & navigation
  52. 52. How?•  http://vimeo.com/32401568
  53. 53. TimingGroups§  3 persons• usertests: rolls§  Facilitator (“de computer”)§  Observator§  End user• Time§  40 à 50 min: Paper prototype§  5 à 10 min Prepare test§  5 à 10 min Usertest
  54. 54. Background information•  Redesign the application to the different functionalities•  Focus on the target group –  Make a list of properties, needs and wishes
  55. 55. Persona characteristics•  65+•  Teenager (10-15)•  Student (20-25)
  56. 56. Demo 1
  57. 57. Demo 2
  58. 58. 1. Design paper prototype1.  Add info to the persona2.  Make a list of the User Interface elements3.  Make every User Interface element §  Different screens §  UI elements4.  Think of 5 tasks a user can do with your application. Try to make a workflow.
  59. 59. 2.User tests1.  3 rolls 1.  Facilitator (“ be the computer “) 2.  Observator (Intro, give tasks, note) 3.  End user2.  Test §  User: try to ‘think aloud’ & try to empathize in the persona §  Facilitator: make the interaction as smooth as possible §  Observator: Always try to ask why a user does certain actions. Your user is always right.
  60. 60. ContactHanne SidarowUser Experience ExpertU-sentrichanne@u-sentric.com+32 474 68 99 63www.u-sentric.comMathijs VerstraeteResearcherCUO/IBBT/KU Leuven Future Health Departmentmathijs.verstraete@soc.kuleuven.comhttp://soc.kuleuven.be/com/mediac/cuo/

×