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

The blur test for technical documentation

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

The blur test for technical documentation

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

The blur test for technical documentation

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

The blur test for technical documentation

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

The blur test for technical documentation

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

The blur test for technical documentation

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

The blur test for technical documentation

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

The blur test for technical documentation

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

The blur test for technical documentation

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!

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 17 October 2010, in technical writing and tagged , , , . Bookmark the permalink. 9 Comments.

  1. Very interesting and super easy technique, thanks for sharing! I use Five Second Test http://fivesecondtest.com for almost the same – when people have only 5sec to look at your page, they notice only the most prominent parts of it. And you might get the most stunning answers to the simplest questions regarding your page afterwards.
    Seems, both are very useful for a UI designer to stay on the groundπŸ™‚

    • Hallo sasha
      Wow, that’s a very interesting website. What a good idea for a service. Thanks so much for the link. I’ll send it around to our UI designers too, in case they haven’t seen it before.
      Cheers
      Sarah

  2. An interesting post as always Sarah. I enjoy reading your “straight from the heart” posts. I also enjoy the “nature walk” pics accompanying some of your postsπŸ™‚

  3. Techquestioner

    I’ve run across the blur test before, but I can’t remember the specific context. I’ve used it when my job was editing manuals written by others. I’d rapidly flip through to see what kind of breaks and headings were used. If there weren’t any, I’d start chunking and adding heads and subheads. The worst manual I remember working on went from 2 chapters to 8.

    I also prefer to read some blogs in Google Reader, rather than going to the actual sites, because those sites have so much “noise” or interfering attention-grabbing features surrounding the main content that they are hard to read,

    • Hallo there Techquestioner

      Ah, that’s such an interesting point, about reading blogs in Google Reader to cut out the noise. When taking the screenshots, I did cut out the browser toolbars, headers and footers. Then I wondered if I was doing any of the sites a disservice by doing so. Then I decided I wasn’t, because there are so many different browsers that it’s unlikely any site could be optimised for all of them…

      What a complex UI world we live in.

      Cheers
      Sarah

  1. Pingback:   Weekly links roundup by Communications from DMN

  2. Pingback: 7 Easy Changes to UI That Improve IAP Sales | Evan FP

  3. Pingback: Alex Obenauer › Little Big Details: Breaking Down One Piece of a Product Redesign

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: