How to create your first-click test

Jump to section

Establish what you want to find out

First-click testing can help you make informed decisions at any stage of a web design or market research project. The key to getting useful data is to be clear why you need it, and exactly what it can help you with.

Gather evidence for the ‘why’ from things like:

  • analytics or user testing that shows people leave before purchasing, or spend a long time on certain pages
  • requirements and briefs from clients and managers
  • data from your support call center on particularly common things people call for (that they could instead find on the website)
  • data on low sales or disappointing engagement from users.

Every task you set will answer variations on the following questions about your webpage, so keep these in mind as you’re figuring out what you want to achieve. The answers to these questions (your first-click test data) will help you make most user-focused decisions about your designs.

  • How many people got their first click correct? How many failed?
  • Where did people click incorrectly, and why might that be?
  • Where did most people click when there’s more than one correct answer?
  • How long did it take people to click on average? Is this too long?

Selecting what you want to test

When you come to create a first-click test, keep the goal in mind: you want to know if people can correctly find the answer to your task with something on the screen presented. 

If we are presenting images of webpages, we know that the first click they make in their journey to their eventual outcome will determine the likelihood of success: if the first click is correct then they are two, to three-times more likely to be successful than if their first choice was a misstep.

Some ideas for things to test include:

  • screenshots of whole webpages (like the homepage, product pages, pricing pages, knowledge base pages, shopping cards, and so on)
  • screenshots of parts of webpages (like top or side menus, mega-menus, account options, any part of a webpage you want to focus on in particular)
  • wireframes created using products like Axure and Invision
  • wireframes created using the back of the nearest piece of paper to you right now
  • app designs
  • ‘internet of things’ things (like remote controls, game consoles, and so on)
  • Magazine covers – do people spot and comprehend the references to articles inside? Is your marketing message landing well?
  • Show two book covers and ask people to click on the one that they like best – a really quick preference test!

Generally, throughout this guide, you will have noticed that we have referred to ‘webpages’, when talking about the ‘stimulus’ that you are uploading and testing in your first click test. Most first click tests are website tests, but all the same principles apply, whatever the stimulus.

A questionnaire can help you probe your results

If you want the ability to segment your participants for in-depth analysis, you can choose to ask pre and post study questions. This can be really useful if you see a split in where people have clicked; it may be due to a specific difference in your audience which you may be able to identify through applying filters based upon questionnaire answers.

Upload JPEGs or PNG files of any size

You can upload JPEG (jpg) or PNG files of any size or dimension. If you upload high-density ‘retina images’, they’ll be scaled down to fit a normal-sized screen. No other image types will be automatically resized to fit. You might want all your images to be consistent across the whole test. If so, resize them before you upload.

The ‘preview’ feature is your best friend when creating a first-click test. Once you’ve uploaded your images and added tasks, preview the test on the devices your participants will use to complete the test. For example, if you are asking participants to complete the activity on a mobile device, preview your study on a mobile device. 

Setting the correct answer locations

*please note this study data is only for example purposes

For each task, click the ‘Set correct areas’ button.

On the image, draw the hotspots that correspond to the ‘correct areas’. You can name the areas, so that when you review the results, the scores will be reported against each named area. 

What to mark as ‘correct’ and when
As with Treejack, it is possible to nominate your ‘correct’ answers after the results have come in. Sometimes you may feel you have to do that as you will realize that you have missed off a correct answer, for example, leaving off a footer link that corresponds to a valid correct click. We generally caution against doing this as you are literally falling into Texas Sharpshooter fallacy: shoot the barn door and then draw the target on afterwards to show you always intended to make that bullet grouping. There will be occasions when you’ll see clicks just outside the rectangle you have drawn; again the temptation is to stretch the rectangle to include these. Control your impulses!

Remember what you are really trying to do with a first click test: work out whether the labels and their locations are triggering the correct response from users when they are presented with a task. Are users clicking the thing you want them to click? Or are you seeing users finding sneaky ‘backdoor’ ways of answering the task? Or perhaps those off-target clicks are telling you your click target is not clear? 

With a click test, you are not trying to get to a perfect score, you are trying to make navigation as painless as possible for the majority of users, so maybe including that ‘correct’ footer link in your results is not really what you should be doing. Instead focus on how to get users to click on the intended link through better, clearer design.

What level of fidelity is acceptable?

As noted, you can click test anything. We have click tested wireframes with no text at all, simply to understand from the page ‘shape’ where people expect things to be. Strangely revealing.

It’s totally acceptable to click test ‘bits’ of a site too; we’ve click tested just the mega-menus, with no page content and we’ve chopped the middle out of pages so that the top of the page and the footer can be seen without scrolling. 

You can leave things out of page designs when testing, but beware then reporting ‘90% of people clicked in the right area’, as you are not acknowledging what might happen in a real world situation. Again, remember the purpose of a click test is not to get a perfect score, it is to learn what you can improve in your designs to better support users’ navigation choices.

Here are some examples of things you could test:
The screen and remote control for a video-streaming service:

An About Us page from a company:

A sketched wireframe for a website design:

A fancier version of the same wireframe:

Wireframe of a website at mobile resolution: