The blur test for assessing page design in technical documentation

The “blur test” is a technique for testing the design of a user interface (UI) or an image. The idea is to squint, or to blur the image in some other way, so that you see the areas of contrast and how they attract your attention. Perhaps we can use the blur test to analyse the design of a page in our technical documentation too.

Last month I heard Patrick Hofmann, UI designer at Google, giving an excellent and engaging presentation at the TCANZ Conference 2010. Here are my notes on his talk. One of the techniques he touched on was the “blur test”.

Go cross-eyed, squint, blur your vision, use a blur setting, to see the surprising areas of high contrast. Are they intended?

Another way of doing the blur test is to look at thumbnails or images of your pages that are reduced in size. Much as you are doing on this blog post!

Out of interest, I’ve had a look at some web pages and specifically some documentation pages, squinting my eyes to see what jumps out at me.

Gmail

Link: http://gmail.com (when not logged in)

What jumped out at me when applying the blur test:

• The blue bar across the top. But it was the bar itself, not the words “Welcome to Gmail”.
• The no-entry sign.
• The picture of a brown box (the icon for “lots of space”).

Conclusion: I’d recommend that Google make the words “Welcome to Gmail” more prominent, by using a better colour contrast or increased text size.

LinkedIn

Link: http://www.linkedin.com/ (when not logged in)

What jumped out at me when applying the blur test:

• The blue bar with words “Join LinkedIn Today”.
• The green button “Join Now”.
• The picture of a brown suitcase emitting fire (the icon for “control your professional identity online”).

Conclusion: Good branding and call to action. Perhaps the colours of the three icons on the left could be adjusted, so that the bottom one doesn’t stand out so much from the other two. On the other hand, that may be the intention.

Atlassian documentation wiki

Link: http://confluence.atlassian.com/

What jumped out at me when applying the blur test:

• The word “Dashboard” at top left.
• The banner at bottom left.
• The picture of a contributor, 2nd from the top on the right.

Conclusion: This Confluence site does not shout out that its primary purpose is as a documentation wiki. We are aware of this fact. It comes up for frequent discussion among the various interested parties. 🙂 The wiki is used for many purposes as well as documentation of our products.

Confluence documentation home page

Link: http://confluence.atlassian.com/display/DOC/Confluence+Documentation+Home

What jumped out at me when applying the blur test:

• The heading “Confluence Documentation Home”.
• The heading “Confluence 3.4.x”.
• The section heading “Administrator’s Guide”.

Conclusion: This is much better than the Atlassian documentation wiki home page shown in the previous example. It’s clear what this page is about and it’s easy to find your way into the rest of the documentation from here.

FLOSS Manuals

Link: http://flossmanuals.net/

What jumped out at me when applying the blur test:

• The big orange bar at the top, with heading “FLOSS MANUALS” and all the action buttons.
• The word “READ” in the middle under the top bar.
• The 2nd grey box on the left with the words “IE is a smelly browser”. Ha ha. 🙂

Conclusion: Good branding and a unique style. The top banner has it all, short and sweet. The two big grey boxes on the left worried me a bit. They grabbed my attention (particularly the second one, where the content changes every couple of seconds) but when I clicked them nothing happened.

OpenDS documentation wiki

Link: https://www.opends.org/wiki/page/Main

What jumped out at me when applying the blur test:

• The words “Welcome to the OpenDS Documentation wiki”.
• The “OpenDS” logo at top left.
• The row of big buttons.

Conclusion: Very welcoming and clear. My attention was drawn immediately to the welcome heading, which also told me this was a documentation wiki. I wondered why the row of big buttons didn’t grab my attention first. Then I realised that it did, but my gaze glanced straight off it. I think the reason is that there are so many buttons with so many different pictures and words to take in, that my brain decided to tackle something simpler first, and landed on the nice and simple “welcome” heading.

Splunk documentation site

Link: http://www.splunk.com/base/Documentation

What jumped out at me when applying the blur test:

• The heading “Welcome to Splunk’s official product documentation!”
• The breadcrumbs “splunk>docs” at top left.
• The big table in the middle, listing all the manuals.

Conclusion: Excellent. My attention was drawn to exactly the right spots.

ad hoc workflows installation guide

Link: http://www.adhocworkflows.com/display/WWW/Install

What jumped out at me when applying the blur test:

• The words “ad hoc workflows” at top left.
• The word “Product” below.
• The screenshot at the bottom.

Conclusion: A great page, very attractive and clear. My attention was drawn immediately to the name of the plugin. At first I wondered what the word “Product” meant, but I soon saw that it led to useful information about the workflows plugin.

ExactTarget documentation site

Link: http://wiki.memberlandingpages.com/

What jumped out at me when applying the blur test:

• The banner with the words “GETTING STARTED”. This banner attracts even more attention, because its content changes as you watch.
• The two green buttons immediately under the banner, with the words “The Getting Started Guide” and “Release Notes”.

Conclusion: What a great front page for a documentation site! I really like this site. Kudos to the designers. I think it’s the star of the show.

So, that’s what I know about the blur test so far

What do you think: Is it a useful, interesting or at least “fun” technique for technical writers? Looking at the above pages, perhaps different things jump out at you. If you decide to try the blur test on any of your own pages, let me know what happens!