The Importance of Information Architecture
Information architecture is the foundation for great Web design. It is the blueprint of the site upon which all other aspects are built - form, function, metaphor, navigation and interface, interaction, and visual design. Initiating the IA process is the first thing you should do when designing a site. This series of articles describes specific methods and processes for developing a site's information architecture.
The development of an IA is sometimes viewed to be impractical, both in terms of the time it takes and the skill needed to do it effectively. But this mentality is slowly changing. A good IA is incredibly effective, and knowing the basics of the IA process can save both time and money in the long run. Also, you don't need to be an expert to use it to your advantage.
This series will demonstrate how easy and powerful the IA process can be. We'll present two ends of the design continuum, which can be thought of as either the difference between developing a small and a large site or the difference between having little time and having lots of time to design a site.
Each article presents a portion of a design document . Upon completing this series, you will have the template for a complete IA design document; the record of the decisions made in designing the site. It serves as a road map for the site's construction. Additions and revisions are made easier by the presence of this document. Oh, yeah - and clients and management love this stuff.
Also, just about everyone these days is a proponent of ease-of-use. Well, ease-of-use starts here. It's practically guaranteed if you have a solid information architecture at the outset.
Define the Site's Goals
The first step in the IA process is to define the site's goals. It sounds obvious, but think of how many horrible sites are out there. Do you think the people who created them really thought about their goals? Maybe members of the marketing department went nuts and built a site without asking anybody how to do it. They just had to have a site because everyone else has one. Or maybe the site was designed by committee. If you don't know what you're trying to achieve, why bother building a site?
You want everyone in the company - or at least the most important people - to be involved. But you don't want everyone making decisions about what should be on the site. In other words, you want everyone to agree on the contents and purpose of the site that you are going to build.
Defining the site's goals solves all of these problems. It establishes a clear, well-documented idea of what you are about to do, and it ensures that everyone is participating. Group consensus can make or break the project.
To get the ball rolling, you need to do two things. First, determine who will be involved in defining the goals. Depending on the basic nature of the site, it's not hard to figure out who the key players are:the people who have to buy in to your ideas. You have to make them feel like they are contributing to the project. Listen to what they say. It's your job to make sure they are communicating with one another and that no single person controls the process (more on how to deal with that type of person later).
You also need to determine whether you have time to do a formal definition of the goals or whether an informal definition will suffice. A formal definition involves calling meetings with the key players. You have to prepare an agenda and questions. It is fairly time-intensive and much more demanding of your project-management skills. An informal definition involves walking around with a notepad and talking to people one-on-one. You write down their thoughts and ideas, ask for their opinions, and come back to them when you need their approval. The scale of the project and the time that you have are the major factors in deciding whether to use a formal or informal process.
After determining who will be involved in designing the site, you need to come up with a list of questions. These questions help you determine the site's mission and purpose by involving everyone in the creative process.
The basic set of questions should include:
What is the mission or purpose of the organization?
This is the most important question you face. Reading the client's mission statement and business plan will give you a good idea. Get your hands on as much of the client's literature as you can - you might find some valuable ideas that aren't explicitly mentioned in the mission statement or business plan. It is also important to note that the client's mission may change as he or she goes online.
What are the short- and long-term goals of the site?
Every person you talk to will have a different idea about the goals of the site. Many people might not be thinking in the long term; they may have an immediate need to get the site up and running. Looking toward the future will save you a lot of headaches in the long run, because you will be able to accommodate growth and change more effectively.
Who are the intended audiences?
Most clients do not even think about their audiences, which is perhaps the number-one mistake made in designing sites. This question often serves as an early wake-up call to your clients.
Why will people come to your site?
Are you selling a product? Do you have a unique service? Why will people come to the site the very first time? Will they come back? If the client already has a site, try finding answers to this question there.
Try to think of any other questions that will reveal the true purpose of the site. If other people have ideas for questions, consider including those, too.
After compiling the list of questions, ask them of everyone, including yourself. Be sure to write down everything that everyone says, no matter how trivial or mundane. You will refine the responses in the next step.
Filter the Answers
At this point, you have either created a nice-looking set of questions and passed them out in a big meeting or spent some time walking around with a clipboard talking to people one-on-one. Either way, you should have a bunch of answers to your questions. Now you need to generate order from this chaos and filter the responses. You need to turn the answers into goals and figure out which goals are the most important.
First, separate the answers about your intended audiences and save them for later. Rephrase the rest of the questions as goals. Put those into a list. If you have a long list, group the goals into categories.
Take this list back to everyone and have them rank each goal's importance. If your goals are grouped by categories, have people rank the importance of each category separately. If they have any suggestions for the names of the categories, write those down as well.
Now comes the hard part. After collecting everyone's rankings, you need to distill them into a master list. Give more weight to the opinions of important people within the company, but use your judgment:Sometimes the Web-savvy mailroom clerk has far better opinions about the Internet than an out-of-touch CEO.
You now have a clear set of goals. Your site has a purpose! But wait. You still need to have the goals approved before proceeding. Run the list by a few people just to make sure they're OK with it. Call a meeting if you must. Do whatever you need to do, but make sure the client agrees and signs off on the goals for the site.
Design Document - Site Goals
Once you have agreement from everyone involved, document the goals of the site and publish them where everyone in both your client's organization and your own can see them. If you have time, summarize the list and write a few paragraphs about the goals. A simple summary will do.
The list of goals is the basis for your design document , which we mentioned at the outset. After you have published the goals, use them to create the first chapter, called Goals, of your design document.
Identify Content and Functional Requirements
Use the list of goals, the needs of your audience, and your competitive analysis - all of which you've already collected - to start two new lists:one of content elements and one of the functional requirements for the site. Add any potential Web pages or types of content that you can think of to each list. Types of content include static, dynamic, functional, and transactional. Copyright notices, privacy statements, and membership rules are examples of static content. Member logon pages, signup pages for email newsletters, and other pages involving forms or transactions should be included on your list of functional requirements. Browse the sites of your competition, and add any pages that are not on these two lists.
While you are generating these two lists, have everyone create their own lists of desired content and incorporate them into your content list. Have everyone review this list in order to get a sense of how important each piece of content is. Revise your list if you need to. You now have what's called a "content inventory." Some people claim that gathering content is their number one bottleneck. The content inventory can be used to start this process early.
Using the content inventory, revise your list of functional requirements. If the content inventory has pages for canceling purchases, the system had better be able to cancel purchases. Work with the technology and production people to determine the feasibility of each requirement. Do you have the technology and the skills to meet each requirement? Do you have the time and money to buy or build the functionality? Rank the importance of each requirement. You may have to get rid of some in order to meet your deadlines. Other requirements might become overshadowed by more important ones and drop off your list.
Group and Label Content
Order out of chaos - that's what this step is all about. Here you organize the content and define the basis for the site's structure. Begin by writing each element of the content inventory on an index card. Take the cards and organize them into groups. (You will want a big table to do this.) Try organizing them in different ways. When you are satisfied with how you have grouped things, name each group; try to be as descriptive as possible, and avoid being verbose. Record the name of each group and the elements within it.
Repeat this process with everyone involved. It is important to record how each person organizes the information and names each group. Be sure to tell everyone that there is no right or wrong answer. All opinions are valid. Excellent ideas often come from the most unlikely sources.
After everyone has gone through the exercise, compare and contrast how each person organized the information. Depending on how you want to do this, you might call everyone together to discuss the pros and cons of each layout, work one-on-one with the most intriguing people and their ideas, or just organize all of the thoughts on your own.
When you decide on the final groupings and names, use them as the basis for defining the major sections of the site and the names of each section. This is the basis for your site structure. Be warned, though:Consider the major sections as transient - their names and content may change in the next stage of the IA process. Be sure to run the sections and their names by a few key players to make sure they are OK with them. Finally, revise the content inventory, if necessary, to reflect the new organization of the information.
How will users use the site? How will they get from one place to another? How do you prevent them from getting lost? Defining the navigation system for the site solves these problems.
Take a look at the site structure listing. What are the major sections? These are excellent candidates for the global navigation system, which appears on every page of the site and enables users to quickly jump between sections. If at all possible, try to limit the number of global navigation elements to between five and seven. Another good idea is to incorporate the branding of your site - the company logo - into the global navigation as part of the link back to the site's homepage.
Local navigation can take a number of forms. It can be a list of topics, such as those found at Yahoo and GeoCities. It can take the form of a menu of choices such as the GeoCities members area. Or, it might be a list of a few related items, such as this lesson's page titles that you see farther down this page.
It is essential that you document the global navigation system and as many of the local navigation systems as you can. This can be as simple as compiling a list of elements that make up each system.
For example, Webmonkey has a global navigation system that can be documented as a list:"The global navigation device contains links to all the major sections of Webmonkey:design, HTML, dynamic HTML, etc." A local navigation definition for Webmonkey might be:"For a multi-part article, a list of links to each section appears at the end of each page. Use the title of a section as a link to that section."
Layout grids are templates that describe Web pages. Content - the focus of every page - requires prominent placement. You'll need to block out space for global and local navigation and integrate other aspects of the site that may not be part of the site structure. The company's brand must be present on each page. Advertising and sponsorship deals should be incorporated into the design.
To get started, take the site structure listing and make a list of all the possible page types. Individual pages within the site should be very similar in form across all the major sections. Review the content inventory, then try coming up with two or three generic page types. You'll start by designing these and then use them as the basis for all the other page types.
To begin, break out your sketch pad or favorite graphics program. Create a rectangle representing the page, and block out the elements of your design. Since content is the most important element, start with that - even though it's a little tricky, since you won't yet know what else will be on the page. Several other elements must be considered:branding, advertising and sponsorship, navigation, page titles, header graphics, and footers, which include copyrights.
Branding plays a prominent role on every page because it informs users that they are still on the site. A common place for the branding is in a page's upper left-hand corner.
Advertising and sponsorship can be integrated in a number of ways. Perhaps you have a full-sized ad banner (typically 468 by 60 pixels) on every page. Do you put it at the top? Do you put it under the title of each page? How do you integrate sponsorship? Is sponsorship integrated into the graphics headers on each page? Is there a small sponsorship logo at the bottom of each page? These are all questions you need to answer.
Finally, navigation also has to play a prominent role. Global navigation must be consistent across every page of the site. Local navigation systems can change, depending on the content, but try to be as consistent as possible.
This is an iterative process. You will need to revise the layout grids several times. You will probably want to do two or three different styles for the layout, if you have time.
Design Sketches and Page Mock-ups
Design sketches are used to establish the look and feel of the site. They can be integrated with the metaphor or site structure rationale, but this isn't always necessary. Often, they are done concurrently with the rest of the information-architecture process, so you may already have the design sketches worked out and approved by the client.
The sketches don't necessarily need to represent structure or organization. However, the graphic designers do need to know the size of the graphics files, as well as any technical constraints.
The next step is to create page mock-ups, which represent the actual site, by integrating the design sketches with the layout grids. These should be as close to the actual pages as possible. Use your favorite graphics program to break up your sketches. Try cutting and pasting the pieces over their respective parts of the layout grids. Another option is to build the page mock-ups in HTML, using the pieces of the design sketches as the graphics.
The page mock-ups are the basis for a Web-based prototype or, if your site is small enough, the basis for building the actual site. Page mock-ups need to be approved by the client, although it may be sufficient to have approval on the site structure and design sketches in order for you to move forward with the prototypes.
You have now completed the steps in shaping the information architecture for your site! You have all the materials you need to construct a prototype, and everything else should fall into place. Before you dive into prototyping, add one last entry to your design document.