{"version":3,"sources":["webpack:///./src/components/usability-testing/banner/styled.js","webpack:///./src/components/usability-testing/banner/index.js","webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/pages/usability-testing/website-user-testing.js"],"names":["Banner","styled","div","media","mobile","title","desc","style","className","signUp","secondary","center","sourceID","defaultProps","undefined","module","exports","withUsabilityTestingTemplate","useStaticQuery","pageviews","statsDollar","lsApp","survey","href","rel","target","fluid","childImageSharp","alt","src","arrow"],"mappings":"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","file":"component---src-pages-usability-testing-website-user-testing-js-62c63a5fc05e664a3b5e.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","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTMuNUgxOC4yMjRMOS44MjQwMSAyMS45TDEyIDI0TDI0IDEyTDEyIDBMOS44OTk5OSAyLjEwMDAxTDE4LjIyNCAxMC41SDBWMTMuNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"","import React from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport Link from 'components/ui/link';\nimport withUsabilityTestingTemplate from 'hoc/content-cluster';\nimport Img from 'gatsby-image';\nimport Banner from 'components/usability-testing/banner';\nimport arrow from 'img/ui/arrow_white.svg';\n\nconst WebsiteUserTesting = () => {\n const { pageviews, statsDollar, lsApp, survey } = useStaticQuery(graphql`\n query {\n pageviews: file(\n relativePath: { eq: \"usability-testing/website-user-testing/pageviews.png\" }\n ) {\n childImageSharp {\n fluid(quality: 95) {\n ...GatsbyImageSharpFluid_withWebp\n }\n }\n }\n statsDollar: file(\n relativePath: { eq: \"usability-testing/website-user-testing/statsDollar.png\" }\n ) {\n childImageSharp {\n fluid(quality: 95) {\n ...GatsbyImageSharpFluid_withWebp\n }\n }\n }\n lsApp: file(relativePath: { eq: \"usability-testing/website-user-testing/lsApp.png\" }) {\n childImageSharp {\n fluid(quality: 95) {\n ...GatsbyImageSharpFluid_withWebp\n }\n }\n }\n survey: file(relativePath: { eq: \"usability-testing/website-user-testing/survey.png\" }) {\n childImageSharp {\n fluid(quality: 95) {\n ...GatsbyImageSharpFluid_withWebp\n }\n }\n }\n }\n `);\n return (\n <>\n

What is website usability testing?

\n

\n Usability testing is a process where a set of designated users test out the design and\n development of a website. The users are made to interact with the interface in various ways\n to assess how well they interact with the website, if there are any potential loopholes, and\n whether you made the right design decisions. Usability website testing gives you a glimpse\n into how the target audience might use your website in reality. Once you triage what the\n website is lacking, it becomes easy to fix any design, layout, or coding issues before your\n website goes live.\n

\n

The benefits of website user testing

\n

\n In this era of expansive data consumption, most visitors are looking for a unique and fast\n experience, and are not willing to spare time on a website that is not user-friendly.{' '}\n \n 32.3% of visitors\n {' '}\n bounce off the page if the load time exceeds 7 seconds.\n

\n \n

\n Source:{' '}\n \n Section.io\n \n

\n

\n The biggest benefit of website testing is to pre-emptively tackle any issues that might\n arise. Armed with an insight into your website’s potential and weaknesses, you can then\n provide a premium user-experience.\n

\n

Let us delve into the various benefits of testing a website for usability:

\n

Improve the retention rate of your website

\n

\n Having visitors is great but having long-term repeat visitors should be the goal of any\n successful website. The usability testing helps with understanding a website’s retention\n rate and the user behavior, which in turn helps in the overall website improvement.\n

\n

Reduces development and support costs

\n

\n Being able to identify bugs and issues beforehand gives you the ability to save on\n additional developmental costs. Once the website is live, making code or design changes will\n always cost extra - not to mention the potential customer complaints and downtimes that can\n further expand your costs. In fact, it costs up to{' '}\n \n 100 times more\n {' '}\n to fix a UX error after development than prior to it.\n

\n

Understand the user behavior

\n

\n By conducting usability testing, you can observe user behavior in real-time. Including the\n end-users in the decision-making process, helps you empathize with their needs and come up\n with a better UX design that caters to the real needs of the users and not only to the\n perceived ones.\n

\n

Identify lacking aspects of your website

\n

\n Even carefully crafted websites are bound to have issues. Problems like broken links,\n website errors, content issues, and layout discrepancies can create setbacks. Website{' '}\n \n usability testing\n {' '}\n can help pinpoint the unresponsive areas of the website.\n

\n

Provide a better user experience and increase sales

\n

\n It’s a no-brainer that a happy customer is a repeat customer. By conducting website user\n testing, you can keep the users engaged by providing a great user experience and increase\n sales in the process. In fact, according to a{' '}\n \n Career Foundry\n {' '}\n report, over $1.4 trillion is lost yearly by e-commerce companies due to bad UX.\n

\n \n

\n Source:{' '}\n \n The Trillion Dollar UX Problem\n {' '}\n by Career Foundry\n

\n

A step-by-step approach to website usability testing

\n

\n If you are looking for high conversion rates then conducting functionality tests is a must.\n Let us dig deeper into the various steps involved in this process:\n

\n

Step 1: Plan for the test

\n

\n According to the{' '}\n \n Usability.gov’s guidelines\n \n , the following steps should be used to plan for the test:\n

\n

\n Scope of Testing: Before the testing phase begins, it is important to\n decide what aspects of the website will be tested. The different testing areas might include\n the entire website, parts of it, certain apps or widgets, only the content, navigation\n structure, or a combination of each.\n

\n

\n Purpose: Identifying the goals and reasons for testing is imperative. Begin\n by preparing test scenarios. Is it easy for users to navigate from one page to another? Can\n they find specific information on certain products or topics? Is the shopping cart\n experience seamless for the end-users?\n

\n

\n Schedule and location: It is important to decide whether to conduct the\n usability website testing remotely or in-person.\n

\n

\n Participants: A key step is deciding on\n the number and type of participants. For a global presence, you would need\n to test the usability of your website based on certain demographics.\n

\n

\n Scenarios: You should come up with a number and list of questions and\n scenarios to hand out to your participants. Things like finding a certain\n product, filling out a form or ordering a product, etc. are the types of questions that can\n be listed on the tests.\n

\n

How about recruiting your testers?

\n

\n It is always best to match test participants with your potential target audience. If the\n selected participants understand the scope of your products and offerings, the tests will\n end up being way more productive.\n

\n

Step 2: Run the test

\n

There are two major website testing models. Let us divulge into both:

\n

\n Unmoderated remote testing and its benefits: Unmoderated remote testing is\n similar to traditional forms of testing, except for one key difference – the organizer and\n the test participants are both in geographically dispersed locations. Even though in-person\n testing is recommended by experts, there are tons of benefits with remote testing:\n

\n \n

\n Moderated or over-the-shoulder testing and its benefits: This is a\n traditional approach of usability testing where both the facilitator and the participant\n might be in the same room. The participants are given a bunch of tasks to perform and their\n feedback and expressions are observed. Here are some benefits of moderated testing:\n

\n \n

Step 3: Analyze your results

\n

\n Once the tests have been conducted, the following steps should help you in analyzing the\n results:\n

\n
    \n
  1. Collect all the data and jot down the main facts.
  2. \n
  3. \n Flag the issues that were observed into common areas for example “Login issues”, “Issues\n with the E-Commerce platform”, “About Us page”, or “Other”.{' '}\n
  4. \n
  5. \n Add similar issues under the same umbrella. For e.g., if you notice that three users were\n incapable of paying via PayPal, it would be wise to log all these issues under the\n “Payment Process” group.{' '}\n
  6. \n
  7. Make a list of all issues and prioritize them based on their business or UX value.
  8. \n
\n \n

Tips for website user testing

\n

\n The number of participants: The godfather of website usability,{' '}\n \n Jakob Nielsen\n \n , recommends not using more than five participants to conduct website testing. Any users\n added after the first five will essentially run into similar problems repeatedly. This will\n only waste time and effort.\n

\n

\n Do not jump into conclusions: Unless you observe a clear\n pattern of similar issues, it is not wise to start fixing everything from the ground up. All\n users have varying skills and styles which need to be considered before implementing drastic\n changes. For instance, if users a and b are having a problem navigating to\n certain pages, it might not be true for the rest of the users.\n

\n

\n Record your testing session: Always record your sessions to keep track of\n the entire process. Invest in a web analytics software with session replay capabilities like{' '}\n \n LiveSession\n \n .\n

\n \n

\n Source:{' '}\n \n LiveSession\n \n

\n

\n Test early and test often: Waiting too long to test or not testing enough\n can have consequences. Testing early on in smaller chunks saves you from the costs of\n implementing hefty changes down the road.\n

\n

\n Run a website usability survey: Running a usability survey\n can help you achieve user satisfaction. The company{' '}\n \n Survicate\n {' '}\n provides a great website user testing survey{' '}\n \n template\n {' '}\n that you can use.\n

\n \"survey\"\n

\n Source:{' '}\n \n Survicate\n \n

\n

The key to effective usability testing of websites

\n

\n There is nothing worse than having an online presence that does not speak well to the\n end-users. Fortunately, with website user testing, you can tweak and optimize even the\n weakest of websites before they go live. Here are the key findings that were discussed in\n this article:\n

\n
    \n
  • \n Website usability testing is a way to evaluate how well the users interact with your\n website.{' '}\n
  • \n
  • \n The main benefits of website user testing are improved retention rates, reduced\n development costs, and identification of the weak aspects of your website to name a few.{' '}\n
  • \n
  • \n A step-by-step approach to testing which includes planning, understanding the different\n testing models and analyzing the results.{' '}\n
  • \n
  • \n Tips and tricks on how to improve testing including the number of participants, not\n jumping into conclusions, recording your testing sessions, testing early and often, and\n conducting website usability surveys.\n
  • \n
\n

Now it’s time to put theory into practice – good luck with your website user testing!

\n
\n \n
\n

Chapter 6

\n

What is a mobile usability test and do you need it?

\n
\n \"arrow\"\n \n
\n \n );\n};\n\nexport default withUsabilityTestingTemplate(WebsiteUserTesting);\n"],"sourceRoot":""}