Weblog

Cutting through the visual clutter: Does your homepage pass the test?

Posted in: Audience, Content, Design, Newspapers, Trends, by: Mario Garcia

Mar 02, 2009
12:01 AM

The first thing you notice when you visit web design guru Jakob Nielsen’s website is that, well, it’s not very designed at all. Nielsen wears that lack of design as a badge. He wants to prove his point visually that good usability is about words, not design. There are plenty of graphic designers that love to disagree with him, and unfortunately there are plenty of beautifully-designed web sites that prove him right—all flash, no substance and no traffic.

I’m of the camp that believes design is just as important as the content. I agree that it’s the content of the site that drives traffic not the design. But design is what helps users find and get through the content. But design is much more than choosing colors or gradients. Design is organization.

In an interview, Nielsen was asked what were the key things designers could do to improve usability. His answer was to discover the three main reasons users come to your site and make these things extremely fast and obvious to do. Well, to make it fast and obvious you need a good design.

It’s especially a larger design challenge with high-content news sites. A cursory look at most news sites and it becomes very obvious, regardless of how good the content, things are hard to find. Often, users don’t even know where to start. It’s as if everything has been dumped onto a page, crammed “above the scroll,” and left to the users to get their machetes out and make their way through the visual clutter. Users don’t want to have to work that hard. They’re too busy.

Results are never good when a site has visual clutter. High bounce rate from the homepage, very little retention and the opportunity for someone doing it better to take your audience. But worse of all is all the good content that gets missed.

What causes visual clutter?

One of the causes of visual clutter is a site that evolves and grows on-the-go, without stopping to re-organize or rethink how the information is provided as more elements are added.

Another cause is the famous “above the fold” argument. “Above the fold” is a print term that somehow found its way to the online world that translates to putting as much information as possible in the area visible on the screen, or above the scroll. Even though we know now from many sources, including Poynter’s EyeTrack study, that users do scroll and that this “fold” doesn’t exist, most web sites still want to cram way too much on the top part of the page. It’s a common theme with some clients so I always carry my trusty links to help my cause.

Ultimately, clutter is a result of a lack of organization, a lack of design.

The tendency is to organize by subject matter or topic. And that works for building an information architecture or site map, but visually it’s better to organize by function. Nielsen’s advice works here—what are the main reasons users come to your site? For a news site the answers are normally to get news, to look for a job, to read columns, to share, to look at photos, to find out what’s going on for the weekend, etc. These are motivations more than categories and should be the basis for how the site should be organized visually.

Visual Segmenting

To demonstrate this we like to do what we call a Visual Segmentation test. The idea is to breakout all the possible motivations (things to do) on a site and assign them a color. Then you take a screen shot of your current homepage and cover the different elements on the page with the corresponding color. I use Photoshop to do this, but a simple box of crayons would work on a print out as well. So a typical test may look like this:

News (read) = green
Multimedia (watch, listen) = blue
Classifieds (find things) = red
Community (share) = yellow
Events (what’s going on) = orange
Advertising (shop) = gray

After you’ve covered every element on the homepage with its appropriate color, you take out the background of the homepage and study how the colors are distributed on the page.

Looking at the site like this usually reveals how scattered the information is, which items have the most prominence and which are lost among the other elements. It also gives you an idea of how hard or easy it is to find the things users want to do on the site.

Think about the main reasons users come to the site and make sure the colors representing that reason are prominent, easy to find and all in one area.  If the colors are grouped nicely, organized, minimal and display a hierarchy of elements, then pat yourself on the back. But if your visual segmentation looks like one of Carmen Miranda’s hats then it’s time to reorganize.

The easier you make it for the user to find what they want to do, the longer they stay on your site. As we start sketching the new design we emphasize a visual organization that does just that. Even assigning a hierarchy to those functions so we can prioritize the experience for the users, often numbering the items on the sketch in order of importance.

Visual Organization for your site

Start with a content inventory of everything you have. Add to it everything you think you need. Then streamline it as much as possible.

Next, determine a function for each piece of content, whether it’s something you read (news, opinion, features), something you watch or hear (multimedia), something you do (poll, submit, comment) or something you buy (classifieds). If you end up with more than six functions on a site, you need to consolidate or delete. More than six functions and you’re giving users too much to do, too much to find. Focus on the three main reasons to come to the site, then add up to an additional three secondary reasons.

Finally, as you start sketching think of the visual segmentation and how a user will interact with this page. Make sure the reasons to be on the site are obvious, organized and segmented properly. Then number them by the importance you think they should have.

This should give you a solid foundation as you build the design out. As you finish the design, do the visual segmentation test again to make sure the colors are organized and uniform.

Good visual organization makes for a fast and easy user experience. Don’t expect your users to call up or send an email thanking you for helping them find things faster and making it easier to scan. These are things they won’t be aware of, but intuitively they will recognize that they didn’t have to work as hard on your site and they’ll reward you by staying longer and coming back. Even Jakob Nielsen would agree—that’s good usability.