Website Checklist
These topics represent the most common criticisms I have about sites I’m asked to review – both on the Pegaweb forums, and through emails I receive.
The issues I raise below are not hard-and-fast rules, but a series of points to consider in the design of your site. Depending on the type of site you run, some of these rules may not apply. I even break some of these rules myself. :)
Navigation
Is the navigation and layout the same on every page of your site? As the designer of your own site, you know exactly how to get around your site. Other people don’t, and they don’t want to have to learn. There should be a main menu at the top or side of your page, and this menu should be on every page of your site. The links on this menu should lead to all the pages of your site. If your site is large, each of these links should point to a section of your site, instead of a page. Each of those sections may have its own sub-menu, but the main menu should always remain visible, so people know where they are.
If you have multiple main menus, a changing menu system from page to page, or pages not on any menu, people will get lost. The objective is to have your navigation be dead simple. (Simplicity is the key theme of this whole article.)
Design
There are two main styles of design — realistic design, and flat colour design. These styles both work, but they shouldn't be mixed.
Realistic design is where the elements of a page are represented as they are in real life; objects are textured, light falls on them, and they cast shadows below them. This site uses the realistic style.
Flat colour design presents a web page as a diagram, using simple colours and photographs, and is the most common form of web design.
The biggest mistake people make is combining these styles. New designers are often very keen on using their new tricks – bevelling things, giving them ashadow, applying gradients, and adding effects. These things, when used improperly, lead to very amateurish looking websites. It’s far better to aim for simplicity and achieve it, than to aim for the sky and get half way there. If you have any of these things on your site, try removing them.
Keep it simple.
Colours and Contrast
Is your colour scheme logical and consistent, or is your site a random rainbow of colours?
Choose three or four colours. These will be the only colours that will appear on your site. I’ll help you out; two of your colours are black and white (black and white count as colours for the purposes of a colour scheme.) Red and blue are both good choices as an extra.
The whole colour scheme of your site should be about its contrast between black and white. You should have significant amounts of both black and white on your page. (The majority of this will be as black text on a white background.)
As a general rule, your non-white colours should not come in contact with each other. White lines or areas should always separate them. For instance, if you want to put a black button on a blue area, it should be outlined in white. If you have a red area at the top of your page, then the text on it should be white. (Try this out for yourself. Get a block of colour and put text on it. If your block and text are both non-white, it won’t look good.)
Text
Is your text coloured and arranged logically? Random formatting of text is a dead giveaway that the designer is inexperienced. Remember — keep it simple.
Make all your body text black and in only one font (Arial or Verdana. Not Trebuchet, Garamond, or other nice-looking fonts.) Set it to size 2. Each paragraph should have a bold, size 3 header. Each page should have a bold header, size 4, and coloured. All your text should be left-justified. Don't centre anything.
All your text on all pages of your site should follow this colour scheme.
Browser Interference and Non-standardisation
Are you interfering with the standards of the web, or altering your visitors’ browsing experience in any way?
In keeping with the theme of simplicity, which I keep mentioning, there is another very common way that websites irk their visitors. I call these “Browser Interference” and “Non-standardisation”.
Browser Interference is where the site alters the user’s browsing experience. Common methods include unnecessary use of pop-up windowsand removal/alteration of screen elements, such as the scrollbar, menu bar, or mouse cursor. Confining the page's text to a small box with a scrollbar is another form of interference.
Non-standardisation is deviation from expected norms in browsing. Your links should always be blue, if possible, and should always be underlined. Non-linked text should never be underlined. There’s nothing worse than having to go on a voyage of discovery to find out what’s a link and what’s not. You might understand your site’s nuances, but most visitors will just find them annoying.
Your visitors should never have to “learn” how to use your site.
Miscellaneous
Intro Pages – if you have one, remove it. People have come to your site for information, not for a slide show.
Animation – don't use it. Animations for mouseovers or other user-controlled animations are okay.If you're going to annoy your visitors with animation, you might as well do it with animated ads — at least they make money.
Sound – don't use it. There's nothing worse than doing some midnight web surfing, and suddenly being assaulted by a MIDI file blaring in your ear, and not knowing which page it's coming from. User-requested sound is perfectly acceptable, however.
Backgrounds – if you have one, remove it. These get in the way of text and look bad 95% of the time. I often find sites where I have to press Ctrl+A or select text to make it readable over a busy or coloured background.
Frames – don't use them. People can't bookmark individual pages of your site. People will often not enter through the main page of your site, causing frame(s) to be absent. People are forced to "learn" what's a frame and what's not, and work out your frame structure.
Expanding Menus – these are Java menus that expand when the mouse cursor moves over them. These are a form of "mystery meat" navigation, where you're forced to move the cursor over the object to see what's in it. These menus will also expand when you move your mouse cursor over them, whether you want them to expand or not.
Flash – this program is excellent for product demonstrations and other interactive features. The sad reality, though, is that these examples of good usage of Flash are few and far between. The vast majority of the time, Flash adds nothing to a site, and is a source of annoying animation and other effects. Because of Flash's flexibility, Flash-based sites tend to be totally non-standard, forcing the user to "learn" the site, and often preventing them using normal browser features, such as cutting/pasting text, bookmaking, increasing font size, and using the mouse scroll wheel.
The Golden Rule
The purpose of a website is to convey information to visitors as easily as possible.
