Introduction to User Experience Design tools and techniques

A presentation I gave to current students of the MSc Geographic Information Science at UCL (as part of their HCI module run by the uber talented Dr. Artemis Skarlatidou https://www.ucl.ac.uk/excites/people/research-staff/artemis)

Transcript

1. INTRODUCTION TO USER EXPERIENCE DESIGN UCL GIS MASTERS STUDENTS 17 March 2014 Richard Johnston - @boomrich
2. webcredible > customer experience design 2 Contents • Introduction: About me • User Experience: A definition • User Experience Design: Tools and techniques
3. webcredible > customer experience design 3 INTRODUCTION: ABOUT ME
4. webcredible > customer experience design 4 BSc Computer Science
5. webcredible > customer experience design 5 NVQ 2: Health and social care
6. webcredible > customer experience design 6 UCL: MSc GIS 2009-10
7. webcredible > customer experience design 7 Dissertation: User Centred Design of a web geo-visualisation 5 semi structured user interviews Feedback from client Initial wireframing Academic research Brief from client Interactive prototyping & design documentation Feedback from users Expert review (CW & HE)
8. webcredible > customer experience design 8 Dissertation: User Centred Design of a web geo-visualisation
9. webcredible > customer experience design 9 Dissertation: What’s happened since? http://www.zoopla.co.uk/house-prices/map/london/?sold_price_types=&sold_price_years=
10. webcredible > customer experience design 10 Dissertation: What’s happened since? http://cartodb.com/visualize http://illustreets.co.uk/
11. webcredible > customer experience design 11 USER EXPERIENCE: A DEFINITION
12. webcredible > customer experience design 12 “UX: A person’s perceptions and responses that result from the use or anticipated use of a product, system or service” ISO 9241-210:2010 Ergonomics of human-system interaction -- Part 210: Human-centred design for interactive systems Designing for a user’s experience
13. webcredible > customer experience design 13 Designing for a user’s experience What UX design aims to ensure products and service are like (digital or not)
14. webcredible > customer experience design 14 Designing for a user’s experience The ISO standard describes 6 key principles that will ensure a design is user centered: – The design is based upon an explicit understanding of users, tasks and environments. – Users are involved throughout design and development. – The design is driven and refined by user-centered evaluation. – The process is iterative. – The design addresses the whole user experience. – The design team includes multidisciplinary skills and perspectives
15. webcredible > customer experience design 15 Designing for a user’s experience The user centred design iteration cycle
16. webcredible > customer experience design 16 Designing for a user’s experience “User experience is not about the inner workings of a product or service. User experience is about how it works on the outside, where a person comes into contact with it. When someone asks you what it’s like to use a product or service they’re asking you about the user experience. It is hard to do simple things? Is it easy to figure out? How does it feel to interact with the product [or service]?” Jesse James Garrett, President of AdaptivePath - UX Agency pioneers (US)
17. webcredible > customer experience design 17 Designing for a user’s experience Jesse James Garrett’s “Elements of User Experience” http://www.jjg.net/elements/
18. webcredible > customer experience design 18 Designing for a user’s experience Research  Field research  Market research  Face to face interviewing  Gathering and organizing statistics  Creating personas  Experience mapping  Creation of user tests Strategy  Product design  Service design  Content strategy  Technology Design  Feature writing  Requirement writing  Graphic arts  Interaction design  Information architecture  Usability  Prototyping  Interface layout  Interface design  Visual design  Taxonomy creation  Terminology creation  Copywriting Communication  Presenting  Collaborative working  Design culture evangelism http://www.uxisnotui.com/
19. webcredible > customer experience design 19 USER EXPERIENCE DESIGN: TOOLS & TECHNIQUES
20. webcredible > customer experience design 20 Example UX design process
21. webcredible > customer experience design 21 User interviews Actual users Current system Informal demeanour Natural environment Remember: what users really want and what they say that want can be totally different
22. webcredible > customer experience design 22 User interviews • User interviews are used early on in the user centred design process to find out about the people you’re designing for and: – get a deeper understanding of what causes their underlying behaviours – what drives their needs and desires • Typically they’ll: – Last between 30mins to 1 hour – Be informal and loosely structured to allow the participant to speak freely – Involve talking to your target audience about or whilst they perform tasks similar to those you’re designing Getting to know your audience http://alistapart.com/article/interviewing-humans
23. webcredible > customer experience design 23 Personas Description of behaviour Realistic demographic information Interpreted needs and goals Key behaviours when performing an activity Remember: write these out quickly to begin with and refine in later rounds of research
24. webcredible > customer experience design 24 Personas • Personas are a simple way to communicate and remember what found out about your users during interviews, each will describe: – A common set of behaviours groups of people within your target audience(s) display – Their needs and goals when performing activities similar to those you’re designing for • Personas serve as: – A reminder of who you are designing for throughout a project – The basis for scenarios and user journey maps Document patterns of your users’ behaviour http://www.uie.com/articles/lirpps
25. webcredible > customer experience design 25 Experience maps Time Remember: draft this on your research but don’t be afraid to hypothesise Key events when a user will have to interact How users may feel given what’s going on in their lives Features / functionality What users will do (and on what device)
26. webcredible > customer experience design 26 Experience maps • Experience maps show a holistic view of what your users think and feel at each moment when interacting with your product or service – Think of it as a large scale cognitive walkthrough that also takes into account multiple devices (e.g. desktop, tablet, mobile) and environments (outdoors, at home, in the office) – They are based on what you found out during your initial research, and may vary depending on the persona type you’re using • For each persona type experience maps can be interpreted to find out how to: – Amend or provide new features and functionality to best meet user needs – Ensure you design things people will like – Design for a variety of different behaviours within your target audience Explore what your users do and want to do http://www.uxmatters.com/mt/archives/2011/09/the-value-of-customer-journey- maps-a-ux-designers-personal-journey.php
27. webcredible > customer experience design 27 Sketching Roughly document your initial ideas (based on research) Gather feedback on technical and business constraints and amend accordingly Remember: generate lots of ideas and work collaboratively with clients / developers to make sure they’re realistically possible
28. webcredible > customer experience design 28 Sketching • Initially sketching your design ideas has a number of benefits: – You can generate a lot of ideas quickly – Clients or developers can join in the process – Ideas can be tested for their feasibility • Refining and tidying up your best sketches means they could be: – used as a stimulus for user testing – Handed over to a developer (if anonotated) for initial builds Quickly design and refine your ideas https://medium.com/ux-ux-human-interfaces/4deda906c915
29. webcredible > customer experience design 29 Prototyping Remember: try to use realistic content Use prototyping software (we use Axure RP) to create realistic mock-ups of how your designs will work (you might also quickly code them in HTML / CSS)
30. webcredible > customer experience design 30 Prototyping Design in more detail how people will interact • Prototypes translate your sketches into a more detailed mock up of how functionality and interactions will work to allow: – User testing with realistic stimulus of: • Layouts • Labelling • Usability – Communication to developers about how things work • To fully deliver your prototypes for handover: – Use screen flows and site maps to communicate how pages fit together – Annotate or work closely with developers to ensure understanding http://ux.stackexchange.com/questions/831/which-prototyping-tools
31. webcredible > customer experience design 31 User testing Remember: remain a neutral interviewer Test your prototypes Invite your colleagues and clients Record the sessions
32. webcredible > customer experience design 32 User testing Evaluate your designs • User testing your sketches or prototypes (at any stage during the design phase) will aim to: – Identify what users do and don’t like about the UX of what you’re designing and: • Prioritise which features and functionality to include, or what may be missing • Improve the usability of features and functionality you know must be included • User testing will ideally: – Involve at least 5 to 6 users representative of your target audience (or personas) – Be performed earlier on in the design process – Where possible attended by developers, clients or stakeholders to see what their users think http://uxdesign.smashingmagazine.com/2011/10/20/comprehensive-review-usability- user-experience-testing-tools/
33. webcredible > customer experience design 33 Visual design Remember: style-sheets and interaction pattern definitions will communicate entire designs without having to design every last page or interaction Indicates in full detail: • Graphic styles • Fonts • Iconography • Images
34. webcredible > customer experience design 34 Visual design • Visual design greatly influences the UX through: – Careful consideration of how to make aesthetically appealing the ‘touch-points’ and interfaces users will interact with – Appealing to people at a more emotional level – Communicating the meaning or purpose (affordance) of interactions and functionality e.g. skeuomorphism vs. flat design • Visual design for the web commonly: – Is performed using standard graphic design software packages e.g. photoshop – Includes design of more interactive or animated elements Design the look and feel http://uxmag.com/articles/does-skeuomorphic-design-matter
35. creating people-centred, efficient & delightful digital experiences since 2003