Information architecture

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.

Hierarchy

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

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 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.

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.

Site maps

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.

Another way to make a map is to use a drawing program. We talked about OpenOffice Draw earlier. It’s the program I use with CoreDogs.

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:

• Home
• Contact
• Credits
• Products
  • Games
  • Collars
  • Treats
• Services
  • Grooming
  • 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.

Summary

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.

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.

Page layout

Where are we?

You’ve learned about the first part of a site’s framework: information architecture. Let’s move on to page layout.

This lesson’s goals

You learned about layouts earlier. Let’s review the basics.

Regions

Web pages are often divided into the following regions:

Figure 1. Regions

Different things can be placed in different regions.

• The top region is often used to show site branding (logo and site name), and sometimes a horizontal nav bar. It’s often called the header.
• The left region often has a vertical nav bar. It’s also called the left sidebar.
• The right region might show ads, or more navigation. It’s also known as the right sidebar.
• The bottom region might show copyright information, and another nav bar. It’s often called the footer.
• The main content of a page usually goes in the center region.

Here’s how the regions might be used on a particular site.

Figure 2. Regions example

In this one, the top region contains the logo, the site name, and a nav bar. The center region has a page header and content. The bottom region has a nav bar. The left and right regions are not used.

Different layouts for different pages

It helps users if the same things appear on the same places on each page. Imagine if the Home button was on the top left on some pages, the bottom right on others, and the middle right on yet others. Ack!

But it’s common to have two or three layouts for a site. For example, we could have this layout for most pages:

Figure 6. Standard layout

The home page has a news section. Here’s the layout:

Figure 7. Home page layout

Maybe there’s a photo gallery, with its own layout:

Figure 8. Gallery layout

Summary

• Web pages are often divided into regions: top, left, right, bottom, and center.
• You sometimes need more than one layout for a site. Different sections of the site might have their own layouts.

What now?

We’ve looked at two of the three parts of a site’s framework: information architecture, and layout. Now it’s time for look and feel.

Look and feel

Where are we?

You’re creating a framework for a Web site. There are three aspects to it. We’ve already talked about information architecture and page layout. Now we’ll talk about look and feel.

What is look and feel?

Look and feel is about creating a site that:

• Looks good.
• Has a look that matches the site’s purpose.
• Is easy to use.

How do you get a good look and feel?

What I do is borrow someone else’s. Remember that I’m not a good artist. So I do two things:

• List words that describe the look and feel I want.
• Find a design that matches.

Look and feel descriptors

These are words or phrases that describe the look and feel I’m going for. They’re often mood words, like “happy,” “energetic,” or “serious.” They can be things like “retro” or “grunge,” that describe a particular fashion statement.

Color is a big part of look and feel. Different colors evoke different emotions. Blue is placid, conservative. Orange is active. Green and brown bring nature to mind.

But colors mean different things in different places. According to Color Meanings by Culture:

• White means purity in the US. But it’s the color of mourning in China.
• Yellow means courage in Japan, but cowardice in other places.
• Red means passion, love, and danger in the US, but it means purity in India.

It’s easy to make a mistake when you build a site for another culture. Check your design with someone from that culture.

Look for a design

When you have some descriptors, go look for a design that matches. Usually it’s just a gut feel for what seems to fit.

But peoples’ guts tell them different things. Don’t just pick one design. Pick three or four. Then ask other people what they think.

Usability

Make sure that people can actually use your site.

Fancy fonts

Don’t make text hard to read, just so you can use fancy fonts.

Not that fancy fonts are always bad. Check out The HTML5 Herald. It’s a demo site for the book HTML5 and CSS3 for the Real World. It has an old-time feel:

Figure 1. The Herald’s home page

This from the right sidebar:

Figure 2. Right sidebar

The fonts match the old-time feel. The site only uses fancy fonts for headings, which are larger than regular text, so they’re readable.

Speaking of size…

Text size

Text that’s too small is hard to read, especially for older people. Like this:

What does this say?

If you’re looking at a page and the text is too small to read, then you can tell the browser to zoom in. The usual keyboard shortcut for this is Control +. But you don’t want to force users to do that.

If you have to use small text, use a sans serif typeface, like Arial or Verdana. Remember that sans serif typefaces are more plain than serif typefaces:

This is a sans serif typeface. It’s plain.

This is a serif typeface. It’s more fancy.

At small sizes, sans serif typefaces are easier to read than serif typefaces:

Dogs are the best!

Dogs are the best!

These are both 8px text. Too small to be useful for much.

Ask people with poorer eye sight to check your design. What’s easy for you to read might not be easy for them.

