designing better experiences - ux london 2013

53
DESIGNING BETTER EXPERIENCES THROUGH A USER CENTRED APPROACH Danny Bluestone | @danny_bluestone Matt Gibson | @duckymatt

Upload: cyber-duck

Post on 27-Jan-2015

120 views

Category:

Documents


3 download

DESCRIPTION

Slides from the workshop @danny_bluestone and @duckymatt from Cyber-Duck Ltd gave at UX London 2013. The workshop focused on how by putting the user at the centre of design decisions you can deliver a better experience. With a mixture of theory and hands-on activities the workshop covered user research, activity mapping, card sorting and participative sketching techniques.

TRANSCRIPT

Page 1: Designing Better Experiences - UX London 2013

DESIGNING BETTER EXPERIENCES

THROUGH A USER CENTRED APPROACH

Danny Bluestone | @danny_bluestone Matt Gibson | @duckymatt

Page 2: Designing Better Experiences - UX London 2013

WHAT IS USER CENTRED

DESIGN?

Page 3: Designing Better Experiences - UX London 2013

The central premise of user centred design is that the best designed products and services result from understanding the needs of the

people who will use them.

Page 4: Designing Better Experiences - UX London 2013

SOME BENEFITS OF UCD

1.  Qualitative - Find out what customers actually want. 2.  Context – Discover the exact context to design for.

3.  Creativity – Combine UCD with branding. 4.  Focus - Avoid ‘analysis paralysis’.

5.  Remove egos– Verify decisions with real customers.

Page 5: Designing Better Experiences - UX London 2013

h"p://xkcd.com/773/  

GIVING USERS WHAT THEY NEED NOT WHAT YOU THINK THEY NEED

Page 6: Designing Better Experiences - UX London 2013

h"p://www.flickr.com/photos/matski_98/8259750205/  

TAKE TIME TO OBSERVE HOW PEOPLE USE YOUR DESIGN

Page 7: Designing Better Experiences - UX London 2013

TIMOTHY PRESTRO, CEO of DMT  

DESIGN FOR PEOPLE, NOT AWARDS

h"p://designthatma"ers.org/por@olio/projects/  

Page 8: Designing Better Experiences - UX London 2013

DESIGN FOR OUTCOMES  

www.ted.com/talks/Cmothy_prestero_design_for_people_not_awards.html  and  h"p://www.designthatma"ers.org/pictures/dtm_blog/Baby_in_Firefly.JPG    

Page 9: Designing Better Experiences - UX London 2013

If the engineers could, they'd give you 40 buttons, but

when you're driving it's not that easy to use them all, so it's better to have the ones you really need.

The key thing is to make it simpler without getting rid of

stuff that I might need to make the car go quicker.

h"p://www.flickr.com/photos/simonw92/8534697674/  

LEWIS HAMILTON ON UCD

Page 10: Designing Better Experiences - UX London 2013

As we reform the delivery of public services, they are designed around the needs of the user, rather than has been far too often the case in the past, being designed to suit the convenience of the government.

Francis Maude, MP

Page 11: Designing Better Experiences - UX London 2013

Approaches Disciplines

User centred design

Self design

Activity centred design

Genius design

Interaction design

Information architecture

Usability testing

Research

Page 12: Designing Better Experiences - UX London 2013

IS UCD ALWAYS THE BEST APPROACH?

Page 13: Designing Better Experiences - UX London 2013

h"p://www.flickr.com/photos/centralasian/5577225117  

Page 14: Designing Better Experiences - UX London 2013

USERS ARE NOT DESIGNERS

IT IS USER CENTRED DESIGN, NOT USER CONTROLLED DESIGN

Page 15: Designing Better Experiences - UX London 2013

THERE IS NO SUCH THING AS A ONE-SIZE-FITS-ALL

APPROACH

FOCUS ON OUTCOMES NOT DELIVERABLES

Page 16: Designing Better Experiences - UX London 2013

USABILITY IS NOT A FEATURE

IT DEPENDS ON THE USER, THE ENVIRONMENT, THE TASK, AND OTHER CONTEXTUAL FACTORS

h"p://www.flickr.com/photos/oewf/2924217723/  

