Flow

Artifact Consideration in Creating Commercial Web Sites, Viewers tend to quickly scan and then read, making many passes through information, not just one. Their first scan looks at the overall shape and patterns, while further scans begin to examine the content more deeply.

A good Web page design leads the viewer to the starting point, and then distinctly through the page in the best order for maximal understanding.

Keep in mind that viewers see big, colorful, or bright elements of the page first,

and then follow the normal left-to-right and top-to-bottom pattern.

Harmony

 

Your Web site should be harmonious, in other words, your individual Web pages should look as if they belong together.

You can do this by making your individual elements (graphics, type, white space) sized, colored, placed, and used the same way on each page on your site.

You should also employ the same overall structure for each document on your site.

This consistency helps guide viewers through your information and gives them a sense of where they are on the Web (they know they are on your site and haven’t jumped to New Guinea accidentally).

There is also an issue of the harmony between the graphics and the text. Try to match the art to the copy, and vice versa. The purpose for both is to send a message

(more on this in Chapter 12, “Working with Graphics”).

Mocking Up

 

The first step in mocking up your Web site is to establish the basic layout map for your pages. Do this by gathering representative samples of your text (if you have any; if not,

just guesstimate your average text length with nonsense text, often called “greeking”),

along with your logo art and any additional graphics you will be using

(if you have none, estimate the average size of your graphics).

Think of each of these elements of your page as blocks—your goal is to arrange these blocks in the way that is most pleasing to the viewer.

Experiment with various arrangements. We do this on a white board with tape on the back of our blocks so we can rearrange them, but you can use any method you like.

You are trying to arrange a basic map that will apply to your entire Web site.

Of course some pages are larger than others, or require more graphics,

but the basic placement of your blocks should stay consistent throughout your site.

Determine where the graphics and text blocks will be placed on your documents, and decide upon the position and font style (size, treatment, and color) for page titles, subtitles, and navigation links. Once you’ve done this, you’ll have a starting point for each of your pages.

Keeping Continuity

 

Consistency and predictability are essential characteristics of any well-designed Web site. They are key elements in helping users in identifying the origin of Web documents, providing predictable access to the interactive elements of the site, and giving the viewer a harmonious graphic design scheme as they move about your system.

Navigation Strategies

 

The amazing capabilities of the WWW and other highly graphical, interactive media (such as multimedia presentations) have led many “information experts” to completely reject print standards as a guideline in designing Web systems. As we’ve said earlier, you should not limit yourself to traditional media constraints in designing for the WWW, but we heartily disagree with anyone who believes they can chuck out thousands of years of communication refinement just because something is new and unfettered.

The fact of the matter is, you are trying to communicate something. To do this, you have to speak in the language of your intended recipient. Hypermedia and interactive design are, without a doubt, much more powerful than simple text in presenting information. However, your audience is far more used to getting information from print than in any other form except the spoken word (which includes television and radio), and several lifetimes of experience have gone into refining this medium.

---

Note

There’s a personal information system that takes handwritten input, stores it indefinitely without the need for external power, retrieves the information instantly, and fits in your pocket. It’s called a piece of paper.

---

It is part of your job to educate your readers in the use of hypermedia, and to do this, you must reference their existing knowledge of information technology (which will vary from audience to audience, and reader to reader).

If you completely disregard communications standards, your chances of confusing and thereby losing a viewer increase exponentially. This is certainly not to say that you shouldn’t make use of the capabilities of the WWW, but that you should understand that many of your viewers will be novices to the medium, and that you will need to take this into account in designing your pages.

The biggest problem in hypermedia is that the sheer complexity of the links and navigation are extremely difficult to put into a conceptual model.

As you’ve seen,

we like to diagram our page structure as hierarchical (with different levels and sublevels). The truth is,

however, a diagram that truly reflects all of the possible links and paths through even a simple WWW system looks incredibly complex and often is impossible to diagram in two dimensions.

What we are dealing with is perception.

We design our systems in hierarchical diagrams because we need to work with something that both our clients and ourselves can understand. This is very important, obviously,

but there’s more. We also need to view things from the Web site visitor’s perspective, and if we have a hard time conceptualizing a Web system’s structure,

we can be pretty sure that it will be more difficult for the viewer.

You want your viewer to perceive your system as being straightforward and simple, regardless of how complex it really is. This is a double-edged sword in that you want your viewers to have the idea that they are working their way through your system and information in an orderly fashion,

but you don’t want to limit them to a structure where they may be missing key points of the message.

This is,

perhaps,

your most difficult task in designing a system, in that you want your viewer to perceive their trip through your system as being a linear progression from one page to the next,

when the fact is that they are bouncing all over the place as they move from page to page to page.

The best way to accomplish this is to provide clear navigation throughout your page systems

and to have at least a “HOME” link on each page

(never, never leave a viewer at a dead end, where they will have to work their way back through your system in order to go ahead).

If possible,

provide navigation on each page that includes the key elements and areas of your message—

even if this means that the viewer will have the ability to jump around without viewing each section in its entirety.

It’s better for someone to get a partial view of the overall message than to get a full view of the partial message,

and then leave thinking they’ve seen it all.

Headers

 

The use of headers, either textual, graphical or (best) both, tell your viewers where they are within your system. The best way to do this is often to go back to the hierarchical model and label the page by set and subset.

For instance, if a viewer is reading about a certain product,

you might represent this textually on a page by using headings such as