The Blur Test is an old art school technique used to reveal a design’s focal point and visual hierarchy. I recommend using it during the design process to mimic the way a user initially views the elements in your design.

Initial Glance
When you first look at the NY Times homepage, you can’t help but be completely overwhelmed by the sheer volume of content. It seems almost chaotic, and reeks of a design driven by too many chefs in one kitchen, all fighting to get their content jammed onto the homepage.

NY Times Statement Of Purpose
The New York Times Company’s core purpose is to “enhance society by creating, collecting and distributing high-quality news, information and entertainment.” Keeping this statement in mind, let’s take a look at the blurred versus non-blurred screenshots of the NY Times online homepage.

NY Times Visual Hierarchy:

1. Top Story: News article on Anthony Weiner
2. Masthead: NY Times logo and advertisements
3. Advertisement: NYSE advertisement
4. Secondary Stories: News articles on Pakistan and Yemen
5. Tertiary Stories: All other news articles

Does this visual hierarchy align with the site’s stated purpose? Does it appear that the NY Times visual hierarchy is focused on displaying “high-quality news, information and entertainment?”

I would say: not really. The Top Story does appear to be the most important, and it is indeed a news item, but whether it’s “high-quality” news is subject to debate. Regardless, the next two most prominent areas are the Masthead and large Advertisement, and neither are news items. The fourth and fifth most prominent are Secondary and Tertiary Stories, which would be fine were it not for the Tertiary Stories being blended together in a sea of noise, thereby making them almost impossible to scan through and read. Even the structure of how the headlines and excerpts are formatted and displayed are a mess. A few points:

• Too many headline font sizes
• Irrelevant author bylines are displayed in all CAPS
• Red time stamps scream for attention and are stuck after the bylines
• News items end with even less important “Post a Comment | Read (41)” content

To say this site suffers from “kitchen sink” syndrome is an understatement. What this design could use most is a delete button, but I would start with this:

• Strip out all unnecessary content – Any content (text or graphics) that is not absolutely valuable to a reader looking to consume news should be removed first.
• Document a Screen Inventory – List out all the unique content components.
• Assign a visual weight to each item in the screen inventory – ie: highest, high, medium, low, lowest.
• Create a few UI design structures (in wireframe format) to support the visual hierarchy.
• Test the UI designs with users.
• Iterate.
• Create Visual Design.
• Test the Visual Design with users.
• Iterate.
• Begin development.

The Blur Test is an old art school technique used to reveal a design’s focal point and visual hierarchy. I recommend using it during the design process to mimic the way a user initially views the elements in your design.

Visual Hierarchy Vs Stated Purpose:
Let’s take a look at the roundup of the order of visual hierarchy and the immediate takeaway from each:

1. Squirrel Photo: News article on the “Year In Pictures.”
2. Large Blue Headline: News article about the 9/11 Bill.
3. Small Van Photo: News article about an L.A. storm.
4. Lindsay Lohan Photo: News article about Lindsay Lohan.
5. Blackberry ad: Advertisement.

The Blur Test is an old art school technique used to reveal a design’s focal point and visual hierarchy. I recommend using it during the design process to mimic the way a user initially views the elements in your design.

UX Magazine’s Stated Purpose
UX Magazine “combines original articles with the best from blogs and online media to deliver an online magazine that covers the best new thinking on design, strategy, technology, and common sense.“. Its target audience is designers – UX designers, UI designers, Information Architects, etc…

Let’s see how UX Magazine holds up to The Blur Test
Above is a blurred and non-blurred screenshot of the UXmag.com homepage. The blurred version reveals how the big red box in the left corner is first element the user is most likely to see. Unfortunately, when your eye focuses on the content inside the red box, it appears that the REI text and supporting photo could easily be confused with an advertisement for REI instead of actual content for a UX Magazine article.

