Information Architecture

Importance

Jakob Nielsen said in his foreword for the book Information Architecture: for the World Wide Web:

Critics may say that users don't care about information architecture. They don't want to learn how a web site is structured; they just want to get in, get their task done, and get out.Users focus on tasks, not structure. But it's because users don't care about the structure of a web site that it is so important to get the information architecture right in the design. If users did bother to study our web sites, they could surely learn how an obscure or illogical structure works and utilize that knowledge to improve their task performance.

Don't go too deep!

If users are forced to click through more than two or three levels, they may simply give up and leave your web site. At the very least, they'll become frustrated.

All roads lead to Roma.

Provide multiple ways to access the same information. Think about computer programs. For example, in Emacs, I can save this file by type C-x C-s, or click the "save" icon on the toolbar, or click the "File" menu, then click "Save" on the pop up item. There are three ways, you see. Oh, I almost forgot it! In fact, there are one more way: type M-x save-buffer. Why should a website be different?

For instance, a site map provides a supplemental way for accessing website. However, a sitemap is most useful for web sites that lend themselves to hierarchical organization. If not , an index may be better.

Graphic navigation systems

Graphic navigation bars tend to look nicer. Apple's website is an example. However, using graphic navigation bars means more time to load the page as well as to design and maintain.

Some people are in favor of using icons on navigation systems. This has its own pros and cons.

It's true that a picture is worth a thousand words, But which thousand? Users are likely to be confused.

However, icons are especially useful shorthand for regular visitors, easy to visually recognize.

Let's take a look at phpBB forum. The reply, new-topic and submit buttons are labeled as text, while ban ID, warn ID, report buttons are represented by red, yellow, and blue cards. The text-labeled buttons are friendly to new visitors. And the ban ID and warn ID buttons are only available for moderators. Moderators are surely a regular visitor. The report button is available for all registered users. And it's reasonable to assume that a rational registered user won't report any topic until they get along with the forum for a period of time.

You may argue that you can add a title attribute to the icon images, so when a user's mouse hover on the icon, a tooltip will appear. Of course you should use tooltip for icons without text. However, keep in mind than toottips are inconvenient.

Build a sense of familiarity

The navigation system should strike to build a sense of familiarity through consistent page location. Remember, consistency means predictability. Predictable systems are easier to learn, and users often feel more comfortable in a familiar environment.

Internal And External Links

A well-designed site should make a clear distinction between internal and external links. It is recommended that each external link is clearly indicated as going off site. This can be marked either by text (off-site, for example), or by a small icon (an earth, for example).

This can be done via direct typing as well as CSS. You can mark every external link with a class, say, offsite, and label them via CSS. Some examples:

/* If you prefer an icon */
#page a.offsite:before {
content: url(../logo/www.png);
}
/* If you prefer text */
#page a.offsite:before {
content: "(off-site)";
}

Every external link in blog posts here are labbeled with an blue earth icon.

Someone also suggested that each external link is displayed in a new window so the visitor can come back by closing or iconifying that new window. But I don't think so. First, I don't think website has the right to add one more window to the users' desktop. (This is especially true for a wmii user as me.) Second, it's hard to implement. A simple way is to use the attribute target="_blank", but the target attribute is not supported by XHTML Strict. Alternatively, you can use JavaScript to open new browser windows. But I think it costs too much.