|
The first step in designing a successful Web site is to surf the net yourself. Take your favorite browser out and visit as many different pages and sites as you can.
Take notes about what makes a site easy to navigate? What makes a site interesting enough to explore, rather than surfing on by? Create a list of the good and bad points of each site you visit.
Don’t rely on big name sites as examples of good sites. Well-known sites are not necessarily great examples, since name recognition is generally what generates their traffic. Many such sites are popular in spite of their design.
On my first major exploration out onto the net, I was struck by a general lack of good sites. There are more good sites out there today than when I first looked back in 1994. Unfortunately, there are even more bad sites out there now. I did however make a list of qualities that often helped a site.
- Compelling Content
The sites that were the most interesting where those that had something interesting to say. This seems rather obvious but I was appalled at all the elaborate sites I encountered that were a pile of fluff, void of any significant content. It’s critical to first find valuable content that someone would be interested in, before even thinking of building a Web site. Bounce each and every element of content off this simple question: “Does anyone care about this?” The more people that care about that content, the more successful the site will be.
- Well Defined Purpose
A Web site is nothing more than a new form of communication. Communication that lacks purpose is nothing more than babble. You should be able to state a site’s purpose in one sentence or one paragraph at the most. This purpose should also be evident in the site itself, if not actually stated on the site.
- Tight Focus
It is also important to keep the site tightly focused. The more focused a site is, the stronger the message will come through. The more a site rambles about many topics, the weaker each individual message will come through the noise.
- Strong Organization and Structure
Every form of communication needs a strong organizational structure to be effective. Web sites are no different. The site should be organized into a few major sections. Each major section can be further broken down into well defined and organized sub sections. The sections should also be relatively balanced.
- Easy and Effective Navigation
If the site is built on a solidly organized structure, then navigation should be relatively easy to implement. A user should be able to immediately sum up the entire content of a site. They should be able to easily access any section of the site they wish. They should always know exactly where they are in a site without getting lost. They should also be able to quickly go to any other section of the site just as easily from deep within the site as they could upon initial entry to the site.
- Targeted Audience
You cannot design a site that is tailored to everybody in the world. You need to decide who the target audience is. Then with that in mind, the site should be tailored to that audience. If your audience is the low end consumer, then you should build the site for cheap PC’s, small screens and a 56K modem. If the audience is on the high end, then you should tailor the site for more powerful platforms like the Power Macintosh, fast PC’s or workstations, large monitors and broadband.
- Good Clean Design
The visual layout and design of the pages are also very important. Though a good visual design cannot rescue a site that lacks the other key points already mentioned, a bad design can cripple a site in spite of the other points. Navigational areas should all be easily recognizable and consistently located on each page. In most cases a simple design is preferable to a complicated design.
|
|
|
|
 |
