articles

Defining Web Site Architecture

By Theresa Wilkinson, W-edge design
Reprinted with permission from the STC Intercom magazine - November 1998 Volume 45, Issue 9.

What is Web site architecture? It means laying out or grouping any similar areas of a Web site. In a re-design project for my former company, I realized the importance of site architecture and navigation when I contacted the Customer Service departments and discovered that an average of thirty-five calls a day were from the Internet users. Most of those calls were about confusing page layouts and navigation procedures (users did not understand the current navigational system). I determined that by redesigning the site architecture and navigational system, we could reduce the customer service calls by 50%, thus saving the company an estimated $30,000 per year.

My experience illustrates the importance of site architecture and navigation. If they are not done correctly, the company will lose money in customer support calls and unhappy users. If they are done correctly, the company will save that money. So when defining site architecture, think first of your user.

User-Centered Design

When planning your design, ask yourself: How will the user want to find the desired information? For example, if you go to a site as a customer looking for product information, you probably would like to see a listing of all the company's products, not a list of company divisions that is subdivided into product listings. When designing, it is important to remember that users can enter a site from any page with the site. They should be able to locate needed information, be referred to an area, or complete their desired task from any page.

Many sites create a self-contained universe centered around the interests of the originating company. The site is organized by company divisions. But users know or care about company divisions -- they want to find a product or company information. This type of organization probably reflects the fact that company does not really understand the purpose of the site, which is to help their customers or potential customers find information.

If you work for a company like this, do your homework. Educate your company about the purpose of the site, and look at a variety of sites design examples. Back up your ideas with published articles or with anticipated results. Because I investigated customer service calls, reporting on the results, and estimating how much my new design could save the company, my former employer could not argue with my design. I was providing a real value the users wanted, thus increasing customer satisfaction.

Define labels

Probably one of the most important components of Web architecture is an effective labeling scheme. Labels are words or phrases used throughout your site that identify your content areas. For example, "Products and Services" is a label.

Think about the content areas from the user's viewpoint when choosing your labels. Ensure that your label is specific, that it doesn't promise one thing but deliver another. For example, don't use the label "Tour" when you mean to take the user to a site map. Ensure that the label and the title of the subsequent page are consistent. Remember that labels are one area to concentrate on when usability testing your Web site.

You might look to other Web sites that you like for ideas for label names. However, remember that borrowing the actual code from another Web site is stealing. Some sites that I like are Intel, Hewlett Packard, and Sun Microsystems.

The following are the labels for content areas of a fictional customer service and software download site:

• Company
• Pressroom
• Products and Services
• Customer service
• Download
• Contents (site table of contents)

Design for change

When planning your site's architecture, develop a structure to accommodate change and new information -- we all know that someone somewhere in your company will want to add something just after your site goes live. Common practice is for the site to completely change every three to five months because users expect a fresh, updated look and the latest in technology.

In addition to updating content daily, weekly, or monthly, many companies "overhaul" their entire site every quarter. Some companies with large sites just update the artwork on their top page once a month. Another popular, and extremely effective idea is to plan your site's development in iterations, adding content and functionality as you progress.

For example, in iteration A, include the main page, company information, and product listings. In iteration B, add a searchable employment database, human resource email links, product thumbnail graphics, and multimedia demos. In this way, you can plan more effectively, take the more time to develop and test, fix any mistakes you make along the way, and respond to any user suggestions.

Designing the main page

Design your main page to perform the following functions simultaneously:

• Grab the first-time user's attention through compelling graphics
• Help users navigate the site easily to accomplish their intended task
• Convey the purpose of the site
• Show the users what's new with the site and company
• Provide copyright information for the site
• Provide users with contact information

The key to effective main page design is: "less is more." Be careful not to overwhelm or confuse the user. Also, consider multiple entryways with specialized functions for repeat users.

As an example, consider the main page for the fictitious customer service company. I like to make the main page work for me by using its real estate to promote the company and products (or whatever you want). Remember, this will usually be the first screen your users will see, so use it to communicate exactly what you want them to know about your company.

Designing navigation

Design a navigation system that is easy to use. Can the user get to the home page easily? Can they get to the information within two or three clicks? If possible, eliminate pages that contain only links to other pages. Use standardized navigational aids on every page because users can get lost in large, complex sites. Text navigation is easier to understand than iconic or button navigation. Most of your users will not be spending enough time looking at your pages to learn the meaning of the icons. Give them a way to know where they are in a site. For example, highlight their current location in the navigation.

Define your navigation on a paper prototype or "mock-up" and consider testing it for usability. Always add a contents page so users can access information quickly and see the main levels of your site. Remember to include all pages (with links) to illustrate the relationships of your pages to one another. Also, if your site is large with a lot of content, consider adding a search mechanism.

Designing the pages

