Web Architecture

"Whenever we develop a new skill or extend an old one, we have to emphasize the relative importance of some aspects and features over others. We can then place these into neat levels only when we discover systematic ways to do so. Then our classifications can resemble level-schemes and hierarchies. But the hierarchies always end up getting tangled and disorderly because there are also exceptions and interactions to each classification scheme."

-- Marvin Minsky, The Society of Mind

Information architecture is the process of organizing, labeling, designing navigation and searching systems that helps people find and manage information more successfully. Good information architecture makes a website easy to use.

For a site with a substantial amount of content, an important question to answer is How shall we classify and organise our content? Classification is needed to provide context for navigation in any knowledge medium, e.g. the WWW. We want to know where we are, and how to go elsewhere. Maps, coordinates, signposts, landmarks, etc are what we use in the physical world, and equivalents are needed in cyberspace. But present methods are cumbersome - you guess at keywords, or click on the most promising link; wait for the results, and click some more, wait some more - searching for specific information can get really frustrating.

The main question was whether to adopt a formal 'library' type of classification, or whether to create one. We investigated several schemes, including library classification, e.g. Dewey Decimal Classification (DDC), Library of Congress (LoC), and other hierarchical schemes, such as Yahoo!'s. We started out using Dewey, but quickly realised that such a scheme was too inflexible, and reflects cultural heritage rather than the demands of an Internet audience. We also tried an encyclopedia scheme, i.e. almost no hierarchy, letting most subjects have a top-level folder in the filing system. This almost worked, but offered no structure. Eventually we compromised on a hybrid, selecting several broad subject areas that were popular with our audience, and then placing sub-topics under them.

Hierarchy and the Filing System

That there should be a hierarchy is almost mandated by considerations such as user familiarity, file system structure, etc. We instinctively think in terms of topics and their subtopics, and map these to file-system directory trees in our web sites.

Note that content structure actually has two major levels: how you implement it (e.g. in the filing or database system), and how the users see it in navigation facilities. They don't at all have to be the same thing, because the user isn't looking directly at your filing system; they will see it through links or redirects or intermediate software. This indirection can provide you with some flexibility as your site evolves. Your initial filing scheme might prove to be less than ideal; you notice that users are going to a page or set of pages that you'd placed deep down in the hierarchy, and so you would prefer them to be prominent on the navigation menus. Not a problem, those menus don't have to mirror the server's filing system! However, we prefer to keep them synchronised (on the KISS principle) and occasionally move files or directories - taking care to add server redirects.

Hierarchical organization imposes a useful discipline on your own analytical approach to your content, as hierarchies only work well when you have thoroughly organized your material. I recommend putting a lot of effort into designing a logical system based on the user's view - rather than say, departmental structure, though that might play a rôle. Your navigation system should then be able to take advantage of the file structure, and good keywords will appear in the URLs themselves, helping users figure it out.

Shortcomings of Strict Hierarchy

Comfortable as it may be, there are various problems with strict hierarchies:-

• Web pages don't always fit neat single categories; they might well span several, e.g. mathematics puzzles. In fact, most topics or web pages span related topics to some extent.
• Hierarchies are inflexible; it can be hard or inconvenient to re-assign items if a mistake is uncovered, or your initial placement was not ideal, or the field evolves in an unexpected direction, or a better structure is discovered. Many major web-sites have been restructured at some time. Many of us experienced a lot of frustration when Microsoft (and others) restructured their sites and didn't bother with redirects.
• Hierarchical classifications are prone to subjectivity and cultural bias. Look at DDC and you'll probably guess that it was devised by a Christian American over a hundred years ago. LoC has military and naval science as top-level categories. And you've probably, at some time, descended a subject hierarchy such as Yahoo!, expecting to find a topic in a certain place, but it was elsewhere (where would you expect to find "optical illusions"?)
• Rigid hierarchical classification schemes cannot keep up with scientific advances. Sections of the widely-used schemes -- notably Dewey -- are restructured periodically, but there are always protests from the library community when the revisions necessitate reclassification of large parts of a collection.

Growing Hypertrees

There are many ways to structure a web site. The one used by EncycloZine I call the hypertree. A hypertree is essentially a hierarchical information structure with ad-hoc cross-links. It merges the benefits of the familiar hierarchical organisation with those of the richly-interconnected web. Hierarchical organization schemes are well-suited to Web sites, since users are familiar with hierarchical structures, and find the metaphor easy to understand as a navigational aid. The hierarchical structure forms the major 'backbone' to guide the user's intuitions about the site, while the cross-links create 'shortcuts'.

EncycloZine's hierarchy gradually evolved. We changed top levels (rarely) or moved subtopics to more logical locations, or moved them higher up or lower down in the hierarchy according to popularity, subject to constraints of reasonable logical inclusion. Or, some topics divided into multiple topics, or were merged. You might expect that continually re-organising content might lead to problems such as the infamous 404s, but we were careful to update the server redirects.

