How we ran a first click test for different screen sizes
Over the past few months, I’ve been doing user research to support the redesign of the cookie messaging on the NHS website. As part of that work I recently ran a first click test to validate some of the latest designs with users on the website.
In a first click test, we find out where a user would click on a webpage to complete a task, such as finding something on a page. This helps us see how easily users find it to get around a website and find what they’re looking for.
When doing things like first click tests, tree tests and card sorts, I like to use an amazing tool called Optimal Workshop. Optimal Workshop does a great job at these sorts of studies and comes with a great set of features.
However, I recently ran into a limitation with Optimal Workshop’s first click test tool, Chalkmark, that left me scratching my head. I didn’t know how to get the users to see the right version of the designs for the device they were using.
The problem with screen sizes (and Chalkmark)
Most of the traffic to the NHS website comes from people using mobile phones. But as you’d expect, it gets plenty of visitors from people using tablets and desktop computers too. This means new designs are made to work on each of these three sorts of devices and their different screen sizes. When we run something like a first click test, we want to make sure when a user sees the study, they see the design for the device they’re using.
When you set a study up on Chalkmark, you upload screenshots of the designs you’re testing, which are then shown to users as part of the test. However, there’s no way to detect the device that someone using to show them the appropriate design. So if I upload a design for a mobile, this would also be seen by users on tablets and desktops as well, rather than the designs meant for those devices.
The problem with the banner
Loads of websites get users to take part in studies and surveys by showing them a banner with a link to the survey. Being able to do this is invaluable for getting a good number of people to take part in the study you’re running.
The problem is that with many of these banners, like the one on the NHS website, you can only put one link to your study or survey. This is a problem because to have a version of the first click test for each type of device people might use, we have to create 3 studies, one for each. This means we have 3 different links.
How we overcame this problem
To make it so people clicking on the banner to take part in the survey saw the right version of it, we needed to be able to detect their screen size and redirect them to the link to the right study. We did that by writing a simple bit of code on a blank webpage. The code below has a simple bit of Javascript that detects a user’s screen size. It then redirects them to the web address to for the version of our first click test for the device they’re using.
We used the breakpoints for different screen sizes from the NHS Digital Service Manual to decide which version users should see.
<!DOCTYPE html>
<html lang=”en”><head>
<meta charset=”UTF-8">
<title>First click test redirect</title> <script type=”text/javascript”>
var screen = screen.width;
if (screen < 641) {
document.location = “web address for mobile study”;
} else if (screen < 769) {
document.location = “web address for tablet study”;
} else {
document.location = “web address for desktop study”;
}
</script></head><body>
</body></html>
Our final problem was that we couldn’t host this code on the NHS website. So we uploaded it to a service called Surge, which allows you to upload static webpages for free. This gave us a single web address with our redirect. We then copied the link to this page to the survey banner on the website. This meant that when users clicked to take part, they were taken to that page, which immediately redirected them to the right version of our study.
Thanks to Mike Monteith for all his help getting this working, and for introducing me to Surge.
