Chapter 2

Designing an Effective Web Site

• Put Your Hook on the Splash Page
• Knowing Where You Are in a Web Site
• Designing Consistency in Your Web Site
• Getting Where You Want to Go
• Knowing How to Leave
• Use a Diagramming Approach to Web Design
• Creating a Simple Web Site
  • Structured Versus Unstructured Design
  • A Web Site Is Not a Book
• Building a Working Shell
  • The Elements of a Functional Shell
• Building a Web Site Shell
• Next Steps
• Q&A
  

Surfed the Web lately? Let's paint a word picture of the typical cyberspace experience. Imagine jumping into your car and setting out for a leisurely drive. You have no plans, no maps, and no destination. You quickly find yourself on an interstate highway, a really big one. Cloverleaves, ramps, roads going here and there make knowing where you are, and more importantly, where to get off extremely difficult. It's okay, remember? You have no plans, no maps, and no destination.

Unfortunately, most of us that use the Web aren't just sight-seeing, although it's nice to do once in a while. We're usually looking for that all-important data or program, critical graphic, or much-needed helper application or plug-in, and we want it now.

Effective Web site design begins with effective navigational design. Wait a minute, I thought this book was about Web graphics? It is! Before we can begin to talk about Web graphics in more detail, we need to discuss navigation, or you'll end up with a cloverleaf and no off-ramps on one page!

Well, maybe it won't be that bad, but one of the main reasons users don't find what they're looking for in a timely manner is due to poor navigational design. It is also a main reason why newcomers don't consider the Web to be a vital source of information and why experienced users are wary of searching very long at a poorly designed site.

Aside from the content and graphics you plan to provide at your site, navigation is of primary importance. How will users know where they're at or where they're going in your structure? What graphics or screen elements will tie your pages together and give them a coherent look? How will you efficiently and effectively present the users with what they are looking for?

That's what this chapter is about. This chapter focuses on some key organizational issues to help you preplan your pages. This includes things you can do on paper or in your head before you start spewing code or pushing pixels. I'll also present several key issues to consider as you're laying your pages out so you don't end up with a spaghetti site (like the interstate highway system of New York City). The chapter concludes with a discussion on how to create template pages so that you can reuse parts of your site.

Put Your Hook on the Splash Page

So you're putting your pages together, and you want your pages to be effective. You want people to frequently visit your site. You want people to find it interesting and informative, worthy of a bookmark. In communication, the first impression is important (see Figure 2.1).

Figure 2.1 : An effective sample splash page.

The first page your audience sees, the splash page, is vitally important. The issue of how important is based on your target audience and your site's purpose. The suggested abstract from Chapter 1 "Making Effective Browser-Independent Graphics," should help define these variables, but the question becomes how can you capture the essence of your abstract into something that will hook your audience on the Web?

The key to splash page development is to anticipate the needs of the prospective user. Most advertising dollars are spent in market research- knowing the audience, finding what appeals to them, and what they want. Your abstract should help define these three variables.

What is at your site that users want? This page is the place to let the user know what is there. Much like a table of contents, the splash page gives the user a visual overview of the site, such as the one shown in Figure 2.2. Present what is at your site plainly and clearly. However, plan to make it more than a bulleted list or string of hot-linked text.

Figure 2.2 : Presenting the contents of a site via a splash page.

The splash page also gives the users a sense of what the site is about. The look and feel of your first page should support your site's purpose and set the atmosphere, as shown in Figure 2.3. This is conveyed through the design layout and graphics. As you're designing your splash page, use graphics that contribute. All too often a single graphic dominates the splash page, which can leave the user waiting for endless periods of time.

Figure 2.3 : The splash page sets the tone of the site.

One of the most frustrating occurrences is waiting for a page to load all its graphics. If the splash page takes too long to load, odds are the user will stop the load or head for a different site. Alternatively, plan to include at least a logo or moderate image to increase your page's visual appeal.

There should be a careful balance between the amount of graphics and text on a page. Avoid graphical overkill. The more graphics, or the larger the graphics you use on the splash page, the longer the user has to wait and greater the likelihood that he'll stop loading the page.

Knowing Where You Are in a Web Site

Many people, including myself, have begun to use a new software package and have gotten lost or had the machine lock up. Immediately, we lose our sense of comfort with the application. At the extreme, we may give it the three-finger salute or look for the button on the back of the Macintosh. On the Net we simply dodge the site and go somewhere else. Allowing the user to keep his or her sense of direction and control is important. A site listing on the splash page is a start, but there must be continuity to the pages. This could include a navigation bar that is on all pages or a constant link back to the splash page (see Figure 2.4). Another method is to provide access to a visual map of all the pages at the site, which allows the user to immediately go anywhere with a click of the mouse.

Figure 2.4 : Navigation bars and continuity.

Designing Consistency in Your Web Site

Each Web page you create is a virtual interface, a means of interacting with the computer and ultimately with the information at the site. Consistency across these pages not only makes users feel more comfortable with your site, but also gives them a sense of location and helps them find what they are looking for more easily. To help create consistency across your pages:

1. Design a graphical element that represents your Web site. This can be a logo, text element, or product (see Figure 6.1). Open Text's (http://www.opentext.com/) header bar and logo at the top of the page becomes a consistent element across all pages to bring both consistency and unity.
2. Establish section unity by designing graphic elements of the same color. Make your logo green in the financial section, red in the hot products section, and blue in the personnel section. If you do this, a change of color will connote movement to another section or topic.
3. Establish subordination by scaling the graphic. The larger the graphic, the more important the topic (the closer to the splash or home page). The smaller the graphic, the deeper into the Web structure (the further away from the home page).

In addition to making the user more comfortable, graphical elements that are consistent from page to page increase the loading speed of your other pages. When most browsers load an image, they cache the information-in other words, the browser writes it to your hard drive. This means it only downloads the graphic the first time it is used. All subsequent pages that use the element pull it from the cache on the hard drive rather than loading it from the Net. Consistently reusing your graphics is a smart practice both from a design and systems standpoint.

Page continuity is a concept that can be explained using some of today's suites of applications as an example. What is one of the main selling features behind Microsoft's Office products? Note that the interfaces of each product are strikingly similar. The idea that familiarity with one interface allows users to more easily use another product in the series is the key. This type of continuity is what you want to strive for in your Web pages. Continuity is developed by consistent elements, graphical or not, that remain constant from page to page. Techniques for establishing this continuity are covered in detail in Chapter 9 "Providing Visual Cues to Web Navigation Through Page Design."

Getting Where You Want to Go

From its beginning, the Web has been based in hypertext-small text passages that take you from place to place. Evolution, however, has allowed the Web to grow and mature from Gopher text options (for those who liked to use it) to visually appealing pages that pique our interest. Buttons, images, and drop-down menus, in addition to hypertext links, fill our toolbag with options for navigation through the cyber-landscape (see Figure 2.5).

Figure 2.5 : Hypertext links, buttons, and images.

The typical response of new Web designers is to fill the page with text links and a few graphics. However, a page used in this way is not much different from a Gopher menu and is just about as interesting. A key point to navigation on the Web is not only consistency but also ingenuity. Using creative ideas like those shown in Figure 2.6, sites can be created with new twists to commonplace pushbuttons and switches. In interactive page design, as with many things, necessity is the mother of invention.

Figure 2.6 : Ingenuity adds a new twist to traditional ideas.

The placement of navigational items on your pages is important. Most users have been conditioned to look for main navigation items at either the top or bottom of the page. Usually a bar or series of inline images or icons is placed in these areas allowing the user to navigate through the information (see Figure 2.7). Inline images are graphics that are included in the Hypertext Markup Language (HTML) coding. They appear like images inserted into a Word document.

Figure 2.7 : An example of an inline image.

Icons, shown in Figure 2.8, are usually small graphics that depict something, such as a function that goes to the next page. An example would be an arrow pointing left, which would represent the action of taking you to the previous page. These icons actually can be anything, but be careful. The more abstract the graphic, the harder it is to make the connection to its function.

Figure 2.8 : Examples of icons.

Knowing How to Leave

