Part 3: Web Design Guidelines
Planning Guidelines
As soon as a website is loaded, it should show what's available and how to get it without having to jump through unusual hoops. Planning can help with that. In fact, designing a website is much easier with a plan in mind, and a good plan will turn the entire process into a series of simple 1-2-3 steps.
The Flat Plan
The simplest plan for a website entails a series of webpages linked together from a single webpage. This basic "flat plan" is sufficient for websites with no more than a couple of pages, but it's not an appropriate plan for websites with hundreds or thousands of webpages.
The Multi-Level Plan
A different kind of "multi-leveled" plan links to webpages stored in multiple folders or directories within directories. But when these hierarchies are built too deep, finding information is more difficult than it has to be. No one wants to click though more than three to five links just to access a webpage, and that's exactly what happens on websites that bury content.
The Perfect Plan
The best structure is a combination of the simple plan and the multi-leveled plan in which information can be accessed within three clicks or less. A search tool can help visitors find information that must be organized in deeper levels.
In the illustration below, you can see how this combination looks on a flowchart. Each row of webpages represents a level, and this website's older archives are located on the 5th level. Instead of having to click through four pages or levels (home page => members page => discussions page => archives page) to access this website's older archives, visitors could search for it through a form we provide on the website's home page.
Combination Of The Simple Plan And The Multi-Leveled Plan
Sample combination of the simple structure and the multi-leveled plan
Web Design Tips
Consistency
To maintain a consistent look and convey a serious business attitude, every page in a website should always display the following elements:
- Business Name, Contact Information, and URL. When visitors print a page, they can readily recall where the page came from if this data is displayed on each and every page.
- Logo. Repetitive display of a company's logo helps with the branding process.
- Font (Typeface). A consistent font also helps maintain a consistent look. Websites or pages that display several different fonts give the impression of being haphazard and unstable rather than focused and serious.
- Update Date. The date (and time) that reflects when the content on a page changed can help visitors determine how fresh the content is. Fresh content is particularly important for businesses who need to convey time-sensitive materials (product availability, pricing, etc.)
- Copyright Information. This should deter a few visitors who might want to steal exclusive material.
Navigation
Like the elements described above, navigation elements should also appear on every page -- especially since visitors can enter any part of a website, including its home page. Through a search engine query or through a link on another website, a visitor could land on a product page or mission page for example. With a navigation system on each page, visitors can easily access the home page regardless of where they entered the site.
Common Navigational Systems
There are two common ways to display a navigational system on each page. One way uses graphics and the other way uses plain text. Known as "navigation bars," these systems are simple links to the main areas of a website.
Typically, graphical navigation bars are displayed on the top of each page and textual navigation bars are displayed either on the left side or bottom of each page.
Sample Graphical Navigation Bar
Sample Textual Navigation Bar
(The picture above was taken from Yahoo.com)
The Multilevel Navigation Bar
For massive websites that have multiple levels of major sections, a hierarchical navigation bar is best. This kind of navigation provides access to important sections beneath each hierarchy and shows visitors how the website is organized.
Sample Multilevel Navigation Bar
TIP: Use "top-of-page" links at the bottom of long webpages. These links eliminate the need to reverse-scroll back to the top of lengthy content because when clicked, they automatically take the visitor to the beginning of a webpage.
The Sitemap
Sitemaps are webpages that resemble book indexes. They link to all the pages of a website in an organized way and they're really helpful for visitors who want to interact with something that resembles an index rather than with something that resembles a table of contents.
Links
Text Links
In the past, it was rather easy to recognize hyperlinks on a webpage because they were traditionally blue and underlined. Today, hyperlinks can be any color, and they may not be underlined at all. With a little advanced scripting, today's hyperlinks can move, jump, swirl around, and do a little bit of everything short of inserting a coin into a jukebox and selecting a song to dance to. While that's pretty fancy, they can be hard to locate on a content-dense page.
We recommend that you stick to the traditional format so that visitors can readily distinguish a link from other text, and so that navigation doesn't require them chase anything around the screen.
Image Links
At times, images make better links than text links -- especially when they help visitors who speak a different language navigate around a website. As an example, consider a small image of the envelope. Anyone from any country can easily identify the envelope as a representation of email. A small image of a shopping cart indicates a check-out center, and a small image of a telephone indicates contact information in any part of the world.
Use image links with discretion and make sure that they indicate the kind of content it presents.
Color
Color Schemes
The color scheme of a website sets its tone even before visitors begin to read what the website is about. In general, light, muted colors are appropriate for business or conservative websites, and pastels accented with earth tones are just fine. The further that a color scheme deviates from this combination, the more risky it is in terms of making conservative, professional impression.
Color Meaning
It isn't practical to apply the meaning of every color to a website because color meanings change from culture to culture and country to country. In the U.S., blue is often interpreted as "trusting," while in Korea, "trust" is pink. But a pink website that appeals to an American military audience is entirely inappropriate! So, to make color meaning work, you'll need to determine where the bulk of your visitors come from, and then use a color theme that reflects the taste and preferences of that audience.
Web Safe Colors
Even still, some web browsers can only display a small number of the 16 million color combinations that we've been blessed with thus far. Problems occur when a webpage is designed with a specific color, but a web browser can't reproduce that color on a visitor's computer. To avoid this common problem, design a website with web safe colors. Web safe colors are hues that will display in any web browser on any computer.
TIP: Most color palettes in WYSIWYG HTML editors offer web safe colors!
Text
At first thought, one would think that applying text to a website would be a pretty straightforward task. But experience has shown that visitors prefer text that follows specific formats.
Preferred Format
Visitors tend to scan online text rather than actually sit and read it verbatim. Blame it on the fleeting and swift nature of the Internet if you will. The fact is that most online users will run away from a website that resembles the content of college-grade philosophy text.
Online readers want to view text in a column that's broken up into easy to read chunks and separated by plenty of white space (wide margins), bullets, and big, summarizing headlines. They also want text that gets straight to the point. Long essay-like prose just doesn't jive with the high-speed pace of the Internet, nor does it work well for today's demanding and speed-conscious consumer.
Common Fonts
Be aware that not everyone has the same fonts installed on their computer. A web browser can only display the fonts that are installed in a visitor's font folder, so when it encounters a request for a missing font, it will make a substitution. The most common fonts are Arial, Verdana, Comic Sans MS, and Times New Roman.
Varying the appearance of these fonts with different sizes, colors, and bold or italic attributes should be enough to offer sufficient visual variety.
TIP: Try not to underline text since visitors will interpret it as a hyperlink and will try to click it. Reserve this formatting for actual links.
Images and Multimedia
Images
We talked about images and multimedia earlier; however, here we want to introduce the two most common types and how to properly use them.
To improve the time it takes to load a webpage, you should design a site with small, compressed image files. Both the GIF image and JPEG image formats are compressed, and although they both display imagery just fine, each has their own purpose.
GIF images are unique in that they can be animated and they can have transparent backgrounds. JPEG images are unique in that they compress photographs better than GIF files and they retain a photograph's original qualities better than GIF files.
Still, no matter what you do sometimes, a large image just doesn't seem to compress as small as you'd like it to. Optimizing images is one way to reduce large images even more and there are numerous software programs that can help.
TIP: This link points to a large number of GIF optimizers via our favorite search engine: http://www.yahoo.com
Another way to reduce the time it takes to load a webpage is to display thumbnail images the way that catalogs display small products pictures. Thumbnail images are smaller versions of larger images which are linked to their bigger forms. To see the full form of an image, visitors can click on its small and quick-loading thumbnail version.
Multimedia
Like images, sounds can increase the time that it takes to load a webpage and playing them in the background should generally be avoided. Visitors should always have the choice to listen to audio recordings, midi music files, and streaming audio through a link that plays them, rather than being forced to download and then hear these files in the background.
Video files can present the same loading problems as large image files and sound files so again, visitors should always have the choice to view them rather than being forced to download and then watch them. Even though the technology behind video is improving in both speed and compression, they're still a burden on those with slow Internet connections.
Frames
Frames divide the visible area of a web browser into sections and then load different pages into each area. They're an extremely useful way to organize and present multiple sections of a website, however overkill tends to overwhelm visitors (and their browsers) by presenting too much information at once. They also don't index well in search engines or easily archive into a visitor's bookmark or favorites folder. As a result, they're pretty much avoided by all.
We don't particularly have anything against frames other than the few minor problems that they cause because when used correctly, they really can make interacting with a website easy. If you find frames an irresistible lure, seek the help of a website frame professional so that they avoid the problems described above.
Forms
Form elements are what make websites come alive with interactivity in its truest sense. Without them, visitors can do little more than read text, click on a few links or watch a video or two. When a website employs form technology, it can ask visitors for information and then react to that information.
Visitors supply information through text-input boxes, drop-down lists, option buttons, and more. Form-enabled websites in turn take that information and send it to their databases for storing, or they send it to the websites' headquarters for processing.
There are many reasons to use forms on a website, but some of the most common reasons are to obtain feedback, register new users, or process orders.
All WYSIWYG HTML editors should provide the tools needed to build an interactive web form.
Accessibility
One part of web design that's largely ignored is its accessibility -- that is, it's ignored until it becomes a big legal issue exploited in the media. Essentially, accessibility makes the same content available to non-handicapped persons equally available to those with a disability of some sort. Equal access is just as important online as it is offline, and disability watchdogs are adamant about enforcing their rights to appreciate the Internet just as much as anyone else.
From any webpage that's coded properly, a disabled person can use special software to translate what's on each page into speech, hard-printed Braille, or some other usable form of content. Although the intricacies of designing an accessible website are beyond the scope of this book, you are well advised to learn how to make your site an equal access site, because certain legalities may require it. At best, an accessible website should accommodate visitors who may be:
- blind
- partially blind
- color blind
- unable to use the hands
- deaf
- partially deaf
- prone to flash-induced seizures
- learning disabled
TIP: Visit The Web Content Accessibility Guidelines 1.0 to learn "...how to make Web content accessible to people with disabilities. The guidelines are intended for all Web content developers (page authors and site designers) and for developers of authoring tools." http://www.w3.org/TR/WAI-WEBCONTENT
