O'Reilly - Information Architecture For The World Wide Web
O'Reilly - Information Architecture For The World Wide Web
O'Reilly - Information Architecture For The World Wide Web
Learn how to merge aesthetics and mechanics to design Web sites that "work." This book shows how to apply principles of architecture and library science to design cohesive Web sites and intranets that are easy to use, manage, and expand. Covers building complex sites, hierarchy design and organization, and techniques to make your site easier to search. For Webmasters, designers, and administrators.
Preface Our Perspective Who This Book Is For How To Use This Book Text Conventions Other (Really Important) Conventions We'd Like to Hear from You Acknowledgments 1 What Makes a Web Site Work 1.1 Consumer Sensitivity Boot Camp 1.2 If You Don't Like to Exercise... Introduction to Information Architecture 2.1 The Role of the Information Architect 2.2 Who Should Be the Information Architect? 2.3 Collaboration and Communication Organizing Information 3.1 Organizational Challenges 3.2 Organizing Web Sites and Intranets 3.3 Creating Cohesive Organization Systems Designing Navigation Systems 4.1 Browser Navigation Features 4.2 Building Context 4.3 Improving Flexibility 4.4 Types of Navigation Systems 4.5 Integrated Navigation Elements 4.6 Remote Navigation Elements 4.7 Designing Elegant Navigation Systems Labeling Systems 5.1 Why You Should Care About Labeling 5.2 Labeling Systems, Not Labels 5.3 Types of Labeling Systems 5.4 Creating Effective Labeling Systems 5.5 Fine-Tuning the Labeling System 5.6 Non-Representational Labeling Systems 5.7 A Double Challenge Searching Systems 6.1 Searching and Your Web Site 6.2 Understanding How Users Search 6.3 Designing the Search Interface 6.4 In an Ideal World: The Reference Interview 6.5 Indexing the Right Stuff 6.6 To Search or Not To Search? Research 7.1 Getting Started 7.2 Defining Goals 7.3 Learning About the Intended Audiences 7.4 Identifying Content and Function Requirements 7.5 Grouping Content Conceptual Design 8.1 Brainstorming with White Boards and Flip Charts 8.2 Metaphor Exploration 8.3 Scenarios 8.4 High-Level Architecture Blueprints 8.5 Architectural Page Mockups 8.6 Design Sketches 8.7 Web-Based Prototypes
13
20
42
61
83
109
123
Production and Operations 9.1 Detailed Architecture Blueprints 9.2 Content Mapping 9.3 Web Page Inventory 9.4 Point-of-Production Architecture 9.5 Architecture Style Guides 9.6 Learning from Users
132
10 Information Architecture in Action 10.1 Archipelagoes of Information 10.2 A Case Study: Henry Ford Health System 11 Selected Bibliography 11.1 Information Architecture 11.2 Organization 11.3 Navigation 11.4 Labeling 11.5 Searching 11.6 Strategy and Process 11.7 Usability 11.8 General Design Colophon Author Interview
143
157
161 162
Some web sites "work" and some don't. Good web site consultants know that you can't just jump in and start writing HTML, the same way you can't build a house by just pouring a foundation and putting up some walls. You need to know who will be using the site, and what they'll be using it for. You need some idea of what you'd like to draw their attention to during their visit. Overall, you need a strong, cohesive vision for the site that makes it both distinctive and usable. Information Architecture for the World Wide Web is about applying the principles of architecture and library science to web site design. Each web site is like a public building, available for tourists and regulars alike to breeze through at their leisure. The job of the architect is to set up the framework for the site to make it comfortable and inviting for people to visit, relax in, and perhaps even return to someday. Most books on web development concentrate either on the aesthetics or the mechanics of the site. This book is about the framework that holds the two together. With this book, you learn how to design web sites and intranets that support growth, management, and ease of use. Special attention is given to:
The process behind architecting a large, complex site Web site hierarchy design and organization Techniques for making your site easier to search
Information Architecture for the World Wide Web is for webmasters, designers, and anyone else involved in building a web site. It's for novice web designers who, from the start, want to avoid the traps that result in poorly designed sites. It's for experienced web designers who have already created sites but realize that something "is missing" from their sites and want to improve them. It's for programmers and administrators who are comfortable with HTML, CGI, and Java but want to understand how to organize their web pages into a cohesive site. The authors are two of the principals of Argus Associates, a web consulting firm. At Argus, they have created information architectures for web sites and intranets of some of the largest companies in the United States, including Chrysler Corporation, Barron's, and Dow Chemical.
page 1
Our professional backgrounds in the field of information and library studies. Our experience in creating information architectures for large, complex web sites, primarily for corporate clients.
Many librarians have responded slowly to new information technologies like the Web. Some librarians feel that their value as professionals will be diminished as "virtual libraries" supplant those filled with physical books and periodicals. Many librarians fear that the public will bypass them and go directly to the source via the Internet. The truth is, however, that skills in information organization and access are more and more necessary in this era of information explosion. We have found that the demand for our skills in classifying and organizing information in web sites has grown beyond our wildest dreams, so we believe that you, your sites, and their users will benefit from our profession's perspective. Between us, we have many years of experience in creating information architectures for web sites and intranets. At Argus Associates, our consulting firm, we concentrate on this area almost exclusively, and we have helped lots of large clients develop architectures that provide firm foundations for high quality web sites. We also have the benefit of working with and learning from experts from other companies who have backgrounds in other disciplines (our joint venture is called, aptly, Allied Studios). Besides our positive experiences, being in the "business" has given us many opportunities to make mistakes and ample time to learn from them. We hope you will benefit by learning from our mistakes as well as our successes. You don't need a library degree to be a successful information architect. Despite the requirements listed in some job descriptions, it's hard to have had years of experience within this fledgling medium. More important than either of these two factors is common sense, plain and simple. The Web is too new for anyone to feel secure in claiming that there is a "right way" to do things. Web sites are multifaceted, and can support many different ways of presenting information. This book clarifies different approaches to web site architecture, and provides you with the tools and concepts you need to determine the best approach for your site.
page 2
Anyone who maintains a web site, intranet, or extranet where users get lost. Anyone who maintains a web site, intranet, or extranet where users have difficulty finding the information they need. Anyone who faces huge amounts of complex content and wonders how they'll ever organize the terrible mess into a usable and useful web site or intranet. Anyone who confuses web page design with web site design.
The authors work exclusively as information architecture consultants for large corporate clients; knowing our background will help you understand our biases. However, this book isn't written solely for people who work as outside consultants to corporations. For example, when we talk about clients, don't let that stop you from reading on; chances are that, without knowing it, you also have clients. It might be your boss or other coworkers. It might be the other members of your web development team. Maybe in a way you're the client. The guidelines for working with a client will hold true regardless of whether the client is from your organization, another organization, or yourself.
page 3
page 4
Italics are used for email addresses, URLs, and for emphasis. Courier is used for code examples.
Other (Really Important) Conventions In this book, we talk about web sites. Not web pages, not home pages. Web sites. Why are we so hung up on this term? Because a great wrong has been committed, and it's time to right it. You see, somewhere, sometime way back in early Web pre-history when the terminology of the Web first got started, someone decided that home pages were cool. So, the people who were creating content for the Web began thinking of their output as pages. Discrete, singular. Stand-alone. Sure, these pages were linked to other pages, but the emphasis was placed on the page as the ultimate product. The Web is magical. It allows us to link together so many things in ways never before possible. It is fantastic that an image of Shakespeare can link to a page that provides a short biography of the great Bard, which can, in turn, link to another page that opens us up to the fascinating history of Elizabethan England. And so on. The whole of those pages and their links is much greater than the sum of the parts. That whole is what we call a web site. Thinking in terms of web pages or home pages too easily limits your field of vision to the trees and not the forest. The goal of this book is to help you master web architecture so that you can design wonderful forests. So from here on, think in terms of sites first and foremost. We also should clarify that we use the term web site to include sites available via the Internet, intranets, and extranets. We hope you'll find this book useful regardless of what type of web site you are developing.
page 5
page 6
Acknowledgments Acknowledgments are both the most enjoyable and most treacherous part of writing a book. It's a wonderful feeling to reach the point where thanks are in order and to recognize the many people who participated in the experience, directly or indirectly. Yet it's awfully frightening to consider the strong possibility that we've left someone out. So we'd like to offer our apologies to anyone we have forgotten, and thank the rest: Linda Mui and the rest of the editorial staff for their availability, high standards, and professionalism. The production team, which included Jane Ellin, the production editor; Mike Sierra, who converted the book and provided Tools support; Seth Maislin, the indexer; Robert Romano, the illustrator; Nancy Priest, the interior designer; Edie Freedman, who designed the cover; Elissa Haney and Claire Cloutier LeBlanc for production support; and Madeleine Newell, Nicole Gipson Arigo, Clairemarie Fisher O'Leary, and Sheryl Avruch for quality control. We now know firsthand why O'Reilly & Associates enjoys its reputation. Lorrie LeJeune, O'Reilly's Product Marketing Manager, who got us into this mess in the first place, but kept prodding good-naturedly throughout the process. Without her this book would never have been written. O'Reilly & Associates, for its willingness to delve into the risky waters of publishing a book on the slippery topic of information architecture. We also really appreciated the free books and tee shirts. Our reviewers, Steve Champeon, Jennifer Fleming, Andrew Gent, David Golumbia, Peter Mahnke, Paul Morville, Jeff Stuit, and Roy Tennant. It was our dumb luck that such a cast was available and willing to provide us with their expert feedback. The sponsors of the many sites profiled in this book. We greatly appreciate their granting permission to allow us to use images of their sites to give information architecture a more tangible treatment. Our colleagues at Argus Associates, Samantha Bailey, Stephen Toub, and Christopher Farnum. They read our drafts, gave us critical feedback and ideas, kept the Argus ship afloat, humored us, and put up with our crankiness while we worked on this book. Our colleagues at Allied Studios, who have taught us volumes about interdisciplinary design and teamwork: John Bidwell, Jeff Callender, Hans Masing, Tom Rieke, Peter Wyngaard, and all the other creative people at Q LTD and InterConnect of Ann Arbor. Our teachers and mentors from the University of Michigan's School of Information: Dan Atkins, David Blair, Michael Cohen, David Hessler, Maurita Holland, Joe Janes, Dave Rodgers, Victor Rosenberg, Amy Warner, and the late Miranda Pao. Our friends in the Internet and library communities for their good works and generous help: Scott Brylow, Abbot Chambers, Larry Coppard, John December, Andrea Gallagher, Tony Grant, Charles Harmon, Randy Horton, Keith Instone, Jakob Nielsen, Anna Noakes, Pat Schuman, Phil Sutherland, Heidi Weise, Ed Vielmetti, and Rich Wiggins. Finally, we'd like to say a special thanks to our families for their love and support, and to our respective partners, Mary Jean Babic and Susan Joanne Morville, who put up with us during the whole ordeal. Thanks to all! Louis Rosenfeld Peter Morville January, 1998
page 7
Chapter 1. What Makes a Web Site Work What is it about buildings that stir us? Regardless of whether we consider ourselves architectural connoisseurs or just plain folks, we all encounter different physical structures every day. Each building affects us emotionally, whether we realize it or not. Just this evening, I spent time in a dark, smoky bar with original tin ceilings and exposed brick walls. The bar has been around forever, as have some of the patrons, but I chose to spend time sipping beer there rather than in the neighboring gleaming microbrewery that opened last year. The new place has a wider menu of beers, better food, and non-smoking sections, but tonight I preferred the old joint with the great graffiti on the bathroom walls. After the bar, I went to a caf to read. Ann Arbor has about 25 cafs, 10 of which are within walking distance of each other, and they're all decent places. So why did I go to this one? It has a great nook with soft chairs and a low ceiling, providing an almost totally enclosed space where I can have the privacy I want. And now I'm back at the office. Our space is located in an old building that originally was a mechanic's garage. What was once the oil pit is now a sunken-level workspace for graphic designers. Exposed timber beams lift the roof high over an eclectic space conducive to creativity. After the garage closed, the building was a greasy spoon; my office is where the kitchen used to be. Repurposed every decade or so, our building has worn many hats over time and overflows with history. Back in 1918, the builder could never have conceived that it eventually would be occupied by a Cajun restaurant or a travel agency, much less an information architecture firm. Why so much talk about the impressions that physical structures make on us? Because they are familiar to us in ways that web sites are not. Like web sites, buildings have architectures that cause us to react. Buildings and their architectures therefore provide us with great opportunities to make analogies about web sites and their architectures. Buildings and their architectures are diverse. Consider the extent of architectural ground I covered in my brief evening jaunt. Buildings look different - or are architected differently - because they must cater to so many different uses, users, and moods. Warehouses, strip malls, and Chinese restaurants look and work the way they do because they are designed for varying uses. Drinking beer with friends, reading quietly, and working all require different environments to succeed. Web sites are the same; we visit them to learn about alternative medicine, play games, or vent our frustration. So each web site requires a different architecture, designed with its particular users and uses in mind. Some architectures disgust us. Ask someone who owns a house with a flat roof how they feel about its architecture. Or someone who spends too much time in a kitchen with no counter space right next to the refrigerator. Or someone who works in a steel-and-glass high-rise with fixed windows that prevent the building's occupants from opening them and letting in fresh air. Why do bad architectures happen so often? Because their architects generally don't live or work in the buildings they design. That hardly seems fair. The same is true of so many web sites. Why does that main page contain over a hundred and forty links? How come the contact information is buried so deep in the site? Why do I keep getting lost? Don't these web sites' architects ever use their own sites? That's exactly what the next section is about. You can't really become a proficient web site architect unless you first know what it's like to really use the Web on a regular basis. In other words, the best web site producer is an experienced consumer. You must become the toughest, most critical consumer of web sites you possibly can. Determining what you love, what you hate, and why, will shape your own personal web design philosophy. In turn, drawing on your new sensitivity to web consumers' needs will make a great difference as you start designing and building your own web site. Reaching such a level of user-centered awareness sets you aside from every other web site developer; in a profession with such a low barrier of entry, it may be all you have to ensure that your work stands out.
page 8
What do you hate about the Web? What do you like about the Web?
Usually we start with the hate question, because, interestingly (and sadly) enough, it's almost always easier for people to talk about negatives than positives. In group settings, it's a great way to break the ice. As the participants spew their venom (or offer their niceties), jot each point down on a white board or flip chart. Once these issues are aired, run through the positives and negatives. Discuss any natural groupings that you notice. We almost always find that the issues raised fall into three general areas: 1) Technical (e.g., effective use of interactivity, bandwidth/download issues); 2) Look and Feel (e.g., complementary aesthetics and functionality, the importance of good copyediting); and 3) Something Else (e.g., finding information sites, site navigation issues). Interestingly, these Something Else issues often directly relate to information architecture. As this is likely the first time the participants have ever been introduced to the concept of information architecture, we like to emphasize strongly that it really does exist and does merit the same consideration as more obvious, tangible areas such as graphic and technical design. While the group categorizes these issues, some interesting paradoxes often emerge. For example, a common like about web sites is their compelling use of images. Yet a common dislike is gratuitous use of images, many of which take a long time to download without providing useful information or adding any benefit. As such paradoxes emerge, light bulbs ought to appear over the heads of everyone in the group (at least those who thought that building a web site would be easy). It should now be obvious that building a web site and doing it well are two hugely different tasks. If not, be concerned; your colleagues may not be up to the arduous site design and production process that awaits them. The final step is to see if the members of your group reach consensus on these issues. If you'll be working together on developing the site, it's important that the team comes to a consensus regarding what works and what doesn't. If there are disagreements on certain issues, it's important to acknowledge those and explore why they exist. We often find that these disagreements are directly tied to disciplinary backgrounds. Pointing them out now is a good way to sensitize the participants to something that ought to be, but unfortunately isn't, always obvious: different points of view are represented among both consumers and producers of web content. There isn't necessarily a Right Way or Wrong Way of going about things, but discussing these issues in advance gets them on the table, and gets you that much closer to making a sound and defensible decision once you are ready to begin developing your site. Of course, you and your colleagues will ideally carry over into the development process your bittersweet memories of what it's like to actually use web sites, resulting in a more user-centered product.
page 9
page 10
page 11
What is it that we are designing, and why? Who will use it? How will we know if we've been successful?
page 12
2.1 The Role of the Information Architect Now that you know right from wrong from the web consumer's perspective, you're in a much better position to develop a web site. But besides needing a sophisticated knowledge of what works for consumers of the Web, what's actually involved in creating a web site? Obviously, you need HTML pages. Maybe you'll grab a good HTML book or a decent HTML editing package. Maybe a high school kid can do the trick for peanuts. What about the copy for those pages? It needs to come from somewhere - perhaps existing brochures and documentation; perhaps it needs to be written from scratch. You'll also need some graphic design expertise to make sure that the pages are laid out with effective use of text, white space, and attractive images. Of course you'll need a server that is connected to the Internet; this you can lease, or you can buy one of your own. If you do, just be sure to hire someone sufficiently technically astute to administer that server. Perhaps that person should also write the CGI, Perl, ActiveX, Java, and other scripts that make the site interactive. What's missing? Maybe a project manager to make sure all these folks work together to develop the site without running behind schedule and over budget. So now you're all set to design your web site, right? Well, not quite. What's missing from this picture is a definition of what the site will actually be, and how it will work. This may sound obvious, but for most web sites, it's true: design and production storm ahead without any unifying principle to guide the site's development. A web site essentially can be anything you want it to be and could cost millions of dollars, take years to complete, and cost thousands of lives to develop. To avoid such overkill, it will need to be defined somehow: it will need a definition. That's the main job of the information architect, who:
Clarifies the mission and vision for the site, balancing the needs of its sponsoring organization and the needs of its audiences. Determines what content and functionality the site will contain. Specifies how users will find information in the site by defining its organization, navigation, labeling, and searching systems. Maps out how the site will accommodate change and growth over time.
Although these sound obvious, information architecture is really about what's not obvious. Users don't notice the information architecture of a site unless it isn't working. When they do notice good architectural features within a site, they instead attribute these successes to something else, like high-quality graphic design or a well-configured search engine. Why? When you read or hear about web site design, the language commonly used pertains to pages, graphic elements, technical features, and writing style. However, no terms adequately describe the relationships among the intangible elements that constitute a web site's architecture. The elements of information architecture - navigation systems, labeling systems, organization systems, indexing, searching methods, metaphors - are the glue that holds together a web site and allows it to evolve smoothly. To a novice, this terminology is not very clear. These elements are extremely difficult to measure, and therefore even harder to compare. You really have to spend time using a site and get a feel for it before you can confidently talk about a site's information architecture. Yet, we know these things are important. How? Well, consider your responses to the Boot Camp exercise in Chapter 1. How many of the likes and dislikes are not related to technical issues, copy editing, or graphic design? Remaining issues are probably tied to information architecture. Although perhaps indirectly, a poorly planned information architecture will adversely affect those other areas.
page 13
page 14
2.2 Who Should Be the Information Architect? The information architect of a large, complex web site should be two things: someone who can think as an outsider and be sensitive to the needs of the site's users, and at the same time is enough of an insider to understand the site's sponsoring organization, its mission, goals, content, audiences, and inner workings. In terms of disciplinary background, the information architect should combine the generalist's ability to understand the perspectives of other disciplines with specialized skills in visualizing, organizing, and labeling information. As it's very difficult for someone to retain all of these characteristics, you'll have to make some compromises, but it's important to consider them as you search for that elusive information architect. 2.2.1 Thinking Like an Outsider Because information architecture is largely about the big picture view of the organization, its goals, and its politics, a logical choice for the architect role is a senior person who knows the organization as a whole and who isn't involved exclusively within the activities of one department. A senior person can often think like an outsider even though being on the inside, and has enough clout to enlist other departments' resources when necessary. One drawback to choosing a senior level manager is that he or she may have so many other responsibilities that the work gets delegated out to staff, thereby negating the original goal of using a single, organizationally savvy person. Another approach is bringing in a true outsider: a new hire or a consultant (we typically function in the latter role, but we are trying to avoid biasing our discussion too greatly). The great thing about outsiders is that they can get away with asking naive questions considered suicidal by insiders, such as "Why does your organization have two completely separate order fulfillment departments? The web site will confuse users if they can order products in two different, unresolved ways. Are there any politics going on here that we can get past to improve the site's design?"
page 15
page 16
page 17
page 18
page 19
3.1 Organizational Challenges In recent years, increasing attention has been focused on the challenge of organizing information. Yet, this challenge is not new. People have struggled with the difficulties of information organization for centuries. The field of librarianship has been largely devoted to the task of organizing and providing access to information. So why all the fuss now? Believe it or not, we're all becoming librarians. This quiet yet powerful revolution is driven by the decentralizing force of the global Internet. Not long ago, the responsibility for labeling, organizing, and providing access to information fell squarely in the laps of librarians. These librarians spoke in strange languages about Dewey Decimal Classification and the Anglo-American Cataloging Rules. They classified, cataloged, and helped us find the information we needed. The Internet is forcing the responsibility for organizing information on more of us each day. How many corporate web sites exist today? How many personal home pages? What about tomorrow? As the Internet provides us all with the freedom to publish information, it quietly burdens us with the responsibility to organize that information. As we struggle to meet that challenge, we unknowingly adopt the language of librarians. How should we label that content? Is there an existing classification system we can borrow? Who's going to catalog all of that information? We're moving towards a world where tremendous numbers of people publish and organize their own information. As we do so, the challenges inherent in organizing that information become more recognized and more important. Let's explore some of the reasons why organizing information in useful ways is so difficult.
page 20
A throw, fling, or toss. A black, sticky substance used for waterproofing. The rising and falling of the bow and stern of a ship in a rough sea. A salesman's persuasive line of talk. An element of sound determined by the frequency of vibration.
This ambiguity results in a shaky foundation for our classification systems. When we use words as labels for our categories, we run the risk that users will miss our meaning. This is a serious problem. See Chapter 5, for more on this issue. It gets worse. Not only do we need to agree on the labels and their definitions, we also need to agree on which documents to place in which categories. Consider the common tomato. According to Webster's dictionary, a tomato is a red or yellowish fruit with a juicy pulp, used as a vegetable: botanically it is a berry. Now I'm confused. Is it a fruit or a vegetable or a berry?1 If we have such problems classifying the common tomato, consider the challenges involved in classifying web site content. Classification is particularly difficult when you're organizing abstract concepts such as subjects, topics, or functions. For example, what is meant by alternative healing and should it be cataloged under philosophy or religion or health and medicine or all of the above? The organization of words and phrases, taking into account their inherent ambiguity, presents a very real and substantial challenge. 3.1.2 Heterogeneity Heterogeneity refers to an object or collection of objects composed of unrelated or unlike parts. You might refer to grandma's homemade broth with its assortment of vegetables, meats, and other mysterious leftovers as heterogeneous. At the other end of the scale, homogeneous refers to something composed of similar or identical elements. For example, Oreo cookies are homogeneous. Every cookie looks and tastes the same. An old-fashioned library card catalog is relatively homogeneous. It organizes and provides access to books. It does not provide access to chapters in books or collections of books. It may not provide access to magazines or videos. This homogeneity allows for a structured classification system. Each book has a record in the catalog. Each record contains the same fields: author, title, and subject. It is a high-level, single-medium system, and works fairly well. Most web sites, on the other hand, are highly heterogeneous in two respects. First, web sites often provide access to documents and their components at varying levels of granularity . A web site might present articles and journals and journal databases side by side. Links might lead to pages, sections of pages, or to other web sites. Second, web sites typically provide access to documents in multiple formats. You might find financial news, product descriptions, employee home pages, image archives, and software files. Dynamic news content shares space with static human resources information. Textual information shares space with video, audio, and interactive applications. The web site is a great multimedia melting pot, where you are challenged to reconcile the cataloging of the broad and the detailed across many mediums. The heterogeneous nature of web sites makes it difficult to impose highly structured organization systems on the content. It doesn't make sense to classify documents at varying levels of granularity side by side. An article and a magazine should be treated differently. Similarly, it may not make sense to handle varying formats the same way. Each format will have uniquely important characteristics. For example, we need to know certain things about images such as file format (GIF, TIFF, etc.) and resolution (640x480, 1024x768, etc.). It is difficult and often misguided to attempt a one-size-fits-all approach to the organization of heterogeneous web site content.
"The tomato is technically a berry and thus a fruit, despite an 1893 U.S. Supreme Court decision that declared it a vegetable. ( John Nix, an importer of West Indies tomatoes, had brought suit to lift a 10 percent tariff, mandated by Congress, on imported vegetables. Nix argued that the tomato is a fruit. The Court held that since a tomato was consumed as a vegetable rather than as a dessert like fruit, it was a vegetable.)" "Best Bite of Summer" by Denise Grady, Self, July 1997, Vol. 19 (7), pp. 124-125. page 21
page 22
page 23
page 24
3.2.1.1.2 Chronological Certain types of information lend themselves to chronological organization. For example, an archive of press releases might be organized by the date of release (see Figure 3.2). History books, magazine archives, diaries, and television guides are organized chronologically. As long as there is agreement on when a particular event occurred, chronological schemes are easy to design and use. Figure 3.2. Press release archives are obvious candidates for chronological organization schemes. The date of announcement provides important context for the release. However, keep in mind that users may also want to browse the releases by title or search by keyword. A complementary combination of organization schemes is often necessary.
page 25
3.2.1.1.3 Geographical Place is often an important characteristic of information. We travel from one place to another. We care about the news and weather that affects us in our location. Political, social, and economic issues are frequently location-dependent. With the exception of border disputes, geographical organization schemes are fairly straightforward to design and use. Figure 3.3 shows an example of a geographic organization scheme. Figure 3.3. In this example, the map presents a graphical view of the geographic organization scheme. Users can select a location from the map using their mouse.
page 26
3.2.1.2 Ambiguous organization schemes Now for the tough ones. Ambiguous organization schemes divide information into categories that defy exact definition. They are mired in the ambiguity of language and organization, not to mention human subjectivity. They are difficult to design and maintain. They can be difficult to use. Remember the tomato? Do we put it under fruit, berry, or vegetable? However, they are often more important and useful than exact organization schemes. Consider the typical library catalog. There are three primary organization schemes. You can search for books by author, by title, or by subject. The author and title organization schemes are exact and thereby easier to create, maintain, and use. However, extensive research shows that library patrons use ambiguous subject-based schemes such as the Dewey Decimal and Library of Congress Classification Systems much more frequently. There's a simple reason why people find ambiguous organization schemes so useful: We don't always know what we're looking for. In some cases, you simply don't know the correct label. In others, you may only have a vague information need that you can't quite articulate. For these reasons, information seeking is often iterative and interactive. What you find at the beginning of your search may influence what you look for and find later in your search. This information seeking process can involve a wonderful element of associative learning. Seek and ye shall find, but if the system is well-designed, you also might learn along the way. This is web surfing at its best. Ambiguous organization supports this serendipitous mode of information seeking by grouping items in intellectually meaningful ways. In an alphabetical scheme, closely grouped items may have nothing in common beyond the fact that their names begin with the same letter. In an ambiguous organization scheme, someone other than the user has made an intellectual decision to group items together. This grouping of related items supports an associative learning process that may enable the user to make new connections and reach better conclusions. While ambiguous organization schemes require more work and introduce a messy element of subjectivity, they often prove more valuable to the user than exact schemes. The success of ambiguous organization schemes depends on the initial design of a classification system and the ongoing indexing of content items. The classification system serves as a structured container for content items. It is composed of a hierarchy of categories and subcategories with scope notes that define the types of content to be included under each category. Once this classification system has been created, content items must be assigned to categories accurately and consistently. This is a painstaking process that only a librarian could love. Let's review a few of the most common and valuable ambiguous organization schemes.
page 27
page 28
3.2.1.2.2 Task-oriented Task-oriented schemes organize content and applications into a collection of processes, functions, or tasks. These schemes are appropriate when it's possible to anticipate a limited number of high-priority tasks that users will want to perform. Desktop software applications such as word processors and spreadsheets provide familiar examples. Collections of individual actions are organized under task-oriented menus such as Edit, Insert, and Format. On today's Web, task-oriented organization schemes are less common, since most web sites are content rather than application intensive. This should change as sites become increasingly functional. Intranets and extranets lend themselves well to a task orientation, since they tend to integrate powerful applications as well as content. Figure 3.5 shows an example of a task-oriented site. Figure 3.5. In this example, General Motors anticipates some of the most important needs of users by presenting a task-based menu of action items. This approach enables GM to quickly funnel a diverse user base into specific action-oriented areas of the web site.
page 29
3.2.1.2.3 Audience-specific In cases where there are two or more clearly definable audiences for a web site or intranet, an audiencespecific organization scheme may make sense. This type of scheme works best when the site is frequented by repeat visitors who can bookmark their particular section of the site. Also, it works well if there is value in customizing the content for each audience. Audience-oriented schemes break a site into smaller, audiencespecific mini-sites, thereby allowing for clutter-free pages that present only the options of interest to that particular audience. See Figure 3.6 for an example. Figure 3.6. This area of the SIGGRAPH 97 conference web site is designed to meet the unique needs of media professionals covering the conference. Other SIGGRAPH audiences with special needs include contributors and exhibitors.
Audience-specific schemes can be open or closed. An open scheme will allow members of one audience to access the content intended for other audiences. A closed scheme will prevent members from moving between audience-specific sections. A closed scheme may be appropriate if subscription fees or security issues are involved.
page 30
page 31
3.2.1.3 Hybrid schemes The power of a pure organization scheme derives from its ability to suggest a simple mental model for users to quickly understand. Users easily recognize an audience-specific or topical organization. However, when you start blending elements of multiple schemes, confusion is almost guaranteed. Consider the example of a hybrid scheme in Figure 3.8. This hybrid scheme includes elements of audience-specific, topical, metaphorbased, and task-oriented organization schemes. Because they are all mixed together, we can't form a mental model. Instead, we need to skim through each menu item to find the option we're looking for. Figure 3.8. A hybrid organization scheme
Examples of hybrid schemes are common on the Web. This happens because it is often difficult to agree upon any one scheme to present on the main page, so people throw the elements of multiple schemes together in a confusing mix. There is a better alternative. In cases where multiple schemes must be presented on one page, you should communicate to designers the importance of retaining the integrity of each scheme. As long as the schemes are presented separately on the page, they will retain the powerful ability to suggest a mental model for users (see Figure 3.9 for an example). Figure 3.9. Notice that the audience-oriented scheme (contributors, exhibitors, media) has been presented as a pure organization scheme, separate from the others on this page. This approach allows you to present multiple organization schemes on the same page without causing confusion.
page 32
3.2.2 Organization Structures Organization structure plays an intangible yet very important role in the design of web sites. While we interact with organization structures every day, we rarely think about them. Movies are linear in their physical structure. We experience them frame by frame from beginning to end. However, the plots themselves may be non-linear, employing flashbacks and parallel subplots. Maps have a spatial structure. Items are placed according to physical proximity, although the most useful maps cheat, sacrificing accuracy for clarity. The structure of information defines the primary ways in which users can navigate. Major organization structures that apply to web site and intranet architectures include the hierarchy, the database-oriented model, and hypertext. Each organization structure possesses unique strengths and weaknesses. In some cases, it makes sense to use one or the other. In many cases, it makes sense to use all three in a complementary manner. 3.2.2.1 The hierarchy: A top-down approach The foundation of almost all good information architectures is a well-designed hierarchy. In this hypertextual world of nets and webs, such a statement may seem blasphemous, but it's true. The mutually exclusive subdivisions and parent-child relationships of hierarchies are simple and familiar. We have organized information into hierarchies since the beginning of time. Family trees are hierarchical. Our division of life on earth into kingdoms and classes and species is hierarchical. Organization charts are usually hierarchical. We divide books into chapters into sections into paragraphs into sentences into words into letters. Hierarchy is ubiquitous in our lives and informs our understanding of the world in a profound and meaningful way. Because of this pervasiveness of hierarchy, users can easily and quickly understand web sites that use hierarchical organization models. They are able to develop a mental model of the site's structure and their location within that structure. This provides context that helps users feel comfortable. See Figure 3.10 for an example of a simple hierarchical model. Figure 3.10. A simple hierarchical organization model.
Because hierarchies provide a simple and familiar way to organize information, they are usually a good place to start the information architecture process. The top-down approach allows you to quickly get a handle on the scope of the web site without going through an extensive content inventory process. You can begin identifying the major content areas and exploring possible organization schemes that will provide access to that content.
page 33
In considering breadth, you should be sensitive to the cognitive limits of the human mind. Particularly with ambiguous organization schemes, try to follow the seven plus-or-minus two rule.2 Web sites with more than ten options on the main menu can overwhelm users.
G. Miller, "The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information," Psychological Review 63, no. 2 (1956): 81-97. page 34
Although this organization structure provides you with great flexibility, it presents substantial potential for complexity and user confusion. As users navigate through highly hypertextual web sites, it is easy for them to get lost. It's as if they are thrown into a forest and are bouncing from tree to tree, trying to understand the lay of the land. They simply can't create a mental model of the site organization. Without context, users can quickly become overwhelmed and frustrated. In addition, hypertextual links are often personal in nature. The relationships that one person sees between content items may not be apparent to others.
page 35
page 36
Within each of the content areas identified as candidates for a database-driven solution, you will need to begin a bottom-up approach aimed at identifying the content and structure of individual record types.
page 37
page 38
However, creating and maintaining a controlled vocabulary is not a simple task. In many cases, complementing a simple controlled vocabulary that divides the items into broad categories with an uncontrolled keyword field provides a good balance of structure and flexibility. (For more on creating controlled vocabularies, see Section 5.4.1.3 in Chapter 5.)
page 39
The database-driven approach also brings greater efficiency and accuracy to data entry and content management. You can create administrative interfaces that eliminate worry about HTML tags and ensure standard formatting across records through the use of templates. You can integrate tools that perform syntax and link checking. Of course, the search and browse indexes can be rebuilt automatically after each addition, deletion, or modification. Content databases can be implemented in a variety of ways. The database management software can be configured to produce static HTML pages in batch mode or to generate dynamic HTML pages on-the-fly as users navigate the site. These implementation decisions will be influenced by technical performance issues (e.g., bandwidth and CPU constraints) and have little impact upon the architecture.
page 40
page 41
4.1 Browser Navigation Features When designing a navigation system, it is important to consider the environment the system will exist in. On the Web, people use web browsers such as Netscape Navigator and Microsoft Internet Explorer to move around and view web sites. These browsers sport many built-in navigation features. Open URL allows direct access to any page on a web site. Back and Forward provide a bidirectional backtracking capability. The History menu allows random access to pages visited during the current session, and Bookmark enables users to save the location of specific pages for future reference. Web browsers also go beyond the Back button to support a "bread crumbs" feature by color-coding hypertext links. By default, unvisited hypertext links are one color and visited hypertext links are another. This feature helps users understand where they have and haven't been and can help them to retrace their steps through a web site. Finally, web browsers allow for a prospective view that can influence how users navigate. As the user passes the cursor over a hypertext link, the destination URL appears at the bottom of the browser window, ideally hinting about the nature of that content (see Figure 4.1). If files and directories have been carefully labeled, prospective view gives the user context within the content hierarchy. If the hypertext link leads to another web site on another server, prospective view provides the user with basic information about this off-site destination.
page 42
Much research, analysis, and testing has been invested in the design of these browser-based navigation features. However, it is remarkable how frequently site designers unwittingly override or corrupt these navigation features. For example, designers often modify the unvisited and visited link colors with no consideration for the bread crumbs feature. They focus on aesthetics, attempting to match link colors with logo colors. It's common to see a complete reversal of the blue and purple standard. This is a classic sacrifice of usability3 for aesthetics and belies a lack of consideration for the user and the environment. It's like putting up a green stop sign at a road intersection because it matches the color of a nearby building. Given proper understanding of the aesthetic and usability issues, you can in fact modify the link colors and create an intelligent balance.4 Unfortunately, this convention has been violated so frequently, the standard may no longer be standard. A second common example of inadvertently disabling valuable browser navigation features involves prospective view. Image maps have become a ubiquitous navigation feature on web sites. The graphic navigation bar allows the aesthetically pleasing presentation of navigation options. Unfortunately, server-side image maps completely disable the prospective view feature of web browsers. Instead of the destination URL preview, the XY coordinates of the image map are presented. This information is distracting, not useful. Again, a solution that balances aesthetics and usability is available. Through an elegant use of tables (or by using client-side image maps), you can present a graphical navigation bar that leverages the browser-based prospective view feature. Once you are sensitive to the built-in navigation features of web browsers, it is easy to avoid disabling or duplicating those features. In fact, it is both possible and desirable to find ways to leverage them. In designing navigation systems, you should consider all elements of that system. Web browsers are an extremely common and integral part of the user's navigation experience. From a philosophical perspective, we might say that web pages do not exist in the absence of a web browser. So, don't override or corrupt the browser!
Analysis of a usability test that explored the impact of graphic design on users' ability to find information lead to the following conclusion: "Of all the graphic design elements we looked at, the only one that is strongly tied to user success was the use of browser-default link color....Our theory is that use of the default colors is helpful because users don't have to relearn every time they go to a new site." Jared Spool et al., Web Site Usability (Andover, MA: User Interface Engineering, 1997). 4 For an example, see Michigan Comnet at http://comnet.org/. The link colors have been modified slightly to match the logo colors, but the red:purple/visited:unvisited link standard is maintained. page 43
page 44
4.3 Improving Flexibility As discussed in the previous chapter, hierarchy is a familiar and powerful way of organizing information. In many cases, it makes sense for a hierarchy to form the foundation for organizing content in a web site. However, hierarchies can be fairly limiting from a navigation perspective. If you have ever used the ancient information browsing technology and precursor to the World Wide Web known as Gopher, you will understand the limitations of hierarchical navigation. In Gopherspace, you were forced to move up and down the tree structures of content hierarchies (see Figure 4.3). It was not practical to encourage or even allow jumps across branches (lateral navigation) or between multiple levels (vertical navigation) of a hierarchy. Figure 4.3. On a Gopher site, you could only move up or down through the tree structure of the hierarchy.
The Web's hypertextual capabilities removed these limitations, allowing tremendous freedom of navigation. Hypertext supports both lateral and vertical navigation (see Figure 4.4). From any branch of the hierarchy, it is possible and often desirable to allow users to laterally move into other branches. For example, as you explore the Programs and Events section of a conference web site, you may decide to register for that conference. A hypertext link should allow you to jump to Registration without first retracing your steps back up the Programs and Events hierarchy. Figure 4.4. In a hypertext system, navigation links can completely bypass the hierarchy. You can enable users to get anywhere from anywhere. However, as you can see from this diagram, things can get confusing pretty quickly. It begins to look like an architecture from M.C. Escher.
page 45
4.4 Types of Navigation Systems A complex web site often includes several types of navigation systems. To design a successful site, it is essential to understand the types of systems and how they work together to provide flexibility and context. 4.4.1 Hierarchical Navigation Systems Although we may not typically think of it this way, the information hierarchy is the primary navigation system. From the main page to the destination pages that house the actual content, the main options on each page are taken directly from the hierarchy (see Figure 4.5). As noted earlier, the hierarchy is extremely important, but also rather limiting. It is these limitations that often require additional navigation systems. Figure 4.5. Global Navigation Systems
page 46
4.4.2 Global Navigation Systems A global or site-wide navigation system often complements the information hierarchy by enabling greater vertical and lateral movement throughout the entire site. At the heart of most global navigation systems are some standard rules that dictate the implementation of the system at each level of the site. The simplest global navigation system might consist of a graphical navigation bar at the bottom of each page on the site. On the main page, the bar might be unnecessary, since it would duplicate the primary options already listed on that page. On second level pages, the bar might include a link back to the home page and a link to the feedback facility, as in Figure 4.6. Figure 4.6. The MVAC Web site employs a very simple, icon-based global navigation system.
page 47
A slightly more complex global navigation system may provide for area-specific links on third level pages and below. For example, if a user explores the products area of the web site, the navigation bar could include Main Page, Products, and Search. The obvious exception to this rule-based system is that pages should not include navigation links to themselves. For example, the main page of the products area should not include a Products link. However, this is a great opportunity for the site's graphic designer to devise the navigation bar to show that you are currently on the main page of the products area. Designers often leverage a folder tab or button metaphor to accomplish this effect. (On the Argus web site, we use the @ sign from our corporate logo, as seen in Figure 4.7.) Figure 4.7. For the Argus web site, graphic designers from Q LTD came up with a creative and elegant solution to show context within the navigation system by leveraging the @ sign from our corporate logo. In this example, the @ sign indicates that the Publications page is within the What We Do area.
As you can see, this type of rule-based global navigation system can easily be applied throughout the entire web site. The navigation system and the graphic design system should be integrated to provide both flexibility and context. Note that the relative locations of the options should remain the same from one version of the bar to another and that, since people read from left to right, Main Page should be to the left of the other options. Both these factors enhance the context within the hierarchy.
page 48
This integration can be challenging, particularly when the global and local navigation systems provide too many options. Alone they may each be manageable, but together on one page, the variety of options may overwhelm the user. In some cases, you may need to revisit the number of global and local navigation options. In others, the problem may be minimized through elegant page design.
Jakob Nielsen, The Rise of the Sub-Site. Sept, 1996 (http://www.useit.com/alertbox/9609.html.) page 49
Embedded Links As you can see, embedded links are surrounded by text. Users often miss these links. One Solution to the Embedded Link Problem is to give links their own separate lines within the paragraph. Another solution is to create a separate menu of ad hoc links at the top or bottom of the page that point to useful related resources:
page 50
4.5 Integrated Navigation Elements In global and local navigation systems, the most common and important navigation elements are those that are integrated into the content-bearing pages of the web site. As users move through the site or sub-site, these are the elements they see and use again and again. Most integrated navigation elements fit into one of two categories: navigation bars and pull-down menus. 4.5.1 Navigation Bars You can implement navigation bars in many ways and use them for the hierarchical, global, and local navigation systems. In simplest form, a navigation bar is a collection of hypertext links grouped together on a page. Alternatively, the navigation bar may be graphical in nature, implemented as an image map or as graphic images within a table structure. The decision to use text versus graphic navigation bars falls primarily within the realms of graphic design and technical performance rather than information architecture. Graphic navigation bars tend to look nicer but can significantly slow down the page loading speed (although, if you're able to reuse the same global navigation bar throughout the site, loading speed will only be hurt once, since the image will be cached locally). If you do use graphic navigation bars, you need to be sensitive to the needs of users with low bandwidth connections. You should also consider those users with text-only browsers (there are still quite a few out there) and those users with high-end browsers who turn off the graphical capabilities to get around more quickly. Appropriate use of the <ALT> attribute to define replacement text for the image will ensure that your site supports navigation for these users. However, key issues related to the architecture should also influence this decision. For example, it is usually much easier to add options to a text menu than a graphic-based menu. If you anticipate substantial growth or change in a particular area, it may make sense to employ a textual navigation bar, like the one in Figure 4.10. Cost is also an issue, since graphic navigation bars require more work to create and change than textbased bars. In many cases, you might employ a graphic bar for global navigation and a textual menu for local navigation. A good graphic designer will strike an elegant balance between form and function in creating these navigation bars. Figure 4.10. C/Net provides a high-profile example of the use of text-based navigation options.
page 51
It is often best to place the navigation bar towards the top and/or bottom of the page, rather than at the side.6 Placement at the top provides immediate access to the navigation system as well as an instant sense of context within the site. This supports the scenario in which a user quickly scans the first paragraph and decides to move on to other areas of the site. Placement at the bottom assumes navigation once the page has been fully read. Placement at both the top and bottom should be determined by the length of the content. Graphical navigation bars may employ several techniques for conveying content and context, including textual labels and icons. Textual labels are the easiest to create and by far most clearly indicate the contents of each option. Icons, on the other hand, are relatively difficult to create and often fail to indicate the contents of each option. It's difficult to represent abstract concepts through images. A picture may say a thousand words, but often they're the wrong words. Icons can successfully be used to complement the textual labels. Since repeat users may become so familiar with the icons that they no longer take the time to read the textual labels, icons are useful in facilitating rapid menu selection for them. See Figure 4.11 for an example. Figure 4.11. This navigation bar, which appears at the bottom of the page, demonstrates an interesting blend of graphic icons (with labels) and textual options. The global navigation icons provide a splash of color, while their labels ensure usability. The textual local navigation options allow for the creation of many footer navigation bars without restrictive costs.
However, hidden minefields may plague an iconic system. First, the Internet's global nature introduces the potential for confusion or even anger, since an image may have very different meanings from one culture to another. Second, the iconic system may work well for a limited number of menu options, but if the decision is made to add one or more options, creating an appropriate icon can be very challenging. While icons certainly work well sometimes, the skillful use of a color system can facilitate rapid menu selection without the inherent problems of iconic systems. (For more about the use of icons, see Chapter 5.) 4.5.2 Frames Frames present an additional factor to consider in the application of textual or graphical navigation bars. Frames allow you to define one or more independently scrollable "panes" within a single browser window. Hypertextual links within one pane can control the content displayed in other panes within that same window. This enables the designer to create a static or independently scrolling navigation bar that appears on every page in that area of the web site. This frame-based navigation bar will be visible to the user in the same location in the browser window even while scrolling through long documents. By separating the navigation system from content in this way, frames can provide added context and consistency as users navigate a web site. However, frames present several serious problems, both from the consumer's and producer's perspective. Architects should proceed very carefully in considering frame-based navigation solutions. Let's review a few of the major considerations.
One usability study showed that "Sites with navigation buttons or links at the top and bottom of pages did slightly better than sites with navigation buttons down the side of the page." Spool et al., 24. page 52
4.5.2.2 The page model The Web is built upon a model of pages, with each page having a unique address or URL. Users are familiar with the concept of pages. Frames confuse this issue, by slicing up pages into independent panes of content. By violating the page model, the use of frames frequently disables important browser navigation features such as bookmarking, visited and unvisited link discrimination, and history lists. Frames can also confuse and frustrate users executing simple tasks such as using the back button, reloading a page, and printing a page. While web browsers have improved in their ability to handle frames, they can't remove the confusion caused by violating the page model. 4.5.2.3 Display speed Right off the bat, a web page with multiple panes will take a hit on display speed. Since each pane is a separate file with its own URL, loading and displaying each pane requires a separate client-server interaction. In other words, the user spends a lot of time watching "Host Contacted" messages fly by at the bottom of the screen. This problem is compounded by heavy graphics use. 4.5.2.4 Complex design In theory, there are some compelling reasons to try frames. You can make global navigation bars or section headers (or advertisements) visible to the user at all times. However, in practice, designing user-friendly web sites using frames is quite challenging. Frames add a layer of complexity that many architects and designers deal with unsuccessfully. You must think about the multiple ways users will access your frame-based documents. What if they come from another frame-based document? Then you face the danger of frames within frames. In addition, while most web browsers now support frames, different browsers on different computer platforms display the frames and their contents slightly differently. This requires more testing and more careful design. Before using frames, make sure you consider the additional overhead in architecture and design.
page 53
You can implement a more sophisticated version of the pull-down menu (also know as the pop-up menu ) on the Web by using a programming language such as Java or JavaScript. As the user moves the cursor over a word or area on the page, a menu pops up. The user can directly select an option from that menu. Use pull-down and pop-up menus with caution. These menus allow designers to pack lots of options on one page. This is usually what you are working hard to avoid. Additionally, menus hide their options and force the user to act before being able to see those options. However, when you have a very straightforward, exact organization scheme, these menus can work well.
page 54
page 55
Graphics can be used in the design and layout of a table of contents, providing the designer with a finer degree of control over the presentation. Colors, font styles, and a variety of graphic elements can be applied to create a well-organized and aesthetically pleasing table of contents. However, keep in mind that a graphic table of contents will cost more to design and maintain and may slow down the page loading speed for the user. When designing a navigation tool such as a table of contents, form is less important than function. 4.6.2 The Index For web sites that aren't conducive to strong hierarchical organization, a manually created index can be a good alternative to the more structured table of contents. Similar to an index found in print materials, a webbased index presents keywords or phrases alphabetically, without representing the hierarchy. Unlike a table of contents, indexes generally are flat and present only one or two levels of depth. Therefore, indexes work very well for users who already know the name of the item they are looking for. A quick scan of the alphabetical listing will get them where they want to go. A major challenge in indexing a web site involves the level of granularity of indexing. Do you index web pages? Do you index individual paragraphs or concepts that are presented on web pages? Or do you index collections of web pages? In many cases, the answer may be all of the above. Perhaps a more valuable question is: What terms are users going to look for? Its answers should guide the index design. To answer this question, you need to know your audience and understand their needs. Before launch of the site, you can learn more about the terms that users will look for through focus group sessions and individual user interviews. After launch, you can employ a query tracking tool that captures and presents all search terms entered by users. Analysis of these actual user search terms should determine refinement of the index. (To learn more about query tracking tools, see Chapter 9.)
page 56
page 57
4.6.3 The Site Map While the term site map is used indiscriminately in general practice, we define it narrowly as a graphical representation of the architecture of a web site. This definition excludes tables of contents and indexes that use graphic elements to enhance the aesthetic appeal of tools that are primarily textual. A real site map presents the information architecture in a way that goes beyond textual representation. Unlike tables of contents and indexes, maps have not traditionally been used to facilitate navigation through bodies of text. Maps are typically used for navigating physical rather than intellectual space. This is significant for a few reasons. First, users are not familiar with the use of site maps. Second, designers are not familiar with the design of site maps. Third, most bodies of text (including most web sites) do not lend themselves to graphical representations. As we discussed in Chapter 3, many web sites incorporate multiple organization schemes and structures. Presenting this web of hypertextual relationships visually is difficult. These reasons help explain why we see few good examples on the Web of site maps that can improve navigation systems. Figure 4.16 shows a site map from http://www.sgml.net. To learn more about automatically generated site maps, see http://www.webreview.com/97/05/16/arch/index.html. Figure 4.16. In this example of an automatically generated site map, gold bars represent pages within a web site. Users must roll their cursor over a gold bar to see the title of the page. Do you think this approach is more useful than a text-based table of contents?
If you decide to try a site map, consider physical versus symbolic representation. Maps of the physical world do not present the exact geography of an area. Accuracy and scale are often sacrificed for representative contextual clues that help us find our way through the maze of highways and byways to our destination. Often, the higher the level of abstraction, the more intuitive the map. This rule of thumb holds true for all of the remote navigation elements of web sites. When consulting a table of contents or index or site map, a user doesn't need to see every single link on every single page. They need to see the important links, presented in a clear and meaningful way.
page 58
Remember that a guided tour is intended as an introduction for new users and as a marketing opportunity for the web site. Many people may never use it, and few people will use it more than once. For that reason, you might consider linking to the tour from the gateway page7 rather than the main page. Also, you should balance the inevitable big ideas about how to create an exciting, dynamic, interactive guided tour with the fact that it will not play a central role in the day to day use of the web site.
Web sites sometimes have a gateway page that first-time users encounter before reaching the main page. This gateway might serve as a splash page with fancy graphics and animation, as an audience-selection page that sends users to the appropriate area of a site, or as a preview page that shows users what they will get if they subscribe to that particular web site. page 59
page 60
5.1 Why You Should Care About Labeling 5.1.1 Squandering Attention Spans Rock music lyrics were still pretty simple back in the early 60s. Even with folks like Little Richard screeching "A-wop-bop-a-loo-lop a-lop-bam-boo!" you could generally understand what the words meant. But the music matured so much so quickly during that decade that it soon supported the rise of a new pasttime: rock lyric interpretation. Serious brainpower was deployed to interpret what the heck it was that such lyrical giants as Bob Dylan, the Beatles, and Tiny Tim really meant. But those innocent days of recreational head-scratching have given way to an era of abbreviated attention spans. Don't count on the Web maturing in the same way that rock music did; that is to say, web users are not likely to spend much time decoding what it was a web site designer really meant by labeling an item Info or Stuff.
page 61
5.2 Labeling Systems, Not Labels It's important to remember that labels, like organization and navigation systems, are systems in their own right. So it follows that labeling systems, like any other, require planning to succeed. To illustrate, let's compare two labeling systems: 1. Unplanned Labeling System Faculty Skunkworks Office for Instructional Technology K12 PDN Projects Web Page Digital Libraries Project Office of Technology Management Extension Services The New Media Center Project 1999 Institute for Information Technology English Composition Board Technology Dissemination Office 2. Planned Labeling System Arts & Humanities Business & Employment Communication Computers & Information Technology Education Engineering Environment Government & Law Health & Medicine Places & Peoples Recreation Science & Mathematics Social Sciences & Social Issues What is the difference between these two labeling systems?
Counterpoint: the Web is a more insouciant, fun-loving medium than, for example, the buttoned-down stuffiness of annual reports. At least for now, that is. That's why investors were willing to pump millions into something called Yahoo! (which, incidentally, is an acronym for "Yet Another Hierarchical Officious Oracle"). A year before Yahoo! came out, we started something stuffily named "The Clearinghouse for Subject-Oriented Internet Resource Guides" (now called The Argus Clearinghouse: http://www.clearinghouse.net/); if only we'd gone with something cuter or hipper - for example, Dogwash! - we would now be worth zillions. page 62
5.3 Types of Labeling Systems In web sites, labels come in two formats, textual and iconic. We typically find them used in two ways: as links to chunks of information on other pages (usually within the context of navigation systems, as index terms, or as labels for links), and as headings that break up and identify the chunks of information on the same page (much like the heading on this printed page). Of course, a single label can do double duty; for example, the link Contact Us could lead to a page that uses the title label Contact Us. 5.3.1 Labels Within Navigation Systems Navigation system labels demand consistent application more than any other type of labeling system. Navigation systems, as we described in Chapter 4, occur again and again within a web site. Just as users rely on navigational systems to be positioned on a page consistently and look the same throughout the site, they rely on their labels to work in a consistent, familiar way, as in Figure 5.1. Effectively applied labels are integral to building this sense of familiarity, so they'd better not change from page to page. That's why using the label Main, on one page, Main Page on another, and Home elsewhere will surely destroy the familiarity that the user needs when navigating a site. Figure 5.1. The labels Interact, View, Browse, and Search are part of a site-wide navigation system. This labeling system uses consistent verb-based terminology.
page 63
Main, Main Page, Home, Home Page Search, Find, Browse, Search/Browse, Site Map, Contents, Table of Contents, Index Contact , Contact Us, Contact Webmaster, Feedback Help, FAQ, Frequently Asked Questions News, What's New About, About Us, About <company name>, Who We Are
However, each example has two or more textual variants used to represent the same information. So these conventions aren't completely conventional; use them with care! At least use them consistently within your site, as in the example in Figure 5.1. Conversely, the same label can often represent different kinds of information. For example, in one site News may link to an area in a site that includes announcements of new additions to the site. In another site News may link to an area of news stories describing national and world events. Obviously, if you use the same labels in different ways within your own site, your users will be very confused. To address both problems, navigational labels can be augmented by brief descriptions (also known as scope notes) when initially introduced. For example, when a user first encounters these navigational labels on a site's main page, he or she will get a sense of their meaning from their accompanying descriptions: Label Scope Note
Search/Browse Search this site by entering a query, or browse it via a comprehensive site map. Contact Us News Help A direct line to our customer service department, with a 24-hour turnaround guaranteed. Keep current with our up-to-the-minute stock prices and press releases. Our site's FAQ, and how to contact our webmaster.
After this initial introduction, the user should easily understand how to use the following navigation bar that appears on all the other pages in the site: Search/Browse | Contact Us | News | Help
page 64
The labels are now familiar, and if used consistently, will work effectively. Usability tests run on many major sites have confirmed the contextual value of providing descriptions.9 The Argus Clearinghouse provides a more extensive example of the use of scope notes (Figure 5.2). Figure 5.2. Each category and subcategory is described further by a scope note.
5.3.2 Labels as Indexing Terms Labels are increasingly used as indexing terms for classifying the contents of large sites. They work in two ways: enhancing a document's chance of getting retrieved by a searching system, and supporting browsing within a site. To support searching, keywords are assigned to a document, whether within the <META> tag or in an accompanying database record that describes the document's contents. These labels are usually heard but not seen; in other words, they aren't necessarily visible to the user, but instead work in the background to ensure a search engine appropriately indexes the document. For example, we inserted the following code in the main page for International Furniture Rentals (http://www.rent-ifr.com): <META name="keywords" content="IFR Furniture Rentals, International Furniture Rentals, IFR Rentals, relocation, furniture rental, furniture leasing, interim housing, furnished apartments, executive suites, residential furniture, office furniture"> These indexing terms are keywords that describe the company's services and locations, as well as synonyms and name variants (e.g., IFR Rentals) that we anticipated might be searched by users. Search engines, whether Web-wide (e.g., Alta Vista, Hotbot) or specific to this site would then include these terms in their indexes, thereby improving user searching.
Jared Spool et al., Web Site Usability: A Designer's Guide. (Andover, MA: User Interface Engineering, 1997.) page 65
page 66
5.3.3 Link Labels Labels are also used as textual links within the body or text of a chunk of information. These aren't as difficult to create because, unlike navigation system labels, they are naturally used in the descriptive context of their surrounding text. See Figure 5.4 for an example of link labels. Figure 5.4. In this example, the link labels are services, houses, directory, and added. When people describe hypertext, they're often thinking of link labels.
Just because they're relatively easy to create doesn't mean they necessarily work well. For example, take the following list of link labels: Amalgamated annual report Bob Pobjoy ButtMaster 5000 forty percent Here, we have no clue what these labels mean because there is no context. Without context, these aren't part of a system at all. Certainly, if they were being used as part of a navigation system, they'd never work. However, as we see these labels as links within the context of the text, they start to make sense: ...Amalgamated employees believe in the products that they manufacture, market, and sell. For example, forty percent of the company's employees religiously work out on Amalgamated's ButtMaster 5000 at least once per work day. According to Bob Pobjoy , Amalgamated's Chief Morale Officer, "It's a great stress reducer, healthful, and good clean fun. And if you read our annual report , you'll know that Amalgamated is firmly behind firm behinds" quips Pobjoy.... Systematic consistency isn't an issue for link labels. These labels are glued together by the copy, not by a particular system. However, consistency does become an issue between these labels and the chunks of information they link to. For example, the link "annual report" may take the user to a page with the heading Financial Information. Most users won't have a problem with this, but at least a few will be confused. But if the link "Amalgamated" leads to a page labeled Acme Corporation, most users won't bother reading the copy far enough to learn that Amalgamated is really a division of Acme. Avoiding the problems associated with inconsistencies between link labels and where they lead is difficult. We'll never be certain, for example, what we get if we select the link "Bob Pobjoy." A biography? A photo? A personal home page? A mailto:? An entry in a corporate directory? Will "forty percent" lead to a simple pie chart, or the results of a rigorous scientific study of Amalgamated employee exercise habits? These problems can be minimized by asking yourself, "What kind of information will the user expect to be taken to?" before creating and labeling a link. Then, apply your answer consistently. For example, consider having all references to personal names (e.g., Bob Pobjoy) lead to the same sort of destination (e.g., always to a mailto: link).
page 67
To ensure that your heading labels work well as a system, display the heading labels from each page in your site as a single outline. Look for two characteristics: consistency in terminology and consistency in granularity. Consistent terminology means that the wording used among labels is uniform and cohesive. Consistent granularity means two things: 1) that the chunks of information represented at each level of labels are roughly of equal importance, and 2) that the levels of labels don't vary greatly in how deeply they cover parts of a site.
page 68
page 69
But what about when you want to represent something more complex? Like, for instance, a link to Press Releases? You may have occasionally seen a newspaper or cascaded trio of icons, like these:
Does it work? Would you automatically know that these icons represent press releases? Or would you have guessed that it represents a report? Or something that's already in print? Or something else altogether? English has over 610,000 words.11 Remarkably, English speakers have generally agreed to certain conventions about its syntax and semantics. In other words, there isn't much doubt what is meant by the textual label Main Page.
10 11
These icons come from IconBAZAAR (http://www.iconbazaar.com/). According to Nettie Lagace, Reference Librarian at the Internet Public Library (http://www.ipl.org), "If you take the Oxford English Dictionary as gospel, (English) contains half a million words in the CD-ROM edition (http://www.oup-usa.org/oed/oed2cdfaq.html) according to its own homepage, but 616,500 words according to Harvard's link (http://hplus.harvard.edu/descriptions/oed.html ). The Encyclopedia Britannica says Webster's Third New International Dictionary of the English Language (1961), another authoritative unabridged source, contains more than 450,000' words, but in its entry for English Language' doesn't address the size of our collective vocabulary." Thanks Nettie! page 70
Even more than text labels, iconic labels rely on consistent positioning on a site's pages. Moving them around from page to page can sacrifice the user's ability to scan the page quickly and understand what the labels represent, thereby negating much of the benefit of using iconic labels. Icons are fine for representing a few key concepts in a web site. We've all seen a few conventions, such as a house icon for a main page, a question mark for a help page, a magnifying glass for a search page, and so forth. But there aren't too many more that conform to convention, so using icons to represent a large, complex site is an approach that won't scale well. How large is the language of standard web icons? A dozen, perhaps? Certainly no comparison to its textual counterpart, English. In fact, you'll notice that very few web sites bother to use iconic labels without accompanying textual labels, if they use icons at all. So why use iconic labels, especially if you can't use them without textual labels? Two reasons: 1) they can contribute to a consistent, attractive graphic identity for a site, and 2) they are familiar and easy for the user to find on a page (if they are drawn from the small group of concepts conventionally understood and are used consistently on all the site's pages).
page 71
URL http://www.argus-inc.com/
Who We Are
>http://www.argusinc.com/staff/index.html http://www.argusinc.com/design/index.html
Principals Senior Staff The Argus Team Information Architecture Critique Mission and Vision Articulation Audience and Content Analysis Idea Generation Web Site Architecture Deliverables <client name A> <client name B> <client name N> (none)
What We Do
Clients
Argus Clients
http://www.argusinc.com/clients/index.html http://www.argusinc.com/contact/index.html
Contact Argus
Contacting Argus
This label table is short because the site is small. Arranging these labels in a condensed form provides a more accurate and complete view as a system than if you looked at each label within the site page by page. Inconsistencies are easier to catch; for example, we learned that we were using three different labels for the same content (e.g., What We Do vs. What We Do. vs. Web Site Design, and Contact Argus. vs. Contact Argus vs. Contacting Argus). As you can see, both the wording and the use of periods was inconsistent, and possibly confusing. Shame on us! This proves the point that it's easy to create inconsistent labels even within a relatively small site.
page 72
"See" or "Use" terms: Some thesauri include common terms that aren't part of the controlled vocabulary, with a reference to the appropriate controlled term to use. So, in Figure 5.7, if you're looking for the term Draft, you're instructed to use Compulsory military service instead. "See Also" or "Related" terms: These relationships help you find other terms that might be of interest; in Figure 5.8, the term Domestic politics and foreign policy is related to Bipartisan foreign policy, Congress and foreign policy, and so on. "Broader" or "Parent" terms: If a term is too specific (i.e., its level of granularity is too fine), you might look to see what topic it is a part of. In Figure 5.8, Domestic politics and foreign policy is part of the broader area of foreign relations. "Narrower" or "Child" terms: Conversely, a narrower term may provide the level of specificity you need. Dog is a narrower term of Mammal.
These additional relationships can be useful for determining the labeling of the different levels of your site. If you've ever used a library catalog, you are already familiar with a thesaurus: the subject keywords associated with each book come from the Library of Congress Subject Headings (LCSH). You can use and adapt terms from controlled vocabularies and thesauri, but remember: the more narrow and specific the vocabulary or thesaurus, the better its terms will perform for your site. The LCSH is a thesaurus of terms intended to describe the whole universe of knowledge. This is an expansive and expensive task, and it's hard to keep up with all the changes going on in the world; LCSH still includes arcane terms like water closet. LCSH may often be out-of-date and is designed to be all things to all people; therefore, its terms may not be the best fit for your site, which probably doesn't deal with all aspects of human knowledge. Instead, seek out vocabularies that are more narrowly focused and that help specific audiences to access specific types of content. For example, if your site's users are computer scientists, a computer science thesaurus "thinks" the same way the users do more than a general scheme like LCSH would. A good example of a specific controlled vocabulary is the Legislative Indexing Vocabulary (LIV), available at http://lcweb.loc.gov/lexico/liv/brsearch.html, which was designed by the Congressional Research Service to help users search in the Bill Summary & Status files of THOMAS, the Library of Congress' web site for federal legislative information. If your site contains legislative information, or if your site's audience are legislative types, you might start with LIV as the basis of your site's labeling system.
page 73
page 74
Figure 5.8. The value of a thesaurus is in the relationships it specifies between terms: selecting a term in the controlled vocabulary (e.g., Domestic politics and foreign policy) displays a broader term, related terms, and a similar term (Used For) that is not part of this controlled vocabulary.
page 75
5.4.1.4 Labels from content Labels can come from the documents themselves. For example, if your site includes a number of technical reports created by a host of different authors, you can use the document's titles as part of an alphabetically sorted labeling system. Or, if you're creating a subject-oriented labeling system, you can learn a lot about these documents from the terms used in their titles and from their abstracts, if available. Perhaps you'll even read the reports themselves and come up with some terms that describe their content. If you do use terms directly from the documents, be careful! A common (and wrong) assumption is that a document's author is the best candidate to label its content. For example, Gone With the Wind makes for an enticing title as we're sure Margaret Mitchell intended, but as a label it doesn't work at all. It has nothing to do with wind itself. Even if she had selected a representational title for her book, Ms. Mitchell wasn't concerned with how her book's title fit in with the titles of other books and how well the title would support users who were searching for it in an information system. If authors did have such concerns, they might select their titles from thesauri like Library of Congress Subject Headings! For various reasons (artistic, marketing-related, and more), authors' motives when they label their content may have absolutely nothing to do with ensuring that their information gets found. That's why it makes sense for someone else to take a close look at what's being labeled instead of relying upon the source to label the information accurately. 5.4.1.5 Labels from users and experts Lastly, the users of a site may be telling you, directly or indirectly, what the labels should be. This isn't the easiest information to get your hands on, but if you can, it's the best source of labeling there is. It would be great to simply ask them what terms they use, but this wouldn't be very practical. There is a lessintrusive source of useful information on what labels your site's audiences actually use: your search engine's query log (most search engines do log user queries). Query analysis is a great way to understand the types of labels your site's users typically use (see Figures Figure 5.9 and Figure 5.10). Besides shedding some light on user searching behavior, query analysis can also help you understand the content users are specifically asking for from your site. In the case of search queries that retrieve no results, consider these terms as candidates for inclusion in your labeling system, or consider adding relevant content to your site so that queries using these terms actually retrieve something in the future. Figure 5.9. Among other things, this custom-designed query analysis tool shows how many searches took place in total, as well as how many of those searches retrieved no results at all. It was developed by InterConnect of Ann Arbor.
page 76
Figure 5.10. Here the same query analysis tool helps us to view specific queries, how many results they retrieved, where they came from, and when they took place. The third through eighth came from the same IP address, and all took place within four minutes; this suggests that they were part of the same session by the same user.
Another less technical approach is to determine if there are any advanced users or experts, such as librarians, switchboard operators, or other information specialists who are very familiar with the users' information needs, and who could therefore speak on the users' behalf. We found this to be a useful exercise with one of our clients, a major health system. Working with their library staff, we set out to create two labeling systems, one with medical terms to help medical professionals browse the services offered by the health system, the other for the lay audience to access the same content. It wasn't difficult to come up with the medical terms, as there are many thesauri and controlled vocabularies geared toward labeling medical content. It was much more difficult to come up with a scheme for the layperson's list of terms. There didn't seem to be an ideal controlled vocabulary, and we couldn't draw labels from the site's content very easily, as it hadn't been created yet. So we were truly starting from scratch. We solved this dilemma by asking ourselves what the users really wanted out of the site. We considered their general needs, and came up with a few major ones: 1. 2. 3. 4. 5. 6. They need information about or a solution for a problem, illness, or condition. The problem is with a particular organ or part of the body. They want to know about the diagnostics or tests the health care professionals will perform to learn more about the problem. They need information on the treatment, drug, or solution that will be provided by the health system. They want to know how they can pay for the service. They want to know how they can maintain their health.
page 77
By starting with a few groupings, we were able to generate labels to support indexing the site. We knew a bit about the audience (who were laypersons), and so were able to generate the right kinds of terms to support their needs (e.g., leg instead of femur). The secret was working with people (in this case, staff librarians) who were knowledgeable about the kind of information the users want.
5.5 Fine-Tuning the Labeling System The list of terms you are working with might be raw, coming straight from the content in your site, your site's users, or your own ideas of what should work best. Or, it may come straight from a polished controlled vocabulary. In either case, it'll need some work to become an effective labeling system. 5.5.1 The Basics First, sort the list of terms alphabetically. If it's a long list (e.g., indexing labels), you might see some duplicates; remove these. Then review the list for consistency of usage, punctuation, letter case, and so forth. For example, you'll remember that the label table drawn from the Argus web site had inconsistencies that became obvious right away. Sometimes we used periods after labels, sometimes we didn't. We also weren't consistent in our usage of link labels vs. the heading labels on the pages they referred to. You might also find that the writing style varies too much from label to label. For example, one label might use an active verb (e.g., Order a Free Sample from Larry's Reptile Hut) while another may use more passive language (e.g., Larry's Reptile Hut Customer Service). This is a good time to resolve these inconsistencies and perhaps to establish conventions for usage in terms of punctuation, language, and so on. Some terms will undoubtedly be synonyms (e.g., cancer and oncology), others will be variants on the same term (e.g., microfiltration systems and microfiltration services), and some will be related but not quite the same (e.g., stationery and letterhead). You'll need to make some tough decisions here. With synonyms, choose the term that best fits the language of your site's users. So, if they're medical professionals, use the medical term oncology rather than the more generic term cancer. If you encounter variants or synonyms, ask yourself if they are different or part of the same general concept. For example, do microfiltration systems and microfiltration services need to be distinguished, or could they be combined under microfiltration? Do you need very specific terms like letterhead, or will broader terms like stationery suffice? All in all, strive to make your labels descriptive and differentiate them from one another. The studies by Jared Spool et al. demonstrate the confusion that can be wrought by putting similar terms such as global and international side by side, as was done in the Fidelity web site. If the site's designers had looked at these labels as part of a complete system, they'd likely have thought twice about using such similar labels.
page 78
5.6 Non-Representational Labeling Systems This chapter emphasizes the need for labels to be familiar for users, and also that consistency and representation are the foundations for building that familiarity. Now that we have belabored that point, we'll counter it with another: labeling systems should not necessarily be representational. What? Would you make up your mind already? Well, let's put it this way: non-representational labeling is not something that we'd recommend using regularly. In fact, it's difficult to determine when it should be applied. Following are two examples where we think it succeeds. 5.6.1 Good Head-Scratching Head-scratching is usually a Bad Thing. It means that some aspect of a site has confused a user and is in the way of achieving the site's main goal, namely, conveying a message. But, like everything else, even cognitive confusion has a good side: Mystery. Consider the main page shown in Figure 5.11. What the heck is going on here? If you come to this site, you may already have a little context, knowing in advance that it's a personal site. If not, you might figure this out fairly quickly, as this text uses the first person and seems to describe a personal quest. Beyond that, this page tells nothing about what you'll find in this site.
page 79
But you might want to know more. The radical aspect of this page involves its use of two brief sentences and five highly generic terms as labels to draw the user into a very personal experience. The labels are almost completely non-representational, and even in context they make you wonder and want to learn more. If these link labels were accompanied by more information, such as scope notes, the effect would probably be lost: Label where I searching it unfound Scope Note Descriptions of various places where the author has lived. Basic information about the author. What the author has found while searching for meaning in his life. Friends and meaning that the author found. What the future may have in store.
There's no mystery if the site provided (gave away, really) this information on the main page. Without a little mystery, this site just wouldn't work.
page 80
Each of the five holes links to a section of the site: Iconic Label Position sky and floating clouds (top left) swimming fish penguin sky and floating clouds (top right) smoking detective Leads To About Cool Central Nick's Picks Cool Central Site of the [Moment, Hour, Day, Week] Advertising Information Nick Click, Private Eye
Of course, none makes any sense at all, save for the detective icon, which leads to a private eye-themed area. Of course, you'll want to click on each just to learn what they lead to. Goofy, silly, and weird, but in a non-serious site that exists solely for the purpose of having fun, it works.
page 81
page 82
6.1 Searching and Your Web Site The preceding three chapters were intended to help you create the best browsing system possible for your web site. This chapter describes when to use a search engine with your site and demonstrates techniques that will make searching work best for it. Throughout this chapter, we use examples of searching systems from major sites which allow you to search the entire Web, as well as site-specific search engines. Although these Web-wide tools are different in that they index a much broader collection of content than your search system will, it is nonetheless very useful to study them. Of all searching systems, none has undergone the testing, usage, and investment that Web-wide search tools have, so why not benefit from their research? 6.1.1 When Not To Make Your Site Searchable Before we delve into searching systems, we need to make a point: think twice before you make your site searchable. What? What's the point of having a web site if people can't find information in it? Your site should of course support the finding of its information. But don't assume a search engine alone will satisfy all users' information needs. While many users want to search a site, some just want to browse it. Also, does your site have enough content to merit the use of a search engine? How much is enough? It's hard to say. It could be five resources or fifty; no specific number serves as a threshold. Perhaps a site with five long, dense documents deserves a search engine more than one with a collection of twenty brief, well-labeled documents. In any case, you'll want to balance the time necessary to set up and maintain a searching system with the payoff it brings to your site's users. Because many site developers see search engines as the solution to the problems that users are experiencing when trying to find information in their sites, search engines become bandages for sites with poorly designed browsing systems. If you see yourself falling into this trap, you should probably suspend implementing your searching system until you fix your browsing system's problems. Search engines are fairly easy to get up and running, but like much of the Web, they are difficult to set up effectively. As a user of the Web, you've certainly seen incomprehensible search interfaces, and we're sure that your queries have retrieved some pretty strange results. This often is the result of a lack of planning by the site developer, who probably installed the search engine with its default settings, pointed it at his or her site, and forgot about it. So, if you don't plan on putting some significant time into configuring your search engine properly, reconsider your decision to implement it. Now that we've got our warnings and threats out of the way, we'll discuss when to implement searching systems, and how you can make them work better. 6.1.2 When To Make Your Site Searchable Most web sites, as we know, aren't planned out in much detail before they're built. Instead, they grow organically. This may be all right for smaller web sites that aren't likely to expand much, but for ones that become popular, more and more content and functional features get added haphazardly, leading to a navigation nightmare. There's a good analogy of physical architecture. Powell's Books (http://www.powells.com), which claims to be the largest bookstore in the world, covers an entire city block (43,000 square feet) in Portland, Oregon. We guess that it originally started as a single small storefront on that block, but as their business grew, they knocked a doorway through the wall into the next storefront, and so on, until they occupied the whole block. The result is a hodgepodge of chambers, halls with odd turns, and unexpected stairways. This chaotic labyrinth is a charming place to wander and browse, but if you're searching for a particular title, good luck. It will be difficult to find what you're looking for, although you might serendipitously stumble onto something better.
page 83
6.2 Understanding How Users Search Assuming you've decided to implement a searching system for your web site, it's important to understand how users really search before designing it. We'll try to condense decades of research and experience generated by the field of information retrieval into the next few paragraphs. But it really boils down to this point: searching systems can and should vary as much as browsing systems or any other components of web sites do, because all users aren't alike, and information retrieval is much harder than most people realize. 6.2.1 Users Have Different Kinds of Information Needs Information scientists and librarians have been studying users' information finding habits for decades. Until recently, these studies usually pertained to traditional information systems, such as how to ask a library patron the right questions to learn their information needs, or how to make it easier to search for information in online library card catalogs or other databases. Many studies indicated that users of information systems aren't members of a single-minded monolithic audience who want the same kinds of information delivered in the same ways. Some want just a little information, while others want detailed assessments of everything there is to know about a topic. Some want only the most accurate, highest quality information, while others don't care much about the reliability of the source. Some will wait for the results, while others need the information yesterday. Some are just plain happy to get any information at all, regardless of how much relevant stuff they're really missing. Users' needs and expectations vary widely, and so the information systems that serve them must recognize, distinguish, and accommodate these different needs. To illustrate, let's look at one of these factors in greater detail: the variability in users' searching expectations. 6.2.1.1 Known-item searching Some users' information needs are clearly defined and have a single, correct answer. When you check the newspaper to see how your stock in Amalgamated Shoelace and Aglet is doing (especially since the hostile Microsoft takeover attempt), you know exactly what you want, that the information exists, and where it can be found. This is the simplest type of information need. If it were the only type, the job of the web site architect would be much easier.
page 84
page 85
6.3 Designing the Search Interface With so much variation among users to account for, there can be no single ideal search interface. Although the literature of information retrieval includes many studies of search interface design, many variables preclude the emergence of the right way to design search interfaces. Here are a few of the variables on the table:
The level of searching expertise users have: Are they comfortable with Boolean operators, or do they prefer natural language? Do they need a simple or high-powered interface? What about a help page? The kind of information the user wants: Do they want just a taste, or are they doing comprehensive research? Should the results be brief, or should they provide extensive detail for each document? The type of information being searched: Is it made up of structured fields or full text? Is it navigation pages, destination pages, or both? HTML or other formats? How much information is being searched: Will users be overwhelmed by the number of documents retrieved?
We can, however, provide basic advice that you should consider when designing a search interface.
page 86
So we created a simple interface that almost anyone could figure out and use right away, shown above in Figure 6.1. A simple search box is ideal for the novice or for a user with a pretty good sense of what he or she is looking for. (We made sure to provide a single search query box; our experience shows that most users don't care for separate boxes, one for each query term, divided by Boolean operators.) Minimal filtering options are provided, including searching for keywords within title and abstract fields, searching within the author field, or searching within the publication number field. These filtering options provide the user with more power by allowing more specific searching. But because the labels Keyword, Author, and Publication Number are fairly self-explanatory, they don't force the user to think too much about these options.
page 87
For the advanced users, a more powerful interface was created, shown above in Figure 6.2. This interface supports the following types of searching: Fielded Searching Author, Keyword, Title, Subject, and ten other fields are searchable. A researcher could, for example, find a dissertation related to his or her area of interest by searching the subject field, and learn who that doctoral student's advisor was by reading the abstract. To find other related dissertations, the researcher could then search the Advisor field to learn about other doctoral students who shared the same advisor. Familiar Query Language In Figure 6.2, the style "field(search term)" is used (e.g., "keyword(drosophila)"). Because many different query language conventions are supported by traditional online products, users may be used to an established convention. The effort to support these users is made by allowing variant terms. For the field Degree Date, the user can enter either "ddt," "da," "date," "yr," or "year." Longer Queries More complex queries often require more space than the single line entry box found in the simple search interface in Figure 6.1. The more complex interface supports a much longer query. Reusable Result Sets Many traditional online information products allow searchers to build sets of results that can be reused. In this example, we've ANDed together the two sets that we've already found, and could in turn combine this result with other sets during the iterative process of searching.
page 88
page 89
6.3.2 Searching and Browsing Systems Should Be Closely Integrated As we mentioned earlier, users typically need to switch back and forth between searching and browsing. In fact, users often don't know if they need to search or browse in the first place. Therefore, these respective systems shouldn't live in isolation from one another. When we redesigned the Argus Clearinghouse, we integrated these two elements on a single page called Search/Browse, shown in Figure 6.4. This combined interface to searching and browsing makes it clear to the user what he or she can do there. The search/browse approach can be extended by making search and browse options available on the search results page as well, especially on null results pages, when a user might be at a dead end and needs to be gently led back into the process of iterative searching and browsing before frustration sets in. Figure 6.4. Because its vertical space requirements are relatively small, the simple search interface is located toward the top of the page. It is followed by a browsing scheme too long to be displayed in its entirety. But users get a sense of what they'll see if they scroll further.
page 90
6.3.3 Searching Should Conform to the Site's Look and Feel Search engine interfaces, and more importantly, retrieval results, should look and behave like the rest of your site. This advice may seem painfully obvious, but because many search engines are packaged as ready-to-go add-ons to a site, site developers don't bother to customize them.12 For example, the interface and results produced by the Excite search engine are easy to detect. In fact, they look and work so similarly from site to site that it's easy to forget that they are actually parts of individual sites. Figure 6.5 is a great example of a search interface which hasn't been customized, while Figure 6.6 shows how the search interface can be integrated with the rest of the site's look and feel. Figure 6.5. Search results from a search engine that hasn't been customized ...
12
It should be mentioned that some search engines, like AltaVista, don't allow you to modify search and retrieval results pages. page 91
Figure 6.6. ... and from one that has. In Figure 6.5, the search results use Excite's standard images, and look more like they're part of Excite's site than Chevron's. The Chrysler site's searching system's look and feel is much more closely integrated with the rest of the site.
6.3.4 Search Options Should Be Clear We all pay lip service to the need for user documentation, but with searching, it's really a must. Because so many different variables are involved with searching, there are many opportunities for things to go wrong. On a Help or Documentation page, consider letting the user know the following: 1. What is being searched. Users often assume that their search query is being run against the full text of every page in your site. Instead your site may support fielded searching (as in the UMI example above), or another type of selective searching (see "Indexing the Right Stuff " later in this chapter). If they're curious, users should be able to find out exactly what they are searching. How they can formulate search queries. What good is it to build in advanced querying capabilities if the user never knows about them? Show off the power of your search engine with excellent real life examples. In other words, make sure your examples actually work and retrieve relevant documents if the user decides to test them. User options. Can the user do other neat things such as changing the sorting order of retrieval results? Show them off as well! What to do if the user can't find the right information. It's important to provide the user with some tricks to handle the following three situations: a. b. c. "I'm getting too much stuff." "I'm not getting anything." "The stuff I'm getting stinks!"
2.
3. 4.
For case (a), you might suggest approaches that narrow the retrieval results. For example, if your system supports the Boolean operator AND, suggest that users combine multiple search terms with an AND between them (ANDing together terms reduces retrieval size). If they are retrieving zero results, as in case (b), suggest the operator OR, the use of multiple search terms, the use of truncation (which will retrieve a term's variants), and so on. If they are completely dissatisfied with their searches, case (c), you might suggest that they contact someone who knows the site's content directly for custom assistance. It may be a resource-intensive approach, but it's a far superior last resort to ditching the user without helping them at all.
page 92
Finding a Search Engine Okay, you've decided you want to provide a search engine for your web site. Where do you get one? There are several commercial solutions for web site indexing. Lycos licenses its search engine technology for individual web sites. So does Infoseek. Excite for Web Servers, or EWS, is a free version of the Excite search engine. You can get it from http://www.excite.com/navigate/. The only requirement is that you include a link back to their web site. Other freeware search engines include Glimpse (http://glimpse.cs.arizona.edu:1994/) and SWISH (Simple Web Indexing System for Humans) (http://www.eit.com/software/swish/).
page 93
page 94
page 95
3.
How many retrieved documents should be displayed? How many documents are displayed depends on the preceding two factors. If your engine displays a lot of information for each retrieved document, you'll want to consider a smaller size for the retrieval set, and vice versa. Additionally, the user's monitor resolution and browser settings will affect the amount of information that can be displayed individually. Your best bet is to provide a variety of settings that the user can opt to select based on his or her own needs, and always let the user know the total number of retrieved documents. How should retrieved documents be sorted? Common options for sorting retrieval results include: in chronological order alphabetically by title, author, or other fields by an odd thing called relevance
page 96
page 97
page 98
The 20 results are scored at either 84% or 82% relevant. Why does each document receive only one of two scores? Are the documents in each group so similar to each other? And what the heck makes a document 2% more relevant than another? Let's compare two retrieved documents, one which received an 84% relevancy score (Figure 6.12), the other 82% (Figure 6.13). Figure 6.12. Sales & Use Tax: Business was scored at 84% relevancy...
Figure 6.13. ...and Sales & Use Tax: Individuals received an 82% relevancy ranking. Can you tell the difference?
As you can see, these documents are almost exactly the same. Both have very similar titles, and neither uses hidden <META> tags to prejudice the ranking algorithm. Finally, both documents mean essentially the same thing, differing only in that one deals with businesses and the other with individual consumers. The only apparent difference? While sales and tax appear within <TITLE> and <H1> tags of both documents, they appear in the body of only the first document, not in the second. The search engine probably adds 2% to the score of the first document for this reason. Probably, because, as the algorithm isn't explained, we don't know for sure if this is the correct explanation.
page 99
6.3.9 Other Considerations You might also consider including a few easy-to-implement but very useful things in your engine's search results:
Repeat back the original search query prominently on the results page. As users browse through search results, they may forget what they searched for in the first place. Remind them. Also include the query in the page's title; this will make it easier for users to find it in their browser's history lists.
Let the user know how many documents in total were retrieved. Users want to know how many documents have been retrieved before they begin reviewing the results. Let them know; if the number is too large, they should have the option to refine their search.
Let the user know where he or she is in the current retrieval set. It's helpful to let users know that they're viewing documents 31- 40 of the 83 total that they've retrieved.
Always make it easy for the user to revise a search or start a new one. Give them these options on every results page, and display the current search query on the Revise Search page so they can modify it without reentering it.
page 100
6.5 Indexing the Right Stuff So, let's get back to whether you need a search engine. Let's assume that you do intend to slap a search engine on top of your web site. Shouldn't be a problem right? Just point the indexer at the directory where all the pages live, and, voil! Searchable site! Of course, you knew it wasn't that simple. Searching only works well when the stuff that's being searched is the same as the stuff that users want. This means you may not want to index the entire site. We'll explain. 6.5.1 Indexing the Entire Site Search engines are frequently used to index an entire site without regard for the content and how it might vary - every word of every page, whether it contains real content or help information, advertising, navigation menus, and so on. However, searching works much better when the information space is defined narrowly and contains homogeneous content. In other words, the more you search through indices that combine apples and oranges, the worse your retrieval results will be. After all, when you search a site, you're probably looking for apples only, not oranges. As already discussed, a site's content is usually a mix of apples, oranges, kumquats, bell peppers, chainsaws, and Barbie dolls to begin with. So, when you tell your search engine to index your entire site, the site's users will be performing searches against all kinds of stuff - navigation, destination, and other kinds of pages - all at once. What they retrieve can often be ugly.
page 101
58 documents are Welcome to Netscape Navigator version X.X pages for just about every version of Netscape Navigator and include information about plug-ins. 16 documents are in German (a language I don't read). 6 documents contain the potentially relevant term application in their titles, but 5 of these 6 have exactly the same title (Netscape Handbook: Application Features). 2 documents actually contain plug-in in their titles. 18 other assorted documents may be relevant, but are not labeled in a way that indicates whether this is the case.
Analyzing these search results, we find two common problems. First, we are presented with documents that clearly don't belong. If the site had been selectively indexed with audience differences in mind, 16% of the results would not have been displayed at all. Second, regarding relevant documents, it's not clear why we need 58 versions of the same type of document. It would have been useful to index pages more selectively, such as files relevant to Windows or Macintosh users, or recent versions versus older versions of the software. Are very many people still interested in old Netscape Beta versions? So, our search is less successful than it could have been; it gave us a lot of irrelevant documents, and too many that could be relevant. Our search performed poorly because all the content in the site was indexed together. By doing so, the site's architects chose to ignore two very important things: that the information in their site isn't all the same, and that it makes good sense to respect the lines already drawn between different types of content. For example, it's clear that German and English content are vastly different and that their audiences overlap very little (if at all), so why not create separately searchable indices along those divisions? The site designers at Netscape are already doing this, in a limited way. They have put a lot of effort into helping you download the right version of the software from the nearest location. To download the software, you get asked several questions (not unlike those in a reference interview). Shown in Figure 6.15, the site asks the user:
What operating system does your computer use? What language do you speak? Which of our products do you need?
The result is a list of links to download sites that provide the user the right information (i.e., software appropriate to the user's platform), taking into account his or her geographic location and language. Why not apply this same careful approach to matching users with the right information to the entire site, instead of just to this specific situation?
page 102
page 103
6.5.2 Search Zones: Selectively Indexing the Right Content Search zones are subsets of a web site that have been indexed separately from the rest of the site's content. When you search a search zone, you have, through interaction with the site, already identified yourself as a member of a particular audience or as someone searching for a particular type of information. The search zones in a site match those specific needs, and the result is improved retrieval performance. The user is simply less likely to retrieve irrelevant information. The Microsoft site has a good example of search zone use. Although this site suffers from other searching problems, it compares favorably to the Netscape site when searching for our old stand-by, plug-ins. On the search page you're asked where you want to search in the Microsoft site, and are provided with the options on a pull-down menu (Figure 6.16). Figure 6.16. Microsoft's site employs search zones to help focus the user's search before submitting a query to the search engine.
You've got many options to review, but you can quickly find the Internet Explorer area of the site where you'd want to look for plug-ins. Consider how well the effort the user expends in reviewing and selecting from this menu compares to the much greater effort of searching the entire site and then sifting through a tremendously larger retrieval set. Also note the Full Site Search option; sometimes it does make sense to maintain an index of the entire site, especially for users who are unsure where to look, who are doing a comprehensive leave-no-stones-unturned search, or who just haven't had any luck searching the more narrowly defined indices. How is search zone indexing set up? It depends on the search engine software used. Most support the creation of search zones, but some provide interfaces that make this process easier, while others require you to manually provide a list of pages to index. In either case, search zone indexing requires more work on your part than simply pointing the search engine at the entire site: you'll need to review and mark each page that should be indexed. To make this easier, you might design your site so that pages that should be indexed together are located in the same directory; that way, you would mark for indexing a directory (and, implicitly, its contents) instead of its individual pages. You may also be working with pages that are generated from a database. In this case, you could design the database to include a field for each record denoting which index the generated page should belong to.
page 104
by by by by
Note that these approaches are similar to the organization schemes discussed in Chapter 3. The decisions you made in selecting your site's organization scheme will often work for determining search zones as well. You could also try other ways; the most important consideration is to choose an approach appropriate to your site's audiences and their information needs. 6.5.2.1 Apples and apples: indexing similar content types Most web sites contain, at minimum, two major and dissimilar types of pages: navigation and destination. Destination pages contain the actual information you want from a web site: sport scores, book reviews, software documentation, and so on. The primary purpose of a site's navigation pages is to get you to the destination pages. Navigation pages may include main pages, search pages, and pages that help you browse a site. When a user searches a site, he or she is generally looking for destination pages. If navigation pages are part of the retrieval, they will just clutter up the retrieval results. In fact, the reason that the user is searching rather than browsing some other way could be because the navigation system is performing poorly in the first place. So why keep showing the user navigation pages that don't work and aren't relevant to the search? Let's take a simple example: your company sells computer products via its web site. The destination pages consist of descriptions, pricing, and ordering information, one page for each product. Also, a number of navigation pages help users find products, such as listings of products for different platforms (e.g., Macintosh versus Windows), listings of products for different applications (e.g., word processing, bookkeeping), listings of business versus home products, and listings of hardware versus software products. If the user is searching for Intuit's Quicken, what's likely to happen? Instead of simply retrieving Quicken's product page, they might get all these pages: Financial Products Index Page Home Products Index Page Macintosh Products Index Page Quicken Product Page Software Products Index Page Windows Products Index Page The user retrieves the right destination page (i.e., the Quicken Product Page), but also five more that are purely navigation pages. In other words, 83% of the retrieval is in the way. And keep in mind that this example is simple; what if the user had to ignore 83% of a much larger retrieval set, say, 200 documents? Of course, indexing similar content isn't always easy, because "similar" is a highly relative term. It's not always clear where to draw the line between navigation and destination pages. In some cases, a page can be considered both. For example, we tried the approach described here for the SIGGRAPH 96 Conference web site.13 We found that some pages didn't really fit the navigation/destination breakdown. For example, the Exhibition Hall Map page appears to be navigation. It links to pages for each of the five sections of the hall. These five pages appear to be destination, presenting detailed maps of their respective sections, including booth numbers and the names of exhibitors. But their parent page also provides important information, such as where the hall entrances are, and where the five sections are in relation to one another. So isn't the main Exhibition Hall Map page destination as well as navigation? The best solution, in this particular case, was to index these hybrid pages, but it wasn't ideal. The more important lesson from this experience was to test out the navigation/destination distinctions before actually applying them. The weakness of the navigation/destination approach is that it is essentially an exact organization scheme (discussed in Chapter 3) which requires the pages to be either one thing (in this case destination) or another (navigation). In the following three approaches, the organization approaches are ambiguous, and therefore more forgiving of pages that fit into multiple categories.
13
This site evolved greatly during the year leading up to SIGGRAPH 96, and then some after the conference was complete. The fullest version of this site is archived at http://siggraph.anecdote.com/conferences/siggraph96. page 105
As with any search zone, less overlap between indices improves performance. If the sizes of retrieval results were reduced by a very small figure, let's say, 10% or 20%, it may not be worth the overhead of creating separate audience-oriented indices. But in this case, much of the site's content is specific to one of the audiences. 6.5.2.3 Drilling down: Indexing by subject If your site uses a strong subject-oriented or topical organization scheme, you've already distinguished many of the site's search zones. Yahoo! is perhaps the most popular site to employ subject-oriented search zones. Every subject category and subcategory in Yahoo! can be searched individually. For example, let's say you're looking for sites that deal with science fiction movies. If you search for science fiction against the whole Yahoo! search index, you'll retrieve a lot of stuff: 35 category and subcategory matches and 816 site matches. But you're not looking for science fiction in general; you're looking for science fiction movies. So, instead you can run the same science fiction search against the index for the Yahoo! subcategory Movies and Films. This time you'll be happier with your retrieval: 2 category and subcategory matches and 19 site matches. This is another excellent example of how hierarchical search zones allow for increased specificity, and therefore improved retrieval results.
page 106
Regular users can return to the site and check up on the news depending on how regularly they use the site (e.g., every week, two weeks, three weeks). Users who are looking for news during a particular date range can essentially generate a custom search zone on the fly. The only negative in News.Com's implementation is that they don't seem to support a search against all news articles, regardless of age.14
14
There does seem to be a work-around to this problem: leave the pull-down menu on the default setting of Days back, and the resulting retrieval seems larger than 90 days. But this is simply a guess... page 107
page 108
7.1 Getting Started If you want to create a successful web site, you first must understand the big picture. For that reason, the first step in the research process is to ask questions. You need to get everything out into the open: the individual visions for the site, the raw materials at your disposal, and any possible restrictions. Only then can you develop a solid architecture for your web site. Questions you need to ask include:
What are the short- and long-term goals? What can you afford? Who are the intended audiences? Why will people come to your site? What types of tasks should users be able to perform? What types of content should and should not be part of the site?
You'll find that everyone has different answers to these questions. Inevitably, we all bring personal, professional, and departmental biases to the table. The architect is no exception: both the architect and designer have their own biases and ambitions. To avoid wasted work and complications later on, you need to get these out in the open as soon as possible. When you're architecting web sites, it's very important to get the project off to a good start. You want everyone to feel involved, enthusiastic, and confident that you know what you're doing. Let's explore ways to make this happen.
page 109
page 110
Information Architecture Meeting Agenda 1. 2. Introductions Web Site Critiques What do you love and hate about the following sites? 3. Information Architecture Overview What is information architecture? Review of the process and deliverables. Discussion of how both will fit into broader context of the project. 4. Project Scope Are we architecting just the umbrella site or the sub-sites as well? What are the respective priorities, timelines, and budget considerations? 5. Centralization vs. Decentralization Putting aside the web site for a second, to what extent do the separate affiliates, departments, and subsidiaries share organizational resources? What is the strategy, goal, position, and target market for the holding company? Will the parent company's brand be stronger/weaker than the subsidiary brands? Who will be responsible for collecting and maintaining content of the umbrella site? Is it correct to assume that the content that we will be classifying in the site is products and services, not individual subsidiaries? In the site, will there be a need to provide unified packaging (e.g., guides, indices) of products/services from separate subsidiaries? 6. Metrics for Success Discuss possible goals for the site and opportunities to measure success. Potential to track leads, click throughs, media contacts, etc. 7. Umbrella Information Architecture What are the major questions that audience members will have upon arriving at the umbrella site? What are the key ways they will want to navigate? 8. Discussion of Next Steps
page 111
page 112
You'll want to accompany the sample architectures with specific exercises that tell people what you'd like them to focus on. The sample exercise in the sidebar on the next page shows the types of questions you might ask.
15
Learn about Web Whacker at http://www.ffg.com/ or read about other offline browsers at http://www.yahoo.com/Computers_and_Internet/Software/Reviews/Titles/Internet/Browsers/Offline_Browsers/. page 113
Sample Exercise: Information Architecture Critiques The following pages contain representations of the organization systems of three web sites. Please review each organization scheme and answer the following questions: 1. 2. A site's organization scheme involves the placement of content into categories. Which organization scheme do you like best? Why? The labels used for the groupings of content make a difference in a user's understanding of the site and their ability to navigate its content. Which labels stand out in your mind as particularly good ones? What makes them good? Which labels stand out in your mind as weaker ones? Why? Overall, which architecture do you like best of these three? Why?
3.
7.2 Defining Goals In early meetings, it's always easy to jump the gun and dive right into juicy discussions about possible information architectures. Sometimes you will need to ask everyone to step back and spend some time exploring bigger picture issues like mission and vision first. It's good to begin by brainstorming on mission and vision. To get these sessions going, you might ask some of the following questions:
What is the mission of the organization? How does the web site support that organizational mission? Does the new medium of the Web force you to reconsider the organization's mission? What are the short-term goals with respect to the web site? What are the long-term goals? How do you envision the web site one to two years from now?
Once you've had a good opportunity to brainstorm, you can lead your colleagues through the exercise of writing a web site mission statement, which might look something like this: The mission of our web site is to create new customer relationships and strengthen existing customer loyalty. We see our web site not only as a promotional tool, but as a customer service tool. Of course, it's easy to make fun of these touchy-feely mission statements, and they may soon be forgotten. However, the exercise of writing a mission statement can help a group to focus on the goals behind the site. Towards that end, it's often useful to probe for goals not currently included in the mission statement. If the mission statement emphasizes sales and marketing, ask about customer support or the provision of new, innovative services. Use this exercise to explore the full range of possibilities before moving on to more practical matters.
page 114
You can ask people to rank these goals and measurement opportunities in several ways. For example, you might ask how important each factor will be in obtaining additional funding from senior management after the site's launch. You might also ask how difficult each measurement opportunity will be to implement. You can pass out this type of document and then encourage the group to brainstorm about these and other ways they might measure the site's success. How important are hard measurements that show return on investment compared to soft measurements that demonstrate customer satisfaction and public perception? In performing this exercise, it's important to realize that many of these ideas for measurement might not be practical and that decisions regarding measurement don't need to be made at this time. It's really just an exercise to get people thinking about these issues early in the process.
page 115
Who are the most important audiences for the web site? Are there other audiences we're not thinking about? How about the media, investors, competitors, and current and potential employees? Is there a difference between the most important audiences (e.g., those who influence funding) and the audiences who will use the web site most frequently? What are the implications? How do these audiences currently interact with your company? By phone, mail, email, fax, or in person? What will these audiences want to do when they visit the web site? Why will they come and what will make them return?
Once you've generated an initial list of possible audiences, ask the group to rank the relative importance of these audiences, and list their most important needs, as we've done in the following example: List the three most important information needs of this audience with respect to the State Library
Audiences
Librarians (members of cooperative) Librarians (non-members) Patrons of Public Libraries Patrons of State Library State Legislature State Government Employees Federal Government Media Medical Community Legal Community z39.50 Community Other Audiences (specify): We asked staff at the State Library of Iowa to rank their key audiences and list the major information needs of each audience. This structured approach to research enabled us to gather valuable information quickly and efficiently. The results of this audience prioritization exercise will prove useful in considering possible information architectures for the web site. They can also be interesting to analyze and discuss.
page 116
Audience Librarians (members of cooperative) Librarians (non-members) State Government Employees State Legislature Legal Community Medical Community Patrons of Public Libraries Patrons of State Library z39.50 Community Media Federal Government
10 2 3 6 7 8 5 2 6 8 6 5 3 9 7
10 8 7 7
10 11 1 10 10 11 9 9 6 11 10 9 8 3
11 11 10 10 10 7 7 8
11 9
11 4
10 11 9
10 10 12 12 9
Obviously, opinions regarding the importance of the z39.50 community as an audience for this Web site ranged wildly. These results uncovered this diversity of opinion about this particular audience and enabled us to explore the reasons each person had for choosing his or her audience priorities.
7.4 Identifying Content and Function Requirements One of the biggest challenges in information architecture design is that of trying to get your arms around the intended content and functionality of the web site. For a large site, this can be absolutely daunting. The first step to success is realizing that you can't do it all at once. The identification of content and function requirements may involve several iterations. So just roll up your sleeves and get started. 7.4.1 Identifying Content in Existing Web Sites As the Web matures, more and more projects involve rearchitecting existing web sites rather than creating new ones from scratch. In such cases, you're granted the opportunity to stand on the shoulders of those who came before you. You can examine the contents of the existing web site and use that content inventory as a place to begin. Rather than pointing and clicking your way through hundreds or thousands of web pages, you should consider using an automated site mapping tool such as SiteMap (see Figure 7.2).16 These tools generate a text-only view of the hierarchy of the web site. If the original architects structured the hierarchy and labeled page titles reasonably well, you should get a bird's-eye view of the existing architecture and a nicely organized inventory of the site's content. At this point, you're way ahead of the game. However, it's almost certain that the site redesign will involve the addition of new content and the integration of new applications, so don't think you get to escape from the challenge of identifying content and function requirements.
16
To use SiteMap, go to http://www.jazzsoft.com and enter the URL of the site you'd like to map. If that web site is in the SiteMap database, you'll see the map right away. Otherwise, SiteMap will ask for your email address and send you a message when the map is ready. Many offline browsers also offer a site mapping capability. page 117
7.4.2 Wish Lists and Content Inventory Forms Many clients come to us with completely unrealistic timelines in mind. It is not unusual for a client to approach us in November stating that they want a world-class web site by the end of the year. In the early days, this would send us into a world-class panic. "How can we possibly build this site in 6 weeks?" we'd ask ourselves. "We'll have to work 36 hours a day each." However, we soon learned this panic to be unnecessary. Why? Because the greatest time-sink in Web and intranet design projects involves the identification and collection of content, meaning that the client, not us, quickly becomes the bottleneck. Collecting content from people in multiple departments takes time and effort. This is particularly true of large, geographically distributed organizations. Some people and departments may care about the project and respond quickly to requests for content. Others may not. Content will reside in a multitude of formats ranging from Microsoft Word to VAX/VMS databases to paper. Content may be limited for viewing by internal authorized audiences or subject to copyright restrictions. Since it is impossible to design an effective information architecture without a good feel for the desired content, you can rest easy knowing that the client's organization will soon become the bottleneck in the research phase. However, that is not to say that the architect is not responsible for guiding this content collection process. On the contrary, your job is to help develop a process that efficiently and effectively collects all content and information about content that you will need to design and build the site. Wish lists and content inventory forms are invaluable tools for such a process. Your most immediate goal is to gather enough information about the desired content to begin discussing possible architectural approaches. In the early stages, you do not need or even want the content itself. What you want is an understanding of the breadth and depth of content that might be integrated into the site over time. You want the top of the mountain, long-term view. Remember that you are trying to design for growth. You don't want your vision to be limited by short-term format or availability or copyright issues.
page 118
page 119
Once people have taken a first pass at the wish list, you can compile the complete set of content requirements and ask the same group to rank that content according to importance and urgency, as in the example below. This type of structured form allows you to quickly learn about the desired content and associated priorities. New Content Suggestions Please complete the following form. For each content item, indicate its importance by assigning a priority of 1 to 4 (1 being most important and urgent). When appropriate, also provide a description, indicating how much content is involved and noting any important issues. You may use the blank rows for additional content items to be included in the Web Site Re-Launch. Content Name Key Contact Departments Key Phone Numbers Maps and Directories Outpatient Buildings and Services Residency Programs (Expand) Orthopedics Cardiology OB/Women's Health Physician Database (Expand, Photos) Home Care and Hospice Annual Reports Priority Description
At this time, it is also important to begin a parallel process of content collection, not because you need the content yet, but because the process of collection takes a long time and can happen independently of your architecture efforts. The efficient collection of content in a large, distributed organization requires a highly structured process. A content inventory form is a useful tool for bringing structure to this process.
page 120
This form should be accompanied by instructions that explain how to submit the response and by both print and electronic versions of the content. Ideally, you will design a simple data entry form that allows online submission of responses. You might use the Web as the medium for distributing the form. We've also used common database applications such as Microsoft Access. In this way you can use a database as the repository of all completed content inventory forms. This facilitates tracking progress and content analysis. For example, you will be able to generate a report that shows how much content is intended for a particular audience.
page 121
This card-based content chunking process can be performed collaboratively where people must reach consensus on the organization of information. Alternatively, individuals can sort the cards alone and record the results. The biggest problem with shuffling index cards is that it can be time consuming. Involving clients, colleagues, and future users in the exercise and analyzing the sometimes confusing results takes time. Some of this content chunking can be accomplished through the wish list process as noted earlier. However, the major burden of content chunking responsibility often falls to the information architect in the conceptual design phase.
page 122
8.1 Brainstorming with White Boards and Flip Charts For collaborative purposes, white boards are unparalleled. The ephemeral nature of white board scribblings permits a creative freedom not found in other media. The technology disappears and inhibitions fall away. In early research-oriented meetings, white boards support collaboration around the definition and refinement of the mission, vision, and goals of the project. When working with several people from the organization, each with a different set of experiences, perspectives, and goals, you can use the white board to help identify issues, resolve differences, and achieve consensus. White boards are also useful for considering possible information architectures. Presenting ideas on the white board triggers new understanding and further brainstorming (see Figure 8.1). The white board, the architect, and colleagues become connected in a feedback cycle that moves towards the articulation of an information architecture. Figure 8.1. Sample white board scribblings
page 123
At face level, a major problem of white boards revolves around the difficulty of recording a white-boarding session. White board scribblings do not leave a permanent record. Ideas flow. The board fills up. The board is erased. Eventually, everyone leaves and the scribblings remain trapped on the surface of the white board, soon to be erased by the participants of the next meeting. In reality, you can use this problem to your advantage. Each time consensus is reached, record the relevant white board scribblings. Differences of opinion and dead-end discussions are quickly forgotten and only the agreements remain. Alternatively, if you're not comfortable with this level of sneakiness, you can assign a designated notetaker to record agreements and disagreements alike. We are aware of high-tech white boards that allow you to print or save your scribbles. While we don't have much direct experience, we're guessing many of these gadgets are more trouble than they're worth. Sorry for the skepticism, but what do you expect from librarians? While the flip chart is a close relative of the white board, several characteristics distinguish the two. Advantages of using the flip chart during the research phase include its high portability and intrinsic recordgenerating nature. Flip charts are portable. Their tearaway sheets can be taken back to the office for study and transcription. White boards are often anchored to walls and won't fit in your car. However, flip charts don't really support iteration and collaboration. Due to the difficulty of erasing ink on paper and the ugliness of extensively marked-up pages, flip charts invoke in people a higher fear of error and greater resistance to change. When working with flip charts, people try to get it right the first time. Whether or not they succeed, they tend to live with the results rather than mark up the page. This limits the freedom and creativity of group collaboration. While the visible differences between white boards and flip charts are fairly subtle and seemingly innocent, the ultimate impact upon the collaborative process can be significant. For collaborative brainstorming, give us a white board any day.
8.2 Metaphor Exploration Metaphor can be a powerful tool for communicating complex ideas and generating enthusiasm. By suggesting creative relationships or by mapping the familiar onto the new, metaphor can be used to explain, excite, and persuade. In 1992, vice-presidential candidate Al Gore popularized the term information superhighway. This term mapped the familiar and respected metaphor of the physical highway infrastructure of the United States onto the new and unfamiliar concept of a national information infrastructure. Gore used this term to excite the voters about his vision for the future. While the term did oversimplify and has since been horribly overused, it succeeded in helping people to begin learning about and discussing the importance and direction of the global Internet. Three types of metaphor can be applied in the design of web sites. These are organizational, functional, and visual metaphors:
Organizational metaphors leverage familiarity with one system's organization to convey quick understanding of a new system's organization. For example, when you visit an automobile dealership, you must choose to enter one of the following departments: new car sales, used car sales, repair and service, or parts and supplies. People have a mental model of how dealerships are organized. If you're creating a web site for an automobile dealership, it may make sense to employ an organizational metaphor that draws from this model. Functional metaphors make a connection between the tasks you can perform in a traditional environment and those you can perform in a new environment. For example, when you enter a traditional library, you can browse the shelves, search the catalog, or ask a librarian for help. Many library web sites present these tasks as options for users, thereby employing a functional metaphor. Visual metaphors leverage familiar graphic elements such as images, icons, and colors to create a connection to the new. For example, an online directory of business addresses and phone numbers might use a yellow background and telephone icons to invoke a connection with the more familiar print-based yellow pages.
page 124
You should also go into this exercise understanding that people tend to fall in love with their own metaphors. Make sure everyone knows that this is just an exercise and that it rarely makes sense to carry the metaphor into the information architecture design.
page 125
Sample Scenario Rosalind, a tenth grader in San Francisco, regularly visits the LiveFun Web site because she enjoys the interactive learning experience. She uses the site in both investigative mode and serendipity mode . For example, when her anatomy class was studying skeletal structure, she used the investigative mode to search for resources about the skeleton. She found the interactive human skeleton that let her test her knowledge of the correct names and functions of each bone. She bookmarked this page so she could return for a refresher the night before final exams. When she's done with homework, Rosalind sometimes surfs through the site in serendipity mode. Her interest in poisonous snakes led her to articles about how certain types of venom affect the human nervous system. One of these articles led her into an interactive game that taught her about other chemicals (such as alcohol) that are able to cross the blood-brain barrier. This game piqued her interest in chemistry and she switched into investigative mode to learn more.
8.4 High-Level Architecture Blueprints The collaborative brainstorming process is exciting, chaotic, and fun. However, sooner or later, you must hole up away from the crowd and transform this chaos into order. Blueprints are the architect's tool of choice for performing this transformation. The very act of shaping ideas into the more formal structure of a blueprint forces you to become realistic and practical. If brainstorming takes you to the top of the mountain, blueprinting brings you back down to reality. Ideas that seemed brilliant on the white board may not pan out when you attempt to organize them in a practical manner. It's easy to throw around concepts such as audience-specific gateways and adaptive information architectures. It's not so easy to define on paper exactly how these concepts will be applied to a specific web site.
page 126
page 127
Let's walk through the blueprint in Figure 8.3, as we would when presenting it to clients or colleagues. The building block of this architecture is the sub-site. Within this company, the ownership and management of content is distributed among many individuals in different departments. There are already dozens of small and large web sites, each with its own graphic identity and information architecture. Rather than try to enforce one standard across this collection of sites, this blueprint suggests an umbrella architecture approach that allows for the existence of lots of heterogeneous sub-sites. Moving up from the sub-sites, we see a directory of sub-site records. This directory serves as a card catalog that provides easy access to the sub-sites. There is a sub-site record for each sub-site. Each record consists of fields such as title, description, keywords, audience, format, and topic that describe the contents of that sub-site. By creating a standardized record for each sub-site, we are actually creating a database of sub-site records. This database approach enables powerful known-item searching and more exploratory browsing. As you can see from the Search & Browse page, users can search and browse by title, audience, format, and topic. We also see three value-added guides. These guides take the form of simple narratives or stories that introduce new users to the organization and to the web site. Interwoven throughout the text of these narratives are in-context links to selected sub-sites. They guide users through the site in an interesting and friendly way. Finally, we see a dynamic news billboard (perhaps implemented through Java or JavaScript) that rotates the display of featured news headlines and announcements. In addition to bringing some action to the main page, this billboard provides yet another way to access important content that might otherwise be buried within a sub-site. At this point in the discussion of the high-level blueprint, you are sure to have questions. As you can see, the blueprints don't completely speak for themselves. This is why it's ideal to present these blueprints in person, so you can answer questions and explore new ideas. In addition, your architectural ideas may need selling. Now, we're not suggesting that you buy a polyester suit, but an element of sales is involved. You need to excite your clients and colleagues about your approach and vision for the site. You need to explain the ideas behind your labeling and organization schemes and describe how this model will support growth over time. These challenges are difficult to address without a meeting (or at least a telephone conference call). However, if a meeting is simply not possible, you can accompany blueprints with descriptive text-based documents that anticipate and answer the most likely questions. You can then follow up with a conference call to answer the questions you didn't anticipate and move the process along. You should note that these high-level blueprints leave out quite a bit of information. They focus on the major areas of the site, ignoring navigation elements and page-level details. These omissions are by design, not by accident. Shaping the information architecture of a complex web site is a challenging intellectual exercise. You and your colleagues must be able to focus on the big picture issues at hand. For these blueprints, as with the web sites you design, remember the rule of thumb that less is more. Detailed page-level blueprints come later in the process.
8.5 Architectural Page Mockups Information architecture blueprints are most useful for presenting a bird's-eye view of the web site. However, they do not work well for helping people to envision the contents of any particular page. They are also not straightforward enough for most graphic designers to work from. In fact, no single format does a perfect job of conveying all aspects of an information architecture to all audiences. Because information architectures are multi-dimensional, it's important to show them in multiple ways. For these reasons, architectural page mockups are useful tools during conceptual design for complementing the blueprint view of the site. Mockups are quick and dirty textual documents that show the content and links of major pages on the web site. They enable you to clearly (yet inexpensively) communicate the implications of the architecture at the page level. They are also extremely useful when used in conjunction with scenarios. They help people to see the site in action before any code is written. Finally, they can be employed in some basic usability tests to see if users actually follow the scenarios as you expect. Keep in mind that you only need to mockup major pages of the web site. These mockups and the designs that derive from them can serve as templates for the design of subsidiary pages.
page 128
In the example in Figure 8.4, you see that mockups are easier to read than blueprints. By integrating aspects of the organization, labeling, and navigation systems into one view, they will help your colleagues to understand the architecture. In laying out the content on a page mockup, you should try to show the logical visual grouping of content items. In this example, the search interface and the browsing options are two separate content groups. You can also indicate prominence in these mockups. Placing a content group at the top of the page or using a larger font size indicate the relative importance of that content. While the graphic designer will make the final and more detailed layout decisions, you can make a good start with these mockups.
8.6 Design Sketches Once you've developed high-level blueprints and architectural page mockups, you're ready to collaborate with your graphic designer to create design sketches on paper of major pages in the web site. In the research phase, the design team has begun to develop a sense of the desired graphic identity or look and feel. The technical team has assessed the information technology infrastructure of the organization and the platform limitations of the intended audiences. They understand what's possible with respect to features such as dynamic content management and interactivity. And, of course, the architect has designed the high-level information structure for the site. Design sketches are a great way to pool the collective knowledge of these three teams in a first attempt at interface design for the top level pages of the site. This is a wonderful opportunity for interdisciplinary user interface design.
page 129
page 130
8.7 Web-Based Prototypes For the architect, a high point of conceptual design comes when a highly skilled graphic designer creates beautiful Web-based prototypes. More than sketches or scenarios, these digital renditions show how the site will look and function. While the balance of attention shifts with these prototypes towards the aesthetic considerations such as page layout and graphic identity, the prototypes frequently identify previously unseen problems or opportunities related to the information architecture. Once your architecture and navigation system are embodied in actual web pages, it becomes much easier for you and your colleagues to see whether they are working. The designer may begin with two concepts based upon a single information architecture. After getting feedback from the client, the designer and architect may work together to adapt and extend the preferred concept. At this point, conceptual design ends and planning for production begins. The most exciting challenges for the architect have been met and the days of detail begin.
page 131
9.1 Detailed Architecture Blueprints During the transition from conceptual design to production, the focus shifts from external to internal. Rather than communicating high-level architectural concepts to the client, your job is now to communicate detailed organization, labeling, and navigation decisions to your colleagues on the site development team. This shift is similar to that in the traditional world of architecture and construction. The architect may work closely with the client to make big picture decisions about the layout of rooms and location of windows. However, decisions regarding the size of nails or routing of the plumbing typically do not involve the client. Often neither sufficient time nor interest justifies close client involvement in these minutiae. The detailed architecture blueprints serve a very practical purpose. They must map out the entire site so that the production team can implement your plans to the letter without requiring your physical presence during production. The blueprints must present the complete information hierarchy from the main page to the destination pages. They must also detail the labeling and navigation systems to be implemented in each area of the site. The blueprints will vary from project to project, depending upon the scope. On smaller projects, the primary audience for your blueprints may be one or two graphic designers responsible for integrating the architecture, design, and content. On larger projects, the primary audience may be a technical team responsible for integrating the architecture, design, and content through a database-driven process. Let's consider a few examples to see what they communicate and how they vary.
page 132
As the legend suggests in Figure 9.1, there is a distinction between a local and a remote page. A local page is a child of the main page on that blueprint. The local page inherits characteristics such as graphic identity and navigation elements from its parent. In this example, the Papers Committee page inherits its color scheme and navigation system from the Papers main page. On the other hand, a remote page belongs to another branch of the information hierarchy. The Session Room Layout page will show a graphic identity and navigation system unique to the Maps area of the web site.
page 133
page 134
9.2 Content Mapping During research and conceptual design, you are focused on the top-down approach of defining an information structure that will accommodate the mission, vision, audiences, and content. As you move into production, you complete the bottom-up process of collecting and analyzing the content. Content mapping is where topdown meets bottom-up. The process of content mapping involves breaking down or combining existing documents into logical content components or chunks, thereby separating the content from its container. A content chunk is not a sentence or a paragraph or a page. Rather, it is the most finely grained portion of content that merits or requires individual treatment. The content, often received from a variety of sources and in a multitude of formats, must be mapped onto the information architecture. Because of differences between formats, you cannot count on a one-to-one mapping of source page to destination page. One page from a print brochure does not necessarily map onto one page on the Web. For this reason, it is important to separate content from container, at both the source and destination. In addition, when combined with a database-driven approach to content management, the separation of content and container facilitates the reuse of content chunks across multiple pages. For example, contact information for the customer service department might be presented in context within a variety of pages throughout the web site. If the contact information changes, modification can be made once to the database record for that content chunk and then propagated throughout the web site at the push of a button. In some cases, you will need to create original content for a web site. However, content mapping may still be necessary. It often makes sense to create content in a word processing application rather than an HTML editor, since tools like Microsoft Word tend to have more powerful editing, layout, and spell checking capabilities. In such cases, you'll still need to map the Word documents to HTML pages. The subjective process of defining chunks should be determined by answers to the following questions:
Can this document be segmented into multiple chunks that users might want to access separately? What is the smallest section of content that needs to be individually indexed? Will this content need to be repurposed across multiple documents or as part of multiple processes?
Once the content chunks have been defined, they can be mapped onto destination web pages. You will need a systematic means of documenting the source and destination of all content, so that the production team can carry out your instructions. As discussed earlier, one approach involves the assignment of unique identification codes to each content chunk. For example, creation of the SIGGRAPH 96 Conference web site required the translation of print-based content to the online environment. In such cases, content mapping involves the specification of how chunks of content in the print materials map to pages on the web site. For SIGGRAPH 96, we had to map the contents of elaborately designed brochures, announcements, and programs onto web pages. It would have been difficult and silly to attempt a one-to-one mapping of printed pages to web pages. Therefore, we needed to go through a process of content chunking and mapping with the content editor. First, we broke each page of the brochure into logical chunks or atoms of information. We devised a simple scheme tied to page numbers for labeling each chunk (see Figures Figure 9.3 and Figure 9.4).
page 135
As you saw in Figure 9.1, we had already created a detailed information architecture blueprint with its own content chunk identification scheme. We then had to create a content mapping table that explained how each content chunk from the print brochure should be presented in the web site.
page 136
page 137
Armed with the original print documents, architecture blueprints, and the content mapping table, the production staff created and populated the SIGGRAPH 96 Conference web site. As you can see in Figure 9.5, the contents of the web page are quite different from the original print page. Figure 9.5. Because of the differences between the print and online media, the translation from print brochure to web site involved significant changes.
page 138
9.3 Web Page Inventory The content mapping process should result in the creation of an inventory of all web pages to be created. Depending upon the size and complexity of the web site and the process and technology in place for production, you can choose many ways to present this inventory. For larger sites, you can require a document management solution that leverages database technology to produce a workflow process that can determine a team approach to page-level design and editing. For simpler sites, you may create a Web-based inventory that presents the titles and unique identification numbers of each page for the site, such as that shown in Figure 9.6. Figure 9.6. This Web Page Inventory presents the names and identification numbers of all pages to be created for the site. Selecting the hypertext linked numbers pops up another browser window that shows the appropriate web page.
You can create a web page inventory as soon as you have completed the content mapping process. Over time, it can serve as an inventory of pages that need to be created, an inventory of architectural page mockups that need to be designed, and an inventory of designed pages that need to be reviewed before integration into the web site.
9.4 Point-of-Production Architecture Ideally, with the detailed architecture blueprints and content mapping complete, the production process would proceed smoothly in a paint-by-numbers manner, and the architect could sit back and relax. In reality, you must be actively involved to make sure the architecture is implemented according to plan and to address any problems that arise. Why? Because you're human. No architect can anticipate everything. Many decisions must be made during production. Are these content chunks small enough that we can group them together on one page, or should they remain on separate pages? Should we add local navigation to this section of the site? Can we shorten the label of this page? During this phase, be aware that the answers to these questions may impact the burden on the production team as well as the usability of the web site. You need to balance the requests of your client, the sanity of the production team, the budget and time-line, and your vision for the information architecture of the web site. You should not need to make major decisions about the architecture during production. A significant investment has already been made in a particular direction. Discovery of a major flaw in the architecture at this point is an information architect's nightmare. Fortunately, if you've followed the process of research and conceptual design before production, this is unlikely. You have worked hard to define the mission, vision, audiences, and content for the web site. You have documented the decisions made along the way. You have resolved the top-down and bottom-up approaches through content mapping and detailed blueprints. Through careful planning, you've created a solid information architecture that should stand the test of time.
page 139
9.6 Learning from Users Unfortunately, many sites fall victim to the launch em and leave em attitude of site owners, who turn their attention to more urgent or interesting projects, allowing the content or the architecture to become obsolete quickly. Even for those sites kept current with respect to content, the information architectures are rarely refined and extended. This is too bad, because it is after the launch of a web site that you have the best opportunity to learn about what does and doesn't work. If you are fortunate enough to be given the time, budget, and mandate to learn from users and improve your web site, a number of tools and techniques can help you do so. As you read this section, please understand that high-quality testing of site architectures requires experts in usability engineering. For pointers to expert coverage of tools and techniques specific to usability engineering, please review the usability area of our bibliography. 9.6.1 Focus Groups Focus groups are one of the most common and most abused tools for learning from users. When conducting focus groups, you gather together groups of people who are actual or potential users of your site. In a typical focus group session, you may ask a series of scripted questions about what users would like to see on the site, demonstrate a prototype or show the site itself, ask questions about the users' perception of the site, and get their recommendations for improvement. Focus groups are great for generating ideas about possible content and function for the site. By getting several people from your target audiences together and facilitating a brainstorming session, you can quickly find yourself with a laundry list of suggestions. However, focus groups are very poor vehicles for testing the usability of a site. A public demonstration does not come close to replicating the actual environment of a user navigating a web site. Consequently, the suggestions of people in focus groups do not necessarily carry much weight. Sadly, focus groups are often used to prove that a particular approach does or doesn't work. Through the skillful selection and phrasing of questions, focus groups can easily be influenced in one direction or another. To learn more about when and how to conduct focus groups, see the usability section of our bibliography.
page 140
page 141
In considering these approaches, it's important to realize that the data is useful only if you and your organization are committed to acting upon what you learn. Gigabytes upon gigabytes of usage statistics are ignored every day by well-meaning but very busy site architects and designers who fail to close the feedback loop. However, if you can commit to continuous user-centric improvement, your site will soon reach a level of quality and usability beyond what could have ever been achieved through good architectural design alone. And it will only get better, as it is subjected to the constant evolutionary pressures of time, competition, and increasingly demanding users. Similarly, if you maintain that personal feedback loop between your experiences as a consumer and your sensibilities as a producer, your information architectures will continue to improve over time.
page 142
10.1 Archipelagoes of Information As do most of his books, James Michener's Hawaii starts at the dawn of time. He describes how the lovely Hawaiian archipelago grows over millions of years from humble, organic beginnings, each island birthing and dying in explosions of lava emanating from beneath the Earth's crust. Large, complex web sites and intranets have similarly organic beginnings. These sites are loosely connected archipelagoes of information, starting slowly with one island, coming from sources often unseen, exploding with change and growth, out of control. It often goes like this: someone in the MIS department gets a web server, sets it up, builds a small, experimental web site, and starts having fun. Other early adopters check out this unofficial site and get ideas of their own. The MIS boss finds out and, horrified by his or her lack of control over the situation, forces the free-thinker to terminate the maverick site, while enlisting someone from Graphics to help start up the official intranet. The MIS boss later learns (to her dismay) that the pesky Marketing Department has already decided to contract their advertising firm to build an external site, and the Human Resources people aren't far behind. And there are rumors that both the Hong Kong and Hoboken divisions are setting up their own sites.... Sites that grow this way within an organization are really a collection of sub-sites. Their complexity runs deeper than you may think. Indeed, the biggest challenge is often the degree to which organizational politics intrude into the process. This isn't surprising if we consider the differences between the ways modern corporations and the World Wide Web work. Corporations and other large organizations are traditionally modeled hierarchically, structured as single entities with clear chains of command. The power of a corporation lies in its ability to leverage the sum of its independently working parts while laboring to keep those parts from completely splitting apart. The Web, on the other hand, goes completely against the grain of centralization, serving instead as an agent of organizational chaos. Because web sites are cheap and easy to create, corporations have a difficult time controlling them. As some poor souls try to bring all these separate efforts together under the venue of a single corporate web site or intranet, the politics can get especially ugly. Marketing wants links to its news releases to go on the main page. Human Resources is convinced that most of the users are going to be employees, and wants the employee handbook front and center. And MIS's content already blankets the main page. Meanwhile the Information Center has trashed the look and feel of the site because they don't have the budget to pay for professional graphic design. Have we left anyone out? Oh, yes. The user. The user, as we know, doesn't care about organizational politics. The user wants information to be made accessible the way he or she thinks, not the way the corporation thinks. Instead, the user is often confronted with corporate jargon and organization schemes based on corporate organization charts, and the site's value to users and to the sponsoring organization plummet. Unfortunately, this is a common situation. Fortunately, the principles of information architecture can address and solve many of these problems.
page 143
page 144
Each sub-site represented an organizational entity : a department, unit, division, medical center, hospital, or program sponsored by HFHS. We learned from our initial research that many of these entities did not yet have their own sub-sites, although they would over time. Some entities might never create their own subsites. So the reality of their web environment really looked a bit more like Figure 10.2. Figure 10.2. Expecting future growth
page 145
The organization scheme at this point very closely mirrored the political boundaries of the HFHS org chart. Users might come to the main page of such a site and find prominent links to the Department of Gynecology next to the Office of the President. Also, as HFHS is a large organization, there would be many more links than the five represented here. So how could we leave these default organic partitions of information in place, and yet provide a more usable, user-centered view? We had to find a way to cut across the grain of the org chart, yet leave it in place (see Figure 10.3). Figure 10.3. Unless we come up with a better solution, the site will be organized like an "org chart" (the horizontal dotted lines). Can we cut "across the grain" of the org chart (the vertical dotted lines) for a more user-centered approach?
page 146
10.2.2 Sub-Site Record Pages Our solution was to create a database of records or meta-information pages to represent each sub-site. These sub-site record pages include information about each sub-site, and are centrally created and controlled by HFHS. Together, they serve as a catalog for the site's sub-sites; using database technology, they are easy to maintain and content duplication is minimized. The fields in these records and the relationships between each type of record were determined through a fairly conventional process of data modeling. The use of fielded information supports improved information retrieval, as described in Chapter 6. Also, the whole structure of sub-site records can be bypassed if need be, with users bookmarking an individual sub-site's main page if they so desire. The sub-site record approach allows the sub-sites themselves to be controlled autonomously and anticipates sub-site growth well. If a sub-site existed, a sub-site record page would also link to the sub-site. If no subsite existed yet (e.g., sub-site records 4 through 6 in Figure 10.4), the sub-site record would serve as a placeholder until it could be linked to a new sub-site. If a particular department wasn't likely to ever create a sub-site, the sub-site records would at least provide useful information about that department (e.g., sub-site record 3). Figure 10.4. Sub-site record pages allow other ways of accessing the site's content, and help delineate responsibility for content ownership and management.
page 147
10.2.3 Labeling Systems for Sub-Site Record Pages To address the need to cut across the grain of the default org chart-centered organization scheme, the subsite record pages include manually created keyword indexing to support various user-centered means of accessing the sub-sites. In this case, we worked with HFHS' staff librarians to index each sub-site using medical terms in schemes that matched their two primary audiences: one controlled vocabulary for medical professionals and another for regular people. On each sub-site record page, these terms were shown together in one keywords field. Within that field, the keywords served as links to other sub-site record pages which had been similarly indexed, which can greatly enhance user navigation (for example, users can find other HFHS resources that are related to cancer - see Figure 10.5). Figure 10.5. A sample sub-site record page can work as a placeholder or as a link to the actual sub-site. It also helps maintain a look and feel consistent with the remainder of the umbrella site.
These topical keywords provide access to the HFHS sub-sites' content in a more user-centered manner than the org chart approach did. We also provided other ways of navigating the sub-sites, leveraging the sub-site records to allow browsing by Organizational Resource (e.g., hospital vs. program vs. department and so on), and by location (City). And we did maintain a browsable org-chart index (Browse By Organizational Resources); browsing the site in this way remains useful in certain cases, especially for internal audiences.
page 148
page 149
The architecture now looked something like that in Figure 10.7. Figure 10.7. Another view of the multiple means of browsing and searching the sub-site record collection.
This architecture provides quick and easy access to content in sub-sites, especially for users who already know what they're looking for or who understand a bit about the nature of HFHS. Users can get straightforward lists of all that HFHS has to offer by city, by keywords, by searching, and so on. But what about users who don't really know what they're looking for? Or those who need a warm, fuzzy introduction to the Henry Ford Health System in general?
page 150
Medical students who were considering doing their residencies at HFHS. Researchers, both internal and external, who want to keep abreast of the role that HFHS plays in medical research. Patients who want to know about the care they could receive at HFHS. Generic users who want to know about HFHS in general.
We knew other audiences could be served by guides, and that there were other ways to define guides, such as by topic or task. But, after much discussion, we felt that these four guides would address the needs of perhaps 80% of first-time users of the site. What about the additional 20%? We hoped that they would be served by the Help Yourself search and browse features. Realistically, our feeling is that most sites' main pages probably don't address even 50% of their users' needs, so we felt that 80% was a pretty good goal. (In fact, the 80/20 Rule is good for web developers in general; use it to remind yourself that you can't always satisfy 100% of all possible users of your site, but that if you can assist 80%, your site will do better than the majority of its competitors.) Each of the four guides would describe HFHS's offerings in a style that best fit the needs of each audience. Also, each guide would link to the subset of HFHS sub-sites that was relevant to that particular audience (see Figure 10.8).
17
In this book, we mention the Argus Clearinghouse (http://www.clearinghouse.net) on a number of occasions. The mission of the site is to serve as a central access point for guides to the Internet. If you're interested in seeing hundreds of examples of guides, try the Argus Clearinghouse. page 151
page 152
10.2.6 Multiple Pathways to Content Now our architecture supported different ways to get users to information in the HFHS Web environment. Users doing exploratory searching could easily move back and forth between browsing and searching a catalog of sub-site records. Known-item searchers and repeat users could go right to the search engine or quickly scan the browsable indices. New users who wanted a better sense of what HFHS offers could get a taste through any of the four guides to selected HFHS sub-sites. The top-level information architecture was nearing completion (see Figure 10.9). Figure 10.9. Value-added guides complement searching and browsing plain lists of resources.
page 153
There were still some other areas we'd not yet dealt with. One area was the news announcements and press releases that HFHS would naturally want to make available. We created a news area in the site and augmented it with a dynamic billboard that showed news headlines and, when clicked, would take users to the story that it had introduced. The billboard adds nice visual splash to the main page. It also helps defuse potentially sticky political situations by unburying sub-site content that deserves occasional exposure on the main page. At this point, we also added the de rigeur "About HFHS" section. So the final top-level architecture looked like Figure 10.10. Figure 10.10. The full architecture, including two new ways of reaching content (news and the dynamic billboard).
page 154
Pretty confusing, eh? Certainly the blueprint diagram is overwhelming; that's why we always use mock-up pages at this point in the conceptual design phase. However, when you look at the final product, the main page for this site (Figure 10.11), you will note its simplicity. Figure 10.11. The HFHS site's main page - a concise gateway to a complex information environment
The HFHS main page has few links, a balance between static and dynamic information (e.g., the dynamic billboard at the top of the page), and no names of departments, units, or other political entities that might typically sneak their way there due to political infighting. Yet it provides users with ten ways to reach information in the HFHS Web environment: 1. 2. 3. 4. 5. 6. 7. 8. 9. Browse by Keyword (both medical and lay) Browse by Organizational Resource Browse by City Search Patient Care Guide Research Guide Education Guide About HFHS Guide News Area
page 155
page 156
page 157
page 158
page 159
page 160
page 161
page 162
page 163
page 164
page 165
page 166
Errata
http://www.sitemap.com/ was changed to http://www.jazzsoft.com/ (143) The URL in Figure 7-2 used to read:
(162) line -7, "location information and papers video proceedings" now reads: "Contact Us About Papers and Contact Us About This Web Site". (163) FIGURE CHANGE - The rectangle around
"Contact Us about Papers (mailto)" and "Contact Us About this Web site" is now dashed, not solid. (174) "contant" now reads: "constant"
page 167