Chapter 2

Designing an Effective Web Site


CONTENTS

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!

Note
The ease of creating Web pages has created a plethora of intertwined pages with limited aesthetic or informational value. Thus, history repeats itself. We can all probably remember what happened with the advent of computer desktop publishing. Everybody ran out and bought a Macintosh (where it all started), a primal version of software such as PageMaker or Microsoft Publisher, and a printer. We had brochures, flyers, advertisements, and the like being produced that had the design finesse of Conan the Barbarian. Sure the message was conveyed, but euh! It was messy. Many people began to realize that there was more to desktop publishing than the hardware or software. We realized that craft and skill are equally, if not more, important. Many discovered that there are underlying skills that contribute to designing effective printed media, and that there was more involved than acquiring a tool. There must be skill behind the tool. We are currently in that discovery phase again; it's a different medium but the same principle.

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?

Note
I'm reminded of the billions of dollars spent on advertising each year, most of which is spent on developing the idea for the advertisement. Don't worry if it takes a while to develop your splash page and associated graphics. Take your time and consider your alternatives. Of all pages, this page is the most important, particularly if you're developing commercial sites. The layout, design, and atmosphere of this page are critical because it sets the tone for the rest of the site.

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.

Tip
How many images should you include on your pages? Graphic file size and network speed ultimately determine how fast your browser lets you view images on the Web. A graphic file of 30KB, such as a bullet or small image, can take up to 30 seconds using a 14.4Kbps modem, 10 seconds using a 28.8Kbps modem, or less than a second using a direct network connection with 1.5Mbps throughput. However, a 100KB-200KB image file, roughly one half of the screen, requires 300 seconds (14.4Kbps), 180 seconds (28.8Kbps), or 1 second (1.5Mbps).

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.

Note
As computer capability has increased, user-interface design complexity has also increased. This has been a natural progression from hypertext, to clickable graphics, to full-blown interfaces being used today. The ability to develop effective interfaces is slowly becoming a requirement in Web site development, and graphics play an important role. As Internet hardware and content continue to evolve, interfacing on Web pages will become even more important. To find out more about human-computer interaction and Web development, check out some of the latest information at one of the following addresses:
http://is.twi.tudelft.nl/hci/
http://info.acm.org/pubs/magazines/interactions/

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.

Web Work Shop
Scaling a graphic means entering the exact horizontal and vertical pixel sizes. Use TOP, MIDDLE, and BOTTOM alignment to put the graphic where you want it. If you want the graphic in the middle of a line of text, insert the <IMG SRC> tag at the exact place in the text that you want the graphic to appear.

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.

Note
An additional advantage of the site diagram is that of file management; a task we must all do. Looking at a site diagram, it is easy to see visual groupings of files. This is most noticeable if you're setting up an organization's site. It is advantageous, from a management perspective, to create a directory structure on the server to hold the visual groups of pages. A common, but inadvisable practice, is to put all the pages in a single folder on the server, which makes site maintenance a memory task more than a management task. Try to use the site diagram as a map for not only the pages themselves, but also as a way the digital files can be arranged on the http server.

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.

Web Work Shop
Figures normally don't just sit out there. Usually, a figure title precedes the image, and a caption (sometimes with a figure number) follows. In this example, horizontal rules <HR> are used to set the figure off from the rest of the page. Also, the Figure XX are given added emphasis with the <strong> tag.

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.

Note
Let's get theoretical for a minute. Why have traditional publications such as books or magazines remained the main means of communication? Why does the binding of magazines and books always occur on the left side? Why do we read left to right? Why do we print in landscape rather than portrait for text documents? All these parameters are based on rules for text-based communication. The rules don't change, so we find it easy to communicate and receive information. We don't have to constantly relearn how to read a magazine.
So why has digitally based media had difficulty replacing traditional media? Hmmm, good question. It's because the rules are still being defined. Interactive design rules are in a state of flux, and we are slowly defining them. Items such as consistency and continuity help make digitally based media a contributor rather than an inhibitor of the information we're trying to convey. It's important that we follow the rules that we know about good interactive media so that our information tools effectively communicate. It's the information at your site that people are interested in, and it's your job to make it as easy for them to find as possible.

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:

<!-******************** 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> 
<!-******************* 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:

Q&A

Q:
I thought you could use full-screen graphics. Why shouldn't I use a full- screen graphic on the splash page?
A:
Speed is the major disadvantage to using full-page graphics. A majority of the users in the cyberdomain are using modems to access the Web. Long wait periods can significantly deter users from letting a site completely load.
In addition, full-screen bitmaps are generally used as clickable navigation maps. You click somewhere on the map and you jump to a new document. This only works if your browser is set to view inline images. If this option is turned off, you have no means of navigation. As a modem-connected Net user at home, I find full-screen bitmaps used for navigation a nuisance.
Q:
What are some ways that I can increase the consistency across my pages?
A:
One of the most significant ways to create consistency is to use the same navigational items in the same place on each page. A second means is to use horizontal rules, the <HR> tag, in the same place or in the same way throughout your pages. Also, similarly colored or tiled backgrounds and consistent font type and size characteristics contribute to consistency.
Q:
Can I put as many buttons as I want on my page? Does it matter where I put them?
A:
Yes, you can, but why would you? Keep your navigation items in the same location throughout. Most people don't like to hunt for the button to navigate through your site. Remember, it's your information they want.
Q:
When I'm learning how to design my pages, is it okay to use the document source option to view source code at other sites? What about saving pages from the Net and incorporating my own elements into the existing code?
A.
This is a delicate question, as is any question that touches near U.S. copyright laws. I am frequently asked, "Can I save other people's pages and incorporate my own data into them?" First and foremost, you cannot use graphics from Web pages created by others without their written permission, but you can view the code behind someone's page to learn for yourself how to use a particular tag or function. Normally, code structures that are in the public domain, such as how to do a table or form, can be viewed and re-entered for use in your own page. One of the best ways to learn good programming is to view code programmed by someone else. It's particularly advantageous when you can't figure out what is wrong with your page, such as a small typographical error or something that is uppercase instead of lowercase. (See additional comments on copyrights in Chapter 3.)
However, code that is not in the public domain is considered intellectual property. This is usually special code such as Java or JavaScript, but it can also include some unique HTML coding schemes. Generally code that is not public domain begins with a copyright comment. This means that the person who has designed the page deems it as his or her own intellectual property. I use one simple rule that has kept me out of trouble as it relates to copyright infringement, no matter what I am doing: If there is any question about whether it is public domain, ask for the creator's permission.