Austin Govella

Christina Wodtke

Provides information on the concepts of information architecture to design effective and easy-to-undertand interfaces.

Blueprints for the Web

Information Architecture

Jaydee (she/her)

The alternative is thoughtful planning and well-designed information architecture, which improves the following characteristics of your Web site: 

Findability-Allows customers to easily access those items they need, be they spatulas or term papers. 

Usability-Allows customers to wend their way to those items and accomplish the tasks they most want to accomplish. 

Understandability-Provides a good architectural infrastructure necessary to help people make knowledge out of information.

When deciding to paginate a form or process, you should decide how important it is that users complete the form. If it's ok for users to abandon the form and go somewhere else on your site, then leave the global and local navigation visible. If, however, it's critical that they finish the form, then remove the global and local navigation. The user will have fewer distractions and be able to focus on completing the process.

Driving associative navigation with metadata 

Associative navigation is all about associating more content with whatever content the user is currently looking at. You can make all kinds of associations: 

By time: Items that occur, were published, or were saved around the same time. On blogs, these might be the next and previous entries. On a news site, they could be earlier and later articles on the same news event. 

By type: More articles, videos, or photos, based on what the user is looking at. On YouTube, more videos are always just a click away. 

By topic or subject: More items in the same category. Previously we saw how The Huffington Post offered links to more articles in the same section of its Web site. 

By interest: Most popular items. Comcast. net offers links to the most viewed, the most emailed, and the most recommended items. 

By owner or group: More items by the same author or from the same group. 

By community: More items based on what people like you are checking out. Last.fm links to artists that users with similar tastes also enjoy. AI matadata Eor arge sites.

[associative navigation] can be forgotten because they act as shortcuts cutting across the hierarchy of your IA, but they are actually the single most powerful driver of usage on your site. If you have 10 hours to spend on navigation, spend nine on associative.

In every case, pogosticking works for two reasons. First, if you have too many top-level categories, then hiding them as users move through the site makes it easier to use. In iTunes, if you're in Music, you're probably not worried about TV Shows or Movies. Along those same lines, pogosticking can be easier to design. For sites with lots of content, it's not possible to squeeze in all top-level categories alongside all of your local navigation. Consider the alternative: you'd have hundreds of links on a page. Pogosticking is a viable solution when there are many categories holding a lot of content.

Your navigation will necessarily shape how users find content. The two basic patterns of access to content via navigation are called pogosticking and crabwalking.

After choosing a global navigation link, local navigation helps users browse to more specific topics until they find what they need. For users who don't know what they need to know, local navigation provides a list of related topics that might be important.

There are three types of navigation, each defined by where it takes the user (see Fig- ure 8.1). Structural navigation helps users navigate the organizational structure of the Web site. Associative navigation allows users to jump to related information, and utility navigation catches anything important the user needs access to that structural and associative miss.

For each element in your wireframe, it's important to consider several questions: 

• Where does the content come from? If you have a list of related articles specify how they're related. Are they the most viewed? Most viewed from that section?

 What is the nature of the content? Does it vary greatly in length, size, lan- guage, and type?

 Is the element required or optional? What happens if the element doesn't appear on that page? Does the layout change?

 Is the element conditional? Does it vary based on other factors? For example, do administrators see additional links? What happens if an article doesn't have an associated image? What if it does? 

What's the default or expected state? ldeally, what's supposed to happen on the page. 

What are the alternate or error states? How does the design change when things don't go right?

A wireframe gets you to concrete discussions quickly, and since it's simple enough to do on a whiteboard, it's a conversation piece. Later wireframes work as documentation devices.

It's much like the wireframe a sculptor will make before adding clay, as it gives shape and provides support.

There are three types of pages on the Web:

 1. Navigation pages help users determine where to find what they want, and give them access to it.

 2. Consumption pages allow users to consume content. 

3. Interaction pages let users enter and manipulate data.

 Each type of page is optimized for a different kind of user task. Understanding the type of page you need helps you tailor the interface design. It's also important to understand when users need to move to a new page, versus staying on an existing page.

