Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


Navigating Through Stars: An Information Architecture Critique of Stars.com

Steve Toub and Lou Rosenfeld, Argus Associates

We've never walked in space, but we imagine the experience of weightlessness is unbelievably disorienting. When you let go of a football on the moon, the football doesn't drop to the ground and rest. It floats about from place to place. The football also doesn't float to the same place every time you drop it. Today is floats left. Yesterday it floated down and to the right.

The inconsistency and unpredictability of behavior in outer space must be incredibly disorienting. Without proper planning, information spaces can be bewildering as well. Good information architectures orient users, rather than confuse them. Done well, information architectures take users to the information they need in a way that meets their expectations. Done poorly, information architectures leave users frustrated and unable to find what they're looking for.

What Is Information Architecture?

Think about using a standard reference book. Your goal is to find information as quickly and easily as possible. Luckily, reference books (good ones, anyway) are not simply a bunch of random paragraphs run together one after the other. There are elements of a book that help you find the information you need. Someone divided up the paragraphs into different section and subsections and gave all of them headings. They created a table of contents and indexes to help you search and browse the book's contents. Each page may have headers and footers--page numbers at the very least--that tell you where you are. This work is really the essence of information architecture: designing the organization and navigation systems that help users find information.

Introduction

This article will provide a basic introduction to the principles of information architecture by way of critiquing Stars.com. We'll limit ourselves to information architecture, so we'll only address ways in which users find information on the site. We won't discuss the content, the site's technical base, or the graphic design or page layout of the site.

Rather than providing a systematic introduction to information architecture, we chose to focus on aspects of the Stars.com site that we felt could use the most improvement. The observations and recommendations in this critique are based on our use of the site in an effort to assess the site's information architecture, educated by our experience both as Web users and as professional information architects.

Please note that this article refers to Stars.com as it existed on August 24, 1997. The example pages linked from this article are not live pages. Rather they are copies of the pages as they existed on August 24, 1997.

Enough with the disclaimers. Grab your Tang. We're ready to blast off...

Organization in Zero Gravity: Inconsistent Grouping and Labeling

In going through the Stars.com site, we noticed plenty of navigation features, both integrated and auxiliary. Integrated navigation tools exist on Web sites at the page level. An example of a Web-based integrated navigation tool is a link at the bottom of every page on the site that says "Return to Main Page." Auxiliary navigation tools are separate pages that provide navigation to all of the content, and often provide a bird-eye view of the site. Common examples of auxiliary navigation tools are tables of contents and indexes.

Clearly, much effort has been made to help users navigate Stars.com. Most pages have two integrated navigation tools,one on the right side and one on the bottom. The site also includes several auxiliary navigation tools (for example, the overview, the site content map, the Java-based topic index, and the search function), all of which are excellent.

But because the grouping and labeling of the various navigation tools is different, the overall impact leaves the user somewhat disoriented. Each navigation tool has a different organizational system, as the table below illustrates.

Stars.Com Organizational System: Groupings and Labels
Navigation Tool Bottom Navigation Bar Right-side Navigation Bar Main Page Overview Page
Organization System HOME
Index
Library
Map
Search
Topics
Top 100
Authoring
HTML
Internet
Location
Multimedia
Reference
Software
The WDVL
Authoring
Graphics
HTML
Internet
Index
Java
Library
Location
Multimedia
Reference
Software
The WDVL
Authoring
Internet
Gallery
Location
Multimedia
Reference
Software

Stars.Com Organizational System: Groupings and Labels - continued
Navigation Tool Site Content Map VRML Site Map
Organization System Authoring Web Sites
The CyberScapes Gallery
The Internet and The Web
Resource Location
Multimedia Mix
Reference Sources
Software Tools and Technologies
The Virtual Library of WWW Development
A Webmaster's Illustrated Encyclopedia
Web Site Operation and Maintenance
Authoring
Internet
Location
Multimedia
Reference
Software
The WDVL

The grouping and labeling of each of these navigation tools are inconsistent in the following ways:

  • Why does one navigation tool have seven top-level groupings, another have ten top-level groupings, and another have twelve top-level groupings? Since each of these navigation tools is global, this is confusing. If these were local navigation tools that refer only to a portion of the site, this might make sense, because the local navigation system for the Virtual Library should be different than the local navigation system for the Webmaster's Encyclopedia.

  • The hierarchy of groupings is not consistent. For example, why does "HTML" sometimes stand alone as a separate top-level category, but other times fall within the "Authoring" category?

  • Sometimes a similar label directs users to different locations. The label "Site Maps" on the right-side navigation bar links to a page titled "Web Maps," but the label "Map" on the bottom navigation bar links to a page titled "Site Content Map."

Recommendations:

  • Keep the hierarchical groupings consistent throughout the site.

  • Keep labels consistent throughout the site.

  • Implement a single, coherent organization system. Each individual grouping and label, taken together, are part of a larger system. In order for each user to have the proper mental map of the organization of the site, it is important that each grouping and label are consistent.

Major Tom, Is Your Dashboard Usable?

Group controls that have similar functions together