It may seem silly to mention, but as you're designing your page don't forget that information provided on the Web is nonlinear. Users not only want to get into your information, but they also want to be able to get back out. It is important to provide a means for them to go back to the previous page. Netscape has a backward button, but effective design will provide a means within the page itself to go backward through the information.

Use a Diagramming Approach to Web Design

When I started designing my own Web pages I thought, "I don't need to diagram my site structure. I know what I want to create. Diagrams are for programming propellerheads." Well, I was wrong. Site diagrams, shown in Figure 2.9, are one of the most useful planning tools available; no software is required.

Figure 2.9 : Site diagrams give you a visual road map of your site structure.

This biggest advantage to site diagrams is being able to view your site's structure. Diagrams give you an idea of where each page is and what links or navigational graphics each page will need. The diagram provides a road map of your site, making it easier to code and manage.

When you start punching in code, site diagrams also serve an additional purpose. The HTML <A HREF> tag requires you to enter absolute locations for files. In other words, you must specifically state where a file is and what it is called to be able to link to it. The case is also important because most http servers are case sensitive. Because you can see each page and its particular name on your site map, it is extremely helpful to have it with you as you're crunching the code for your page links.

Creating a Simple Web Site

A pencil is a diagramming tool that requires no software. What a concept! Sketching can be used as an aid to help lay out each page. Three main items describe individual pages: navigational items (hypertext or graphical), graphics, and text. So where do you begin? To begin creating a simple Web site:

1. Begin by blocking out areas on the page for each of these items (see Figure 2.10). This helps achieve a consistent look across your pages.
2. Leave some whitespace (see Figure 2.11). As you're blocking out your template, this basic principle will help you achieve a professional design. Don't fill every nook and cranny with content. Some of the best designs I've seen had to do more with what wasn't there than what was. This layout becomes your sketching template.
3. Once you have created the block shapes, make copies of this template and use it to sketch the remaining pages. This forces you to conform all your pages to the layout. You'll be surprised to find that it will make your pages look more professional, as well as more consistent. Once you've completed a finished sketch, it should look similar to Figure 2.12.

Figure 2.10: Page diagrams help you lay out a page and get a consistent look.

Figure 2.11: Effective use of white-space on a page.

Figure 2.12: A finished freehand page sketch.

Structured Versus Unstructured Design

Daily planners are a wonderful thing. They help people organize their lives by helping them construct what they will be doing each hour of the day. These wonderful memory aids not only help them accomplish large tasks, but they also help people remember the things they commonly forget, such as anniversaries, birthdays, and important events. I know I would be lost without mine.

Structuring a page or site without a diagram is much like living without a daily planner. You can accomplish the same tasks without it (that is, design a page or site), but why would you? Why take the chance of forgetting something or leaving a structure to chance? Diagramming is a simple task. Much like a daily planner, diagrams help you organize the items that compose the site or page design. It also reminds you of what you need to do concerning site design.

A Web Site Is Not a Book

Web design is much more than traditional books on the Web. The power that HTML gives us is much more than simple page turning. Many of the analogies we use to describe the Web are based in traditional publishing. It's what we're used to, and it's something we can all relate to. However, Web sites can be and should be much more.

Interactive technologies, whether Web- or CD-ROM-based, allow us to communicate the way we were meant to, as multimedia communicators. We long for audio, video, and graphics. So is it unusual that we're attracted to Web- and CD-ROM-based media? Hardly, but there is one other item that makes it attractive. Interactive media is powerful because of the interaction between the user and the information. Educators have been aware of this for many years. Retention, interest, and motivation increase if you can interact with the information. Interactive media success, whether Web- or CD-ROM-based, hinges on these characteristics.

Building a Working Shell

In Microsoft Word, file templates are built to reduce the redundant task of setting margins, fonts, paragraphs, and other formatting items. In Adobe Illustrator, illustration templates can set standard colors, line attributes, and other illustration characteristics. In the HTML world, templates or page shells help reduce the laborious task of recoding something we did in the past, but they also help to force consistency into what we do.

The Elements of a Functional Shell