Did you extrapolate any specific goals? Find any interesting facts about your users? Any information you've gleaned that's specific, relevant, and universal goes into this document.

Specific: Each piece of information should be as precise as possible. Throu out information like, "Users like it to be easy," and keep information like. Jsers need to be able to complete a process in half an hour." 

Relevant: Relevant to your product, not to every site on the Web. Don't renot "Users like free stuff," but include, "Many users request free evaluation periods for software to know if paying will be worth it." 

Universal: Find things that are true for the entire site, not for a single item on a single page. Weed out things like, "Users couldn't find the Submit button on the checkout page," but leave in, "We have a type of user who knows what he wants already and needs a way to speed through finding and buying."

Three major types of metadata are used nowadays: 

Intrinsic. Metadata about the thing's composition. Is it an MS Word document a JPEG, a 20Kb file, or a zip file? 

Administrative. Metadata about the way the thing will be handled. Is it a temporary thing, or does it need to be archived? Who is the editor? Has it been approved for publication?

Descriptive. Metadata about the nature of the thing. This is the most important for our purposes and the most commonly used on the Web. Is it fiction or fact? Is it an article? What's the subject? What are related subjects?

A good label is so obvious, it's dull as dirt. A good label doesn't make you pause (and it never makes you think). A good label is merely the thing you click to get to the good stuff. It may take you hours to come up with something that looks effortless. When it looks like you came up with the label in two seconds, you probably have the right one.

I'd like to say labels are decided like this (in order of importance): 

 How much space there is on the navigation widget 

How bored the writer/designer is with current labels

Instead of bludgeoning the visitor over the head with your site's wealth, take a hint from icebergs. lcebergs are 90 percent underwater. Only the tip shows, but a sailor can spot that tip and know there's a lot more than meets the eye. As the information architect, your job is to design a tip that will suggest the size of the iceberg beneath. How much of the taxonomy should be above the water? How much do you have to show to let people know they've found the right place?

This is called a faceted classification. Each item has multiple characteristics: the cake is cake, is baked, is French, and is chocolatey. A person can find this item by looking in Cakes, Chocolate, Baked Goods, or in French Cooking (Figure 3.18). This greatly increases a seeker's chance of finding what she is looking for. Faceted classification is pretty nifty, but it can also be very tricky to execute well. First, it's much easier to do if your content is fairly homogenous. 

  FIGURE 3.17 Epicurious has more than 80,000 recipes. Good organization is not optional if the site is to be useful.

"But some of my stuff could go into more than one category!" "But half my users wanted organization by course, and the other half wanted organization by ingredients!" 

In the real world, you can't be in more than one place at one time. There is a crazy concept called "shelf space," and it appears to be limited. The grocery store can't have a bakery aisle and a sandwich aisle, and have bread in both. There isn't enough space-or bread. However, on the Web, it's another story.

Do the labels match? Is there more than one piece of content in each category? Is one category too big, needing to be divided into subcategories? When you are done refining, you have what you need-a taxonomy. 

A taxonomy is a hierarchal organization scheme, and on the Web it's very useful for browsing (Figure 3.16). If you do your work right, no one will ever notice your taxonomy. They'll just glide along effortlessly to their dream scarf or to a recipe for chicken à la king.

Repeat after me, "A label is not a place to promote your brand. It's a signpost to help people find stuff." If you have a greeting card site, Naughty Humor may not be as in tune with your brand image as Snickers and Snorts, but as a label it will keep the grandmas out and draw the college kids in.

Nathan Shedroff² collected a list of common organization systems most people are familiar with. He says you can organize things by alphabet (an employee directory), location (a map), time (a calendar), continuum (top-rated), numbers (zip codes), categories (newspapers organize articles by local, world, business, and so on), or randomness (iTunes shuffle).

If you are building an online grocery store, don't divide it into sandwich making and salad making (even though it might be kind of nifty'). People shopping for groceries are used to bakery, dairy, and produce in an organization scheme.

Information Architecture Blueprints for the Web

Reviews

Highlights