On my first major exploration out onto the net, I had no trouble making lists of problems and things to avoid when designing a Web site. I’m amazed how many sites still out there today fall victim to these problems. Even many of the major, high profile sites are plagued by some of these typical troubles. Below is a list of common pitfalls to avoid.
- CLICK HERE Syndrome
You should NEVER put the words click here on a site, EVER! People are not morons. Your site is not the very first Web page that they have ever seen, so they know what an HTML link is and they know that they can click it. The biggest problem with the click here syndrome is that it defeats the entire purpose of HTML links. If you quickly scan a page plagued with this disease for links, you see nothing but many click here links... This gives you absolutely no idea where the links go. You must then dig through the rest of the text to figure out where each click here link is linked to. This is also extremely annoying when reading a printed Web page off-line that is littered with click here links. Simply make the subject of the link be the link. Reword links to be self-descriptive.
Rather than falling victim to this: To see samples of our work, click here.
Reword it like this: To see samples of our work, visit the DreamLight Virtual Gallery.
- Dead End Alleys
Avoid leading the user down a path that is a dead end. The user should not have to rely on their browser’s back button, or the site’s navigational controls have failed. They should be able to do all navigation using the HTML links right on the pages. They can always use their back button on their own if they wish, but as a Web designer you shouldn’t force them to rely on it. They should also not be forced to keep jumping back to a home page or top page before they can go somewhere else on the site. This problem is easily avoided by placing major section links on ALL pages of the site. That way, the user never reaches a dead end.
- Unknown Orphans
Each page should be tagged with identification information. A simple mailto: link is not enough. Both the site URL, and e-mail address, should appear in visible text on the page. This is in case the page is printed or saved as a text file to be read off-line. Of course the information can also be composed of active links as well.
Something like this should suffice:
Jim Maroney: jm@HeresMyDomain.com
HeresMyDomain.com
- unWorld Wide Web
Don’t forget the World in World Wide Web. Since US and European dates are ordered differently, all months should be spelled out or abbreviated.
Use: Jan. 5, 2001 rather than 1/5/01 which is too easily confused.
- Cumbersome Image Maps
Don’t rely on large image maps for the main navigation of your site. These can take a long time to load and force the user to wait until they can see the areas to click on. The worst case of this is a large image with buttons running along the bottom. If this is loaded from top to bottom, as in standard GIF or JPEG format, the user can’t go anywhere till the buttons appear. Whenever using such an image map, save it as interlaced or progressive. Also give the user simple text links in case they don’t wish to wait for the map to load.
- Pigeon Sites
Some sites are so fragmented to avoid making the user use a scroll bar, that there is no useful information left. The user wastes so much time jumping from screen to screen, that they can’t get much useful content out of it. If any useful content is found at a site like this, it is usually buried so deep within the site that many users give up before reaching it. Segmenting a site too much, makes it very difficult to print out the content as well. These sites are what I typically refer to as pigeon sites, since they are usually full of screens to click through and peck at, without much substance.
Some Web designers have cited studies which seem to show that users are unwilling to scroll to the bottom of a page. What they don’t realize, is that the underlying reason is probably because the sites lack any interesting content that is worth scrolling through, not because the users “don’t like to scroll.” Of course they don’t want to scroll through boring content. So they click, click, click, looking for something more interesting. These types of studies probably have more to do with how to generate clicks for advertisers than they do with designing quality Web sites. Pigeon sites are a byproduct of the mainstream media’s insistence on reducing everything to “sound bites.” ;-)
If your content is compelling, users will happily scroll.
You scrolled down to read this didn’t you? ;-)
|
|
|
|
|
Every element added to a Web page should help strengthen the message in some way rather than distract from it. When this simple rule is forgotten, sites can quickly spin out of control. Avoid the “Neat-O” syndrome of putting something on a site just because you saw it somewhere else and thought it was neat. You won’t have to look far before you’ll find many examples of these common pitfalls that follow. These are only some of the more glaring violations.
- Neat-O Animation
Don’t add unnecessary animated GIF’s to Web pages. Animation catches the user’s eye first. It is only appropriate to add impact to a very important element. We use a simple flashing banner to inform users of important news flashes on our site. Avoid using animation for relatively unimportant elements such as horizontal rules, e-mail buttons, download browser buttons, etc. Only use animation for something that is so important that you don’t want the user to miss it. Keep any animated elements limited. Too much animation on a single page will make people dizzy. ;-)
- Neat-O Backgrounds
Don’t add a background to Web pages just because you can. A background should only be added to a site for specific reasons. The background you see on our site is the background that is used on all DreamLight’s stationary and business cards. It’s part of our corporate identity. When using a background, be sure it is a low contrast element that is at the opposite value spectrum as your text. A background should complement the identity of the pages without interfering with the readability of the text. If your pages may be printed by a user, then use black or dark text on a white or light background. Don’t use bright, garish colors as backgrounds because they make text very difficult to read. I have seen more backgrounds detract from sites than improve sites.
- Neat-O Blinking Text
Avoid making lots of text blink, since it is distracting and can be very difficult to read. The best use for blinking HTML text is for a simple word or two to call attention to something important such as in the following example list. Internet Explorer doesn’t even recognize the blink tag anyway...
Volume 4
Volume 3
Volume 2
Volume 1
- Neat-O Colored Text
How difficult is it to read this long line of colored text?
Avoid colored text. If used at all, it should only be used sparingly for a few unique words rather than in paragraphs of body copy. Make sure that any colored text contrasts with the background color enough to be readable. Avoid putting multicolored, garish text all over a page. Also avoid making all the text bold, italic or oddly sized.
- Neat-O Sound & Music
Don’t put music or sound on a site unless it is really necessary and appropriate. It is annoying, especially when a page plays a continuous loop automatically whether the user wants to hear it or not. The only use of sound you should make is for very subtle background ambient sounds, if you feel them necessary. Sometimes sound or music is appropriate if they are part of an interactive game or on a music or sound effects site. In most cases however, sound and music make Web pages more annoying rather than more interesting. Inappropriate uses on the Web are equivalent to annoying elevator Muzak.
- Neat-O Frames
In all my Web travels, I can honestly say that I have not yet found a single use of frames that is truly justified from a user’s perspective. Sure the advertisers would like to keep their banner in your face as long as they can, so maybe frames are justified if you like to support advertisers.
From a user’s perspective, frames are a detriment to a site rather than a benefit. First of all, frames limit your screen real estate. When viewing a site on a small monitor, frames prevent the user from using their entire screen to view the most important element, the content. Secondly, frames mess up bookmarks. Go to a site with frames and bookmark a page. Later return to that bookmark and you may be surprised. You’ll often get the content that was in the frame without all the other frames which are often used for navigation. Sometimes you’ll get a screen with nothing but a banner or buttons and no content. Thirdly, frames make printing difficult. Ever hit print on a site with frames and end up staring at a printed banner, or navigation buttons only, when you thought you printed the entire page? Separate sections of a framed page are really separate HTML documents and which one happens to be active at the time will affect what is bookmarked or printed.
Frames were initially designed as a hack and in my opinion remain a hack to avoid. Nine times out of ten I’ve had clients request to use frames because they heard it was a more sophisticated way to build a page rather than because the site really needed frames. Nine times out of ten, frames can and should be avoided.
|
|
 |
|
|
