Download as PDF, PPTX
![A better way
Learn sooner
Save time
Reduce risk
Launch
Learn Learn Learn
[1]](https://image.slidesharecdn.com/v1-practicalusability-v-170128213921/75/Practical-Usability-12-2048.jpg)
![A better way
Learn sooner
Save time
Reduce risk
Launch
Learn Learn Learn
[1]](https://crownmelresort.com/image.slidesharecdn.com/v1-practicalusability-v-170128213921/75/Practical-Usability-12-2048.jpg)
Uploaded byKarolina Coates
Practical Usability
The document provides an overview of usability and how to achieve great usability in projects. It discusses what usability is, including definitions. It outlines a recipe for great usability including knowing your user, keeping things simple, guiding the user and providing feedback. When unsure what to do, it recommends usability testing with users. It discusses incorporating usability into agile projects, with usability work done in parallel sprints. Key takeaways are that usability requires planning and testing with users, and small, frequent tests are effective.
More Related Content
![Laminated_Springs[1]. Machine design practice](https://cdn.slidesharecdn.com/ss_thumbnails/laminatedsprings1-251116120255-2a3c06fb-thumbnail.jpg?width=640&height=640&fit=bounds)
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
Practical Usability
- 1.
- 2. Agenda (or what toexpect) 1. What is usability? 2. Recipe for great usability Know your user Keep It Simple S.. (KISS) Guide the user and be forgiving 3. What to do when you don’t know what to do 4. Q&A Image credit: xkcd http://xkcd.com/970/
- 3. Who am I? KarolinaCoates UX Consultant Afraid of monkeys Follow me: @KarolinaCoates
- 4. What is usability Video:User’s reaction to Windows 8: https://www.youtube.com/watch?v=v4boTbv9_nU
- 5. What is usability? Imagecredit: Luminis (http://www.luminis.eu/en/expertise/user-experience-design-2/)
- 6. What is usability? “The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. Definition of usability (ISO 9241-11):
- 7. HCI, IA, UI,UX, Usability? Image credit: Kicker Studio
- 8. What usability isNOT #1 Usability = making things pretty People generally perceive that an attractive product is easier to use. An attractive design builds trust – don’t backstab trust with bad usability! #2 Usability is an extra #3 ‘Let’s call usability person to fix things’
- 9. ‘Let’s call usabilityperson to fix things’ Launch Houston we have a problem... Learn
- 10. No problem, here’swhat you need to do... Image credit: NASA (A long scroll of data from Venus, seen in front of JPL's Mariner 2 mission board)
- 11. ..off you go! Imagecredit: D. Alan Harris Photography
- 12. A better way Learnsooner Save time Reduce risk Launch Learn Learn Learn [1]
- 13. What is usability? Definitionof usability (Karolina): Give the users a tool to do what they need to do in an easy, intuitive way, without unnecessary obstructions. + =
- 14. What is usability? Usabilityis about risk management
- 15.
- 16. Recipe for greatusability BUSINESS Strategy, people, process, organization TECHNICAL Application architecture, code, back-end, infrastructure USER End user / customer needs, front-end design, content architecture, interaction Collaboration
- 17. Recipe for greatusability LOGO Online Service B1 Home | Online Service A | Online Service B | Contact Us Online Service B2 Page Title Page content, page content, page content News 25/09/2014 News Item 1 25/09/2014 News Item 2 25/09/2014 News Item 3, this one has a really long title Category 1 Page content , page content , page content , page content , page content , page content , page content , page content Category 2 Page content , page content , page content , page content , page content , page content , page content , page content Featured Link 1 Featured Link 2 Home | Online Service A | Online Service A2 | Contact Us
- 18. Recipe for greatusability BUSINESS Strategy, people, process, organization TECHNICAL Application architecture, code, back-end, infrastructure USER End user / customer wants and needs, front-end design & content, content architecture, interaction Collaboration Image credit: Rovio
- 19. Recipe for greatusability – what happens if.. Collaboration TECHNICAL Application architecture, code, back-end, infrastructure Image credit: Rovio
- 20.
- 21. Who is youruser? What are the user groups ? Image credit: Neal @flickr - http://www.flickr.com/photos/31878512@N06/4596278442/ Know your user
- 22. Know your user Whatdo YOU want the user to do?
- 23. Know your user Whatthe USER wants to do?
- 24. Know your user Whatis the CONTEXT?
- 25. Know your user Focuson TASKS not actions. Use the language that is familiar to the user, not organization. ‘As a (user)… I want to… so that…’ Image credit: Web Usability on a Budget by timgthomas Organization says: User says:
- 26. Keep It SimpleStupid Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. Antoine de Saint-Exupery ..but why?
- 27.
- 28. Laws of Simplicity 1.Reduce thoughtfully 2. Organise (SLIP) 3. Hide 4. Emphasize what's important 5. Deemphasize what's less important
- 29. Simplicity 1. Reduce thoughtfully Howmuch is too much?
- 30. How much istoo much? It depends… Image credit: jbgeronimi @flickr - http://www.flickr.com/photos/jbgeronimi/6363087361/
- 31. It depends… How muchis too much? Image credit: quinn.anya @flickr - http://www.flickr.com/photos/quinnanya/3286023692/
- 32. Simplicity 1. Reduce thoughtfully Identify what is critical for task / page Question everything else No ranting Omit needless words Half the word count (or less) than conventional writing Language appropriate for audience, e.g. no legal / technical talk*
- 33.
- 34.
- 35. Simplicity 2. Organise (SLIP) Sort,Label, Integrate & Prioritise: group related items, mark groups with clear headers, use headers to show visual hierarchy, add whitespace between groups, use patterns >> ?
- 36. Simplicity 2. Organise (SLIP) Sort,Label, Integrate & Prioritise: group related items, mark groups with clear headers, use headers to show visual hierarchy, add whitespace between groups
- 37. Simplicity 3. Hide .. whatyou don't need immediately (progressive disclosure) Conditional content
- 38. Simplicity 4. Emphasize what'simportant (hierarchy) Image credit: Web Accessiblity Initiative
- 39. Simplicity 4. Emphasize what'simportant (hierarchy) <h1> <h2> <h3>
- 40. Simplicity 4. Emphasize what'simportant Image credit: Web Usability on a Budget by timgthomas
- 41. Simplicity 5. Deemphasize what’sless important Image credit: Web Usability on a Budget by timgthomas
- 42. Guide the userand be forgiving Call to action Error prevention Error messages Feedback
- 43. Call to Action Imagecredit: Luke Clum (Distilled.net) Design For People Not For Bots
- 44.
- 45.
- 46.
- 47. Call to Action- what the user sees
- 48. Call to Action& emphasis of what’s important
- 49.
- 50. Error prevention Required fields Defaultvalues Masking Smart enabling Confirm critical or irreversible actions Offer help on demand
- 51. Error prevention –required fields *
- 52. Error prevention –default values Defaults can save lives Image credit: Eric J. Johnson and Daniel Goldstein Do Defaults Save Lives?
- 53. Error prevention -masking Masking
- 54. Error messages Do: Be visible Bespecific Be relevant Use plain language Make is clear what is the source of the error Give a hint how to recover Don’t: Make general / meaningless statements Use technical language / error codes Be negative
- 55. Error messages Make errormessages human-readable
- 56. Feedback Error messages-only approachis not good
- 57.
- 58. Feedback Image credit: BruceTognazzini
- 59. What to do ..whenyou don’t know what to do
- 60. What to dowhen you don’t know what to do Case 1: You know something is wrong but can’t put your finger on it. OR Case 2: You need to prioritise changes / user stories Case 3: You need to validate your screens / changes / assumptions Are we building the right thing? Are we doing it right? Need to make an informed decision
- 61. What to dowhen you don’t know what to do Image credit: mksystem http://www.flickr.com/photos/mksystem/4900610110/ We’re too familiar with our own work to be able to spot where it fails.. - Test with users instead I like clover, preferably in pink
- 62. Usability testing 101 Thisis not about gathering opinions, this is observation • Find your user • Plan & Prepare: create scenarios and tasks, the screen / mockup / wireframe • Instruct the user to do what they would normally do in this scenario and OBSERVE. If you’re the one doing most of the talking, you’re doing it wrong. • Look out for stumbling blocks and opportunities. • Always thank your user • Document & share the results with the team • Iterate
- 63. What to dowhen you don’t know what to do But how about the general public? • Hallway testing • Lab-based usability testing • Remote usability testing • Usability inspection • A/B testing* • Google Analytics*
- 64. Usability testing 101 Imagecredit: NNGroup: http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ Zero users give zero insights
- 65. What to dowhen you don’t know what to do Number of deaths resulting from badly done usability testing: How to do usability testing video: https://www.youtube.com/watch?v=QckIzHC99Xc 0
- 66.
- 67. Usability in projects Research& evaluation What do you actually do? Strategy and Ideation Design Stakeholder Interviews Field Research Expert Reviews Usability Testing Workshops Design Studio (method) Rapid Prototyping Iterative Refinement Information Architecture Interaction Design Visual Design Branding
- 68. Usability in projects GuerrillaUsability If it’s not built in to the project, it won’t happen Image credit: diana MĂRGĂRIT https://www.flickr.com/photos/kaleid/295763937
- 69. Usability in projects Whoseresponsibility is it? Throwing a UX resource at the problem doesn’t work UX Champion Team buy-in & shared responsibility Executive support
- 70. Usability in projects– what is the process? Image credit: Jeff Gothelf, Lean UX
- 71. Usability in projects– where does it fit? Image credit: Ross Unger and Carolyn Chandlerr- ‘Project guiide to UX Design’ Example of a waterfall approach Challenge: Learn early to minimise cost of change
- 72. Usability in projects– where does it fit? Image credit: Ross Unger and Carolyn Chandlerr- ‘Project guiide to UX Design’
- 73. Usability in projects– where does it fit? Image credit: Ross Unger and Carolyn Chandlerr- ‘Project guiide to UX Design’ Example of an agile approach Challenge: Maintain a consistent view of the UI while developing it in short iterative cycles
- 74. Usability in projects AgileDevelopment that Incorporates User Experience Practices UX must work at least one step ahead of the sprint UX work is early, flexible: done up-front to storyboard level with good expectation setting that changes will happen Low-fidelity prototype is the ongoing spec: owned by UX, agreed by stakeholders (communication tool, not a deliverable!) UX work happens in a parallel track: pair complex back-end sprints with UX intensive work Guerrilla style UX validation: fast, discount methods run frequently and regularly on early code
- 75. Usability in projects– where does it fit? Integrating usability with Agile Image credit: Dr. Charles B. Kreitzberg and Ambrose Little http://msdn.microsoft.com/en-us/magazine/dd882523.aspx
- 76. Usability in projects– where does it fit? Example of an agile approach – Project 1 Image credit: John Whalen http://www.slideshare.net/johnwhalen
- 77. Usability in projects– where does it fit? Image credit: John Whalen http://www.slideshare.net/johnwhalen Example of an agile approach – Project 2
- 78. Key takeaways • Goodusability doesn’t happen by accident. • Usability is a mature discipline but there is no one-size-fits-all process • Best practice is well defined – follow it • Help people on the project make informed decisions • You have a choice: enable users’ voice to be heard during project or hear what they say on youtube • Testing with users is crucial, easy and effective • Rinse & repeat – small but often goes a long way
- 80. What to dowhen you don’t know what to do General usability Usability testing The brain lady Good-all round resource Worth following: @UXPA_Int @uxmag @IxDA @KarolinaCoates (me ) UX in projects
- 81. Maturing Usability: Qualityin Software, Interaction and Value, Effie Lai-Chong Law, Ebba Thora Hvannberg, Gilbert Cockton Web Usability on a Budget by Tim G. Thomas: https://speakerdeck.com/timgthomas/web- usability-on-a-budget Laws of Simplicity, John Maeda: http://www.slideshare.net/bright9977/10-laws-of- simplicity Usability testing on 10 cents a day: http://sensible.com/downloads/DMMTchapter09_f or_personal_use_only.pdf Startup Lab workshop: User Research, Quick 'n' Dirty (Google Ventures), Michael Margolis Usability.gov Guidelines: http://guidelines.usability.gov/ UK Government’s Digital Service: https://gds.blog.gov.uk/ GDS is a team leading digital transformation of UK’s government with the goal of making it easy and preferred by people. They share openly their findings for everyone to learn: https://designnotes.blog.gov.uk/ Caroline Jarrett (@cjforms) is one of the leads at GDS and also UX-industry lead. You’ll find plenty of resources on her website: http://www.formsthatwork.com/ Recent findings that help designing better forms: http://www.slideshare.net/UXPA/straub-self- serviceformsuxpa14 Luke Wroblewski’s book: Web Form Design: Filling in the Blanks. References