We now have about a dozen broad topic areas, which have partially been chosen by our users. More precisely, the topic hierarchy is a balance between popularity and conceptual structure. Thus, optical illusions and puzzles have top-level status because they are the most popular pages, and I am motivated to expand them with sub-levels as their content is added to.

But like all rules or guidelines, this one has its limits: Harmonograms, Spirographs, and Lissajous Figures is also quite popular (a little less so), but the page is still several levels deep ( Science / Mathematics / Graphs / Encyclo), and will almost certainly stay there. There isn't much more than a page's worth to this topic, and I'm probably not going to develop it much (apart from a few improvements to the Java applet, and possibly adding an SVG version).

Classification and navigation based on an underlying hierarchical filing system is a cheap and effective implementation strategy, but I have a suspicion that there must be something better; certainly database and software supported. It should be very dynamic and flexible, recognising relationships such as "subtopic of" in the content, and it should then be capable of generating navigation menus, maps and links on the fly, or overnight, so that user traversals of navigation structures can be minimised. This was my problem with Yahoo!-type schemes - too much depth. However, tree structures can be supplemented with appropriate cross-links (a 'hypertree') to related topics, and in the absence of AI software, we just do it manually.

Labelling and Grouping

It might seem pedantic to devote a section to words and their meanings, but I've seen confusions arise quite often because a word or phrase suggested different things to different web site users. Let's think about the meaning of Life, for example. On EncycloZine this topic refers to the world of nature and biology, but I could imagine that some users would more naturally associate it with things that go on in one's human life, such as careers, love, etc. To some, a "Bulletin Board" is a discussion area, to others it is a place for posting announcements, with no option to respond. In most such cases, the context in which the word or phrase appears may help to determine the intended meaning, but occasionally a few users may remain confused.

While thinking about the structure or 'architecture' of site content, it's important to also decide on meaningful names (labels) for navigation links. Those names need to make sense not only to you and your colleagues, but also to your target audience. Unless you can count on them being very similar to yourself (!), you will need to be conservative rather than adventurous in choosing labels. For example, "Potpourri" as a label for stuff that doesn't fit elsewhere might sound cool, but be aware that less educated or younger viewers, or those whose mother tongue isn't English, might not know the word. "Miscellanous" is better, but perhaps you feel it's a little too dry. How about "Odds'n'Ends"? You might want to have a thesaurus handy.

Try to avoid ambiguous words, i.e. having multiple meanings, unless the context makes the specific meaning very clear. Java on WDVL almost certainly doesn't refer to coffee, but on EncycloZine, perhaps it could. In the latter case, Java appears under Web Design and so needs little further qualification (except possibly to distinguish applets from programming, unless it's about both). Some words have numerous alternate meanings, some of which you might not be aware of or might not think about while you're focussed on the specific meaning you have in mind. The word "pitch" has a dozen or so common meanings, and my Webster's lists 53! Then, there are also variations across branches of major languages, e.g. between British and American English (as I know only too well, being a Brit in the USA). An item of paper money in England is called a 'note', while in the USA it's called a 'bill'.

Meaningful and unambiguous naming is less of a problem lower down in the navigation hierarchy since the context aids disambiguation, but is critical at the top levels of your navigation hierarchy. Also important is grouping elements by 'type'. Most sites generally break down into two types of entities: the content itself, and information about the content or site. Such information about the content (called meta-information) should be grouped together, and remain distinct from the content-related categories. For example, meta-information elements such as About Us, Feedback, site map, should be grouped together.

Conclusions and Recommendations

Building a large content-rich web site such as Web Developer's Virtual Library or EncycloZine for a world-wide audience comprising individuals with a wide range of abilities, platforms, and viewing conditions, is a demanding task requiring careful consideration of numerous aspects such as information architecture, accessibility, usability, navigation, presentation, and development and maintenance tools and techniques. I humbly offer the following summary of my conclusions and recommendations for other developers embarking on similar projects:-

• Select the most logical structure for your content, but allow it to be flexible so that navigation pathways to popular areas can be shortened.
• Supplement navigation hierarchies with cross-links between related topics.
• Choose navigation labels with careful consideration of possible ambiguities or uncertainties of meaning, especially if you expect a diverse audience.
• Design the initial prototype without using navigation graphics (e.g. imagemeaps). Focus instead on mapping your site structure to text links, which are far easier to change.
• Incorporate those text links as alt attributes if/when you add graphics and other multimedia, and test with a text-mode browser.
• Beware of imagining your users to be clones of yourself, using similar browsers and viewing platforms. Consider that they might be blind or vision impaired. Again, using a text-mode browser can help.
• Put content before other stuff (such as ads and menus) on the page. This benefits users with assistive technologies, and improves your search engine placement.
• Please please please use relative font sizes rather than fixed sizes. Some of us like the text to be a little larger, for readability.
• A Most Popular page can help you determine where to focus effort, and can be a useful navigation aid for your visitors.
• Supplement hyperlink navigation with a search engine.