Web Sense

by Toni Will-Harris

Web site design doesn't start with "how it looks," it starts with "how it works."

To help you plan the most effective Web site from the start, I've developed five basic keys:

• Have a sense of Purpose.
• Create a sense of Place.
• Create a sense of Logic.
• Create a sense of Direction.
• Create a sense of Identity.

Last, but not least, something technical:

• Use some Common Sense.

A sense of purpose

Amazingly, people start building sites without creating a clear statement of what they want that site to achieve. The first step is to always ask these basic questions:

• What do you want the site to do for you?
• Who is the audience for the site?
• What do you want these visitors to get out of it?

The questions are the same whether you're talking about an Internet or intranet site. If you don't have clear, concise answers to these questions, you shouldn't even be thinking about anything else.

If you don't know these answers, you can spend a lot of time and money on a site that looks good, but doesn't add to your business.

How do you find the answers? Well, the first answer, about what you want the site to do for you, has to be based on your own internal goals. Do you just want to promote your business or do you want to use the Web to sell products? If it's an intranet, what do you want it to do—allow people to access and share files? Disseminate the latest information? Set these goals early and specifically.

Once you do, it's time to start talking to either customers, about what they'd like in a site from you, or to your own employees, to see what they'd like from an intranet.

You should interview as many people as you can who will be using the system and find out what they need.

Sense of place

Many Web designers think of Web sites as on-line brochures or other versions of printed documents. While some sites will be purely publications, in some cases, a Web site can be thought of as a place. Thinking of a site as a physical space rather than a "bunch of pages" may help you visualize it in terms of the various rooms or areas where your intended visitors will feel comfortable.

A sense of place may also help your visitors picture your site and gives them a stronger, more memorable experience. It also helps intranet users feel more at home.

For an intranet, imagine a corporate high-rise (with different divisions on different "floors") or a home page that mimics your own company's office lobby or office floor plan. If your intranet system focuses on a few main areas, such as filing and communication, then use this to help you focus. For example, make the file room the center of attention, rather than just one more room in a large building. This will help your users get straight to the point.