When defining your page, think about what areas or content you would like to have appear on each. Design your pages for the default window size of 640 x 480 pixels, so the user does not have to scroll or resize the browser (although this cannot always be helped). For presentations meant to grab the user's attention, don't make the page longer than the screen (480 pixels). If a main page has buttons or important information at the bottom, that information will be lost because it falls below the edge of the page and is hidden from the user.

Also remember that users like to print out pages with articles or other important information, so design pages that can be easily printed. Think about how to organize your content on a page -- make sure users get to the desired information in two or three clicks.

When I go into design phase of a Web project, I re-read a lot of usability information to keep it fresh in my mine. I have found the following information from "Guide to Web Style" on the Sun Web site to be very helpful.

Page example

Within my fictional Web site, I have defined the pages to include:

• Company area, including a company overview (who we are), executives listing, a careers subsection (to include info on what it's like to work there, getting a job, submitting a resume or a resume builder, current positions, tips on interviewing, tips on following up, locations, etc.), a financial information subsection (including the latest annual report in PDF format, quarterly reports, NEC link), and running stock ticker on bottom of main company page.
• Press room, including who we are, press releases with search mechanism, press contacts, and photos on file.
• Products and Services area, including product overview focusing on how our software will solve customers' problems; news on updates if applicable; product listings or product families with small description (if link to another page, include more specific description and contact link); request product literature or more information (sales lead); multimedia demo of how products work; education area; and services that we offer, such as consulting.
• Customer service area including support area. This section will be personalized so company representative will know what products users already have and can display applicable documentation and more technical product news. ("Personalized" means the users' information, such as what software they currently have, will be known so the system can display any upgrades and applicable documentation.)
• Download including download capability (list of available products), information on how long download will take on various modem speeds, and search mechanism for documentation (user guides, technical reference guides, and online help files). Support area will include customer service number, more detailed FAQs, e-mail or chat capability to contact Customer Service, CS 800 number and hours of operation, and e-mail link of sales person's name.
• Site table of contents, listing of all content areas including all second and third-level links.

Using of graphics

Your graphic designer should create graphics for the site. He or she will take the information about the purpose of the site, the audience (their typical bandwidth and browser usage), and any marketing messages or corporate identity information, and create appropriate graphics. As a rule of thumb, the total of all images on a page shouldn't exceed 40-50 K. A 14.4K modem transfers text and images at a rate of about 1K per second. Ensure your page download times are tested.

Keep in mind that each graphic on your site should add value. It should communicate the site's purpose or add to the content. Evaluate each graphic to ensure it does its intended job -- don't include it just because it looks good. I found the following information from page 86 of Web Site Usability: A Designer's Guide particularly interesting: "Some users claim they will wait for graphics to download if they thought the content would be useful. But users were particularly frustrated when they thought a graphic would add to the content, but didn't."

Supply interlaced GIF files in your pages to allow images to load in multiple passes (multi-layered effect). Specify the WIDTH and HEIGHT tags on all graphics to ensure faster download. Since most browsers determine the page layout before the graphics are downloaded, it can display the text first then fill in the graphics. So your user can begin to read your page before waiting for all graphics to download. Also use ALT tags effectively for those users who turn off their graphics.

Define use of multimedia

Multimedia includes animation, sound files, movie files, and the like. Design any multimedia effect so that it is applicable with intended audience and the purpose of the site. Ensure that it adds value to the site but does not annoy the user. For example, use multimedia demonstrations of how your products can solve your customer's problems. However, too much happening on one page can really distract your user. Also from the Web Site Usability: A Designer's Guide, page 87: "Users first tried to scroll the animation off the page, and when they couldn't, actually covered it up with their hands so they could read the rest of the text."

Design your site so that any multimedia effect is optional and include download times so your user has a choice of whether or not they want to wait that long. For example, include the line "Multimedia presentation -- download time is 4 minutes at 14.4 mb modem." This simple line of text goes a long way in establishing a positive relationship with your user.

Designing your site's architecture, its navigation, and each of its pages is not an easy task. This process will probably consume most of your time in the site's development. But don't rush the process. It's a lot cheaper to make any significant changes now, in the design process, than when you begin to actually code your site.

References

Apple Web Design Guidelines, Apple Computer, Inc.
Bailey, Samantha, Love Your Labels, Webreview.
Booker, Ellis, Defining a Strong Web Interface, Internet World formerly Webweek.
Heath, Rebecca Piirto, Design a Killer Web Site Marketing Tools, Demographics.com, May 1997.
Interbiznet.com, 1997 Electronic Recruiting Index.
Nielsen, Jakob, Interface Design for Sun's WWW Site, Sun Microsystems, Inc.
Rosenfeld, Lou, Making Your Main Page Work: Multiple Gateways for Myriad Functions, Webreview.
Spool, Jarod M., Tara Scanlon, Will Schroeder, et al. Web Site Usability: A Designer's Guide, North Andover, Mass.: User Interface Engineering, 1997.
Sun Microsystems, Inc., Guide to Web Style, Sun Microsystems, Inc.