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 what a structure map is.
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 friend 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 she is looking for?
Information architecture (IA) is about organizing the content on a site to make it easy for people to find the information they need.
Most sites use hierarchies. 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 and Newegg 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
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
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 also categorize 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.
What happens when a story fits into more than one category? Like, a story about a singer from Egypt would fit into World and Entertainment.
Good question. Think about this: why are we creating these categories?
Hmm, we’re doing this to help site visitors. So think like them. What would be most useful?
Right! And what’s the answer?
Well, some people would expect it to be in World. But others might think it belongs in Entertainment. You can’t please both of them.
Oh, I know! Put the story in both categories!
Yes! That would make sense. There’s no reason for the story categories to be mutually exclusive.
What’s “mutually exclusive” mean?
Oo! Oo! It means that something can be in only one category. But news isn’t like that.
Yep. So, when in doubt, think of what helps visitors.
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 getting closer to the information they need.
Often the people working for the business will know how customers think about things. Start there for your categories.
A site map is a Web page showing the entire structure of a Web site on a single page. Here’s part of Newegg’s site map:
Figure 7. Site map
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.
Structure map for Delightful Dogs
Here’s a first cut at a structure map for the DD site.
Figure 8. 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.
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 9. 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.
Drawing a structure map
You need to be able to (1) draw a structure map, and (2) capture it in an image file, so you can show it on a Web page.
The simplest is to draw the map out on paper. To capture your drawing in a file, you can scan it, if you have a scanner. Or you can take a photo of the drawing with your cell phone. Then you can email the photo to yourself, plug your phone into your computer, or however you get photos off your phone.
How to make a file for your Web page from a Draw drawing? I usually use a screen capture program. We talked about that as well.
The third way to make a map is to use HTML. You can use
<ul>s. It doesn’t make a drawing, but it’s often good enough.
Here’s some code that will make a map:
<ul> <li>Home</li> <li>Contact</li> <li>Credits</li> <li>Products <ul> <li>Games</li> <li>Collars</li> <li>Treats</li> </ul> </li> <li>Services <ul> <li>Grooming</li> <li>Party planning <ul> <li>Graduation parties</li> <li>New puppies parties</li> <li>Just because parties</li> </ul> </li> <li>Party clean-up</li> </ul> </li> </ul>
Figure 10. An HTML structure map
Here’s what it will look like:
- Party planning
- Graduation parties
- New puppies parties
- Just because parties
- Party clean-up
The fonts and stuff will be different, because of the CSS I use for CoreDogs. You can style it the way you want.
Exercise: Dog parks - Information architecture
Make a structure map for the W00fton county dog parks site. You can make a tree diagram, or just a list.
Make a Web page for your structure map, and put it somewhere on your server. Enter the page’s URL below.
(Log in to enter your solution to this exercise.)
This page is about information architecture.
- Information architecture divides 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.
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.