Page 17: Designing Better Experiences - UX London 2013

HOW WE APPROACH UCD

1. Research

2. Design / prototype

3. Test

4. Improve

Page 18: Designing Better Experiences - UX London 2013

RESEARCHING REQUIREMENTS

Page 19: Designing Better Experiences - UX London 2013

FRONT-LOADING STAKEHOLDER INTERVIEWS

•  Why is it being made?

•  Who are the key stakeholders and what are their goals? •  How does it fit in with the wider company objectives? •  Gain insight into market and target audiences •  Identify competitors early on

h"p://goodkickoffmeeCngs.com/2010/04/stakeholder-­‐frontloading/    

Page 20: Designing Better Experiences - UX London 2013

TECHNIQUES FOR EFFECTIVE INTERVIEWS

•  Create an informal and relaxed atmosphere •  Stay flexible •  Keep it one-on-one •  Allow them to speak ‘off-the-record’

Page 21: Designing Better Experiences - UX London 2013

The turning point in many interviews is when the interviewee gets up and closes the office door and

lowers their voice.

Paul Boag, Headscape

h"p://boagworld.com/business-­‐strategy/how-­‐to-­‐improve-­‐your-­‐site-­‐using-­‐stakeholder-­‐interviews/  

Page 22: Designing Better Experiences - UX London 2013

DEFINING CONTEXT OF USE

1.  User profiles

2.  Activities

3.  Environment

Page 23: Designing Better Experiences - UX London 2013

•  Speak to existing users if possible •  Competitors •  Ethnographic studies / research •  Expert insight

TIPS FOR GETTING INSIGHT INTO USER PROFILES

Page 24: Designing Better Experiences - UX London 2013

THE BEST USER PERSONAS ARE BASED ON REAL USERS

h"p://www.flickr.com/photos/patloika/7946438528  

Page 25: Designing Better Experiences - UX London 2013

•  Ethnio for existing users •  Social media •  Go to the physical locations where you’ll find

your users •  Use professional recruiters

HOW DO I FIND MY USERS?

h"p://www.flickr.com/photos/oatsy40/6783078815/  

Page 26: Designing Better Experiences - UX London 2013

Accessibility is the degree to which anyone can access and use a website using any web browsing technology.

RNIB h"p://www.rnib.org.uk/professionals/webaccessibility/background/Pages/background.aspx  

h"p://www.flickr.com/photos/furbyx4/2968376257/  

Page 27: Designing Better Experiences - UX London 2013

WHAT ACTIVITIES DO YOUR USERS NEED TO PERFORM?

h"p://www.flickr.com/photos/fernando/36759033  

Page 28: Designing Better Experiences - UX London 2013

FREQUENCY

WHAT WILL THE USER NEED TO DO MOST OFTEN?

Page 29: Designing Better Experiences - UX London 2013

CRITICAL

CAN BE INFREQUENT, BUT IT IS CRITICAL TO SUPPORT THEM

Page 30: Designing Better Experiences - UX London 2013

ENVIRONMENT ANALYSIS

•  Physical

•  Social / cultural •  Technical

Page 31: Designing Better Experiences - UX London 2013

DESIGN / PROTOTYPING

Page 32: Designing Better Experiences - UX London 2013

CARD SORTING

•  The ‘base’ for your information architecture.

•  Gets insights and patterns into users ‘mental model’.

•  It helps to increase findability in a system.

Page 33: Designing Better Experiences - UX London 2013

The current recommendation is to test 15 users for card sorting in most projects, and 30 users in big projects...

Jakob Nielsen, Nielsen Norman Group

Page 34: Designing Better Experiences - UX London 2013

TECHNIQUES FOR CARD SORTING

•  Use lots of post-it notes or cards •  Get users to sort the cards in open or closed groups •  Your main job is to observe and keep the momentum •  Learn from the patterns of different groups via analysis •  Helps to create a record of the structure/taxonomy

Page 35: Designing Better Experiences - UX London 2013

HICKS’S  LAW  

“THE  MORE  CHOICES  YOU  HAVE  TO  CHOOSE  FROM,  THE  LONGER  IT  TAKES  FOR  YOU  TO  MAKE  A  DECISION.”  

