Whether it’s evaluating a current website, testing a prototype, or iterating throughout the development cycle, Click Tests are a fast and cost-effective way to ensure your design works for your users.

Let’s explore the what, why and how of click testing…

What is Click Testing?

Click tests are a quick and simple way to test and validate wireframes, designs and prototypes of websites, apps, or progressive web apps. The test presents participants with a static image or screenshot of a page from the site or app, before asking questions such as, “Where would you click to access specific content?”. Where a user clicks is recorded for post-test analysis, with the first place they select being the most common measurement – this is often referred to as ‘first-click testing’. Clicks tests can be done for everything from high-res images to scanned doodles on a bar napkin.

Why do you need to conduct this type of testing?

Do you know what grabs the most attention on your website according to your visitors?

How about which part makes visitors trust you?

Or perhaps where they would click to find the information they’re looking for?

If you don’t have a clear picture, then this is exactly why you need to be conducting click testing on your site. This way, you can ask your visitors to “Click on the elements that make you trust this page” or “Click on the first thing that grabs your attention on this page” and understand if what you’ve designed does or doesn’t work with your users.

When to conduct this type of testing?

Click testing is an ideal solution to evaluate and iterate concepts with users at an early stage, allowing research and design to happen side by side, saving you both time and money throughout the product lifecycle.

One great benefit of click testing is that you don’t even need to have a website up and running to verify your ideas. Along with live sites, you can also test prototypes and wireframes. Even rough paper sketches will do – negating the need for a high-resolution screenshot and resulting in valuable user feedback early in the design phase

What results do you get?

Click tests generate several useful results. By designating specific areas as “success” the test can create effectiveness ratios. On top of this, click tests also generate click maps, heat maps and dark maps, offering several ways to visually understand where users are focusing. Furthermore, user’s clicks can be broken down into first clicks, first number of clicks, or last clicks to understand where users are clicking over time. We’ve explained some of these results further below.

Click Effectiveness

The test results will show the exact number of participants who clicked on a success area and non-success area, which is usually shown as a pie chart and the percent per each option.

Screen Shot 2015-06-03 at 1.00.01 PM

Clickmaps

Clickmaps can be produced from the aggregated results of all participants. These are visualizations of each individual click to show exactly where users clicked on the page.

Screen Shot 2015-06-03 at 1.00.25 PM

Heatmaps

Heatmaps are aggregated reports that visually display what parts of a page are looked at, clicked on, focused on and interacted with by your online visitors by displaying more heat with each click. The example heatmap below shows that 80% of the test participants clicked in the spot highlighted.

Screen Shot 2015-06-03 at 1.00.47 PM

Darkmaps

Darkmaps are heatmaps that darken the page and show more light coming through depending on where users are clicking, making it easier to visualize areas that users focus on.

Screen Shot 2015-06-03 at 1.01.03 PM

How to build a click test in UserZoom

Check out our explainer video below, or scroll down to read the transcript.

Setting up a screenshot click test in UserZoom is quick and simple.

  • Start by clicking ‘Add Question’ and choosing ‘Screenshot Click Testing’ from the pull-down menu.
  • The first thing you’ll need for the screenshot click test is an image. Start by clicking ‘Add Image’. There are two types of images you can use: 1) you can upload any static image, such as a wireframe prototype, or 2) you can take a snapshot of any webpage by putting in the URL. As an example today, we’ll use Branders.com.
  • By clicking ‘Snapshot’ it’s going to capture that image to use as a screenshot click test.
  • Once you’ve uploaded your static image or used the webpage snapshot, go ahead and click ‘Save’ and you’re ready to go.
  • Now that you have your image uploaded, you’ll want to give your users a task or scenario to do. In this case we’ll ask them “where would you click to find a keychain?”
  • Then you’ll have to define the successful area on the image. You can find multiple parts of a static image to ask specific follow-up questions on. In this case, we’ll find the area that correlates with keychains (a link in the menu, for example) and draw a box around it using your cursor. This way you can mark that as being a successful click and also ask specific follow-up questions.
  • When this is done, click ‘Save’. Then mark tick the box that says ‘Success’, so we can measure effectiveness ratios.
  • The nice thing about doing screenshot click tests with UserZoom is that you can ask specific follow-up questions depending on where they click. As an example, ask them “how easy was it to find the area containing keychains?”
  • Next we’ll add another question by clicking ‘Ask Question. In this case we can use a rating scale to ask them how easy it was to find the area. Add your question to the Question Text box, then define the parameters from Point 1: Very difficult to Point 7: Very easy. Then click ‘Save’.
  • We can send them directly to this follow-up question by using Logic and Conditions. It’s as simple as redirecting from the specific area we’ve predefined and sending them to the follow-up question you prefer. In this case, by clicking on ‘Keychains’ then asking them the follow up question, “How easy was it to find the area for keychains?”
  • Then finally click ‘Save’.

You can do this for any areas on the web-page and ask specific follow-up questions depending on where people are clicking.

How participants will see it

Here’s what a screenshot click test looks like from a participant’s perspective…

What’s unique about click testing with UserZoom?

  • You can quickly and easily test wireframe prototypes.
  • By implementing logic and conditions you can ask specific follow up questions depending on where users click on the page, allowing you to dive deeper without the need of a moderator.
  • You can combine Click Tests with any of UserZoom’s other solutions to get more actionable results from each participant in your study.