User centred demos WeBBT 2012 Hanne Sidarow; U-sentric Mathijs Verstraete; CUO/IBBT/K.U.Leuven Future Health Department

Agenda 1- Introduction to human centred design 2- Methods and tools 3- DIY

UX  

Accessibility  

Func.onality  

Usability  

Likeability  

Sociability  

Playability  

User eXperience More than usability…

Microwave racingà stuur ik morgen door Microwave racing http://www.youtube.com/watch?v=Bzy5hVvbei8

Test early

Human Centred design process

Observation

User & task analysis “Know your user!”

•  Fly on the wall •  Diary •  Contextual observation •  Safari

Diary In context data gathering Text, drawing, pictures,video ,...

Cardsorting “Your website or app from a customer point of view” Card sorting

•  10 - 15 users •  Categorising & labelling •  Mental model of the user

Personas

Customer experience mapping How does your customer experience your product? From the very beginning (awareness)…

until long after the use of it…

Creation

Scenarios & storyboarding

Prototyping

Co-creation

Evaluation

•  Information architecture •  Labels •  Navigation •  Lay-out (colour/font/...) •  Readability •  Accessibility •  Error messages •  Consistency •  ...

Expert review

“Real user testing”

•  5 users •  Real users •  Real tasks

•  85 % of the usability hits •  Recording & logging of all user reactions and feedback

User testing

Wizard of Oz

Test without a working prototype Fake interaction Early feedback Low cost

Eyetracking

Guidelines & Tools

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

Nielsen: 10 heuristics

1“VISIBILITY OF THE SYSTEM STATUS” http://www.flickr.com/photos/38514078@N00/3415041167/

http://www.flickr.com/photos/38514078@N00/4791581424/

2“MATCH BETWEEN THE SYSTEM AND THE REAL WORLD” http://www.flickr.com/photos/29487767@N02/3338900345/

http://drupal.org/node/1009716

http://vis.berkeley.edu/courses/cs160-sp10/wiki/index.php/HeuristicEvaluation-WeiWu

http://www.iphoneuxreviews.com/?p=114

3“USER CONTROL AND FREEDOM” www.flickr.com/photos/randz/3965289665/

3“USER CONTROL AND FREEDOM” http://courses.csail.mit.edu/6.831/archive/2008/lectures/L12-user-control-freedom/L12-user-control-freedom.html

4 “CONSISTENCY AND STANDARDS”

http://www.iphoneuxreviews.com/?p=114

http://www.behance.net/thomasdavies/frame/675535

5 “FLEXIBILITY AND EFFICIENCY/EASY OF USE”

35 / 54

6 “AESTHETIC AND MINIMALIST DESIGN” http://www.flickr.com/photos/opalsson/3454019322/

http://vis.berkeley.edu/courses/cs160-sp10/wiki/index.php/HeuristicEvaluation-WeiWu http://www.iphoneuxreviews.com/?p=114

7“ERROR PREVENTION”

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/

9“HELP AND DOCUMENTATION” http://www.flickr.com/photos/gi/127555697/

10 “HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS” http://www.flickr.com/photos/furryscalyman/773030522/

http://www.iphoneuxreviews.com/?p=114

http://shastawriter.hubpages.com/hub/Guidelines-for-Building-a-Usable-Website

Accessibility:

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

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/

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:

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

http://www.usefulusability.com/24-usability-testing-tools

Tools: Testing

Do it Yourself !

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

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)

Paper prototyping

•  Why? – Fast – Low cost –  Interactive – Lots of feedback – Adapt easily – No program skills needed

Illustration by Kevin Cornell

Paper prototyping

•  What is not paper prototyping? – Visual design – Page lay out & navigation

How? •  http://vimeo.com/32401568

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

Background information

•  Redesign the application to the different functionalities

•  Focus on the target group – Make a list of properties, needs and wishes

Persona characteristics

•  65+ •  Teenager (10-15) •  Student (20-25)

Demo 1

Demo 2

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.

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.

Hanne Sidarow User Experience Expert 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/

Contact