webbt user_centred_demos
TRANSCRIPT
![Page 1: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/1.jpg)
User centred demos WeBBT 2012 Hanne Sidarow; U-sentric Mathijs Verstraete; CUO/IBBT/K.U.Leuven Future Health Department
![Page 2: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/2.jpg)
Agenda 1- Introduction to human centred design 2- Methods and tools 3- DIY
![Page 3: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/3.jpg)
UX
Accessibility
Func.onality
Usability
Likeability
Sociability
Playability
User eXperience More than usability…
![Page 4: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/4.jpg)
Microwave racingà stuur ik morgen door Microwave racing http://www.youtube.com/watch?v=Bzy5hVvbei8
![Page 5: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/5.jpg)
![Page 6: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/6.jpg)
Test early
![Page 7: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/7.jpg)
Human Centred design process
![Page 8: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/8.jpg)
Observation
![Page 9: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/9.jpg)
User & task analysis “Know your user!”
• Fly on the wall • Diary • Contextual observation • Safari
![Page 10: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/10.jpg)
Diary In context data gathering Text, drawing, pictures,video ,...
![Page 11: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/11.jpg)
Cardsorting “Your website or app from a customer point of view” Card sorting
• 10 - 15 users • Categorising & labelling • Mental model of the user
![Page 12: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/12.jpg)
Personas
![Page 13: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/13.jpg)
Customer experience mapping How does your customer experience your product? From the very beginning (awareness)…
until long after the use of it…
![Page 14: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/14.jpg)
Creation
![Page 15: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/15.jpg)
Scenarios & storyboarding
![Page 16: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/16.jpg)
Prototyping
![Page 17: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/17.jpg)
Co-creation
![Page 18: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/18.jpg)
Evaluation
![Page 19: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/19.jpg)
• Information architecture • Labels • Navigation • Lay-out (colour/font/...) • Readability • Accessibility • Error messages • Consistency • ...
Expert review
![Page 20: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/20.jpg)
“Real user testing”
• 5 users • Real users • Real tasks
• 85 % of the usability hits • Recording & logging of all user reactions and feedback
User testing
![Page 21: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/21.jpg)
Wizard of Oz
Test without a working prototype Fake interaction Early feedback Low cost
![Page 22: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/22.jpg)
Eyetracking
![Page 23: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/23.jpg)
Guidelines & Tools
![Page 24: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/24.jpg)
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
Usability checklists
![Page 25: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/25.jpg)
Nielsen: 10 heuristics
![Page 26: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/26.jpg)
1“VISIBILITY OF THE SYSTEM STATUS” http://www.flickr.com/photos/38514078@N00/3415041167/
![Page 27: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/27.jpg)
http://www.flickr.com/photos/38514078@N00/4791581424/
![Page 28: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/28.jpg)
2“MATCH BETWEEN THE SYSTEM AND THE REAL WORLD” http://www.flickr.com/photos/29487767@N02/3338900345/
![Page 29: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/29.jpg)
http://drupal.org/node/1009716
http://vis.berkeley.edu/courses/cs160-sp10/wiki/index.php/HeuristicEvaluation-WeiWu
http://www.iphoneuxreviews.com/?p=114
![Page 30: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/30.jpg)
3“USER CONTROL AND FREEDOM” www.flickr.com/photos/randz/3965289665/
![Page 31: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/31.jpg)
3“USER CONTROL AND FREEDOM” http://courses.csail.mit.edu/6.831/archive/2008/lectures/L12-user-control-freedom/L12-user-control-freedom.html
![Page 32: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/32.jpg)
4 “CONSISTENCY AND STANDARDS”
http://www.iphoneuxreviews.com/?p=114
![Page 33: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/33.jpg)
http://www.behance.net/thomasdavies/frame/675535
![Page 34: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/34.jpg)
5 “FLEXIBILITY AND EFFICIENCY/EASY OF USE”
![Page 35: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/35.jpg)
35 / 54
6 “AESTHETIC AND MINIMALIST DESIGN” http://www.flickr.com/photos/opalsson/3454019322/
![Page 36: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/36.jpg)
![Page 37: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/37.jpg)
http://vis.berkeley.edu/courses/cs160-sp10/wiki/index.php/HeuristicEvaluation-WeiWu http://www.iphoneuxreviews.com/?p=114
![Page 38: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/38.jpg)
7“ERROR PREVENTION”
![Page 39: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/39.jpg)
8 “RECOGNITION RATHER THAN RECALL”
http://vis.berkeley.edu/courses/cs160-sp10/wiki/index.php/HeuristicEvaluation-WeiWu
http://touchedspace.wordpress.com/2011/10/06/in-remotes-aim-for-recognition-rather-than-recall/
![Page 40: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/40.jpg)
![Page 41: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/41.jpg)
9“HELP AND DOCUMENTATION” http://www.flickr.com/photos/gi/127555697/
![Page 42: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/42.jpg)
![Page 43: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/43.jpg)
10 “HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS” http://www.flickr.com/photos/furryscalyman/773030522/
![Page 44: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/44.jpg)
http://www.iphoneuxreviews.com/?p=114
http://shastawriter.hubpages.com/hub/Guidelines-for-Building-a-Usable-Website
![Page 45: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/45.jpg)
Accessibility:
![Page 46: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/46.jpg)
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/
Lay-out: Patterns
![Page 47: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/47.jpg)
Standardized vs. Homemade designs
Lay-out: Icon sets
http://www.freeiconsweb.com/ http://www.iconarchive.com http://userinterfaceicons.com/preview.php http://www.veryicon.com/icons/system/
![Page 48: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/48.jpg)
http://www.usewell.be/#/methods/ http://www.designmethodenfinder.de/ http://www.usabilitynet.org/tools/methods.htm http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/UsabilityMethodsToolboxHandbook.pdf
Methods:
![Page 49: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/49.jpg)
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
Tools: Prototyping
![Page 50: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/50.jpg)
http://www.usefulusability.com/24-usability-testing-tools
Tools: Testing
![Page 51: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/51.jpg)
![Page 52: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/52.jpg)
Do it Yourself !
![Page 53: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/53.jpg)
Exercise
• Design a paper prototype • Based on a persona characteristic • To do: § Design paper prototype § User test § Adapt prototype, based on user test
PAPER PROTOTYPING
![Page 54: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/54.jpg)
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)
![Page 55: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/55.jpg)
Paper prototyping
• Why? – Fast – Low cost – Interactive – Lots of feedback – Adapt easily – No program skills needed
Illustration by Kevin Cornell
![Page 56: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/56.jpg)
![Page 57: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/57.jpg)
Paper prototyping
• What is not paper prototyping? – Visual design – Page lay out & navigation
![Page 58: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/58.jpg)
How? • http://vimeo.com/32401568
![Page 59: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/59.jpg)
![Page 60: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/60.jpg)
![Page 61: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/61.jpg)
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
![Page 62: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/62.jpg)
Background information
• Redesign the application to the different functionalities
• Focus on the target group – Make a list of properties, needs and wishes
![Page 63: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/63.jpg)
Persona characteristics
• 65+ • Teenager (10-15) • Student (20-25)
![Page 64: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/64.jpg)
Demo 1
![Page 65: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/65.jpg)
Demo 2
![Page 66: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/66.jpg)
1. Design paper prototype 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.
![Page 67: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/67.jpg)
2.User tests 1. 3 rolls
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.
![Page 68: Webbt user_centred_demos](https://reader033.vdocument.in/reader033/viewer/2022060109/55529f10b4c905e8128b51a0/html5/thumbnails/68.jpg)
Hanne Sidarow User Experience Expert U-sentric [email protected] +32 474 68 99 63 www.u-sentric.com Mathijs Verstraete Researcher CUO/IBBT/KU Leuven Future Health Department [email protected] http://soc.kuleuven.be/com/mediac/cuo/
Contact