Information Interplay: Visual Design, Information Architecture, and Content

by Jared M. Spool

Thanks to Marco Dini for the Italian translation to this article.

The error message stated, “Searched for Return Policy. No Results Found.” The shopper stared at the message. “Now what?” she asked.

It took us a while to get to this point. We started by looking at a credit card wallet. She liked the outside design—an adorable scene from a popular animated movie.

But she couldn’t see the back. She wondered how it stored the credit cards. Was there a zippered pocket? “Would it hold my small change?” she kept asking aloud. If it does, she’s buying it.

The product description might have answered her question, but she couldn’t find it. It was hidden below the half dozen unrelated cross-sell items, so the user didn’t scroll to see it.

Of course, had she scrolled that far, the description wouldn’t have answered her question. It had a nice paragraph revealing irrelevant facts, like how the wallet is “constructed from durable leather and a silk blend and is perfect to store all of your daily essentials.” Yet the description provided no indication whether any loose change would fall out.

The shopper reached for a new strategy. Maybe, if they had a reasonable return policy, she’d buy it. Then, if she didn’t like it, she could return it. Not a bad approach.

If only she could find the return policy. Which she couldn’t. There was no link to it on the product page.

That’s when she tried searching. Typing “Return Policy” into the Search box produced that error message, stating no results found.

Poking around on the site did uncover a link labeled “Help” which produced a glorified, unordered Frequently-Asked Questions list. However, apparently returning a credit card wallet is not something frequently asked, because there was no helpful information on that topic.

The shopper gave up. The sale was lost.

Three-way Failure

What we have here is a three-way failure to communicate what the shopper needed to make her purchase. It was a simultaneous failure of the site’s visual design, the information architecture, and the content design.

When she couldn’t easily see the design of the product and she didn’t locate the product description, she encountered visual design issues. When she couldn’t find the page with the return policy, she bumped into an information architecture issue. And the inadequate product description and unclear policy issues were content design issues.

The real problem came from the interplay of the three areas. Had the team fixed one, say the information architecture, she still wouldn’t have succeeded. All three needed to work in harmony.

Skills, Not Roles

Because these three areas are interrelated, they have to be tackled simultaneously. Our research shows that a good team has these at the top of their design skills.

However, the team doesn’t necessarily have three designers, each with a separate skill. The best teams have individuals who are strong in all three areas. When assembling a great team, you need to think in terms of skills, not roles.

Visual Design—Communicating Beyond Aesthetics

There’s a common misconception that visual design’s role is only to provide a pleasing veneer on the page. In fact, visual design’s big role is to boost overall communication.

If visual design does its job well, it brings out the most important information. It pushes the less critical information into the background, so it’ll be easy to find when the user is looking for it, but otherwise out of their way.

Color, fonts, and layout are all the basic tools of the visual designer. The grid is a designer’s friend. The page layout turns into a language that helps both the designer and the user know where to find critical information.

When visual design doesn’t do its job well, the user misses important details. It’s hard to find essential information or critical links, because they aren’t on the page in a logical place. Visual clutter prevents users from seeing what they need.

Yet strong visual design produces miracles. It’s amazing how much information a good visual designer can put on a page and it still feels uncluttered.

Information Architecture—Getting There

In its essence, the role of good IA is getting the user to the next place. It’s more than providing a set of categories or good Search results.

For example, our shopper needed to find the return policy from a product page. She wasn’t on the home page. Using card sorting to make a nice hierarchy of information wouldn’t have helped her.

She needed a prominent link on the product page she was on. After all, when do you consider returning something? Often it’s when you find something you’re not sure of and want to know your options. That’ll be the product page much of the time.

Yet you can’t put every link to every destination on every page. Prioritizing which links go “from here” is a critical part of the information architecture.

If information architecture does its job well, users have clear paths to the content they seek. Our research shows users scan the page for their trigger words, looking for links that will get them where they want to be. The users only resort to Search when they can’t find their trigger words.

When the IA doesn’t do its job well, the users can’t get to where they need to go. The trigger words aren’t present and obvious. Links are missing altogether. Search is unhelpful, even when used as a last recourse.

Good information architecture makes the site flow, feeling intuitive and natural.

Content—Supplying the Answers

“It’s just a couple paragraphs of description, right? How hard can it be?”

Often left for last in the project, the content is why the user comes to the site. It has to be both clear and rich.

If the content is done well, it answers the users’ questions logically, even the questions they don’t realize they have until they read the answers. It tells the users what they need.

When we don’t know what our users need, we tend to write fluff and filler. This never works in our favor.

Designing quality content is iterative. Content designers need to watch people interact. Only then can they tell if all the concerns, questions, and opportunities are addressed.

If the content is done poorly, it falls flat. It leaves the user with more questions than they came with. It gives the impression that the site owners are trying to hide something. It frustrates the user by avoiding the details they are most interested in.

You can see the users become visibly excited when the content tells them what they need.

Using a Scenario-driven Approach

An easy way to ensure you have the right interplay is to assemble a solid set of scenarios. A scenario supplies the context-of-use necessary to set the stage on the subtlety and nuance you’ll need to get the mix just right.

From our shopper’s experience, two scenarios emerged. First, she needed to find specific details about the product, such as whether the wallet can carry loose change effectively. Second, not sure how committed she was, she needed the safety net of the return policy.

Scenarios like these are usually not obvious until we’ve done some research. Once we start watching users interacting with our designs, we can create the important scenarios we’ll want to design against. Those scenarios then help us check our work. We then see if the user can see, find, and understand the necessary information.

Information Interplay

In good design, the interplay between visual design, information architecture, and content is how the user gets the best information. It is when we’ve balanced these three areas well that we see delighted users and achieve our business objectives.

Published here on August 27, 2009.