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 a shadow, 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 windows and 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, bookmarking,
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.
Discuss this
article on the Pegaweb Forums
