{"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 {desc || 'Test all LiveSession features for 14 days, no credit card required.'}{title || `Improve usability testing with LiveSession`}
\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\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 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
\nLet us delve into the various benefits of testing a website for usability:
\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\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\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\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\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 Source:{' '}\n \n The Trillion Dollar UX Problem\n {' '}\n by Career Foundry\n
\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\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
\nHow 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
\nThere 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 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 Once the tests have been conducted, the following steps should help you in analyzing the\n results:\n
\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 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\n Source:{' '}\n \n Survicate\n \n
\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
\nNow it’s time to put theory into practice – good luck with your website user testing!
\nChapter 6
\nWhat is a mobile usability test and do you need it?
\n