O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Brightfind world usability day 2016 full deck final

Próximos SlideShares
Intranet Usability Testing
Intranet Usability Testing
Carregando em…3

Confira estes a seguir

1 de 96 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Brightfind world usability day 2016 full deck final (20)


Mais recentes (20)

Brightfind world usability day 2016 full deck final

  1. 1. Quantitative Meets Qualitative
  2. 2. Quantitative Meets Qualitative Dr. Nichole Carelock Manager User Insights, PenFed Credit Union
  3. 3. The Case of the Disappearing Data  The Problem: A blended learning math platform for the State of Ohio was losing an alarming amount of student data everyday.  Quantitative data told us we had 97% (compulsory) engagement but only a 63% data transfer from day to day.  Qualitative data told us our Log in page was enticing ESL and non readers to sign in as Guest. • Which dumped their data at the end of each session.
  4. 4. UX Methods are Categorized in Two Ways:  Quantitative methodology is defined as producing numerical data which can be expressed as stats, percentages, etc.  Qualitative methodology on the other hand, is concerned with collecting textual (word) data which is used to identify themes and patterns.
  5. 5. Compare QUANTITATIVE QUALITATIVE Measuring things Describing things Numbers Natural description Fixed state Negotiable state Language of statistical analysis Natural language of participants Formulation of facts Helps develop ideas Closed questions in surveys Open questions in surveys A/B Tests Interviews Web analytics Voice of customers tools
  6. 6. Benefits and Drawbacks QUANTITATIVE QUALITATIVE PRO PRO Make data-driven business decisions Brings numerical data to life Great at convincing to Stakeholders Great to plan or develop design strategy CON CON Numbers require interpretation Time consuming- expensive Easy to draw wrong conclusion Non-Automated Free or Inexpensive tools Free or Inexpensive Tools Facebook insights, Clicktale 4Q by iPerceptions Remote, asynchronous focus grouping (google Facebook) Kiss insights, Optimizly Usertesting.com, GuerillaTesting (friends and family)
  7. 7. Quantitative Research → Qualitative Research  Helps explain why certain things happen after you discover them through statistical analysis.
  8. 8. Qualitative Research → Quantitative Research  This order allows you to uncover trends and/or preferences from individuals and then support these claims on larger samples.
  9. 9. Quantitative and Qualitative Research Simultaneously  One simple way to obtain both types of data is to send a survey with closed and open questions.  The closed surveys will give you statistical results, while open ended surveys provide you with descriptive answers from users.  The two methods work together  Sky and Water MC Escher
  10. 10. Using Mixed Methods to get Results  There are several steps involved in identifying the right research method or combination of methods. • Understand the problem. • Define the research questions. • Identify the data that will answer those questions. • Select the research methods that will provide the necessary data.
  11. 11. Understand The Real Problem  Fake Problem: “We get too many calls to the call center that people should be using the website to fix”  Real Problem: Information is organized poorly or the site and the FAQ’s are anything but.  How would we find that out?
  12. 12. Define the Research Goals Correctly  Poor Research Question: “Do Users like the message boards”  Good research question: “Are message boards the best way of meeting the organization’s objectives”  How would we find that out?
  13. 13. Identify the Data that Will Answer Those Questions.  Do you need to understand what people actually do or what their opinions are?
  14. 14. Select the Research Methods that will Provide the Necessary Data.
  15. 15. Definitions: UX Methods  Usability-Lab Studies: participants are brought into a lab, one-on-one with a researcher, and given a set of scenarios that lead to tasks and usage of specific interest within a product or service.  Ethnographic Field Studies: researchers meet with and study participants in their natural environment, where they would most likely encounter the product or service in question.  Participatory Design: participants are given design elements or creative materials in order to construct their ideal experience in a concrete way that expresses what matters to them most and why.  Focus Groups: groups of 3-12 participants are lead through a discussion about a set of topics, giving verbal and written feedback through discussion and exercises.  A/B Testing (also known as “multivariate testing,” “live testing,” or “bucket testing”): a method of scientifically testing different designs on a site by randomly assigning groups of users to interact with each of the different designs and measuring the effect of these assignments on user behavior.  True-Intent Studies: a method that asks random site visitors what their goal or intention is upon entering the site, measures their subsequent behavior, and asks whether they were successful in achieving their goal upon exiting the site.  Interviews: a researcher meets with participants one-on- one to discuss in depth what the participant thinks about the topic in question.  Eyetracking: an eyetracking device is configured to precisely measure where participants look as they perform tasks or interact naturally with websites, applications, physical products, or environments.  Usability Benchmarking: tightly scripted usability studies are performed with several participants, using precise and predetermined measures of performance.  Unmoderated Remote Panel Studies: a panel of trained participants who have video recording and data collection software installed on their own personal devices uses a website or product while thinking aloud, having their experience recorded for immediate playback and analysis by the researcher or company.  Clickstream Analysis: analyzing the record of screens or pages that users clicks on and sees, as they use a site or software product; it requires the site to be instrumented properly or the application to have telemetry data collection enabled.  Intercept Surveys: a survey that is triggered during the use of a site or application.  Email Surveys: a survey in which participants are recruited from an email message.
  16. 16. Activity  Scenario:  You are an entrepreneur, developer and designer looking to make a breakthrough medical app for the Cystic Fibrosis Community.  In groups of 4 or 5, take 7 minutes to read the information from Packet 1  What type of app do you have in mind?  Take an additional 7 minutes to read the information from packet 2.  What type of App do you have in mind now? Did it change and why?
  17. 17. Conclusion  Using the right data in the right combination is crucial to creating the experience you want your user to have.
  18. 18. A Website For Everyone Vencer Cotton Senor Director of Technology, Columbia Lighthouse for the Blind Nina Amato Senior UX Designer, Brightfind
  19. 19. Find the fail
  20. 20. Find the fail
  21. 21. Find the fail
  22. 22. Find the fail
  23. 23. It’s cheaper to build a ramp into the design than to rip out the stairs and add the ramp later.
  24. 24. Color Contrast
  25. 25. Color Contrast for Text
  26. 26. Color Contrast for Text
  27. 27. Color Contrast for Text
  28. 28. Color Contrast for Text  Text color must have sufficient contrast compared to it’s background.  Text requires a contrast ratio of 4.5:1 for normal text (<18px) and 3:1 for large text (>24px).  You can check the color contrast of text to its background by entering the color codes in a contrast checker such as the one at: • http://webaim.org/resources/contrastchecker/
  29. 29. Web Accessibility
  30. 30. Color Blindness
  31. 31. Color Blindness 8% of men and 0.5% of women with Northern European ancestry are red-green color blind1 1NIH National Eye Institute, https://nei.nih.gov/health/color_blindness/facts_about
  32. 32. Color Blindness
  33. 33. Color Blindness
  34. 34. Color Blindness
  35. 35. Color Blindness
  36. 36. Color Blindness  View graphics/websites as a color blind user: • Adobe Photoshop or Illustrator [View > Proof Setup > Color Blindness (Deuteranopia for red/green color blindness)] • Chrome plugin: Spectrum https://chrome.google.com/webstore/detail/spectrum/of clemegkcmilinpcimpjkfhjfgmhieb?hl=en
  37. 37. Skip Navigation
  38. 38. Skip Navigation
  39. 39. Skip Navigation  WebAIM’s 2015 survey of screen reader users1 asked participants if they utilized “skip navigation” links. Respondents answered: 18.3% - Whenever they're available 19.5% - Often 30.2% - Sometimes 17.7% - Seldom 14.3% - Never 68% use skip nav functionality at least sometimes 1http://webaim.org/projects/screenreadersurvey6/
  40. 40. Mobile
  41. 41. Buttons on Mobile 82% of blind users reported using a screen reader on their mobile device in 2014.1 1 http://webaim.org/projects/screenreadersurvey5/#mobileusage
  42. 42. Buttons on Mobile “When some developers design their apps, they don’t label all of their buttons and controls, so the screen reader just says, ‘This is a button,’ but it doesn’t say what the button actually does,” Mr. Perez said. “That’s an area where we need a lot of improvement.” http://bits.blogs.nytimes.com/2013/09/29/disruptions-guided-by-touch- screens-blind-turn-to-smartphones-for-sight/?_r=0
  43. 43. Testing for Accessibility
  44. 44. Testing for Accessibility  W3C Web Accessibility Evaluation Tools List: https://www.w3.org/WAI/ER/tools/  NVDA is a free screen reader for Windows (they request a donation) • http://www.nvaccess.org/
  45. 45. Testing for Accessibility AInspector Sidebar [for Firefox] https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/
  46. 46. Testing for Accessibility Accessibility Developer Tools [for Chrome] https://chrome.google.com/webstore/detail/accessibility-developer- t/fpkknkljclfencbdbgkenhalefipecmb
  47. 47. Testing for Accessibility ARIA Validator [for Chrome] chrome-extension://oigghlanfjgnkcndchmnlnmaojahnjoc/summary.html
  48. 48. Testing for Accessibility  WAVE browser plugin • https://wave.webaim.org/toolbar/ • https://chrome.google.com/webstore/detail/wa ve-evaluation- tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en- US
  49. 49. Testing for Accessibility
  50. 50. Testing for Accessibility  Navigate every web page using the keyboard only. • Navigate with these keys: o Tab (forwards) o Shift + Tab (backwards) o Space bar (sometimes used to select and unselect checkboxes) o Arrow keys o Enter key  Test that all links get visual focus (an outline) when they are tabbed to, so that users who do not use a mouse know they successfully landed on a link.
  51. 51. Testing for Accessibility  Check that all data tables have proper structure: • THEAD • TBODY • TFOOT • Scope=“col” • Scope=“row”  Check color contrast of text against background color • http://webaim.org/resources/contrastchecker/
  52. 52. Testing for Accessibility  Check for ARIA tags  View websites with styles disabled • Web Developer Toolbar for Chrome and Firefox o https://chrome.google.com/webstore/detail/web- developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US
  53. 53. Open Discussion & Questions
  54. 54. 30 Ideas in 30 Minutes Nichole Carelock, Manager User Insights, PenFed Credit Union Nina Amato, Senior UX Designer, Brightfind Megan McKelvy, VP Customer Engagement Brightfind, Brightfind Elizabeth Greenstein, UX Designer, Brightfind
  55. 55. Tip 1 Push for research first, or you’ll be chasing finished products that no one is interested in changing. NC
  56. 56. Tip 2 Don’t use the same text in both alt attributes and title attributes. NA
  57. 57. Tip 3 Challenge your personas. MM
  58. 58. Tip 4 Design for fingers and thumbs. EG
  59. 59. Tip 5 Hone in on key users that can give you the most for your time. NC
  60. 60. Tip 6 Data tables will be read aloud by screen readers differently depending on how they are coded. •Add the attributes scope=“col” and scope=“row” to your header cells. NA
  61. 61. Tip 7 UAT testing is not usability testing. MM
  62. 62. Tip 8 Make a persona on a Post-It in 5 minutes or less. EG
  63. 63. Tip 9 Don’t wait until something is broken to address a potential problem. NC
  64. 64. Tip 10 Add ARIA-Live and ARIA- Atomic to areas of a page that update without the browser reloading. NA
  65. 65. Tip 11 Respect your users’ moods. MM
  66. 66. Tip 12 It’s impossible to imagine all the edge cases, so be a good listener when your users give you feedback. EG
  67. 67. Tip 13 Incentivize your research participation wherever possible. NC
  68. 68. Tip 14 Sitemaps are helpful for users with cognitive delays. NA
  69. 69. Tip 15 Start small; go free. MM
  70. 70. Tip 16 Avoid putting important content or calls-to-action in the right rail. EG
  71. 71. Tip 17 Make sure you’re fixing a root not a symptom. NC
  72. 72. Tip 18 Navigate every web product you produce with the keyboard only. NA
  73. 73. Tip 19 Go to your users. MM
  74. 74. Tip 20 Make mega-menus clearly narrower than the page width. EG
  75. 75. Tip 21 Be ready to fight for time to do adequate research. Get your elevator speech ready! NC
  76. 76. Tip 22 PDFs need to be made accessible too. This often takes longer than HTML. NA
  77. 77. Tip 23 When in doubt, ask. MM
  78. 78. Tip 24 Avoid using carousels or sliders. EG
  79. 79. Tip 25 Create an email list of beta testers; send them surveys and new features. NC
  80. 80. Tip 26 Add visual focus around links. NA
  81. 81. Tip 27 Refine, don’t redesign. MM
  82. 82. Tip 28 Embrace scrolling on websites; use visual cues to indicate that more content is available. EG
  83. 83. Tip 29 Don’t be restricted by time and space to find participants. Google groups and Facebook groups are focus groups. NC
  84. 84. Tip 30 Use the label tag for form labels. NA
  85. 85. But wait, there’s more!
  86. 86. Tip 31 Use contextual links. MM
  87. 87. Tip 32 Optimize your website to improve your users’ perception of its speed. EG
  88. 88. Tip 33 Think of your assumptions about the site as hypotheses. This will make them easier to part with in testing. NC
  89. 89. Tip 34 Required form fields need aria-required="true". NA
  90. 90. Tip 35 Understand that some people search, some people navigate. MM
  91. 91. Tip 36 Avoid using hamburger menus on desktop views. EG
  92. 92. Tip 37 The order of data collection matters. EG
  93. 93. Tip 38 Use ARIA landmark roles to mark page elements such as navigation and main content. NA
  94. 94. Tip 39 Take a class in web writing. MM
  95. 95. Tip 40 Align form labels and fields in a single vertical line so users may easily scan them. EG

Notas do Editor

  • I’d like to play a game called: Find the Fail. Does anyone see what is wrong here?

    We are looking at a photo of a garden-style office building. The view is from the parking lot, which has a priority parking space for wheelchairs. Yet something is wrong with this picture. What is it?

    source: https://s-media-cache-ak0.pinimg.com/originals/58/ed/cb/58edcb5d60b9d371f715ab533b34e04f.jpg
  • And here?
    We are looking at a photo of public restroom stall. It is wheelchair accessible. Yet something is wrong here. What is it?

    source: https://www.pinterest.com/pin/86061042858434673/
  • This could hurt, huh? https://brailleworks.com/wp-content/uploads/2014/04/Braille-Fail-10.jpg
  • These failures are the result of a lack of empathy. Someone was told that they had to put a ramp by the door, but they didn’t stop and think about how that ramp would be used. I see similar mistakes in web development all the time. Developers know that they need to put certain things in their code to make it accessible or 508 compliant, but they don’t always have a clear picture of how these codes will be used.

    Source: http://canbc.org/blog/wp-content/uploads/2014/11/11.jpg
  • This photo represents the biggest mistake in web accessibility. What went wrong here? How did this building end up with a wheelchair priority parking spot, with an icon of wheelchair on it, but without a RAMP for a wheelchair? You may wonder, how does this happen? 

    I don’t know where this building is, but I’m pretty sure I know what went wrong here. And the reason I know that, is because I’ve seen this same problem with websites for years. And that problem is saving accessibility for the QA process. You don’t want to do that. And here’s why. Look at this photo again. Imagine that you funded the construction of this building. And at the end you bring in your ADA tester, and she says you need to rip out those stairs and build a ramp. But that ramp is going to be too steep, so you need to level the ground first. So you need to pretty much dig up all the whole front here, and start over. And if you don’t have elevators in that building, you’re going to rip out some stairs and add them. That’s not the best way to spend your budget, right? It would have been better to plan for wheelchair access from the beginning, before you started construction.

    You need to do the same thing with web design. And that’s because accessibility is much more than adding alt tags to images. If your website loads a pop up or a modal window, there’s a good chance it’s not accessible. It’s a poor usability practice, and it’s annoying to everyone, but it’s particularly problematic to your audience who is using a screen reader. They may not be able to easily close the popup, especially if the close icon is missing or not coded properly. I have a link to a video here showing a screen reader user struggling to close a pop up modal.
    https://www.youtube.com/watch?v=lrXDulundpE#action=share (story about this: https://motherboard.vice.com/read/you-think-popup-ads-are-bad-theyre-even-worse-for-the-blind). So now let’s say you’re using a popup to get people to sign up for your mailing list or your newsletter, but I tell you that it’s not accessible, now what? You need to rethink how you’re going to advertise your mailing list. A cake layer with a value proposition and a call to action will be much better. As will a prominent Call To Action in your utility navigation. Both of those options are much better for both accessibility and usability than a pop up modal window. 

    source: https://s-media-cache-ak0.pinimg.com/originals/58/ed/cb/58edcb5d60b9d371f715ab533b34e04f.jpg
  • Accessibility is not just for people who are blind. Accessibility guidelines, for example the WCAG 2.0 guidelines, benefit people with physical challenges who cannot use a mouse. They help older members of audience who may struggle to read text that is too small or too light. Phyllis’ husband had a stroke. She is looking online for therapy options and for other information about how she can help her husband. She searches Google for occupational therapists and she finds a website listing them. But when she links to the website, she can’t read it. The text is too small and the font color is too light.
  • 2015 football game between the Jets and the Bills
  • 2015 football game between the Jets and the Bills. This is how color blind people see the game. It’s a little hard to tell the uniforms apart.
  • I’d like you to imagine that you have a 10 year old son named Jackson. Jackson is in 5th grade and he is learning how to conduct research on the web. One day his teacher gives his class a test. One of the questions on that test is to go a specific website and find this pie chart, and put the approximate values for fruit and vegetables on his exam. His classmates are all easily reading this, estimating that fruit comprises about 75-80% of the chart. They see the pie chart on the left. But Jackson is color blind. When Jackson looks at this, he sees the pie chart on the right which is pretty much just a green circle. Jackson comes home crying because he failed the test. How do you feel about that?

    Now imaging that Jackson wasn’t your son, but that this pie chart was on your website. I don’t think any of us want this on our websites.
  • The most important improvement we made here is listing the text values along with the graph. Listing the data values separately from the graphic is required for accessibility and for 508 compliance, and it is also improves the usability for everyone. It’s hard to gauge that the pie chart is split into 20% and 80% slices. Can you really tell from looking if that smaller slice is 20% or if it is 75%? Listing the value makes it clear to everyone.
    It’s helpful to add a border (white or black) to separate two adjacent colors in graphs. We alternated the saturation of the two colors help differentiate the contrast of both slices.
  • This quote is in reference to mobile phones.
  • This quote is in reference to mobile phones.