Download as PDF, PPTX
Webbt user_centred_demos
- 1. User centred demos WeBBT2012 Hanne Sidarow; U-sentric Mathijs Verstraete; CUO/IBBT/K.U.Leuven Future Health Department
- 2. Agenda 1- Introduction tohuman centred design 2- Methods and tools 3- DIY
- 3. User eXperience More than usability… Accessibility Playability Func.onality UX Sociability Usability Likeability
- 4. Microwave racing Microwave racingàstuur ik morgen door http://www.youtube.com/watch? v=Bzy5hVvbei8
- 6.
- 7. Human Centred designprocess
- 8.
- 9. User & taskanalysis “Know your user!” • Fly on the wall • Diary • Contextual observation • Safari
- 10. Diary In context data gathering Text,drawing, pictures,video ,...
- 11. Cardsorting “Your website orapp from a customer point of view” Card sorting • 10 - 15 users • Categorising & labelling • Mental model of the user
- 12.
- 13. Customer experience mapping Howdoes your customer experience your product? From the very beginning (awareness)… until long after the use of it…
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. Expert review • Information architecture • Labels • Navigation • Lay-out (colour/ font/...) • Readability • Accessibility • Error messages • Consistency • ...
- 20. User testing “Real usertesting” • 5users • Real users • Real tasks • 85 % of the usability hits • Recording & logging of all user reactions and feedback
- 21. Wizard of Oz Testwithout a working prototype Fake interaction Early feedback Low cost
- 22.
- 23.
- 24. 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 heuristics http://www.flickr.com/photos/themm/130146412
- 25. Nielsen: 10 heuristics
- 26. 1“VISIBILITY OF THESYSTEM STATUS” http://www.flickr.com/photos/38514078@N00/341504116
- 27.
- 28. 2“MATCH BETWEEN THESYSTEM AND THE REAL WORLD” http://www.flickr.com/photos/
- 29. http://drupal.org/node/1009716 http://www.iphoneuxreviews.com/? p=114 http://vis.berkeley.edu/courses/cs160-sp10/wiki/index.php/HeuristicEvaluation-WeiWu
- 30. 3“USER CONTROLAND FREEDOM” www.flickr.com/photos/randz/3965289665/
- 31.
- 32. http://www.iphoneuxreviews.com/?p=114 4 “CONSISTENCYAND STANDARDS”
- 33.
- 34.
- 35. 6 “AESTHETICAND MINIMALISTDESIGN” 35 / 54 http://www.flickr.com/photos/opalsson/34540193
- 37. http://vis.berkeley.edu/courses/cs160-sp10/wiki/ index.php/HeuristicEvaluation-WeiWu http://www.iphoneuxreviews.com/?p=114
- 38.
- 39. http:// http://vis.berkeley.edu/courses/ touchedspace.wordpress.co cs160-sp10/wiki/index.php/ m/2011/10/06/in-remotes- aim-for-recognition-rather- HeuristicEvaluation-WeiWu than-recall/ 8 “RECOGNITION RATHER THAN RECALL”
- 41. 9“HELPAND DOCUMENTATION” http://www.flickr.com/photos/gi/1275556
- 43. 10“HELPUSERSRECOGNIZE,DIAGNOSE,ANDRECOVERFROMERRORS” http://www.flickr.com/photos/furryscalyman/7730305
- 44.
- 45.
- 46. Lay-out: Patterns http://designinginterfaces.com/patterns/ http://ui-patterns.com/ http://developer.yahoo.com/ypatterns/ http://developer.yahoo.com/ypatterns/about/stencils/ http://quince.infragistics.com/#/Main http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface- design-patterns/
- 47. Lay-out: Icon sets Standardized vs. Homemade designs http://www.freeiconsweb.com/ http://www.iconarchive.com http://userinterfaceicons.com/preview.php http://www.veryicon.com/icons/system/
- 48.
- 49. Tools: Prototyping Balsamiq, 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
- 50. Tools: Testing http://www.usefulusability.com/24-usability-testing-tools
- 52.
- 53. Exercise • Design apaper prototype • Based on a persona characteristic • To do: § Design paper prototype § User test § Adapt prototype, based on user test
- 54. 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)
- 55. Paper prototyping • Why? – Fast – Low cost – Interactive – Lots of feedback – Adapt easily – No program skills needed Illustration by Kevin Cornell
- 57. Paper prototyping • Whatis not paper prototyping? – Visual design – Page lay out & navigation
- 58.
- 61. Timing Groups § 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
- 62. Background information • Redesignthe application to the different functionalities • Focus on the target group – Make a list of properties, needs and wishes
- 63. Persona characteristics • 65+ • Teenager (10-15) • Student (20-25)
- 64.
- 65.
- 66. 1. Design paperprototype 1. Add info to the persona 2. Make a list of the User Interface elements 3. Make every User Interface element § Different screens § UI elements 4. Think of 5 tasks a user can do with your application. Try to make a workflow.
- 67. 2.User tests 1. 3rolls 1. Facilitator (“ be the computer “) 2. Observator (Intro, give tasks, note) 3. End user 2. 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.
- 68. Contact Hanne Sidarow User ExperienceExpert U-sentric hanne@u-sentric.com +32 474 68 99 63 www.u-sentric.com Mathijs Verstraete Researcher CUO/IBBT/KU Leuven Future Health Department mathijs.verstraete@soc.kuleuven.com http://soc.kuleuven.be/com/mediac/cuo/