From there, it’s a toss up between which of these three areas carry the most visual weight – the photo of the man’s face, the “STAY CONNECTED” box above him and the three boxes along the bottom. Since we know people are attracted to faces, we’ll go with the man’s face, which appears to be linked to the thought bubble above it. Unfortunately, it’s not immediately obvious as to why his face is there – but once we do, at least it appears to be linked to content for an interview.

Next, let’s say we looked at the “STAY CONNECTED”, which contains links to the site Twitter, Facebook, RSS and Email. Is this really the second or third most important piece of content on the homepage? It certainly appears to be.

Finally, there are the three boxes along the bottom. One box contains a copyright line, which is surrounded by a think red outline begging for attention – but did I mention that it contains a copyright line. The other two boxes speak to what UX magazine is about and who its contributors are.

From there, almost everything else carries the same visual weight and literally appears to blur together.

The Disconnect:
So, let’s look at the order of visual hierarchy and the immediate takeaway from each:

1. Big Red Box: Appears to be an advertisement for REI
2. The Man’s Face: links to an interview – but it’s not obvious.
3. “STAY CONNECTED”: social, RSS and email links.
4. 3 Bottom boxes: copyright, what we do, who writes for us.
5. Everything else. headlines and excerpts for UX content articles.

Does this visual hierarchy align with the site’s stated purpose? Ironically, the area that appears least important (#5) contains the most important content – according to the site’s own stated purpose.

Avoiding The Disconnect:

1. Before you begin designing a page, list all the items that need to be displayed on the homepage and rank them in priority order.
2. Make sure featured content looks like real content and not an advertisement.
3. Make sure less important items appear less important by where they are positioned and how they are graphically displayed.
4. Perform “The Blur Test” again.

The Blur Test is an old art school technique used to reveal a design’s focal point and visual hierarchy. I recommend using it during the design process to mimic the way a user initially views the elements in your design.

Go Daddy’s Stated Purpose
Go Daddy is the world’s #1 choice for domains by providing innovative, competitively-priced products, delivering the highest quality customer service, and by always appreciating and listening to its customers! Its target audience is anyone who owns (or wants to own) a website or domain name.

Let’s see how Go Daddy Account Manager screen holds up to The Blur Test
Above is a blurred and non-blurred version of the first screen a user sees after logging into their Go Daddy account. The blurred version reveals how the large photo of the woman (Danica Patrick) is clearly the first thing the user sees.

From there, it’s a toss up between the bright orange buttons and the small photos of people below the buttons. Since we looked at the woman first, let’s say we look at the orange buttons next. One button is a large “Buy Now” button. The other is a “Search” Button. Neither button helps me with my account.

Since we know people are attracted to faces, let’s go with the small photos below the buttons next. Again, neither appear related to my account.

Next, let’s say we looked at the small photo of the man’s face in the lower right corner. Once again, we see that the face has nothing to do with my account.

From there, almost everything else carries the same visual weight and literally appears to blur together.

The Disconnect:
So, let’s look at the order of visual hierarchy and the immediate takeaway from each:

1. Danica Patrick: Good looking woman – but clearly she has nothing to do with my account.
2. Orange Buttons: Promotions for Go Daddy services – nothing to do with my account.
3. Small Photos: Instructional videos – nothing to do with my account.
4. Man’s Face: A promotion for Bob Parson’s – nothing to do with my account.
5. My Account! A gray tab with gray text labeled “My Account” – I found it!

Does this visual hierarchy align with the site’s stated purpose? Does it appear that Go Daddy is providing the “highest quality customer service” and “always listening to its customers”?

Ironically, the primary issue with this design is not the actual screen design – it’s the fact that Go Daddy displays its public homepage after the customer logs into their account instead of the initial Account Manager screen.

Avoiding The Disconnect:

1. Align user expectations with system actions.  If a user logs into their account, they will expect to be presented with a screen related to their account – not the site’s public homepage.
2. People are attracted to people. If you don’t want your users to look a person’s face, don’t put a face on the screen.
3. Perform “The Blur Test” again.