This chapter is from the book
This chapter is from the book
This chapter is from the book
Web Design Rules
The Five Basic Rules of Web Design state that a web site should be:
Easy to read
Easy to navigate
Easy to find
Consistent in layout and design
Quick to download
In other words, your web site should be easy to use by your target audience.
To have a web site that your target audience will like and that directory editors will approve, these rules all need to be followed. The most successful web sites generally follow these guidelines. What is good about these rules is that they apply not only to directory submissions but also your target audience.
It is important to understand that these rules are interrelated. For example, let's say that your home page has a #1 position in one of the major search engines for your targeted keywords, and people click the link to your site. If your site designer has placed a considerable amount of graphic images, animations, and scripting on your home page, causing it to download slowly, most people will not wait for that page to download. Thus, a perfectly good #1 search engine position can be wasted if your site designer does not consider download time, or any of the other design rules.
Rule #1: Easy to Read
I hear people say all the time, "Of course my web site is easy to read. I'm looking at it right now and I can read it." It would be great if every single person in your target audience were using the exact same computer screen, the exact same browser, the exact same Internet connection, and the exact same computer you are using. In all likelihood, your target audience is using a variety of different computers, monitors, Internet connections, and browsers.
In fact, no one knows how directory editors are viewing your web site. They might be using a notebook computer. They might be using a dial-up connection or a high-speed connection. They might be using a Macintosh computer. Site designers need to accommodate as many platforms, browsers, and Internet connections as possible.
Thus, as a general rule, before you submit your site to the major directories, every single item on your web pages needs to be legible on both of the major browsers (Netscape and Explorer) and on the two types of computers (PCs and Macintosh).
All HTML text should be legible with the graphic images turned on and the graphic images turned off (for the visually impaired users). That means producing HTML text, background images, and text in graphic images with a high color contrast. (The highest color contrast comes from using black and white.) Your site designer should not use backgrounds that obscure your text or use colors that are hard to read.
Your site designer should not set your text size too small (too hard to read) or too large (it will appear to shout at your visitors). If a site is specifically designed for visually impaired users, the text size should be adjusted accordingly.
All text in graphic images should be legible. High color contrast and font/typeface selection are very important for legibility in graphic images. Generally, producing graphic images that use text in a sans serif ("without feet") typeface results in better legibility. See Figure 1.13 for examples.
){kind=small}
Figure 1.13 Serif and sans serif typefaces.
Animations (both GIF and Flash animations) should not move so quickly that your target audience is unable to read them. If your target audience must watch the animation loop three or more times to view the full message, the animation is moving too fast.
When your site design or redesign is in the template stage, view it on different browsers, platforms, and Internet connections. Go to a library or a store (such as Kinko's) that has different computers than you have and view your site. Better yet, have other people view your site (they will probably be more objective) and tell you if everything is legible. Do not rely on your singular, personal perspective to determine your site's legibility.
Rule #2: Easy to Navigate
"Easy to navigate" means your target audience should know where they are at all times when they visit your web site. If they get lost, they should be able to go to a site map, a help section, a site search, or a home page from any page on your site to determine (a) where they are, (b) where they might want to go, and (c) where they have been.
Directory editors are always thinking about your target audience. If professional directory editors, who are generally seasoned web users, are having a difficult time navigating your site, your target audience is likely to have a difficult time navigating your site as well.
All your hyperlinks should be clear to both your target audience and to the directory editors. Graphic images, such as navigation buttons or file tabs, should be clearly labeled and easy to read. Just as indicated in the First Rule of Web Design, your site designer should select the colors, backgrounds, textures, and special effects on your web graphics so that they are legible on the major browsers, computer screens, and platforms.
Colors in your text links should be familiar to your target audience. Blue, underlined text usually indicates an unvisited link and purple/maroon, underlined text usually indicates a visited link. If you elect not to use these default colors, your text links should be emphasized in some other way (bold, a different color, different size, set between small vertical lines, or a combination of these effects). Your hyperlink colors and effects should always be unique—they should not look the same as any other text on your web pages.
Many site designers like to take the underline out of hyperlinked text to be more creative. If you are designing a site that targets the more experienced web user, this design technique should not be problematic as long as the hyperlinked text is unique. However, if your target audience is not web savvy, it is best to keep the underline on the hyperlinked text.
Some directory editors are volunteer editors, and these editors are generally selected for a particular category because of their expertise. You do not know whether volunteer editors are web savvy. Thus, it is important to select your navigation scheme with great care.
Rule #3: Easy to Find
Rule #3 has multiple meanings. Your web site should be easy to find through the search engines. In addition, the individual products, services, and information that you offer should be easy to find after your target audience arrives at your site.
For maximum online visibility, your web site should be easy to find on the search engines, directories, and popular industry-specific web sites. For example, download.com is an industry-specific site for free software downloads. If your company offers a free demo of a 30-day trial of your software, having a link to your site from download.com can significantly increase your site's traffic. Other popular, industry-specific sites (in the fields of healthcare, finance, manufacturing, and so on) will link to your site.
Internally (within your web site), the products, services, and information you offer on your web pages should be easy to find after your target audience arrives at your site. Generally speaking, your target audience does not want to land on your home page and hunt around for information. People prefer to go directly to the web page that contains the information for which they are searching. If they cannot go directly to the web page(s) containing the specific information, they need to find that information within seven to eight clicks, preferably less. If they have to click more than that, they might get frustrated and leave your web site.
After your target audience finds the page that contains the information for which they are searching, they need to see that information "above the fold," or at the top part of the screen. Even if people can't immediately see your product/service on top of the screen, they need to know that what they are searching for is on a particular web page. People should not have to scroll to verify that the information for which they are searching is available on a web page.
A Frequently Asked Questions (FAQs) page is an example in which web site designers do not use the "above the fold" strategy particularly well (see Figure 1.14). Let's say you place ten questions on your FAQs page, and the information that your target audience is looking for is the answer to Question #4. Suppose your site designer formats your FAQs page in a Question 1–Answer 1, Question 2–Answer 2 format, as shown in Figure 1.14.
)
Figure 1.14 FAQs page with a Question-Answer, Question-Answer format.
Let's assume that the person viewing this page is a domestic violence victim with children. By looking at the top of this screen, this person is not able to determine whether parent/child interaction is allowed at the shelter. In other words, an answer to an important question might not be available on that web page or site.
However, if all your important questions are placed at the top of your screen, your target audience will know that the answer to a question is available on that web page or site, as shown in Figure 1.15.
)
Figure 1.15 A properly formatted FAQs page makes important information
about the web page available at the top of the screen.
All your FAQs pages should be formatted in this manner. Not only is this particular strategy beneficial for reaching your end users, but also it is beneficial because this format is a search engine–friendly layout.
Making your main products and services easy to find is important to directory editors. As stated, if your home page states that your firm specializes in three particular services, those three services need to be obvious on your home page, in terms of graphic images and HTML text. If directory editors, and ultimately your end users, have to hunt around too much to determine what your company specializes in, you did not make your services easy to find.
If the information on your site is password protected or requires some kind of plug-in to get to, directory editors are unable to determine whether your site delivers the information you claim it does. Make sure some of the information available on your web site is not password protected so that directory editors (and your target audience) can see that your site delivers the content that you claim it does.
The last item that should be easy to find is your company's contact information (mailing or physical address, telephone number, fax number, and contact person's email address). Directory editors in particular will search for this information on your web site.
In general, your contact information should be in one of four places:
A header or footer
The About Us page or section
The Contact Us page or section
A Locations page or section
The most likely place directory editors are looking for your contact information and the correct spelling of your company name is your About Us page. Thus, even if you do provide contact information in other places, it is still a good idea to always place that information in your About Us section—especially if you place your contact information in a footer because many end users do not scroll to the bottom of a web page to view information.
Rule #4: Consistent in Layout and Design
Layout means the use of HTML code, scripting, and white space on your site. This is screen "real estate" where you place your text, graphic images, and navigation schemes. Consistency in layout design helps your target audience navigate your site and feel comfortable doing business with you.
Design means the use of graphic images, the special effects on your graphic images, fonts and typefaces, and the color on your site. Many aspects of the design should be repeated throughout a web site. The fonts, typefaces, and colors used in the main body text, hyperlinks, and headings should be the same on every page of your site.
If you are showing photos of the products you offer, the photo dimensions (length and width) should fall within a short range. Horizontal photos should have the same dimensions and vertical photos should have the same dimensions. If you use a drop shadow on your product photos, you should use drop shadows on all your product photos.
Graphic images and text should never be placed on a web page randomly or arbitrarily. Everything should have a visual connection with other items on a web page. Related items, such as a main navigation scheme and a secondary navigation scheme, should be grouped so that they are seen as a cohesive group rather than as unrelated items.
Making two navigation schemes visually different creates visual contrast but also shows how they are interrelated. For example, a main navigation scheme can be shown at the top of a page using a set of specific colors, and the secondary navigation scheme can open up on the left side of the screen with a different set of colors that blend well with the main navigation.
Figure 1.16 shows an example of a web page that shows visual contrast and connectivity. This is also a well-constructed web page for search engines, directories, and the target audience.
)
Figure 1.16 Sample of a well-constructed web page.
Note the following in Figure 1.16:
File tab graphic images link to the home page and site map, in the event the target audience gets lost or needs to reorient themselves. This set of navigation images is in the same place on every web page.
Main navigation buttons change color when end users are visiting that section of the web site.
A secondary navigation scheme, or subnavigation, opens up when end users click the link from the main navigation. Text in the subnavigation repeats the text in the main navigation to further indicate that the navigation buttons on the left are a subset of the main navigation.
Breadcrumbs indicate which page the end users are currently visiting.
A main heading (which can also be a graphic image) indicates which page the end users are currently visiting.
Subheadings (graphic images) highlight the main features of this section of the web site. Arrows on the subheadings give a subtle hint that they are hyperlinks.
Text links at the bottom of the page correspond to the main navigation buttons. These links indicate which pages the target audience has already visited. The hypertext link colors remain similar to a browser's default colors because the target audience is not considered to be as web savvy as people who regularly work on the web.
Rule #5: Quick to Download
Directory editors look for web pages that download very quickly, preferably within 30 seconds on a standard dial-up connection. Of course, there are a few exceptions to this guideline, such as pages that specialize in online video games. Then it is understandable that a web page might take longer to download because plug-ins such as Flash or Shockwave must download first for the game to display.
Most pages do not fall in the "video game" category, so it is best to minimize your pages' download time, particularly your home page. The following are some general guidelines to follow that will decrease your pages' download time:
Use animation sparingly: Animation should be used only to call attention to important sections of your web site. Graphic artists who specialize in animation can safely use animation on their pages as long as they are useful.
Follow the KISS rule: Keep it simple, stupid. You want customers to notice the products, services, and information you offer on your web site, not your pretty site design. If your target audience notices your site design before they notice your content, the design is not effective. A person searching for "accounting software" does not type the words "pretty site design" in a search box when he or she is looking for information about accounting software.
Use smaller graphic images, called thumbnails, for product photos: On your Products pages, a gallery of small photos will download more quickly than full-size photos. Give your target audience the choice to view the larger photos after they show interest.
To get a faster download time, always create separate, unique thumbnail-size graphic images from their larger versions: All graphic images should be resized in graphic image software, not with HTML.
Use the same graphic images on multiple pages of your site whenever possible: Using graphic images consistently also lends to continuity in your presentation. For example, placing your logo on every page of your site (with a hyperlink to your home page) helps with both navigation and branding, and it helps your target audience know whose site they are visiting at all times. The logo image will download only once because it will be saved in the browser's cache. Introducing new graphic images on each page requires time-consuming downloading as a visitor moves around your site.
Understand the variety of customers in your target audience: Different customers will tolerate different download times. If you have graphic design or an online game site, your customers are more likely to wait for pages to download to experience your creative flair. However, if you are selling machine parts to busy manufacturers, ease of access to valuable information should be your primary concern.
Download time is not only important to your target audience. It is also important for search engine visibility. When a search engine spider requests a web page from your server, if the page takes too long to download, or if your server does not give the page to the spider quickly, the search engine might not add the page to the index.