For a Web site, imagine a car showroom (new cars, used cars, service), a wine cellar (aisles for vineyards and vintages), an art gallery (rooms for figurative, abstract, and appraisals), a clinic (reception, doctor's office), a service center, a law office, a real estate office, a specific type of store. Even these simple descriptions instantly help both you and your visitor imagine a complete place.

Even when your site is a publication you might be better served by opening a "news room," rather than an on-line newspaper; a virtual "garden" rather than a gardening magazine; a "bookstore/cafe" rather than a literary magazine; a "kitchen" rather than a cooking magazine; or a "Test Track" rather than a car magazine.

The more clearly you define your sense of place, the easier the other steps will be, because they'll just naturally fit into the place.

A sense of Logic

Now that you know what you want to accomplish, and you have a setting, it's time to create a structure. Think of your structure like the blueprint for a building. Without a clear blueprint, your site will grow like a weed--and be about as appreciated as one.

The best place to start is with an outline. Try your word processor's outlining feature. It lets you easily create and manipulate even the most complex outline. Because you can contract (just see main headings) and expand (see headings and associated text), this structure can grow, yet still let you "see the forest for the trees." (To learn more about the outlining feature of your word processor, click here.)

Once you have an outline, the next step is to try setting up a dummy site. NetObjects Fusion features "org-chart" style tools that allow you to further visualize the structure of your site. As you create the org-charts in these programs, they create individual Web pages. Changing the org-charts rearranges the site, allowing you to get a feel for the organization.

NetObjects Fusion actually builds sites by first asking you to create either an org chart, shown here, or an outline of your site. You can drag sections and pages around the chart, and as you do, the Web site is actually reorganized on the fly. This allows you great flexibility in creating and maintaining well-organized Web sites.

What makes a good organization?

A well-organized site is one that makes it easy and intuitive for visitors to find what they want. The easier it is to use, the longer users will stay at the site, and the more they'll see of it. Good organization also makes it easy for you to grow your site logically.

Site organization always begins with a home page that shows visitors the available areas simply, succinctly, and clearly. Too many sections can confuse users—too few can force you to make your site so "deep" that users get lost. The actual number you need will vary—but streamlining a site can help make it more accessible.

If you created a "place," it will help you imagine (and plan for) how visitors will move within your site, from room to room or area to area. In some cases, you might want to create a virtual foyer that branches off into your various rooms. In other cases, you may want to control the path that guests must take as they traverse your site--they can only get to one area by passing through another one, just as in a real building. In most cases, you'll want visitors to be able to move from section to section without having to go back to the home page (or lobby) first.

Sense of direction

Clear navigation (or the lack of it) can make or break a site. On-line readers need to understand where they are and how to get to where they want to be. While on-line navigation is a new experience for most users, it still relies on the expectations visitors already have from other mediums—both print mediums such as books and magazines and the "places" that you may try to duplicate.

Don't try to re-invent the wheel. Tables of contents and indices work on screen just as well as they do on paper. People understand these conventions, so they find them easy to use.

Using a "place" scenario also helps because people understand traveling from room to room--and that some rooms can only be accessed by going through other rooms.

If you do choose a place metaphor, then the logic behind the façade has to be made clear so users can navigate with ease. Just as you try to figure out the traffic pattern of a building, you should do the same for a site. You don't want your user to constantly have to backtrack to the lobby or entry if it would be more convenient for them to be able to jump from one room to another.

Always include a link to home—on every single page. This way, if users do get confused, or just want to start over from the top, they're only one click away. Many users don't think to use the "back" button on their browser, so giving them an easy way to get to the top is important.

Finally, every page on your site should have a header, footer, or "sidebar" that tells the reader where they are in cyberspace—specifically, what site they're visiting and where they are within that site.

Sense of identity

Your site can be perfect, but if people don't realize that it's your site, then you don't get the credit. A site's strong "brand identity" (either on its own or combined with your corporate identity) builds recognition that can build action—be it traffic or sales, which means that identity has real value.

Typefaces (created graphically for headings and navigation) and color are two ways to create a strong image. Don't rely on complex images that take a long time to download—their rudeness outweighs their attractiveness. Create your own sense of style, don't copy someone else's or follow short-lived trends.

Sites with a strong sense of style:

• Will-Harris House—My own site uses the most basic home page analogy—a home. Color and typeface create a strong recognizable brand. The blue bar along the left repeats the site logo all of the way down every page, so visitors know what site they're on. The top of every page contains the same buttons in the blue bar, and the bottom of each page contains a button to go Home. I get many comments from visitors, especially new ones to the Web, that they found it very easy to navigate, and so spent a great deal of time there. The home page takes about 15 seconds to load (at 28.8), and all backgrounds and buttons are repeated throughout the site, which means they're cached by the browser and take no time to download after the first time.

• Manka's Inverness Lodge—Here's a real place, a romantic country lodge, where the site duplicates the actual mood of the place. A tree with signs serves as navigation, just as it does at the real location.

• Brian Stokes Mitchell Scrapbook—This Tony-nominated Broadway actor and singer wanted a site that wasn't just a site, but more of a scrapbook he could share. With that in mind, the look of the site followed naturally.

• Theyer Executive Search—Sometimes simple is best. This site loads in seconds, even with JavaScript-based interactive buttons and two subtle GIF animations that add action. Here the design is big and bold and ensures the content gets read—not overlooked.

• WordSleuth—This site for a copywriter uses a character instead of a place. The copywriter, Marc Holmes, becomes the "WordSleuth," and the graphics reflect that theme throughout the site. Navigation is at the bottom of each page and uses the torn-paper and fingerprint motif seen on the home page. Even though the entire page is graphic, it still takes just 14 seconds to download (at 28.8) because of the simple use of color.

• c|net news.com—All of c|net's publications use this strong and instantly recognizable yellow bar. (This is actually their previous design. Their new design is far less recognizable.) Color is a powerful way to create an identity on the Web, but you must use it consistently—and use a unique color—not always easy given that there are only 216 Web-safe colors. Even so, you might be surprised what variety there is.

• www.wired.com— This site has a lot of style, and it does so in small, efficient graphics. The graphics come in fast because they use a very limited number of colors, and the fewer colors you use in a GIF file, the smaller the files can be. This site is actually far faster than c|net's site, and if your visitors are in a hurry, then speed can be an important feature.

About the Author

Toni Will-Harris is a writer, designer, and naturalist who runs the Point Reyes Chipmunk Observatory and Gardens. She can be reached at Toni@Will-Harris.com. This picture is not recent—or actual size.

 

Illustration: Business Constructions by Russell Thurston for www.artville.com