In a spaceship, the buttons and panels that monitor and control related functions are grouped together. The steering control that allows you to thrust forward should be close to the steering control that allows you to thrust backward (so it's easy to back up if you get too close to the sun). The panel that displays weather conditions outside should not be between the two.

For the right-side navigation bar, most of the links direct users to areas of content on the site, not to the site's auxiliary navigation tools. For the bottom navigation bar, most of the links direct users to areas of site navigation, not areas of site content. However, there is some overlap.. The right-side navigation bar includes links to navigational pages on the site, namely "Search" and "Site Maps." The bottom navigation bar includes links to areas of the content on the site, namely the "Index" and "Library." For the user who is thinking that the function of right-side navigation bar is to provide access to the major content areas of the site and the function of the bottom navigation bar is to provide access to navigation pages, this overlap is confusing.

Many of the navigation tables as they now exist are largely in alphabetical order. Alphabetical organization schemes work well in a phone book, when a user knows what they're looking for. But in situations where users are browsing instead of performing known-item searching, other organization schemes such as grouping by topic or task are more appropriate.

Recommendations:

  • Segment elements in categories, rather than organizing all lists alphabetically. Group like elements together. Most sites generally break down into two types of entities, the content itself, and information about the content. Such information about the content (called meta-information) should be grouped together, and remain distinct from the content-related categories. So in Stars.com, meta-information elements such as "Home," "Search," "About the WDVL," and "Feedback" should be grouped together. The actual content of the site: the descriptions of remote resources and the local content should also be grouped together.

  • Group content areas by users' needs. Currently the site is grouped largely by subject (e.g., "Authoring", "Internet"). It may make more sense to group content according to the way users use the information. For example, all the articles could go under a single heading, as could all of the "Bookmarks" and "Pictures", since users tend to utilize different types of content in different contexts.

Choose precise labels that make sense to your audience

Throughout the site, there is an overlap of terms. For example does the term "Library" refer to the "Web Developer's Virtual Library" or to the "Virtual Library of WWW Development"? Another example is "Index;" we assumed that it was an index to the content on the site, but it's actually "The Webmaster's Encyclopedia."

Recommendations:

  • Choose precise labels so their meanings are not ambiguous, and do so with the least number of words possible. In the case of "Index" a better choice would have been "Encyclopedia" or "The Webmaster's Encyclopedia."

  • Be aware that the way you label content may have different meanings to different audiences. For example, we're librarians. In the real world, we're used to finding the reference area in the library. But we were confused in Stars.com to find the "Library" in "Reference."

Provide contextual information for labels and for the site as a whole

Most areas of this site provide contextual information. For example, the overview provides a good description of what users are likely to find in each category of the site. However, some pages lack this contextual information. This is especially noticeable on the main page which provides no description of what users can expect to find on the site as a whole. Also, clicking on some links (for example, "Top100") displays a page that does not describe what the page contains. This occurs rarely on the site, but is confusing when it does.

The feedback form is one of the best we've ever seen, because it provides the Webmaster with context to help resolve problems; it notes what page the user was on, and the platform and browser being used. It is somewhat ironic that the feedback form provides context for the Webmasters, but the Webmasters sometimes do not provide context for the users.

Recommendations:

  • Make the main page more like the overview. Provide context for the sea of labels, by including less labels, but more descriptive information about what each of the groupings contains.

  • Let each page frame user expectations about what they will find on the page. Provide at least a phrase or a sentence that describes what is available on the page.

Mission Control: Come in, Houston....

NASA doesn't just send random people in the space shuttle. Expeditions are planned years in advance. Astronauts are carefully selected and undergo rigorous training. It is important to those planning an expedition to communicate its mission and the context of the expedition to each other, to the astronauts, to the media, and to the public at large.

Defining the mission and metaphor of a web site is similarly important. Stars.com seems to have many of them. Nominally it is a virtual library for Web developers. But it is also a magazine, an encyclopedia, an annotated bibliography, a gallery of images, a software repository, a job bulletin board, and a way to search the entire Internet. Some of these functions are only marginally related to the mission of the site.

Also, users are left without an explanation of the Stars.com domain name and the space theme. There is no apparent reason--in the minds of users--to link this metaphor to a library on Web development.

Recommendations

  • Focus on the most important content. It is unlikely that Stars.com can compete with the other job bulletin boards out there. Why not carve out a specific niche in the marketplace rather than trying to be all things to all people?

  • Delete extraneous content--or relegate it to a different site. Some features such as the gallery, or the search engine that searches the entire Internet are not directly related to the mission of this site.

  • Reevaluate the space metaphor. Make a direct connection in users' minds between the space theme and the content of the site. Or, focus future marketing efforts on the WDVL domain name, rather than Stars.com.

Conclusion

We've provided you with a brief, useful introduction to information architecture. To learn more about the topic, there are two regular columns that cover the topic regularly. We write the Web Architect column which runs in Web Review magazine. Jakob Nielsen also regularly covers information architecture and Web usability topics in his Alertbox column. For a book-length, systematic introduction to the topic, we recommend the following volumes, both of which are scheduled for release this fall: Information Architecture for the World Wide Web: Designing Large-Scale Web Sites, by Louis Rosenfeld and Peter Morville, and Designing Websites with Authority: Secrets of an Information Architect, by Jakob Nielsen. You may also wish to see Chapter Four in Clement Mok's Designing Business: Multiple Media, Multiple Disciplines.

We also hope we've proven the value of information architecture: with a few modest improvements to the Stars.com architecture, the site should support greatly enhanced usability and navigation, unlocking even more of Stars.com's valuable content. If you found this critique of the Stars.com site useful, consider a critique for your own site. In any case, we would love to hear your feedback on this critique or on information architecture in general.



Up to => Home / WebRef / Navigation / Stars.com




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers