Index Pages: Unsuspected Project-Profitability Killers

By Nicola Rovetta

Published: October 4, 2010

“This article cautions you against following a common information-architecture practice that can have negative consequences in terms of costs: the creation of index pages that correspond to a single item in a category.”

During an information architecture project, creating index pages for items within categories can result in a lot of unexpected work.

Organizing and classifying a Web sites’ content when you’re developing its information architecture (IA) is one of the key activities you must undertake to deliver a usable site. Designing an information architecture to ensure users can reliably reach the information they want—and in less time—is the main focus of an information architect’s work. To accomplish this goal, information architects employ user-centered design methods, keeping users at a project’s center.

Over the years, the design and development of user interfaces for products and services has evolved, resulting in design conventions and best practices that we follow when designing a user interface. However, following common practice can occasionally lead us astray. This article cautions you against following a common information-architecture practice that can have negative consequences in terms of costs: the creation of index pages that correspond to a single item in a category.

During the site-mapping phase of a IA project, an information architect typically groups subsections under broader categories of items, with the goal of helping users find the content they are seeking among fewer options. Thus, they create directories of groups of links.

What Users Expect

“When we create directories comprising categories of links, most users assume that clicking a category label will simply display that category’s list of links … rather than displaying new content….”

When we create directories comprising categories of links, most users assume that clicking a category label will simply display that category’s list of links, as shown in Figure 1, rather than displaying new content—just as users expect an operating-system user interface that employs the real-world metaphor of a desktop and folders to work this way. If a user clicks the expand/collapse widget to the left of a category label to expand it, as shown in Figure 2, the content to the right should not change. Users do not expect the user interface to display new content in the window until they click a category label or link, as shown in Figure 3.

Figure 1—Operating system window with a directory selected

Operating system window with a directory selected

Figure 2—Opening a subdirectory doesn’t change the content

Opening a subdirectory doesn't change the content

Figure 3—New content appears when a user selects a different subdirectory

New content appears when a user selects a different subdirectory

Designing Index Pages

“Web site navigation usually comprises two kinds of active links: directory category links and content page links.”

In this article, we’ll look at the design of a company Web site. On corporate Web sites, it’s common practice to create index pages for the main categories of information. This established practice is usually a good choice because, at the top level of a Web site or section, users need to take just few seconds for a quick visual scan before deciding whether they want to engage with your Web site or don’t think they’ll get what they want there.

Most Web sites have no strong real-world metaphor. Therefore, from their prior experience on the Web, users generally expect the content in the main content area of a Web page to change when they click a category link. In fact, changes to the content on a page provide the most visible feedback a site gives to users that something new has happened in response to a user interaction.

As a consequence, Web site navigation usually comprises two kinds of active links: directory category links and content page links. In Figure 4, a user has clicked the directory category link Products & Services on the primary navigation bar, highlighting it and displaying the corresponding index page in the main content area, as expected. Unfortunately, Products & Services also appears highlighted on the secondary navigation bar, where it appears to be one item in the category, though it’s not. In Figure 5, a user has clicked the content page link Appliances on the secondary navigation bar, displaying the corresponding content page in the content area and highlighting Appliances on the secondary navigation bar.

Figure 4—Index page that appears when a user clicks a directory category link

Index page that appears when a user clicks a directory category link

Figure 5—Content page displayed by clicking a content page link

Content page displayed by clicking a content page link

Let’s analyze this user interface:

  • All items in a category are grouped under a category label.
  • Clicking a category label displays an index page.
  • The content on this index page might provide either an overview of the category—so far, so good—or content about the first item in the category—not so good.
“If the index page were not an overview page, this would necessitate a designer’s choosing one item among all the items in a group to be the default item, making that item seem more important than the others.”

If the index page were not an overview page, this would necessitate a designer’s choosing one item among all the items in a group to be the default item, making that item seem more important than the others. Another weakness of not providing an overview page is a traffic analytics issue: the default item would seem to be more popular because users visit the page so frequently—when, in fact, users haven’t actually chosen it as a destination. In contrast, the index page shown in Figure 6 does provide an overview on entering a category.

Figure 6—Overview page

Overview page

A design solution that displays a general, overview page—providing a description of the category and direct links to the category’s items—is more neutral and fair. Generally, these content page links duplicate the function of the secondary navigation bar, which also shows the category items. Some sites also display second-level, content page links on drop-down menus, providing a third way to access the same pages.

Figure 7 shows an example of a site section index page that appears when a user clicks a first-level category link. The page doesn’t display actual content, just a list of content page links for items under that category.

Figure 7—An index page for a first-level category

Index page for a first-level category

A bonus this solution offers is that the design for this index page requires no further approval if stakeholders have already approved the content it displays in the site map. This solution is also fair because it doesn’t define a top-priority item in a category like Products & Services, whose items are peers, but typically fall under the domain of different stakeholders—product managers or marketing managers—avoiding arguments about what item should be first in line.

A Case Study from Agency.com Italy