The contents of a shell will be determined by your content and design. Generally items such as navigation buttons or inline images, rules, and specific font sizes or types will be predefined within your shell. This way the only thing you have to enter to create new pages is the new content. To give you an example, imagine you are in charge of putting together a template page for all the employees at your particular company so that all they have to enter is their specific data. Your template page would probably have a logo, some design and navigational elements, and holes for each employee to enter his or her specific data. Using a template, the look and structure of all the pages should end up being the same. In the long run, template pages help create a thread of consistency and reduce a lot of redundant coding.

Building a Web Site Shell

Consider the following HTML code to build a home page with links to four sections. In each of the sections, you can link to any other section or back to the home page. This is all the code needed to build a functional shell. The section pages are copied and pasted from the home page and edited as needed. If the shell works, fill 'er up with text and graphics! (See the Web Workshops in this and other chapters for tips on including graphics on your pages.) What follows is an example of a very basic Web structure having a home page and four main sections:

• The home page's title and top heading are called Home Page. A simple jump list is used to control navigation between the home page and the four Level 1 sections:

<!-******************** Home Page **********************->
<HTML>
    <HEAD>
    <TITLE>Home Page</TITLE>
    </HEAD>
    <BODY>
        <H1>Home Page</H1>
        <UL>
            <LI><A HREF="Section1.html">Section 1</A>
            <LI><A HREF="Section2.html">Section 2</A>
            <LI><A HREF="Section3.html">Section 3</A>
            <LI><A HREF="Section4.html">Section 4</A>
</BODY>
</HTML> 

• Each section has an appropriate title and top heading. The jump list is edited to remove the current section and to add a link back to the home page:

<!-******************* Section 1 *************************->
<HTML>
    <HEAD>
    <TITLE>Section 1</TITLE>
    </HEAD>
    <BODY>
        <H1>Section 1</H1>
        <UL>
            <LI><A HREF="Section2.html">Section 2</A>
            <LI><A HREF="Section3.html">Section 3</A>
            <LI><A HREF="Section4.html">Section 4</A>
            <LI><A HREF="Home.html">Home Page</A>
</BODY>
</HTML>
<!-******************* Section 2 *************************->
<HTML>
    <HEAD>
    <TITLE>Section 2</TITLE>
    </HEAD>
    <BODY>
        <H1>Section 2</H1>
        <UL>
            <LI><A HREF="Section1.html">Section 1</A>
            <LI><A HREF="Section3.html">Section 3</A>
            <LI><A HREF="Section4.html">Section 4</A>
            <LI><A HREF="Home.html">Home Page</A>
</BODY>
</HTML>
<!-******************* Section 3 *************************->
<HTML>
    <HEAD>
    <TITLE>Section 3</TITLE>
    </HEAD>
    <BODY>
        <H1>Section 3</H1>
        <UL>
            <LI><A HREF="Section1.html">Section 1</A>
            <LI><A HREF="Section2.html">Section 2</A>
            <LI><A HREF="Section4.html">Section 4</A>
            <LI><A HREF="Home.html">Home Page</A>
</BODY>
</HTML>
<!-******************* Section 4 *************************->
<HTML>
    <HEAD>
    <TITLE>Section 4</TITLE>
    </HEAD>
    <BODY>
        <H1>Section 4</H1>
        <UL>
            <LI><A HREF="Section1.html">Section 1</A>
            <LI><A HREF="Section2.html">Section 2</A>
            <LI><A HREF="Section3.html">Section 3</A>
            <LI><A HREF="Home.html">Home Page</A>
</BODY>
</HTML>

Next Steps

Just as you begin to walk away, the salesman tells you, "Wait! There are more options to choose from." Indeed, creating an effective Web site begins with structure, continuity, and planning, but what else can help you before you start pushing pixels? Perhaps the following will give you an idea:

• To learn more about splash page graphics, see Chapter 3 "Creating Cool Graphics for the Web," and Chapter 4 "Making Effective Web Graphics."
• To find out more about diagramming the structure of your site, see Chapter 8 "Creating a Map of Your Web Site."
• To learn how to use graphics to support your navigation structure, see Chapter 9.
• To find out how to create buttons, see Chapter 13, "Designing Buttons That Work."

Q&A