In this post, you can watch the replay of our website clinic webinar, where we showed live examples of how to improve websites to make them better and more profitable.
In addition, you’ll also discover the easiest ways to replicate the tests we utilized during the webinar and you’ll find a list of all the sites and resources we mentioned during the call.
Read on to get everything you need, to start making more sales from your site as well.
Watch the video below to see the full website clinic webinar recording:
How to Construct a Blur Test Using Free Online Tools
On the webinar, we did “blur tests” for each of the sites that we looked at. Blur tests are a great way of identifying the areas of high contrast on your site as these are the areas that naturally draw the eyes of your readers and therefore get their attention.
The idea is to take a screenshot of your web site, use an image editing tool to desaturate the colours and then run a Gaussian blur filter to the point where you can’t make out the text on the page.
If you’re not a graphics designer and you don’t really understand the terms that I’ve just mentioned – have a look at this very quick tutorial below where I show you how you can construct a blur test for your own site using only free tools that you can access online:
- Take a print screen of your landing page. To do this simply search for the “Prt Scr” button if you’re a PC user or Apple Key + Shift + 3 if you’re a Mac user.
- Now you have an image of your web site saved to your clipboard that you can use. The next step is to navigate to a great little site called http://www.pixlr.com and create a new image:
- Click “Create a New Image” and then specify the height and width of the canvas. You’ll need to make sure that the canvas size is at least as big as the resolution of your monitor so that your screen grab fits!
- Go to the “Edit” menu and then click “Paste”
- Now you should have an image of your web site in the online web editor. The next step is to desaturate the colours in the image. You can do that by going to “Adjustment” and then “Desaturate”
- Finally, you simply need to apply the Gaussian blur. Simply head to the “filters” menu and then select “Gaussian Blur”. You should change the level of the blur so that you can’t make out any of the text on the page. I used a setting of 60:
- You now have the perfect blur test image for your site! You can also zoom out a little (view -> zoom out). This makes it easier to take in the whole page at a glance. Here’s an example blur test for the the very post you’re currently looking at:-
Another method we used on the webinar was the “five second test”. This is a test to determine how clear the purpose of your site is and how intuitive and easy to understand your navigation and site layout are.
You can do a five second test by showing and web page to someone you know (but who hasn’t seen the page yet) for five seconds and then asking them about it. For a more systematic approach, you can also check out the five second test service, which is a tool provided by Usability Hub.
The following tools and resources were also mentioned during the webinar:
- Firebug (Firefox) and Firebug lite (Chrome) for inspecting page elements and previewing changes. Check out this video tutorial on how to use Firebug.
- Google Website Optimizer – a free and slightly finicky split testing tool.
- Visual Website Optimizer – a very easy to use split testing tool (my favorite).
- Wistia – the video service I use, as mentioned towards the end of the webinar.
Did you enjoy the webinar and this post? Do you want to see more content like this in the future? Please leave a comment below, to let us know!