“Our content template for index pages prescribed that each category index page should include both a description of the category and a photo representing that category.”

Let’s consider this story: In late July 2009, Agency.com Italy delivered its redesign of five commercial portals for a multiservice utility company. The job had to be quick and dirty, because the agency had won the job with a pitch that promised to deliver new information architectures and user interface designs for the five portals in one month. Content management was not under the agency’s control; instead, an internal service of the company was in charge of the CMS. Because there would have been political and legal issues in giving prominence to one service over another, our information architect definitely needed to avoid using a default-item approach to designing index pages.

In addition to designing and building a home page for each portal—like that shown in Figure 8—our solution was to create an index page for each category of items on a site. Our content template for index pages prescribed that each category index page should include both a description of the category and a photo representing that category. Because of a lack of time, we could not ask our client’s content managers to develop extra content that would include useful, contextual links and make an index page’s content more meaningful in terms of relevance and traffic building—so the primary function of index pages was descriptive.

Figure 8—Home page

Home page

A company’s brand should play a large role in designing a company Web site. Therefore, content pages should represent the tone of voice and the style of relationship that the company wants to maintain with its customers. The preeminence of brand in designing a corporate site shifts control of the pages’ design from marketing or product stakeholders to corporate communications. Factoring in this nuance generated great attention and resulted in certain client expectations—like their wanting the index pages to be mini-home pages. Therefore, every element on an index page—like those shown in Figures 9 and 10—had a duty to represent and describe the subject of the page, at the service level; promote its subject, at the marketing level; and be consistent with the brand promise, at the brand, or corporate-communication, level.

Figure 9—First-level index page

First-level index page

Figure 10—Second-level index page

Second-level index page

As a consequence, visual elements, in general, and photographic elements, in particular, were under the lens of multiple dimensions of control. This situation influenced both the content design process and the cost of the project for the agency.

For example, with an average of 16 category pages on each Web site, the agency had to provide no less than 80 photos in total. With highly focused attention on the project, both the agency and the client carefully judged each of these photos. This meant that finding the right photos was an involved process that required the agency to review hundreds of photos, select three or four candidate photos for each category page, then present the resulting photos—between 240 and 320 candidates overall—to the client, so they could make the final choices. Considering the time it takes to find just one photo on a typical stock photo site—about 10 to 12 minutes on average—it took more than a full workweek just to make the preliminary selections. On top of this, add the costs of the time it took to buy, crop, and perhaps even retouch each photo and the time of the people who were involved in the image presentation meetings.

The budgetary impact would have been even greater if the project had been a fixed-cost project for which the agency must also bear the costs of obtaining the rights to use or purchasing the photos. Furthermore, if the agency had been unable to find suitable photos in royalty-free image banks, other issues might have included controlling the expiration dates for licensed images, additional time spent renewing licenses, or finding other photos to replace those that were no longer available.

Conclusion

The experience of Agency.com Italy during this project resulted in our establishing the following guidelines for designing index pages:

  • While index pages are not inherently bad, you must pay careful attention to the consequences of designing Web sites that rely on them—keeping in mind that a project’s budget is an issue of equal importance with user experience and technical reliability.
  • Designing and building an index page for each top-level category on a Web site can be helpful when there is a strong editorial plan or the commitment to build a solid content management system (CMS) for the site.
  • The more targeted and personalized the content on a Web site, the more useful index pages for top-level categories are.
  • Index pages help build traffic to other pages on a Web site and pay back the cost and effort of building them.
  • As entry points for particular user journeys, index pages fall under the control of marketing more than corporate, because preserving an effective means for customers to drill down to product or shopping pages is paramount.
  • On the negative side, it’s a bad idea to put a generic, site-wide link directory on an index page at the top of a category. Doing so drives greater customer focus to semi-institutional pages. While you must, of course, give careful attention to corporate pages—in terms of their design, imagery, and messaging—such pages do not accrue real value for either your users or your brand.
“It’s important to consider the ultimate impacts of your early decisions on time, costs, and the resulting needs for skilled specialists when it’s time for the Web pages in a tree diagram to become a real Web site.”

Obviously, the cost problem we encountered in providing photos for all of the index pages could become an advantage if an agency were getting paid for all of the content it produced, including visual materials like illustrations, photos, animations, or videos. In such a case, creating more pages and the content for them would equal more money. However, the full process of creating, editing, proposing, and approving visual materials, then finally, adding them to a production Web site requires a significant amount of time and can greatly affect the amount of income an agency earns.

A decision you make at the beginning of a Web site design effort—during the Information Architecture phase—might seem to be the safer solution, because it requires no extra effort in defining a Web site hierarchy. However, it’s important to consider the ultimate impacts of your early decisions on time, costs, and the resulting needs for skilled specialists when it’s time for the Web pages in a tree diagram to become a real Web site. Designing, laying out, and getting approval for the actual content on index pages is a significant effort.

Join the Discussion

Asterisks (*) indicate required information.