Mapping Your Web Site

December 10, 2009

Originally published September 27, 1996 in Web Review magazine.

When asked about the current state of the web, users explain that after frustration with slow speeds, finding and organizing information are the major problems. Conjectural research shows that by the year 2000, poorly architected web sites will have caused more fatalities than clogged LA freeways and post office bureaucracies combined. Forget about health care reform and the overhaul of our educational system. The quality of our global information architecture will be the critical issue for the 21st century.

The difficulty in finding information holds true for the Internet as a whole and for individual web sites in particular. Since we can feel completely secure that the organization of the Internet as a whole is safe in the hands of folks like Yahoo and Magellan, it is our duty as netizens to focus on the architecture of our individual web sites. In other words, let's think globally but act locally.

Web site architecture is proceeding along an evolutionary path. In the pregraphical gophera we began with the simple hierarchy. It worked well, but people wanted more flexibility. In the early web era, we added hypertext and saw the use of navigation bars to cut across hierarchies. Search engines were employed to provide even more direct access to information. Then came the mozilla era and the transition from hierarchies to hysteria which brought with it blinking buttons, faulty frames, and bizarre backgrounds. We are now entering the era of the furious knife wielding I want my information now user and terrified web masters and mistresses are pulling out every tool in their kit to satisfy the navigational needs of these angry customers.

One of the most obvious yet unruly tools is the sitemap, a graphical representation of the architecture of the web site used to complement the existing navigation system. Since we humans have been using maps to navigate our way across oceans, through cities, and around shopping malls for thousands of years, it follows that we should employ maps to chart the ins and outs of our web sites.

The only problem is that we've had thousands of years to perfect the art of drawing maps for navigating the physical world, and we still have a hard time finding the restrooms in our local mall. Given that cyberspace cartography is such a new field, it should be no surprise that the web is being peppered with poorly designed maps in inappropriate places. In response to this problem and to avoid further fatalities, I've decided to issue three Cartography Commandments. I'd have come up with 10, but etching is hard work.

Commandment #1: Thou Shalt Not Use Bubblegum

It is a well-known fact that airplanes which are missing a few screws can be held together by bubblegum, although in accordance with FAA public safety regulations gum may only be used for short-hop shuttle flights, for instance, between Detroit and Chicago.

Unfortunately, the bubblegum approach is now being applied to web architecture through the use of sitemaps. Witness the following transcript (obtained from the new Wiretaps-R-Us web site) of a conversation between high level executives at a major Fortune 100 software firm:

Chief Executive Officer
Our telephone support operators are overwhelmed and I've personally had 7 web site related death threats today. Nobody can find our FAQ or our software patches. They're calling our site a bottomless pit of hypertextual confusion. We've got to do something about our web site now!

Senior Networked Information Guru
Don't worry, we've got it all under control. Our advanced R&D department has developed a brilliant new technology called a "sitemap." Once we deploy the sitemap by sticking a link to it from the main page, navigation problems will be terminated.

Chief Executive Officer
Great work! Make it so.

This bubblegum approach to web architecture is misguided. It's like a city planner saying:

Don't worry about organizing the city into blocks and numbering the cross streets. Curvy avenues and random street names are fine. We'll just create great maps.

This might work for Boston, but it won't work for most web sites.

One offender of the first commandment I discovered during my map research is the site for Canada's National Adult Literacy Database. The site's main page has a confusing and overwhelming array of menu options which is propped up by an equally overwhelming and rather difficult to read sitemap. It did give me eyestrain but did not provide me with a logical organization scheme through which I could begin to learn about NALD and its programs.

The bottom line is that the information hierarchy is the foundation of a good site. No sitemap will rescue a lousy hierarchy. So, if your users can't find what they're looking for, focus on fixing the hierarchy first, and keep your bubblegum in your mouth.

Commandment #2: Thou Shalt Consider a Table of Contents

The print medium has existed and evolved for substantially longer than has the networked information environment. The state of the art in print-based navigation technologies includes tables of contents and back-of-the-book indexes. These tools have stood the test of time because they work.

The table of contents presents the top one or more levels of the information hierarchy. It provides an organization structure for the printed work and supports random as well as linear access to the content. The index facilitates topical access to the content at an even finer granularity. These highly evolved navigation technologies are familiar to people. We use them every day.

Ideally, a web-based table of contents presents at least the top two levels of the hierarchy in a format that references and supports the hierarchy while facilitating fast random access to the contents of the site. Netscape's table of contents serves as a good example. While the page design and layout leaves something to be desired (lose the bullets please!) this table of contents does provide fairly intuitive access to a very substantial volume of information.

Unfortunately, time and time again, web designers opt for flashy graphical sitemaps instead of well organized tables of contents or site indices. Not only are sitemaps typically more difficult to use, but since their contents must be fixed in graphic form, they are also more costly to develop and maintain.

Now I'm not saying that you should never use a graphical sitemap. There is a time and a place for everything. However, web designers should always ask themselves whether their navigation goals could be best implemented through a text-based table of contents or index before moving into the dangerous and often questionable territory of graphical sitemaps.

Commandment #3: Maps should be Symbolic

Maps that we use for navigation in the physical world do not present the exact geography of the area in question. Accuracy and scale are sacrificed for representative contextual clues that help us find our way through the maze of highways and biways to our destination. Often, the higher the level of abstraction, the more intuitive the map. For an illustration of this concept, allow me to share a personal experience in map making.

Earlier this year I got married. My (now) wife and mother-in-law were kind enough and wise enough to spare me from any significant involvement in the planning of this wedding. My three major tasks were to rent a tux, show up on the big day, and in the meantime, use my computer skills to draw a map showing guests how to get to the church and country club.

I had recently discovered MapQuest and thought task number two could be completed by simply printing out a map of Rockford, Illinois and circling the appropriate locations. To my frustration, no matter how I clicked and zoomed, I couldn't bring up a map that provided sufficient context and included all relevant landmarks.

Ultimately I was forced to resort to the use of my highly undeveloped drawing skills and create a symbolic map. This map is seriously flawed with respect to actual geography and scale, but it does represent important roads and landmarks, and as far as I know, nobody got lost on their way to the wedding.

Web mapmakers should heed this lesson. Textual tables of contents are the best tools for showing the actual geography of a web site. Graphical sitemaps are best used for conveying the higher level conceptual organization of the information. They can be useful for driving home metaphors and inviting users to think about information from a different perspective.

Unfortunately, my extensive research failed to unearth any shining examples of really useful sitemaps. One example that does hint at the potential for presenting metaphor through a sitemap is the Health History Research Center at the University of Michigan. This simple sitemap reinforces the organizing metaphor of a virtual campus, although it does run the risk of misleading users into expecting a real campus, and being frustrated when they can't find the swimming pool.

The lack of good examples may be a result of the limited time I was able to devote to research or could be due to the fact that many of the more talented web architects have considered and decided against the use of a sitemap. If you do know of sitemaps that are applied appropriately and are really useful, please let us know.