{"version":3,"sources":["webpack:///./src/components/usability-testing/banner/styled.js","webpack:///./src/components/usability-testing/banner/index.js","webpack:///./src/pages/usability-testing/usability-reporting.js","webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/helpers/transformImages.js"],"names":["Banner","styled","div","media","mobile","title","desc","style","className","signUp","secondary","center","sourceID","defaultProps","undefined","withUsabilityTestingTemplate","edges","useStaticQuery","allFile","images","transformImages","href","target","rel","fluid","paper","node","childImageSharp","alt","searching","dashboard","portfolio","laptop","src","arrow","module","exports","list","res","el","name"],"mappings":"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","file":"component---src-pages-usability-testing-usability-reporting-js-53c6afc56f089c3488cd.js","sourcesContent":["import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Banner = styled.div`\n width: 100%;\n padding: 64px 73px;\n text-align: center;\n background: #f8f8f8;\n border-radius: 4px;\n margin: 80px 0;\n ${media.mobile} {\n padding: 24px 16px;\n margin: 40px 0;\n }\n & .banner-title {\n font-size: 36px;\n line-height: 45px;\n margin-bottom: 24px;\n margin-top: 0;\n font-weight: 800;\n }\n & p {\n margin-bottom: 40px;\n }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from 'components/ui/button';\nimport * as Styled from './styled';\n\nconst Banner = ({ title, desc, style }) => {\n return (\n \n

{title || `Improve usability testing with LiveSession`}

\n

{desc || 'Test all LiveSession features for 14 days, no credit card required.'}

\n \n
\n );\n};\n\nexport default Banner;\n\nBanner.propTypes = {\n title: PropTypes.string.isRequired,\n desc: PropTypes.string,\n style: PropTypes.oneOfType([PropTypes.object]),\n};\n\nBanner.defaultProps = {\n desc: undefined,\n style: undefined,\n};\n","import React from 'react';\nimport withUsabilityTestingTemplate from 'hoc/content-cluster';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport Img from 'gatsby-image';\nimport Link from 'components/ui/link';\nimport arrow from 'img/ui/arrow_white.svg';\nimport { transformImages } from 'helpers/transformImages';\nimport Banner from 'components/usability-testing/banner';\n\nconst UsabilityReporting = () => {\n const {\n allFile: { edges },\n } = useStaticQuery(graphql`\n query UsabilityReportingPhotos {\n allFile(\n filter: {\n extension: { regex: \"/(jpg)|(jpeg)|(png)/\" }\n relativeDirectory: { eq: \"usability-testing/usability-reporting\" }\n }\n ) {\n edges {\n node {\n name\n childImageSharp {\n fluid(quality: 95) {\n ...GatsbyImageSharpFluid_withWebp\n }\n }\n }\n }\n }\n }\n `);\n const images = transformImages(edges);\n return (\n <>\n

What Is a Usability Testing Report and What Should It Include

\n

\n Let’s assume you have just conducted a usability test on your product and are now wondering\n – how should I analyze the results? The answer lies in creating a report which is the\n by-product of your{' '}\n \n usability testing\n \n . Usability testing and reporting go hand in hand – you cannot conduct great usability\n testing without efficient reporting of your findings. While usability testing is conducted\n to discover valuable insights directly from the end-users, a usability report is a summary\n of the findings.\n

\n

\n It’s a document prepared after evaluating the qualitative and quantitative data gathered\n during a usability test, which offers findings and recommendations that help in improving\n your product’s UX.\n

\n

\n Now that we know the definition of a usability report, let’s talk about what every report\n should include.\n

\n

What to Include in Your Report

\n

\n A usability testing report covers several{' '}\n \n variables\n \n . Here are some factors to include in your report:\n

\n

Background summary

\n

\n The background summary should explain the main reasons for conducting the test and define\n which products were tested (websites, mobile apps, etc.). It should also offer information\n on the test participants, testing location, and timestamps of when the study was conducted.\n A brief outline of all the steps taken to perform the test, the type of testing material\n used, and any observed setbacks should all be noted in the background summary.\n

\n

Methodology

\n

\n Whether you employ session recordings or offer head-to-head testing, it is always worth\n including how the usability test was conducted. Also, mention the types of questions and\n whether all four –{' '}\n \n screening, pre-test, in-test, and post-test questions\n {' '}\n – were handed out to the participants.\n

\n

Audience

\n

\n Describe your participants, their demographics, and why they were recruited in the first\n place. Providing a summary of their demographics e.g. age, profession, sites visited, and\n internet usage is fine, but you should refrain from using full names due to privacy\n concerns.\n

\n \"Audience\"\n

Test results

\n

\n Test results are the key ingredients of a usability report. In your report, you should\n create a table, which features a summary of the task completion rates, number of\n participants, types of assignments, and other data.\n

\n

Findings and recommendations

\n

\n Make a list of all your findings and recommendations. These should be real findings that you\n observed, and not merely assumed. Also, you can either make one overall list of your\n findings or have them segmented by scenarios.\n

\n

Executive summary of the usability testing

\n

\n Placing an executive summary at the top of your report will help instantly onboard anyone\n who comes across your report in the future.\n

\n

\n With all of the above in mind, let’s now take a look at the key metrics your report should\n include.\n

\n

What Usability Metrics Should You Focus On

\n

\n Usability metrics are the standards of measurements and come in handy when you are trying to\n gauge the efficacy of a product. Without them, it would be virtually impossible to create a\n testing report. Here are some of the most important metrics to include in your reports:\n

\n

Success rate

\n

\n Per the Nielsen Norman Group, the success rate is the\n \n {' '}\n simplest usability metric\n \n . It is usually defined by the percentage of tasks that users completed successfully. User\n success gives insight into how well your product resonates with the end-users, and is the\n main reason why a usability test is conducted in the first place. The higher the percentage\n of completed tasks by the users, the higher the chances of your product’s popularity.\n

\n

The number of errors

\n

\n Listing{' '}\n \n the average number of times\n {' '}\n an error occurred when a user was performing a given task is a good metric to focus on.\n Errors can be accidental where the user makes a typo, picks the wrong reservation dates for\n a flight, clicks on the wrong image, etc. Albeit the fact that there cannot be a completely\n perfect outcome with an interactive test, listing the average number of errors does point\n you in the right direction for diagnostic purposes. Scoring each error with a severity level\n and short description is also a good idea in understanding the functionality of your tested\n product.\n

\n

Time-based efficiency

\n

\n This is a key metric to list in your report as it gauges the amount of time it takes for a\n user to complete a certain task or use a certain feature. This, in turn, measures the\n efficiency of your product. The less time a user spends performing a task, the higher the\n effectiveness of your solution.\n

\n

User’s subjective satisfaction

\n

\n This includes the subjective thoughts of your participants regarding their level of comfort,\n behavior, and acceptability of product usage. This metric can be measured on either a\n quantitative or a qualitative scale to extract insights for your report.\n

\n

\n For usability testing to be successful, your findings must be clear and up to the point. Let\n us now look at a few tips to make sure your reports follow this mantra.\n

\n \n

6 Tips to Usability Reporting

\n

\n The following tips will be useful for everyone on your team in identifying the key problems\n with your product and providing resolutions:\n

\n
    \n
  1. \n Include visuals\n

    \n We recommend that you include{' '}\n \n visuals\n {' '}\n in the reports. Most people have a short attention span and keeping them engaged with\n long text descriptions can be really hard. Instead, providing annotated screenshots or,\n better yet, video clips from your session recordings, will deliver a greater impact.\n

    \n
  2. \n\n
  3. \n Keep it short\n

    \n No one likes to read pages and pages of formal documents. Keeping your reports concise,\n to the point, and avoiding technicalities is the key to getting the desired outcome.\n

    \n
  4. \n\n
  5. \n Prioritize usability issues\n

    \n Avoid discussing every single issue that was encountered during the test. It is also a\n good idea to assign priorities to your issues when compiling them in the report. This\n way the higher priority issues are looked at first to ensure a reduction in production\n backlog.\n

    \n
  6. \n\n
  7. \n Use what you learned\n

    \n It is important to take away constructive insights from your report and put them to good\n use. Implementing the findings into positive solutions will result in a much better UX.\n

    \n
  8. \n\n
  9. \n Take advantage of quotes\n

    \n To make your reports more credible, try to incorporate user quotes. Adding direct quotes\n from the participants clarifies the user viewpoint and makes your reports powerful. They\n also add character to your report and keep its readers engaged.\n

    \n
  10. \n
  11. \n Remember about the next steps\n

    \n Always summarize your report with the proposed next steps. Having a solid plan of action\n to improve your product will enhance your report. Propose discussions and presentations\n that you should organize in the future based on the report findings. This will not only\n promote teamwork but will also pave the way for product optimization.\n

    \n
  12. \n
\n

\n Once you are armed with the above-mentioned great tips, try investing in a tool that can\n compile and organize your data in the best way possible.\n

\n \n

Three Tools That Help with Usability Reporting

\n

\n Do you want your readers to understand the findings in your report easily? How about keeping\n them engaged from start to finish? In order to do so, we recommend that you invest in a\n professional reporting tool. Here are the top three tools you should consider for your\n usability reporting:\n

\n

Google Data Studio

\n

\n \n Google Data Studio\n {' '}\n is Google’s proprietary built-in visualization tool, which is free to use. It displays your\n quantitative findings by importing a .xls or a .csv file from your Google Sheets. The best\n part is that it is completely synchronized with your files. Every time your source files are\n changed, all data on Google Studio gets updated as well.\n

\n \n

\n Source:{' '}\n \n Google Data Studio\n \n

\n

Xtensio

\n

\n This tool allows a collaborative approach. You can edit and work on your data live along\n with your team members. It also offers a\n \n {' '}\n library of templates\n \n , that let you design an instant and visually-appealing usability report.\n

\n \n

\n Source:{' '}\n \n Xtensio\n \n

\n

Chartblocks

\n

\n Chartblocks comes in handy when you are dealing with time constraints. It also makes it easy\n to merge and import data from multiple sources and create usability\n \n {' '}\n charts\n \n .\n

\n \n

\n Source:{' '}\n \n Chartblocks\n \n

\n

Summary

\n

Let’s peek into the key findings that were discussed in this article:

\n
    \n
  • \n Usability testing and usability reporting go hand in hand – you cannot conduct great\n usability testing without providing efficient reporting.\n
  • \n\n
  • \n A usability test report is a document that is prepared after evaluating the qualitative\n and quantitative data gathered during a usability test. It offers findings and\n recommendations that eventually help in improving your product’s UX.{' '}\n
  • \n\n
  • \n A usability report should include metrics like background summary, methodology, audience,\n test results, findings and recommendations, and an executive summary of the underlying\n usability test.\n
  • \n\n
  • \n Main metrics to focus on when creating a usability report: success rates, number of\n errors, time-based efficiency, and user’s subjective satisfaction.{' '}\n
  • \n\n
  • \n Various tips for creating a usability report: including visuals, keeping the report\n concise, prioritizing usability issues, using what you learned, taking advantage of direct\n user quotes, and crafting your next steps.{' '}\n
  • \n\n
  • \n The three top tools that greatly help with usability reporting include{' '}\n Google Data Studio, Xtensio, and Chartblocks.\n
  • \n
\n

\n To sum up, your product is part of your brand identity and should not be compromised.\n Conducting usability testing and writing great usability reports is a sure-shot way of\n improving your product, tweaking the weak spots, and reaching your target audience with a\n stronger, better-crafted offer.\n

\n
\n \n
\n

Chapter 4

\n

9 Usability Testing Tools You Need To Optimize Your UX

\n
\n \"arrow\"\n \n
\n \n );\n};\n\nexport default withUsabilityTestingTemplate(UsabilityReporting);\n","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTMuNUgxOC4yMjRMOS44MjQwMSAyMS45TDEyIDI0TDI0IDEyTDEyIDBMOS44OTk5OSAyLjEwMDAxTDE4LjIyNCAxMC41SDBWMTMuNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"","/* eslint-disable no-restricted-syntax */\n/* eslint-disable guard-for-in */\nexport const transformImages = (list) => {\n const res = [];\n for (const el of list) {\n res[el.node.name] = el;\n }\n return res;\n};\n"],"sourceRoot":""}