{"version":3,"sources":["webpack:///./src/components/usability-testing/banner/styled.js","webpack:///./src/components/usability-testing/banner/index.js","webpack:///./src/pages/usability-testing.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","link1","useSourceParams","link2","useStaticQuery","edges","allFile","defaultCover","images","transformImages","href","target","rel","fluid","devices","node","childImageSharp","alt","app","coworking","link","smartphone","whyUsabilityTest","list","amico","dashboard","ga","hostika","uxpro","src","arrow","module","exports","res","el","name"],"mappings":"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","file":"component---src-pages-usability-testing-js-e0a2cc752128bba39493.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 Before we dive deeper into the discussion, let’s first define what usability testing is.\n It’s an examination of how users interact with a product to identify its strengths,\n weaknesses, and issues which need fixing urgently. Usability testing revolves around quality\n improvement which is based{' '}\n \n on five components\n \n :\n
\n\n You might be wondering – is it worth conducting a usability test? We’ll get to it right now.\n
\nConducting usability testing regularly will bring you significant benefits, such as:
\n\n There isn’t just one usability test, there are various types. Let’s take a look at the main\n ones to help you choose the most suitable option for your business.\n
\n\n\n This occurs when you’re physically in the same room as your participants. There are\n different in-person usability testing methods which you use, including:\n
\n\n As the name indicates, it takes place when you and your participants are in two separate\n locations. Here are the most common forms of remote usability testing:\n
\n\n Users are given the opportunity to freely explore the product – you can check how they\n interact with the interface. Testing happens naturally and the evaluator has no\n influence over the participants.\n
\n\n It’s used to compare your product against two or more solutions. It can help you\n generate new ideas, features, and functionalities.{' '}\n
\n\n It lets you conduct a general usability test – it usually comes after exploratory\n testing, and helps you assess how your design impacts usability.{' '}\n
\n\n Now that you know what usability testing is, and what methods you can use to conduct it\n effectively it’s time to talk about website and mobile usability testing.\n
\n\n \n Website usability testing\n {' '}\n is about checking how visitors interact with your website. It’s done to improve the\n retention rate, reduce development and support costs, assess what information is missing\n from your website, and to boost sales.\n
\n\n There are a number of steps that you should take to ensure the high effectiveness of your\n website usability test.\n
\n\n Decide on the scope – figure out what parts or aspects of your website you\n would like to evaluate. Is it the copy, navigation, or maybe certain apps?\n
\n\n What’s the purpose? – before you begin your test, you must decide on its\n goal. Is it to verify whether no information is missing from your website or to check if\n it’s easy to move from one page to another?\n
\n\n Schedule and location – are you planning to conduct your test remotely or\n in-person?\n
\n\n Participants – who will you invite to the tests, and how many participants\n will you need? Try to match your participants with your target audience.\n
\n\n Scenarios – there are two things you must prepare: scenarios and questions\n which you should hand out to participants.\n
\n\n\n Source:{' '}\n \n Unsplash\n \n
\nYou can select from two methods:
\n\n Unmoderated remote testing – great if you have a limited budget as no\n physical equipment is required to conduct the test, you don’t have to limit yourself in\n terms of participants’ location, and there are no timezone constraints.\n
\n\n Moderated or over-the-shoulder testing – you can closely observe the\n participants and notice their expressions, users can ask you questions if tasks are unclear\n to them, you get feedback instantly and can even ask participants to perform extra tasks if\n necessary.\n
\n\n In order to put data into good use, you need to analyze your results. For this purpose, you\n should:\n
\n\n How many participants? – according to{' '}\n \n Jakob Nielsen\n \n , the precursor of website usability, it’s best to use no more than 5 participants.\n
\n\n Don’t judge too quickly – don’t implement any changes unless you notice a\n clear pattern of similar issues\n
\n\n Record your testing session – recording your sessions will help you keep\n track of the whole process. For this purpose, it’s worth using a session recording tool like{' '}\n \n LiveSession\n \n .\n
\n\n Test early and frequently – the earlier you test the smaller your\n development costs will be and errors will be easier to fix.\n
\n\n Run a website usability survey – including a survey on your website can\n help you boost customer satisfaction. Not only can you ask your visitors whether they found\n what they were looking for but you can also ask them what should be improved.\n
\nNow, let’s take a look at how usability testing is performed for mobile devices.
\n\n Understanding how to properly conduct usability testing for mobile is as important as it is\n for desktop. In fact, it’s predicted that by 2025 nearly{' '}\n \n 75% of the world\n {' '}\n will primarily use their smartphones to connect to the Internet.\n
\n\n On the other hand, the competition for mobile users is already fierce, as there are jointly\n over{' '}\n \n 5 million apps\n {' '}\n in the Google Play and iOS App Store. Given these numbers, your mobile user experience\n should be a top priority!\n
\nThanks to mobile usability tests, among others, you will:
\n\n Source:{' '}\n \n Unsplash\n \n
\n\n Now, here are the steps you should take if you’d like to conduct usability tests for mobile\n devices:\n
\nHere are the five steps you’ll need to take to ace your usability tests:
\n\n As in the case of the above-mentioned website usability test, you’ll need to define your\n goals. We advise you to schedule a team meeting to discuss what you already know vs what you\n want to find out about your users or app. The result should be a list of areas you’ll want\n to prioritize in the test.\n
\n\n Now that you know which topics you want to collect insights on, build out your questions\n around them. Organize tasks around various scenarios to test the most important features or\n use cases, in and out.\n
\nBefore you proceed, write down all of the goals and tasks established in Step 1 and 2.
\n\n Don’t rush through this step! Make sure to select the right participants who are\n representative of your users. Only then will the mobile usability test provide relevant\n results.\n
\n\n Decide whether you’d rather conduct a remote or in-house test and whether they should be\n moderated or not (we’ve mentioned these types earlier). As users complete the tasks, write\n down any observations. Also, collect insights from them after they’ve completed the test.\n This data will be the basis for your usability testing report, which we discuss later in\n this guide.\n
\n\n You can read about the entire{' '}\n \n mobile usability testing\n {' '}\n process in a dedicated section.\n
\n\n Now that we’ve reviewed what website usability is and what it looks like for websites and\n mobile products, let’s proceed to one of the most important elements of usability testing –\n asking the right questions. In fact, collecting qualitative and quantitative feedback from\n your users is as important as observing how they interact with your app or website.\n
\n\n That being said, it’s time to have a look at the types and\n examples of ready-to-use usability testing questions.\n
\n\n User testing questions can be divided into four groups – screening, pre-test, in-test, and\n post-test.\n
\n\n Screening questions will help you pre-qualify your users for your UX testing. When you work\n on your usability testing, you should write down all the criteria your ideal participant\n should meet.\n
\nAmong others, you should ask about:
\n\n Pre-test questions will help you further narrow down or group your users. These include:\n
\nNext, you should proceed to…
\n\n These questions should be inquired as users engage with your product or website. Among\n others, we recommend that you ask:\n
\n\n Last, but not least, you should also question your users after they’d completed the\n usability test.\n
\nAsk your testers about their impressions. Particularly, focus on the following:
\n\n You can find a full list of recommended{' '}\n \n usability testing questions\n {' '}\n in a dedicated chapter of this guide.\n
\n\n With all the work you’ve put into organizing your usability test, you’ll now also need to\n ensure that your findings are put to use by relevant teams. There’s no better way of doing\n this than by creating a thorough usability testing report! Below, we review what usability\n reporting is, what it should include, and why it’s indispensable in your user testing.\n
\n\n In the most simple terms, a usability test report is a document you prepare after evaluating\n all the feedback and insights from sessions with users. These include, among others, your\n own notes and observations, any evidence data (for instance, session recordings), as well as\n quantitative and qualitative feedback from participants.\n
\n\n Don’t worry if this sounds like a complicated process – there are tried-and-tested usability\n report templates. You can follow the structure below:\n
\n\n The goal of the executive summary is to quickly onboard anyone who picks up your report to\n understand what it covers and what the key findings were. A paragraph will suffice – you’ll\n go into detail in the next sections.\n
\n\n This section should be written in a way that allows anyone who hasn’t been involved in the\n usability test to quickly understand why you’ve decided to run the test. Among others:\n
\n\n Next, explain what methodology and tools you applied. Did you use user session recordings?\n Or maybe you performed lab tests? This is the section where you should also specify all the\n questions you asked your participants.\n
\n\n Describe your participants as thoroughly as possible. Make sure to include their\n demographic/firmographic data and why you’ve decided to recruit them in the first place.\n
\n\n Create a detailed description of the results. To improve readability, we highly recommend\n that you include a table that clearly specifies all key data – task completion rates, the\n overall number of participants, types of assignments they were assigned, etc.\n
\n\n Make a bulleted list of findings and a separate list for recommendations. The results should\n be tangible – i.e. it’s no place for assumptions, only theses that have been verified. You\n can also create a list that segments your findings via user scenarios.\n
\n\n In this guide, we’ve dedicated an entire section to{' '}\n \n usability testing reports\n \n , so make sure to take a look!\n
\n\n While usability testing might seem daunting at first, there are a bunch of{' '}\n \n usability testing tools\n {' '}\n that will make the entire process a lot easier. Here are the ones that we recommend using:\n
\n\n It’s your go-to solution if you want to gain a deep understanding of how users interact\n with your product, how and when they convert, and what changes you must incorporate to\n retain your users.\n
\n\n Source:{' '}\n \n Angel.co\n \n
\n\n\n A tool known by every marketer – it lets you check your conversion rates, find your\n best-performing landing pages as well as those which need improving, discover traffic\n sources, and gain insights about your visitors. You can create detailed reports which\n you can easily share with your team.\n
\n\n Source:{' '}\n \n Neil Patel{' '}\n \n
\n\n LiveSession is a session replay software that lets you check how visitors engage with\n your website and spot any pressing issues which prevent them from converting. As a\n result, you can eliminate any bugs and roadblocks which improve the overall UX.\n LiveSession offers a free trial, so be sure to check it\n out.\n
\n\n Source:{' '}\n \n LiveSession\n \n
\n\n It offers a simple to use, drag-and-drop landing page and pop-up builder – you don’t\n need any coding skills to use it. It’s great for A/B testing, however, what makes it\n really unique is its AI-powered Smart Traffic and Unbounce Conversion Intelligence\n features. They give you access to insights necessary to understand how users engage with\n your product.\n
\n\n Source:{' '}\n \n ThemeForest\n \n
\n\n Usability Hub is a user testing and usability research hub which lets you get feedback\n from real people and ultimately improve the UX of your app or website. It includes\n features like first-click tests, design surveys, preference tests, and many others.\n
\n\n Source:{' '}\n \n UXpro{' '}\n \n
\n\n If you’re hungry for more information about usability testing tools{' '}\n \n then check out this article\n \n , where we discuss more solutions along with their benefits.\n
\n\n As you’ve just seen, usability testing is essential if you want to outpace your competitors\n and consistently provide your users with great UX. By incorporating it as a continuous\n process, you’ll be able to improve your customer satisfaction levels, adjust your product to\n the ever-changing market, and optimize product development costs, among other benefits.\n
\n\n Now, if you truly want to master usability testing, we highly recommend that you read the\n remaining chapters of this guide. This section was just introductory reading, and there’s\n still much more to uncover about effective website and mobile usability testing, creating\n useful, comprehensive usability reports, drafting the right questions for testers, and more!\n
\n\n Click here to proceed to Chapter 1: What is Usability Testing? Definition and a Review of\n the Best Methods.\n
\nChapter 1
\nWhat is usability testing?
\n