{"version":3,"sources":["webpack:///./src/img/blog/unnamed.png","webpack:///./src/pages/blog/tips-to-improve-sign-up-forms-with-examples.js","webpack:///./src/img/blog/wrapel1.png","webpack:///./src/img/tutorials/abtest.png","webpack:///./src/img/tutorials/form-analytics/9.png","webpack:///./src/img/blog/unnamed-5-.png","webpack:///./src/img/blog/screely-1579465559231.png","webpack:///./src/img/blog/unnamed-6-.png","webpack:///./src/img/blog/screely-1579457606861.png","webpack:///./src/img/blog/unnamed-4-.png","webpack:///./src/img/tutorials/form-analytics/11.png","webpack:///./src/img/tutorials/form-analytics/1.png","webpack:///./src/img/blog/signup-improve.png","webpack:///./src/img/tutorials/form-analytics/2.png","webpack:///./src/img/tutorials/form-analytics/5.png","webpack:///./src/img/blog/unnamed-1-.png","webpack:///./src/img/blog/unnamed-2-.png","webpack:///./src/img/tutorials/form-analytics/6.png","webpack:///./src/data/guides/usability-testing/index.js","webpack:///./src/img/blog/unnamed-3-.png","webpack:///./src/img/tutorials/form-analytics/3.png","webpack:///./src/img/tutorials/form-analytics/10.png","webpack:///./src/img/tutorials/form-analytics/4.png","webpack:///./src/img/tutorials/form-analytics/8.png","webpack:///./src/img/usability-testing/usability-testing-cover.png","webpack:///./src/img/tutorials/form-analytics/7.png","webpack:///./src/pages/tutorials/form-analytics.js"],"names":["module","exports","Wrapped","BlogArticle","id","href","target","rel","src","img1","alt","title","img2","img3","img4","img5","img6","img7","img8","img9","img10","frontmatter","url","description","author","img","imgSocial","date","category","group","timeToRead","process","data","desc","metaDesc","authorAnia","heading","button","text","cover","authorKasia","role","aria-label","GuideArticle","bannerLink","useSourceParams","ctaEnd","className","link","inline","img11","meta","Date","tutorials","customSection","articleDesc","isList","articleDesc2","abtestCover","useStaticQuery","childImageSharp","fluid"],"mappings":"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","file":"component---src-pages-tutorials-form-analytics-js-348476ec245e8435d7e1.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/unnamed-a2dfe1ec98479f9869cd28df2c3899e8.png\";","import React from 'react';\nimport BlogArticle from 'components/blog/blogArticle';\nimport { Post } from 'components/blog/content/styled';\nimport { authorKalina as author } from 'data/authors';\nimport img from 'img/blog/signup-improve.png';\n\nimport img1 from 'img/blog/unnamed.png';\nimport img2 from 'img/blog/screely-1579457606861.png';\nimport img3 from 'img/blog/unnamed-1-.png';\nimport img4 from 'img/blog/unnamed-2-.png';\nimport img5 from 'img/blog/unnamed-5-.png';\nimport img6 from 'img/blog/unnamed-4-.png';\nimport img7 from 'img/blog/unnamed-3-.png';\nimport img8 from 'img/blog/screely-1579465559231.png';\nimport img9 from 'img/blog/unnamed-6-.png';\nimport img10 from 'img/blog/wrapel1.png';\n\nconst Content = () => {\n  return (\n    <Post>\n      <p>\n        Sign-up forms are like medicines - you may hate them, but you know you have to take them to\n        feel better. On websites, they play the role of “a ticket” to what is behind the main page -\n        a product, a service or a special offer.\n      </p>\n      <h2 id=\"and-selling-that-ticket-may-be-more-troublesome-than-you-think-it-could-be-\">\n        And selling that ticket may be more troublesome than you think it could be.\n      </h2>\n      <p>\n        Sign-up forms are a gate that your users need to cross to access your services. However, if\n        that gate is off-putting and does not quite click, it can result in a high bounce rate and\n        fewer conversions that you’d desire.\n      </p>\n      <p>\n        The best sign-up form examples do not stand out with extraordinary features - rather than\n        that, they combine the right practices in a customer-oriented form. Where to get some\n        sign-up form inspiration and how to create a compelling form that will convert like crazy?\n        Read this post to find out.\n      </p>\n      <aside>\n        <p>\n          <b>You’ll learn today:</b>\n        </p>\n        <ul>\n          <li>what is a sign-up form</li>\n          <li> some basic sign-up forms tips</li>\n          <li>best practices for sign-up forms</li>\n          <li>best sign-up form examples</li>\n          <li>common mistakes with sign-up forms</li>\n        </ul>\n      </aside>\n\n      <p>\n        According to{' '}\n        <a\n          href=\"https://themanifest.com/web-design/6-steps-avoiding-online-form-abandonment\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer nofollow\"\n        >\n          The Manifest\n        </a>\n        , 81% of people have abandoned a form after beginning to fill it out. 27% blame its length\n        for this, but there are also many other reasons why sign-up forms do not convert. Before we\n        start identifying what some sign-up form best practices are, let’s briefly explain what all\n        the fuss is about.\n      </p>\n      <h2 id=\"what-is-a-sign-up-form-\">\n        What is a sign-up form<strong>?</strong>\n      </h2>\n      <p>\n        Long story short: a sign-up form is a form requiring some information from a user who wants\n        to take a particular action, such as a registration. For brands, a well-functioning form is\n        needed to generate more leads and convert them into deals.\n      </p>\n      <h2 id=\"how-to-improve-a-sign-up-form-\">How to improve a sign-up form?</h2>\n      <p>\n        There are quite a few methods you can use to improve your forms. Some of them can be\n        included in a series of quick fixes, while implementing others can take a bit more time.\n        Browse some sign-up form best practices along with top examples and get inspired.\n      </p>\n      <h3 id=\"make-your-sign-up-form-short-and-sweet\">Make your sign-up form short and sweet</h3>\n      <p>\n        The most important thing about preparing a sign-up form is… not to overdo it. It’s\n        understandable that you want to know a lot about your potential client, but the very first\n        sign-up form they need to fill in is not the best time and place to do so.\n      </p>\n      <p>\n        <em>How willing would you be to fill in the sign-up form below?</em>\n      </p>\n      <p>\n        <img src={img1} alt=\"form\" title=\"Sign-up form\" />\n      </p>\n      <p>\n        The length of the form is one thing - another is the amount of information and action it\n        requires from the user. All of the fields are obligatory. In this case, the user needs to\n        fill in eight fields if they want to download a single piece of content. That’s quite a lot\n        of effort, isn’t it?\n      </p>\n      <p>\n        Remember about the goal of your sign-up form - this is one of the very first touchpoints\n        between your potential clients and your product.. There will be a better time and place to\n        get to know your user better. At this point, the goal is to encourage them to register.\n      </p>\n      <h3 id=\"via-negativa-sign-up-form-creation\">Via negativa sign-up form creation</h3>\n      <p>\n        Have you ever heard the term <em>via negativa</em>? It stands for “\n        <em>addition by subtraction</em>”: in order to improve usability and deliver more added\n        value, you actually remove existing elements instead of adding new ones.\n      </p>\n      <p>\n        Take a look at this Basecamp example - they ask for a name and e-mail address. Would it hurt\n        to ask for an e-mail only?\n      </p>\n      <p>\n        <img src={img2} alt=\"form\" title=\"Basecamp signup form\" />\n      </p>\n      <p>\n        The answer is: no. And Netflix knows about it, so they only for an e-mail address after\n        describing their biggest asset: <strong>unlimited &amp; more, anytime, anywhere</strong>\n        .They do not need to know a user’s name (yet) to serve them well, and the user can access\n        the site in seconds. Doesn’t it sound like a great start?\n      </p>\n      <p>\n        <img src={img3} alt=\"netlfix form\" title=\"Netflix signup form\" />\n      </p>\n      <h3 id=\"use-authority-quotes-and-benefits\">Use authority quotes and benefits</h3>\n      <p>\n        As long as you should keep your sign-up forms concise and straight to the point, you also\n        should think about implementing some incentives for those who may still be hesitant to\n        sign-up. Adding some authority quotes and social proof (such as reviews from software review\n        sites like Capterra, G2 or Trustpilot), as well as a brief list of benefits (sometimes a\n        short sentence will do) can result in increased conversion rates.\n      </p>\n      <p>Take a look at a few examples.</p>\n      <figure>\n        <img src={img4} alt=\"form example\" title=\"Example of authority in form - Filecamp\" />\n        <figcaption>\n          <b>Filecamp.com</b> digital asset management software - used a testimonial to persuade\n          those who still had doubts.\n        </figcaption>\n      </figure>\n\n      <figure>\n        <img src={img5} alt=\"form example\" title=\"Example of authority in form - Liveagent\" />\n        <figcaption>\n          <b>Liveagent.com</b>, customer support management software - listed their benefits in just\n          two sentences and added social proof in the form of their client’s opinions – together\n          with a picture of the client, to show that he’s a real person.\n        </figcaption>\n      </figure>\n\n      <figure>\n        <img src={img6} alt=\"form example\" title=\"Example of authority in form - CloudTalk\" />\n        <figcaption>\n          <b>CloudTalk.io</b>, call center management software. Instead of providing a single\n          review, CloudTalk shows a couple of ratings from the most popular software review sites.\n        </figcaption>\n      </figure>\n\n      <p>Oh, and we’re no different:</p>\n      <figure>\n        <img src={img7} alt=\"form example\" title=\"Example of authority in form - CloudTalk\" />\n        <figcaption>\n          At <b>LiveSession</b>, we provide solid social proof as well as a short list of benefits\n          on our sign-up form landing page. You know exactly what kind of value you’re getting.\n        </figcaption>\n      </figure>\n\n      <h3 id=\"make-it-quick-and-visible\">Make it quick and visible</h3>\n      <p>\n        Let’s face it: your users don’t feel comfortable with providing too much data from the very\n        beginning, especially nowadays. However, spending too much time on filling out the form is\n        not something they’re keen on. Looking for the sign-up form forever isn’t their favorite\n        activity either….\n      </p>\n      <p>\n        You should let your potential clients sign up in seconds, and access the form from anywhere.\n        The form itself is crucial, but if your users need to look for it for too long then they may\n        give up and turn to your competitors. If you scroll Kontentino’s website (below), you’ll\n        notice that a “sign up” button is scrollable and stays in the same place (top right). It\n        doesn’t matter if you scroll the website up and down, so you can always sign up instantly,\n        without seeking the magic button.\n      </p>\n      <p>\n        <img src={img8} alt=\"form example\" title=\"Form must be quick and visible\" />\n      </p>\n      <p>\n        Your sign-up form itself should be short and easy to implement. This way, you can attach it\n        to blog posts or embed it in a pop-up without unnecessary hassle.\n      </p>\n      <p>\n        Always give your potential customers one opportunity:{' '}\n        <strong>to be a click away from signing up</strong>. You should also give them a chance to\n        do it either by providing an email address or by logging in to Facebook or Google to shorten\n        the customer journey. In other words, give them a choice.\n      </p>\n      <p>\n        <img src={img9} alt=\"create account form\" title=\"Simple form\" />\n      </p>\n      <h3 id=\"sign-up-form-design-matters\">Sign-up form design matters</h3>\n      <p>\n        On top of all of that, your sign-up form just has to be user-friendly and intuitive. Easier\n        said than done? For sure, but it’s worth following sign-up form best practices to get\n        inspired.\n      </p>\n      <p>\n        Check out this example from{' '}\n        <a href=\"https://www.typeform.com/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\n          Typeform\n        </a>\n        . Minimalistic sign-up forms while presenting their USPs in a few words is not going to\n        distract potential users.\n      </p>\n      <p>\n        <img src={img10} alt=\"form\" title=\"Signup form\" />\n      </p>\n      <p>\n        Finding the golden mean between great design,{' '}\n        <a href=\"/blog/improving-customer-experience/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          customer experience\n        </a>{' '}\n        and conversion is not the easiest task. This is why you should consider running some{' '}\n        <a href=\"/blog/5-tips-for-better-a-b-tests/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          A/B tests on your website\n        </a>{' '}\n        to see which solution works best in your case.\n      </p>\n      <p>\n        You can also get a little creative and introduce a bit of humor. Writing something funny\n        about passwords (for example: “It’ll be our secret” or “No worries, we won’t tell anyone”)\n        can make you more memorable. Of course, the reception of these little jokes depends on your\n        audience – why not test different approaches and see what works best in your case?\n      </p>\n      <h2 id=\"common-sign-up-forms-mistakes\">Common sign-up forms mistakes</h2>\n      <p>\n        There are a few common mistakes that people often make with sign-up forms. Luckily, many are\n        easily avoidable if you’re aware of them. Let us just list a few of the most popular ones:\n      </p>\n      <ul>\n        <li>\n          inserting text in the fields and forcing your users to delete the text first before they\n          can write their data (how frustrating, no?)\n        </li>\n        <li>\n          no clear info or goal of a sign-up - a potential user has no idea of what they register\n          for\n        </li>\n        <li>requiring too much information on a sign-up form</li>\n        <li>lack of building trust, both with a website and a sign-up form</li>\n        <li>too many annoying pop-ups with a sign-up form</li>\n        <li>poor copywriting, not communicating the product’s value</li>\n      </ul>\n      <aside>\n        <h2>How to improve sign-up forms with LiveSession?</h2>\n        <p>\n          <b>LiveSession</b> can help you improve your sign-up forms. By{' '}\n          <b>analyzing customer behavior</b> on your website, you’re able to recognize bottlenecks\n          and potential problems your users encounter.\n        </p>\n        <p>You can identify what kind of copy and CTAs work for your potential clients.</p>\n        <p>\n          This kind of detailed qualitative analyics gives you <b>more context</b> for the numbers.\n          Not only you will see what kind of sign-up forms work best but also why they work so well.\n        </p>\n        <p>\n          What’s more, you can also see how your sign-up forms perform on different devices (desktop\n          and mobile) and in different browsers. Thanks to{' '}\n          <a\n            href=\"/blog/how-to-use-filters-in-user-research/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            advanced segmentation features\n          </a>\n          , you can track the parameters that matter most.\n        </p>\n      </aside>\n\n      <h2 id=\"to-wrap-up\">To wrap-up</h2>\n      <p>\n        A sign-up form may seem like nothing but just a few fields that need to be filled – but it’s\n        much more than that. It’s a chance to grab the user’s attention, make a great first\n        impression and persuade them to make a commitment.\n      </p>\n      <p>\n        Working on your sign-up form conversion can be tough and daunting but if you do it right, it\n        leads to tremendous growth. Your clients are happy because they can register without too\n        much effort, you are happy because you get more of them and your conversion rates skyrocket.\n        A win-win situation, isn’t it?\n      </p>\n    </Post>\n  );\n};\n\nconst Wrapped = BlogArticle(Content);\n\nexport const frontmatter = {\n  title: '5 Tips to Improve Sign-up Forms (with examples)',\n  url: '/blog/tips-to-improve-sign-up-forms-with-examples/',\n  description: `Sign-up forms are like medicines - you may hate them, but you know you have to\n  take them to feel better.`,\n  author,\n  img,\n  imgSocial: img,\n  date: '2020-01-24',\n  category: '',\n  group: 'Research',\n  timeToRead: 7,\n};\n\nexport default () => (\n  <Wrapped\n    title={frontmatter.title}\n    category={frontmatter.category}\n    description={frontmatter.description}\n    date={frontmatter.date}\n    author={frontmatter.author}\n    url={frontmatter.url}\n    img={frontmatter.img}\n    imgSocial={process.env.GATSBY_HOST + frontmatter.img}\n    group={frontmatter.group}\n    timeToRead={frontmatter.timeToRead}\n  />\n);\n","module.exports = __webpack_public_path__ + \"static/wrapel1-24c2e25f9d38760f93ddee289f56476e.png\";","module.exports = __webpack_public_path__ + \"static/abtest-7fe8897a983b0b501d03a72138c43f8a.png\";","module.exports = __webpack_public_path__ + \"static/9-7725f041f4a6440e8f8aaf554b4be3cc.png\";","module.exports = __webpack_public_path__ + \"static/unnamed-5--5e010016816b05421c8b4d5125a45ea9.png\";","module.exports = __webpack_public_path__ + \"static/screely-1579465559231-9c922bc8325d1d6723b2d3cd7d1c27ff.png\";","module.exports = __webpack_public_path__ + \"static/unnamed-6--0bb245cfa189cc613188e9f3f5c84388.png\";","module.exports = __webpack_public_path__ + \"static/screely-1579457606861-cef63b8bb52d67ee991646b2231ad0ef.png\";","module.exports = __webpack_public_path__ + \"static/unnamed-4--6b9f7a1fde425769d919242f7f09faa4.png\";","module.exports = __webpack_public_path__ + \"static/11-efb7616f9ac673b812f8dabd4ecdddc2.png\";","module.exports = __webpack_public_path__ + \"static/1-fd45697cdaf3141db45472c7636544d0.png\";","module.exports = __webpack_public_path__ + \"static/signup-improve-33b2142ec7aa9f2484c84f353414558c.png\";","module.exports = __webpack_public_path__ + \"static/2-a9c93597eb4212ac6eaec800134488c3.png\";","module.exports = __webpack_public_path__ + \"static/5-b30ef393cfa315d83e351c3ac918ba35.png\";","module.exports = __webpack_public_path__ + \"static/unnamed-1--05ffb61e92c179cb70ac11b0c9865e19.png\";","module.exports = __webpack_public_path__ + \"static/unnamed-2--fd96bd12caef2c46b932bf9f57b8a4c2.png\";","module.exports = __webpack_public_path__ + \"static/6-b28a9e892a4a2d3d97087b7b114cdb4b.png\";","import { authorAnia, authorKasia } from 'data/authors';\nimport Link from 'components/ui/link';\nimport React from 'react';\nimport cover from 'img/usability-testing/usability-testing-cover.png';\n\nexport const data = [\n  {\n    url: '/usability-testing/',\n    title: 'Introduction',\n    desc: 'All you need to know about usability testing',\n    metaDesc:\n      'Learn all you need to know about effective usability testing. From asking the right usability questions to creating a report.',\n    timeToRead: 8,\n    author: authorAnia,\n    date: 'June 09, 2020',\n    heading: (\n      <>\n        <p>\n          Do you know that{' '}\n          <Link\n            href=\"https://www.cbinsights.com/research/startup-failure-reasons-top/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer nofollow\"\n          >\n            42% of startups fail\n          </Link>{' '}\n          due to the lack of product-market fit? It’s not particularly surprising as building\n          products is complex and requires a lot of decision making. However, since products are\n          built to solve specific problems, it’s only natural to involve your users or customers in\n          the decision-making process to ensure that your product perfectly meets their needs. This\n          can be done through regular usability testing.\n        </p>\n        <p>\n          In this usability testing guide, we’re going to talk about what usability testing is, how\n          it can benefit your business, what are the different types of usability testing, as well\n          as discuss how you can effectively conduct website and mobile usability tests. We will\n          also teach you how to master usability reporting and provide you with a few tools to make\n          the entire process easier.\n        </p>\n        <p>Let’s get started, shall we?</p>\n      </>\n    ),\n    button: {\n      text: 'Improve usability testing',\n    },\n    cover,\n  },\n  {\n    url: '/usability-testing/what-is-usability-testing/',\n    title: 'Chapter 1',\n    desc: 'What is usability testing? Definition and a review of the best methods',\n    metaDesc: `What is the best way to improve your user experience? Conducting usability testing! Find out what it is, what benefits it brings, and what methods to use.`,\n    timeToRead: 7,\n    author: authorKasia,\n    date: 'June 09, 2020',\n    heading: (\n      <>\n        <p>\n          Creating a product that resonates with its end-users is crucial to a company’s success. In\n          fact,{' '}\n          <Link\n            href=\"https://startupdevkit.com/chapter-1-no-market-need-product-market-fit/\"\n            rel=\"noopener noreferrer nofollow\"\n            target=\"_blank\"\n          >\n            42% of startups fail\n          </Link>{' '}\n          due to the lack of product-market fit. How can you make sure you don’t follow in their\n          steps? By conducting usability testing of your product. What is usability testing? To put\n          it simply, it’s the process of gathering data on how your end-user interacts with your\n          product, so you can understand its strengths, weaknesses, and sticking points. In the\n          following article, we’re going to cover several usability topics and methods, including\n          the benefits of usability testing, types of usability testing, and the different methods\n          used to improve user experience.\n        </p>\n      </>\n    ),\n    button: {\n      text: 'Improve usability testing',\n    },\n    cover,\n  },\n  {\n    url: '/usability-testing/usability-testing-questions/',\n    title: 'Chapter 2',\n    metaDesc: `Planning to conduct user tests of your website or app? Find out what usability testing questions to ask to ensure you get the best results.`,\n    desc: '24 Usability Testing Questions You Need To Ask Your Audience',\n    timeToRead: 8,\n    author: authorAnia,\n    date: 'June 09, 2020',\n    heading: (\n      <>\n        <p>\n          Understanding who your audience is is essential if you want to create products that not\n          only help your users achieve their goals, but are also easy and enjoyable to use. Apart\n          from observing how your customers interact with your product, the best thing you can do to\n          improve UX is to ask the right usability testing questions.\n        </p>\n      </>\n    ),\n    button: {\n      text: 'Improve usability testing',\n    },\n    cover,\n  },\n  {\n    url: '/usability-testing/usability-reporting/',\n    title: 'Chapter 3',\n    desc: 'How to Become Great at Usability Reporting',\n    metaDesc: `Everything you should know about usability reporting: what it is, what metrics to focus on, and what to include in your usability report.`,\n    timeToRead: 8,\n    author: authorAnia,\n    date: 'June 11, 2020',\n    heading: (\n      <>\n        <h2>The Key to Launching a Successful Product</h2>\n        <p>\n          Brilliant ideas are the backbone of great products. Most products are developed with an\n          intent to provide a solution or cater to a niche market. However, only a handful of great\n          products ever reach the top.{' '}\n        </p>\n        <p>\n          So, what is the secret behind reaching that top spot? It is quite simple –conducting\n          well-planned usability testing and reporting to deliver a premium end-user experience.\n          According to research, 70% of CEOs believe that impressive UX and CX offers a great\n          competitive advantage to businesses.{' '}\n        </p>\n        <p>\n          In the following article, we are going to talk about what entails a usability testing\n          report, which metrics to pay attention to, as well as a few tips on how to craft it\n          efficiently.{' '}\n        </p>\n      </>\n    ),\n    button: {\n      text: 'Improve usability testing',\n    },\n    cover,\n  },\n  // {\n  //   url: '/usability-testing/usability-reporting/',\n  //   title: 'Chapter 3',\n  //   desc: 'How to become great at usability reporting',\n  //   timeToRead: 7,\n  //   author: authorAnia,\n  //   date: 'June 09, 2020',\n  //   button: {\n  //     text: 'Improve usability testing',\n  //   },\n  // },\n  {\n    url: '/usability-testing/usability-testing-tools/',\n    title: 'Chapter 4',\n    desc: '9 Usability Testing Tools You Need To Optimize Your UX',\n    metaDesc: `What’s the secret to deriving insights on your users’ in-app or on-site behavior? Using the right usability testing tools. Find out which tools to choose.`,\n    timeToRead: 8,\n    author: authorKasia,\n    date: 'June 09, 2020',\n    heading: (\n      <>\n        <p>\n          What’s the secret sauce to deriving insights on your users’ in-app or on-site behavior?\n          Using the right usability testing toolkit!{' '}\n          <span role=\"img\" aria-label=\"emoji\">\n            💪\n          </span>\n        </p>\n        <p>\n          There’s a whole range of tools you can choose from – from session recording software like\n          LiveSession, A/B testing tools like Unbounce, all the way through powerful analytics\n          software like Google Analytics and Mixpanel. While the exact configuration comes down to\n          personal preference, it’s important to cover three areas: live session recording, A/B\n          testing and reporting & analytics.\n        </p>\n        <p>\n          In today’s article, we talk about 9 usability testing tools that will help you optimize\n          your user experience and drive more engagement. The link to the post is in the comments.\n        </p>\n      </>\n    ),\n    button: {\n      text: 'Improve usability testing',\n    },\n    cover,\n  },\n  {\n    url: '/usability-testing/website-user-testing/',\n    title: 'Chapter 5',\n    desc: 'The benefits of website user testing and how to do it right',\n    metaDesc: `How to ensure flawless UX on your website? Among others, by running website user testing. Find out how, why, and when to run usability tests on your site.`,\n    timeToRead: 7,\n    author: authorKasia,\n    date: 'June 09, 2020',\n    heading: (\n      <>\n        <h2>Testing a website for usability is a necessity, not an option </h2>\n        <p>\n          Website development is a lengthy but exciting process. From content development, planning,\n          designing prototypes to launching the website, it involves layers of crucial steps. But\n          the most important step before launching a website is to test its efficacy and\n          functionality. There is no better way to do it than to put yourself in the end-users’\n          shoes. In this article, we are going to explore the benefits of website user testing and\n          how to perform it in the best way possible.\n        </p>\n      </>\n    ),\n    button: {\n      text: 'Improve usability testing',\n    },\n    cover,\n  },\n  {\n    url: '/usability-testing/mobile-usability-test/',\n    title: 'Chapter 6',\n    desc: 'What is a mobile usability test and do you need it?',\n    metaDesc:\n      'Conducting mobile usability tests is necessary to ensure your users return to the app. Find out how to test your apps effectively and what tools to use.',\n    timeToRead: 7,\n    author: authorAnia,\n    date: 'June 09, 2020',\n    button: {\n      text: 'Improve usability testing',\n    },\n    heading: (\n      <>\n        <p>\n          According to{' '}\n          <Link\n            href=\"https://buildfire.com/app-statistics/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer nofollow\"\n          >\n            Buildfire\n          </Link>\n          , a leading mobile app builder platform, an astounding 2.8 million mobile apps are offered\n          in the Google Play Store, whereas 2.2 million apps are available for download in the iOS\n          App Store.\n        </p>\n        <p>\n          With such a colossal competition, chances of your mobile app topping the charts are quite\n          slim. However, there are ways to beat the competition. Applications that bring forth\n          innovative concepts and creative solutions for the digital world can easily gain\n          popularity.\n        </p>\n        <p>\n          Another important factor that garners success is ensuring your app provides a premium user\n          experience. If the end-users are engaged, they will keep coming back for more.\n        </p>\n        <p>\n          But how can we achieve all this in the advanced world of mobile app development? The\n          answer is simple – by conducting mobile usability testing.\n        </p>\n        <p>\n          Before you embark on the exciting journey of mobile usability testing, let us discuss what\n          a mobile usability test is, how it benefits your business, and how to conduct it. We will\n          also talk about five recommended usability testing tools that might come in handy during\n          app testing.\n        </p>\n      </>\n    ),\n    cover,\n  },\n];\n","module.exports = __webpack_public_path__ + \"static/unnamed-3--43a8649e7752ff799f5b3022b4788d77.png\";","module.exports = __webpack_public_path__ + \"static/3-6d8704889c6fee7cc0383130984e9994.png\";","module.exports = __webpack_public_path__ + \"static/10-bc932d747e2d76f47dce619c7f72e0ef.png\";","module.exports = __webpack_public_path__ + \"static/4-fb4a06f24758d1fdb8adde88a5a63d5f.png\";","module.exports = __webpack_public_path__ + \"static/8-47e78319ce34fa8392147ff495f9f4cf.png\";","module.exports = __webpack_public_path__ + \"static/usability-testing-cover-c8655856fcdbac30f4d12ec169c62bb2.png\";","module.exports = __webpack_public_path__ + \"static/7-da07824cdc9bbddc24f587293bad2632.png\";","import React from 'react';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport { Post } from 'components/blog/content/styled';\nimport Link from 'components/ui/link';\nimport GuideArticle from 'hoc/guideArticle';\nimport { authorKalina as author } from 'data/authors';\nimport ArticlePreview from 'components/blog/blogArticlePreview';\nimport ImageModal from 'components/ui/image-modal';\nimport { frontmatter as articleDesc } from 'pages/blog/tips-to-improve-sign-up-forms-with-examples';\nimport {\n  meta as articleDesc2,\n  WhatsNext,\n} from 'pages/tutorials/guide-to-ab-testing-with-livesession';\nimport { useSourceParams } from 'hooks/useSourceParams';\nimport { data } from 'data/guides/usability-testing';\nimport Code from 'components/help/codeSnippet';\nimport img1 from 'img/tutorials/form-analytics/1.png';\nimport img2 from 'img/tutorials/form-analytics/2.png';\nimport img3 from 'img/tutorials/form-analytics/3.png';\nimport img4 from 'img/tutorials/form-analytics/4.png';\nimport img5 from 'img/tutorials/form-analytics/5.png';\nimport img6 from 'img/tutorials/form-analytics/6.png';\nimport img7 from 'img/tutorials/form-analytics/7.png';\nimport img8 from 'img/tutorials/form-analytics/8.png';\nimport img9 from 'img/tutorials/form-analytics/9.png';\nimport img10 from 'img/tutorials/form-analytics/10.png';\nimport img11 from 'img/tutorials/form-analytics/11.png';\nimport abtestCover from 'img/tutorials/abtest.png';\n\nconst Guide = () => {\n  const bannerLink = useSourceParams('banner');\n  const ctaEnd = useSourceParams('cta');\n  return (\n    <Post>\n      <p>\n        Almost{' '}\n        <Link\n          href=\"https://wpforms.com/online-form-statistics-facts/\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer noopener\"\n        >\n          three-quarters\n        </Link>{' '}\n        of all companies use online forms. Half of them claim it’s their most effective lead\n        generation tool\n      </p>\n      <p>\n        With this tutorial, you’re going to learn how to optimize form on your website. Among other\n        things, we’re going to cover:\n      </p>\n      <ul>\n        <li>\n          The term <i>form analytics</i>\n        </li>\n        <li>Optimization strategies for website forms</li>\n        <li>Tips and tricks for analyzing forms with LiveSession</li>\n      </ul>\n      <div id=\"what-is-form-analytics\" className=\"section-container\">\n        <h2>What is form analytics</h2>\n\n        <p>\n          There is one step on the way between website visit and conversion that’s often omitted.\n          This step is, as you might have guessed, <strong>form completion</strong>. That’s the\n          point where you can make it or break it.\n        </p>\n        <p>\n          <strong>Form analytics</strong> can help you solve potential problems and come up with\n          ideas for optimization. There are two main types of form analytics:\n        </p>\n        <ul>\n          <li>\n            <strong>Qualitative </strong>– e.g., which steps are most problematic. This kind of data\n            can be retrieved from session recording apps, such as LiveSession.\n          </li>\n\n          <li>\n            <strong>Quantitative</strong> – e.g., how many people have completed the form. You’ll\n            find these number in tools like Google Analytics.\n          </li>\n        </ul>\n        <p>\n          Analyzing the performance of your forms is a valuable addition to your{' '}\n          <Link href=\"/usability-testing/\" target=\"_blank\" rel=\"noopener noreferrer\">\n            usability testing\n          </Link>{' '}\n          suite, too. This way, you may find some critical issues that stop users from continuing\n          their journey.\n        </p>\n        <p>\n          An example from our{' '}\n          <Link href=\"/customers/rocketlink/\" target=\"_blank\" rel=\"noopener noreferrer\">\n            RocketLink case study\n          </Link>{' '}\n          makes a great illustration here. In that case, the users were supposed to enter their\n          Facebook Pixel ID in one of the form fields. Instead, they were pasting the whole code\n          snippet. Thanks to form analytics, the RocketLink team could spot this issue and take\n          action right away.\n        </p>\n\n        <a\n          className=\"action-banner\"\n          href={bannerLink.link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Want to spot issues like these? Try LiveSession for free.\n        </a>\n\n        <p>So, how can you optimize forms on your website to avoid these issues?</p>\n      </div>\n      <div id=\"how-to-optimize-forms-on-your-website\" className=\"section-container\">\n        <h2>How to optimize forms on your website</h2>\n\n        <p>Below we’re sharing some of our best tips for website form optimization:</p>\n        <h3 id=\"keep-it-short-and-sweet\">Keep it short and sweet</h3>\n\n        <p>\n          Before you create your form, decide what kind of information is absolutely essential. The\n          golden rule is not to ask your user for more data then needed. It’s not just about data\n          processing: the longer the form, the higher the chance the user won’t complete it.\n        </p>\n        <p>\n          The choice of form fields depends, obviously, on its purpose. According to BrightTALK\n          trends report, 97% of B2B professionals believe that email is the most important form\n          field for lead generation, followed by name and company.\n        </p>\n        <h3 id=\"less-is-more\">Less is more</h3>\n\n        <p>\n          Do you really need the name, though? Even though it’s often mentioned as a best practice\n          and an opportunity for personalization, it’s not absolutely necessary to ask for it.\n        </p>\n        <p>Have a look at this example from Netflix:</p>\n        <ImageModal\n          src={img1}\n          alt=\"Form Analytics - 1\"\n          title=\"LiveSession - Form Analytics Tutorial\"\n        />\n        <p>\n          The registration is as simple as can be. At first, they’re only asking for your email\n          address. The name is not yet necessary at this stage – you might as well add it later.\n          This is the perfect example of a case where <em>less</em> really<em> </em>is<em> more</em>\n          .\n        </p>\n        <h3 id=\"use-clues\">Use clues</h3>\n\n        <p>\n          Every part of your form should serve a clear purpose. Let’s analyze this crystal clear\n          example from Microsoft:{' '}\n        </p>\n        <ImageModal\n          src={img2}\n          alt=\"Form Analytics - 2\"\n          title=\"LiveSession - Form Analytics Tutorial\"\n        />\n        <p>\n          The key to success here is <strong>microcopy</strong>, also known as the interface text.\n          It’s very simple, yet every word is used with a goal in mind:\n        </p>\n        <ul>\n          <li>\n            <strong>Header</strong> – <em>Create account</em> indicates what is about to happen\n          </li>\n\n          <li>\n            <strong>Placeholder text</strong> –{' '}\n            <em>\n              <Link href=\"mailto:someone@example.com\">someone@example.com</Link>\n            </em>{' '}\n            suggests the email form\n          </li>\n\n          <li>\n            <strong>Alternatives</strong> – The user knows the two other options (using a phone\n            number or a new email) they can choose from.\n          </li>\n        </ul>\n        <p>Nothing more, nothing less.</p>\n        <p>\n          When creating your form, be sure to reevaluate the microcopy you use. Maybe there’s\n          something you can edit out, or maybe it would be good to add some extra clues?\n        </p>\n        <h3 id=\"leverage-social-proof\">Leverage social proof</h3>\n\n        <p>\n          Forms are the decision-making moments, and making a decision may need a little nudge. See\n          how{' '}\n          <strong>\n            <Link\n              href=\"https://www.liveagent.com/\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer noopener\"\n            >\n              LiveAgent\n            </Link>\n          </strong>{' '}\n          leverages the power of <strong>social proof: </strong>\n        </p>\n        <ImageModal\n          src={img3}\n          alt=\"Form Analytics - 3\"\n          title=\"LiveSession - Form Analytics Tutorial\"\n        />\n        <p>\n          This particular sign-up form is crafted for B2B SaaS professionals. The review on the left\n          side comes from the CEO of a SaaS company, and you can put a face to the name as well.\n          What’s more, you can easily access hundreds of other reviews on the most popular software\n          review sites.\n        </p>\n        <h3>Keep usability heuristics in mind </h3>\n\n        <p>Last but not least, we’re happy to share our number one UX design tip:</p>\n        <p>\n          <strong>When in doubt, turn to usability heuristics. </strong>\n        </p>\n        <p>\n          These{' '}\n          <Link\n            href=\"https://www.nngroup.com/articles/ten-usability-heuristics/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer noopener\"\n          >\n            design principles\n          </Link>{' '}\n          were created by Jakob Nielsen, an acclaimed UX guru. Here are some of the most important\n          ones to keep in mind when working on your forms:\n        </p>\n        <ul>\n          <li>\n            <strong>Visiblity of system status</strong> – When the form is a bit long, it’s good to\n            include a progress indicator to encourage the user.\n          </li>\n\n          <li>\n            <strong>Consistency and standards</strong> – Keep the names consistent throughout the\n            whole process. If the action is called <em>Registration</em>, don’t switch to{' '}\n            <em>Sign up</em> later on.\n          </li>\n\n          <li>\n            <strong>Error prevention</strong> – As we’ve mentioned above, if a form field is\n            ambivalent, you might want to include a clue in the microcopy.\n          </li>\n        </ul>\n      </div>\n      <div id=\"how-to-analyze-forms-with-livesession\" className=\"section-container\">\n        <h2>How to analyze forms with LiveSession</h2>\n\n        <p>\n          Use the <strong>Form submit </strong>and <strong>Form value </strong>filters to analyze\n          how users interact with forms.\n        </p>\n        <ol>\n          <li>\n            <p>\n              Select the <strong>Form submit </strong>filter from the <strong>INTERACTIONS</strong>{' '}\n              section:\n            </p>\n\n            <ImageModal\n              src={img4}\n              alt=\"Form Analytics - 4\"\n              title=\"LiveSession - Form Analytics Tutorial\"\n            />\n            <p>\n              Enter the form ID or selector. If you don’t know your form selector, you can use the{' '}\n              <strong>anything</strong> operator.\n            </p>\n            <p>\n              {' '}\n              <strong>Tip: </strong>To narrow down the results, you can also use the{' '}\n              <strong>Visited URL</strong> filter.\n            </p>\n\n            <ImageModal\n              src={img5}\n              alt=\"Form Analytics - 5\"\n              title=\"LiveSession - Form Analytics Tutorial\"\n            />\n          </li>\n          <li>Open recording from the list.</li>\n\n          <li>\n            <p>\n              Enable event filtering on the <strong>Timeline events</strong> list, on the right side\n              of the recording:\n            </p>\n\n            <ImageModal\n              src={img6}\n              alt=\"Form Analytics - 6\"\n              title=\"LiveSession - Form Analytics Tutorial\"\n            />\n\n            <p>\n              The matched event will be highlighted on the list. Click on it to jump to this event\n              in the recording:\n            </p>\n\n            <ImageModal\n              src={img7}\n              alt=\"Form Analytics - 7\"\n              title=\"LiveSession - Form Analytics Tutorial\"\n            />\n          </li>\n          <li>\n            <p>\n              You can also add <strong>Error Clicks</strong> and <strong>Rage Clicks </strong>filter\n              to your form submit search. Combining these filters together will help you find\n              moments when your users got frustrated:\n            </p>\n            <ImageModal\n              src={img8}\n              alt=\"Form Analytics - 8\"\n              title=\"LiveSession - Form Analytics Tutorial\"\n            />\n          </li>\n          <li>\n            <p>\n              To find a form value change of a specific element, use the <strong>Form value</strong>{' '}\n              filter:\n            </p>\n            <ImageModal\n              src={img9}\n              alt=\"Form Analytics - 9\"\n              title=\"LiveSession - Form Analytics Tutorial\"\n            />\n            <p>\n              In the example above, the search will show all sessions where the user has filled a\n              form element with a <Code inline>input[name=”quantity”]</Code> selector.\n            </p>\n          </li>\n          <li>\n            <p>You can also use a filter based on typed value:</p>\n            <ImageModal\n              src={img10}\n              alt=\"Form Analytics - 10\"\n              title=\"LiveSession - Form Analytics Tutorial\"\n            />\n            <p>\n              <strong>Tip:</strong> Please note that you need to enable keystroke recording to use\n              this filter. Otherwise, there will be no results. You can learn how to enable\n              keystroke recording{' '}\n              <Link\n                href=\"/help/how-to-record-keystrokes/\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                here\n              </Link>\n              .{' '}\n            </p>\n          </li>\n          <li>\n            <p>Once you’re done, save the filters as a segment for future use:</p>\n            <ImageModal\n              src={img11}\n              alt=\"Form Analytics - 11\"\n              title=\"LiveSession - Form Analytics Tutorial\"\n            />\n          </li>\n        </ol>\n        <a className=\"action-banner\" href={ctaEnd.link} target=\"_blank\" rel=\"noopener noreferrer\">\n          Analyze your forms and improve performance! Try LiveSession now\n        </a>\n      </div>\n    </Post>\n  );\n};\n\nconst Wrapped = GuideArticle(Guide);\n\nconst meta = {\n  title: 'Form analytics',\n  url: '/tutorials/form-analytics/',\n  description: `Online form analytics is crucial in greatly boosting lead generation. How? \n  LiveSession's advice is here to help out.\n  `,\n  author,\n  date: new Date(2020, 8, 16),\n  group: 'Tutorial',\n  tutorials: true,\n  customSection: (\n    <WhatsNext>\n      <h2 className=\"heading\">What’s next?</h2>\n      <p className=\"desc\">\n        Now you know everything you need to get started with form analytics. For more inspiration,\n        be sure to check out these resources:\n      </p>\n      <div className=\"article-container\">\n        <ArticlePreview {...articleDesc} isList />\n        <ArticlePreview {...articleDesc2} img={abtestCover} isList />\n        <ArticlePreview {...data[0]} img={data[0].cover} isList />\n      </div>\n    </WhatsNext>\n  ),\n};\n\nexport { meta };\n\nexport default () => {\n  const { cover } = useStaticQuery(graphql`\n    query CoverFormAnalytics {\n      cover: file(relativePath: { eq: \"tutorials/formanalytics.png\" }) {\n        childImageSharp {\n          fluid(quality: 95) {\n            ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n    }\n  `);\n  return (\n    <Wrapped\n      title={meta.title}\n      description={meta.description}\n      date={meta.date}\n      author={meta.author}\n      url={meta.url}\n      group={meta.group}\n      img={cover.childImageSharp.fluid}\n      tutorials={meta.tutorials}\n      customSection={meta.customSection}\n    />\n  );\n};\n"],"sourceRoot":""}