Where are we?

We’re creating a framework for a site. The framework is made up of:

• Information architecture

• Page layout

• Look and feel

This page is about the first part: information architecture.

This page’s goals

By the end of this page, you should:

• Know what information architecture is.

• Know how that hierarchy is a common architecture.

• Know that search cuts through a hierarchy.

The visitor’s problem

Suppose Wendy goes to Delightful Dogs’ Web site. She has a goal in mind: “Find out what type of flea shampoo is best for my dog Goober.”

There might be hundreds of pages on the site, for different products, for grooming, exercise, play, diet, ... How is Wendy going to find the specific information s/he is looking for?

Information architecture (IA) is about organizing the content on a site to make it easy for people to complete task goals. This means being able to find information, even with a visitor does not know exactly what information s/he wants.

Hierarchy

One solution is to create a hierarchy on the site. The Weber divides pages into categories and subcategories. The site shows the categories to visitors, usually in nav bars and site maps.

Let’s look at two examples. TigerDirect:http://www.tigerdirect.com/ and Newegg:http://www.newegg.com/ are online retailers of computers and electronics. They both sell thousands of different products. Both companies want customers to be able to quickly find what they’re looking for. If someone can’t find what s/he’s looking for on TigerDirect, Newegg is just a click away.

Here’s the top left of TigerDirect’s page, as it was at the time of writing. There’s a nav bar with some product categories.

Figure 1. TigerDirect

Newegg uses different categories:

Figure 2. Newegg

But both are using a nav bar to present categories.

Each of the categories is divided up further. For example, click on the Computers tab on TigerDirect and you get:

Figure 3. Subcategories

As you might guess, this page uses the <table> tag.

Subcategories have subcategories:

Figure 4. Subsubcategories

And so on.

Hierarchy is the most common way to organize a site. You can capture the organization in structure map. Here’s an example.

Figure 5. Structure map for a dog nutrition site

Choosing categories

There are many different ways to categorize information. TigerDirect and Newegg organize their sites around product categories. They group the products differently, but both sites are about products.

Sites that are not about products do different things. For example, here’s a nav bar from CNN, as it was at the time of writing:

Figure 6. CNN nav bar

The categories are based on the content of the story.

Getting the hierarchy right is important. Visitors want to quickly find the category that’s likely to hold the information they want, then the subcategory, and so on, until they find the specific thing they’re looking for. Visitors will keep clicking through pages, as long as they’re following the scent of the information they need.

Often the people working for the business will know how customers think about things. Start there for your categories.

Site maps

Site maps show the entire structure on a single page. They’re good for a number of reasons.

• They help new visitors understand how you think about the site and its content.

• They help experienced visitors quickly jump to a page deep in the hierarchy.

• They help with searching, as we’ll see in a moment.

Structure map for Delightful Dogs

Here’s your first structure map for the DD site.

Figure 7. First structure map

The “Stores” category will have a page for each store, with business hours, driving directions, a map, and contact information.

The site includes a blog. You and Clara talked about having a blog as a way to engage customers. When a new blog entry appears in a customer’s news reader, it reminds him or her about Delightful Dogs.

Blogs also help people using search engines. Someone searching for “dog food bad ingredients” might come across a blog entry Clara wrote two years ago about the bad things some manufacturers put in dog food. This visitor gets useful information, and sees the DD branding on the page.

You show the structure map to Clara and her staff. Together, you find some problems. First, Delightful Dogs is known for its services. The products are less important to the business, and not a central part of the Delightful Dogs brand. Adding a “Services” category doesn’t seem useful. It just makes visitors click through to an extra level.

The second problem is with the product categories. The product category “Training” makes sense to the employees who train dogs. They think of collars, leashes, and other things as training products. But the “Training” product category isn’t something that customers understand. If they come to the site looking for a collar, they wouldn’t think to look in the training products category.

Another issue is that many customers who want products come in looking for toys. This category makes sense to customers, but it isn’t in the structure map.

Here’s a revised structure map.

Figure 8. Final structure map

Each service is now at the top of the hierarchy, equal to “Products.” L&C stands for leashes and collars (I ran out of space in the box). A toys product category was added.

Clara agrees that this will be a good structure for the site. You tell her that you’ll also add some other pages, like a site map and a copyright page.

Searching

Information architecture is about grouping content to make it easy for site visitors to find. But navigating through a hierarchy isn’t the only way people look for information.

Visitors also find information by searching. This is especially true on very large sites, like Wikipedia. Wikipedia does have a hierarchy. Here’s part of it:

Figure 9. Wikipedia categories

In all the times I have used Wikipedia, I don’t remember ever having used the categories. I go right to the search widget:

Figure 10. Wikipedia search widget

Why? I always have a specific question in mind. Maybe I want to look up something about Willow (sigh) from Buffy the Vampire Slayer. It’s faster for me to search than to dig through the structure.

I also search site maps. But not with a widget, with my browser’s search feature. I go to a site map, hit control+F, type in some text, and the browser will show me where on the site map the text appears. It might be deep in the structure, and I can jump right there.

Summary

This page is on information architecture.

• Information architecture is about dividing up site content, so visitors can find what they want.

• Most sites use hierarchies. You should choose categories that make sense to visitors.

• A structure map shows the hierarchy.

• A site map shows the structure of a site in one place.

• Search engines help visitors skip straight to the content they want.

What now?

The first part of a site’s framework is its information architecture. The next part is its page layout. Let’s talk about that next.