Contrast

Be careful with color contrast. The contrast between the text color and the background color can be too low:

Contrast is low.

Here are some high contrast color pairs. The contrasting colors are far apart on the color wheel:

Contrast is high.

Contrast is high.

The last one is hard to look at. An entire page of it will hurt your eyes.

You can experiment with text colors with this tool.

Summary

• Pick some look and feel descriptors.
• Find designs that match. Check them with other people.
• Colors mean different things to different cultures. When in doubt, check.
• Don’t make text hard to read.

What now?

Time to make a framework for your eMe.

Choose a design

Where are we?

You have most of your site’s framework. Information architecture, page layout, and look-and-feel. Now use these things to choose a design.

This lesson’s goals

By the end of this lesson, you should know how to find an existing design that you can base your site on.

Find candidate designs

The first step is to find a collection of designs you can look through. You want to find “candidate designs,” designs that are worth checking out to see if they fit.

I often start with the Metamorphosis Designs collection of free templates. But there are many other collections.

If you find a collection you like, please add it to the links collection.

License check

Make sure you can live with the design’s license terms. Many designs say “Free for personal use.” If the site is for a company, you may need to pay.

“Link ware” is common. That means you can use the design for your own site, as long as you include a link back to the original.

Rough layout check

Say you want this layout:

Figure 1. Target layout

You want a header with a big logo, and a horizontal nav bar inside it. There’s a footer as well.

Here are two designs:

Candidate A, from
Metamorphosis Designs

Candidate B, from Free Website Templates

Figure 2. Candidate designs

To convert the first one to the layout you want, you’d have to:

• Remove the big temple image.
• Remove the left sidebar.
• Add a logo.

To convert the second one, you’d have to:

• Remove the big frog image.
• Remove left and right photo gallery things.
• Create the content area.
• Remove the white talk bubble things.
• Change a logo.

So candidate A is closer to what you need than candidate B. Less work is a Good Thing.

Look-and-feel check

Two things to think about here.

Look-and-feel descriptor check

Take your descriptors, like “happy” and “active,” or whatever you chose. Do they fit the candidate design?

If you want to get other people’s opinions, be careful what you ask them. Don’t ask: “Do you like this design?” You won’t know how they made their decision.

Instead, ask: “What words come to mind when you see this design?” If they say “happy” and “active,” you’re on the right track. If they say “sad” and “lonely,” you might want to rethink your choice. Unless you’re building a sad and lonely Web site.

Custom graphics check

Often there are specific graphics you need to include, like a logo. Especially when you make a site for a company. Make sure that the design’s colors fit with the logo.

Sometimes you’re allowed to change the logo’s colors. For example, if you were building an environmental site for me, and asked, “Can I make the CoreDogs logo dark green?” I would say, “Yes, go ahead.”

But check first. Some companies won’t let you change their logos at all.

Code check

You want a design that’s easy to change. The layout code in particular should be easy to understand.

Find the HTML and CSS code for the things you need to change. If the code isn’t easy to find, you may want to choose a different design.

Check the code. Is it easy to understand?

Here’s the temple design from Figure 2:

Figure 3. Temple design

Here’s some of the code:

<!-- header begins -->
<div id="header"> 
  <div id="logo">
    <h1><a href="#">Metamorph_temple</a></h1>
    <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
  </div>
  ...
</div>
<!-- header ends -->
...
#header {
  height: 433px;
  text-align: right;
  background: url(images/header.jpg) no-repeat;		
}
#logo {
  width: 758px;
  height: 348px;
  text-align: left;
  padding-left: 20px;
  padding-top: 20px;
}

Figure 4. Temple design’s code

It’s easy to find the code for the header and logo. The designer even put in comments (like <!-- header begins -->).

The code’s easy to change as well. For example, you want to remove the photo of the temple. Look at line 14. It sets the background of the header to the file images/header.jpg. Here’s what that image is, resized:

Figure 5. images/header.jpg (resized)

Remove line 14, and the temple photo no longer appears. W00f!

Summary

Choose a design for your site.

• Find some candidate designs. Find one you like.
• Check the license. Can you legally use the design?
• Check the layout. Is it close to what you need?
• Check the look-and-feel. Does it match your descriptors? Does it match your logo and other custom graphics?
• Check the code. Can you find the code you need to change? Is it easy to understand?

If you can answer “yes” to all of these, you have yourself a winner. W00f! You might even find three or four winners, and choose between them.

What now?

You know your information architecture, layout, and look-and-feel. You’ve chosen a design. That’s your entire framework.

Let’s look at your eMe’s framework.