h"p://www.cirencalui.com/  

Page 36: Designing Better Experiences - UX London 2013

INTRODUCING INTERACTION DESIGN (IxD)

•  Helps to map out ‘flows of control’ •  Progresses to sketching and prototyping •  Pivotal at delivering functional specifications

Page 37: Designing Better Experiences - UX London 2013

“THE  TIME  REQUIRED  TO  RAPIDLY  MOVE  TO  A  TARGET  AREA  IS  A  FUNCTION  OF  THE  DISTANCE  TO  AND  THE  SIZE  OF  THE  TARGET”  

FITT’S  LAW  

h"p://modetro.com/mb-­‐games-­‐simon-­‐says-­‐vintage-­‐retro-­‐game-­‐70s  

Page 38: Designing Better Experiences - UX London 2013

TECHNIQUES FOR INTERACTION DESIGN (IxD)

•  Use personas and interviews to inform the design. •  Competitor research see what is already out there. •  Ethnography can help you to understand real users. •  Validate what you do with real users as early as possible.

Page 39: Designing Better Experiences - UX London 2013

IxD –FLOW OF CONTROL EXAMPLE

h"p://wc1.smartdraw.com/examples/content/examples/01_flowcharts/4_other_flowcharts/control_flow_epc_diagram_flowchart_l.jpg  

Page 40: Designing Better Experiences - UX London 2013

IxD – PROTOTYPE

h"p://www.infoq.com/resource/arCcles/wireframes-­‐start-­‐development-­‐projects/en/resources/3fig1.jpg  

Page 41: Designing Better Experiences - UX London 2013

START PROTOTYPES WITH PEN AND PAPER

h"p://www.flickr.com/photos/furbyx4/2968376257/  

Page 42: Designing Better Experiences - UX London 2013

I do not know the cognitive reasons behind this, but I have never seen this not be true. The more human your

picture, the more human will be the response.

Dan Roam, Back Of The Napkin

h"p://www.thebackokhenapkin.com/  

Page 43: Designing Better Experiences - UX London 2013

PARTICIPATORY SKETCHING TIPS

•  Encourage low fidelity

•  Review as a group

•  Frame critique with user stories

Page 44: Designing Better Experiences - UX London 2013

TEST / EVALUATE

Page 45: Designing Better Experiences - UX London 2013

DESIGNS ARE HYPOTHESES

ITERATE QUICKLY AND TEST ASSUMPTIONS

Page 46: Designing Better Experiences - UX London 2013

ETHNOGRAPHY

h"p://www.flickr.com/photos/alui0000/4814280779  

Page 47: Designing Better Experiences - UX London 2013

GUERILLA USER TESTING

h"p://www.flickr.com/photos/5tein/3609261904  

Page 48: Designing Better Experiences - UX London 2013

Lets us see how our study participants scan the search results page, and is the next best thing to actually being able to read their minds. Anne Aula and Kerry Rodden, User Experience Researchers, Google

GOOGLE ON EYE TRACKING h"p://www.japantoday.com/images/size/x/2013/03/urn%3Apublicid%3Aap.org%3A83a7bae63f044nc938d2f4bea94d862.jpg  

Page 49: Designing Better Experiences - UX London 2013

INTERVIEWS

h"p://uxmag.com/arCcles/eye-­‐tracking-­‐the-­‐best-­‐way-­‐to-­‐test-­‐rich-­‐app-­‐usability  

Page 50: Designing Better Experiences - UX London 2013

OTHER METHODS OF USER FEEDBACK

•  Click tracking tools •  A/B and MVT testing •  Remote user testing •  Expert reviews

Page 51: Designing Better Experiences - UX London 2013

BALANCING UCD WITH CLIENT’S NEEDS

Page 52: Designing Better Experiences - UX London 2013

WHAT WE’VE COVERED •  What is user centred design – Benefits / pitfalls •  Usability is not a feature •  Researching users and activities •  Paper prototyping •  Getting user feedback

Page 53: Designing Better Experiences - UX London 2013

THANK YOU!

Danny Bluestone | @danny_bluestone Matt Gibson | @duckymatt