|
Provide compelling content / something of
value
C1.
Make sure each page in
your website has something valuable to
offer.
Though this doesn't really relate to design,
it's actually more important than design. And I know many
people reading this page are trying to find out how to
make useless pages look pretty, because their only goal
is to try to make money from the Internet somehow. So
let's step back a minute and realize that fundamentally a
web page exists to provide something that's useful
or interesting to visitors. If your page doesn't
have that, then add that before you worry about
how to present it. If you throw mud at a canvas, then
even if you put it in a gold frame, it's still just a
canvas of mud.
If your plan is to make money from advertising, then
go for a ratio of not less than 75% editorial to 25%
advertising. Amazingly, I see some sites that are almost
nothing but ads. Would you turn on the TV if it were just
commercials, and no programs? Would you buy a magazine if
it were just ads, and no articles? If not, then make sure
your web pages doesn't suffer from the same mistake.
Avoid Distractions
D1.
Don't distract your
visitors with blinking text, scrolling text, animated GIFs,
or sound files.
Animation and sounds are distracting. How can
anyone concentrate on reading what's on your site when
there are things flying around the page? It's like trying
to read a newspaper when someone's poking you in the
shoulder repeatedly. Also, visitors who have dial-up
connections instead of high-speed connections may resent
that you wasted their time by forcing them to load
animations and sound files against their will. Research
shows that animated banner ads may be no more effective
than static ads, anyway.
D2.
Don't annoy your
visitors with pop-up windows.
Nobody likes them. They waste time and space.
Which of these reactions do you think your visitor is
more likely to have?
(a) A popup window, oh goody! I love
sites with popups! I will make certain to bookmark
this site and visit often. I will also certainly click
the ad or links in the popup because I have such a
strong love of popups.
(b) @#&$! Whoever made this website
obviously has no respect for me as a visitor. When I
leave here I will never come back.
Don't bog your website
down
B1.
Compress your image
files.
Nothing is more annoying to readers than waiting
for a 200k graphic to load when it should be only 20k
instead. Graphics software can compress files so they
take up less room on your disk, and therefore take less
time to load into your visitors' browsers. Get some
graphics software and shrink those file sizes! GifBot
is quick and easy, and shrinks your graphics right on a
webpage. Or you can download graphics software:
Windows: HVS
GifCruncher and JPEG
Wizard. Macintosh: GraphicConverter.
And as mentioned earlier, don't bog your site down
with auto-playing sound files, either.
B2.
Don't let flashy
multimedia ruin your site.
Flashy graphics and multimedia controls may look
nice, but they're bad when they make it hard for visitors
to get the information they want from your site. Nobody
wants to be annoyed by having to use a cumbersome Java
scroller to see all the text in a field, much less wait
for all the doodads to load -- if they even work at all.
Stay away from sitebuilders like Moonfruit.com. (The
exception, of course, are sites whose content is about
creative things such as art or music.)
Website
Readability
R1.
No line of text should
be more than 600 pixels wide.
The reason that newspapers and magazines are
printed in columns is to make the lines short, so it's
easy to find the start of next line after you've read a
line. The page you're reading now shows one approach to
making line length manageable: put the text in a
fixed-width table in the center of the page. Here's
an example of a bad page
with no limits on line length.
Here's another example of a good
page, with sidebars to the left and right of the
content. A potential problem with that layout is that the
content will be too wide for visitors with really large
screens, since the content is fluid and expands when the
window is bigger. A way around that is to make the
content a fixed width, but that poses another problem:
Pages should be designed to work on screens as small as
800x600, which means no more than 770 pixels wide to
account for scrollbars and such. The two sidebars on the
page in question take up about 175 pixels each, or 350
pixels total. That leaves 770-350 = 420 pixels for the
content, which is really thin and ugly on the larger
1024x768 monitors, which are the most common. So if I
want two 175-pixel sidebars, I can either:
(a) make the content 420 pixels wide, which
will look crappy on 800x600 screens,
(b) or I can make the content fluid, which will
look okay on both 800x600 and 1024x768 screens, but worse
on even larger screens.
I chose (b), because that gives the best result
for the majority of web visitors.
R2.
Don't make your page too
wide.
Your page should be 770 pixels wide at
most (so people with 800x600 screens can read it). If
your pages are wider than that, then many visitors won't
be able to see everything without scrolling left to
right.
R3.
Use contrasting colors
or simple backgrounds to make your text easy to
read.
It's hard to read light text on a light
background, or dark text on a dark background. Also, it's
hard to read text on background images that have a wide
mixture of light and dark; background images should be
simple and mostly dark or mostly light. You can improve
readability of text on a background image by increasing
the text size and/or making it bold.
You should almost never put text on an image or
textured background. Unless you really know what you're
doing, such text is usually difficult or annoying to read
-- if not impossible.
R4.
Make the text large
enough to read.
This ought to be a no-brainer, yet just today a
webmaster referred me to his site which I had to squint
to read. Don't punish your visitors if you want them to
actually read your content. With CSS rules, go for 12 or
13px Arial, and 11 or 12px Verdana.
R5.
Increase the line
spacing (leading) to improve readibility.
Putting some space
after each line gives it some breathing room and makes it
a lot easier to read. If you don't specify the leading,
you don't get any -- you get the default of cramped
lines. I set this article to 160%, which you can see adds
some attractive space between the lines and makes the
text appear less daunting. But I kept this particular
paragraph at the default, so you can see how it's much
less attractive and harder to read. Add spacing by using
CSS commands. To set the leading for a table cell, use
something like <td style="font:11px/160%
Verdana">. For a long block of text put all the
text between div's: <div
style="font:11px/160%>(long block of
text) </div>. That's enough to get you
started, but to really master CSS you'll want to
learn
how to create CSS rules.
R6.
Don't type more than a
few words in ALL CAPS.
Words that are in ALL CAPS draw attention to
themselves because they seem different from the small
letters around them. But if you type everything in
all caps, then you completely lose the effect, since
everything looks the same, so none of it looks
important. If you want to draw readers' attention to
something, make the headline stand out -- bold,
bright color, maybe a little larger -- but keep the text
that follows it normal.
R7.
Never use more than one
exclamation point!
Typing several (or worse, a gazillion)
exclamation points does not make your text seem any more
important than just one. In fact, rather than conveying
urgency, what multiple exclamation marks really scream is
"Amateurish!".
R8.
Use a spelling
checker.
Obviously, people who spell poorly may not
notice or care that your site is badly misspelled, but
literate people may notice and care, and they're in the
majority.
Make it Easy to Find
Stuff
F.
Include a way to get
back to the home page, on every page.
When users get lost they like to start over from
square one. Make it easy for them to do so. If you're
including a clickable logo on the top of every page, make
sure to also include text that says something like "Back
to Home Page", because some users don't realize that
logos take you back to the home page. [Example
site]
Also remember that users might not be able to hit the
"Back" button to go back to your home page, because they
might have entered the middle of your site after clicking
a link to it from a search engine or from some other
site.
F1.
Include navigation tools
on every page.
While you should provide a way for users to get
back to your home page quickly, you shouldn't
force them to go home before they can go somewhere
else. Include a menu on the left or the top of each page.
[example
of menu at left] [example
of menu at top]
Don't put navigation links only at the bottom of
pages, because then users will have to scroll down to the
bottom to get to them (unless your pages are very short).
Users
clearly dislike links at the bottom of long pages. On
long pages, you'll want navigation elements on BOTH the
top and bottom, so that users who have read a lengthy
page don't have to scroll back up to get to the
navigation parts.
F2.
Don't use
frames.
You might be tempted to use frames because it
makes it easy to have the same header or menus appear
throughout the site. And usability
studies do show that users find sites with frames
"Easy to Comprehend", "Easy to Navigate", and "Easy to
Find Info". But there are two serious downsides to
frames: First, the address bar doesn't change as you go
from page to page. That makes it impossible for anyone to
bookmark or link to a specific page in your site, or to
share that page with a friend by emailing them the link.
Second, when a page within your site other than the
frameset shows up in a search engine, a visitor clicking
over to that page will see just that subpage without the
surrounding frame.
F3.
Put some thought into
organization.
Think about what content you have and how it
should be organized. You do your readers a disservice if
they can't easily find what they're looking for if
everything is thrown up on your site in a haphazard
fashion.
On a related note, don't put too much info on a page,
nor too little. When there's too much info on a page then
it's overwhelming. But when there's not enough info then
you force users to click through a bunch of different
pages to get all the info they need.
The right and wrong way to use
links
L1.
Don't underline words if
they're not links.
On the web, something that's underlined is
supposed to be a link. If you underline gratuitously,
readers will be annoyed when they try to click those
underlined words only to discover that they're not really
links. If you want to emphasize something, use italics
(or boldface, or another color).
L2.
Make links blue or
underlined, or both.
Users expect links to be blue and underlined,
because that's the way they appear on 99% of other
websites. If you use a different color then at least the
underline is a clue that a link is a link. Likewise, if
you remove the underline but keep the link blue, then the
color is the clue that a link is a link. So it's best to
use both blue and underlined, but using at least one or
the other is acceptable.
What's wrong is doing neither -- having links
that aren't blue and aren't underlined. How are users
supposed to know what's a link at that point? We ran
across one page (no longer up) whose main link is red
with no underline. To make matters worse, elsewhere on
the page they use blue text, which looks like a link, but
which isn't. (We tried to bring this to the attention of
the site but owner he bragged that nobody else has ever
complained.)
L3.
Explain what you're
linking to.
If your site has a Links page, include a short
description of each site you link to, say 1-5 sentences.
That way visitors have an idea of what's on those sites,
which will help them make their decision on whether to
visit those sites, and help them find what they're
looking for, while avoiding what they're not
looking for.
Nothing is less useful than a whole bunch of links to
other sites when those links consist of nothing more than
the names of those sites (or worse, the urls). Without
any description of what you're linking to, readers are
forced to visit each and every site to get an idea of
what's there. Imagine 100 of your visitors all repeating
that same laborious surfing, needlessly. You could have
told them what's on those sites, because you (presumably)
visited those sites yourself, so you know what's on them.
Do your readers a favor and share your knowledge with
them. [Example
site]
There are clunky Javascript tricks that can overcome
these problems, but once you hassle with that to get your
frames to work properly then you're defeating the purpose
of using frames because you wanted a quick & easy
solution in the first place. The preferred way of having
the same elements on a page throughout a site is to use
server-side includes.
Be
Accessible
A1.
Put your contact info,
or a link to it, on the top and/or bottom of every
page.
Don't waste your readers' time by making them
hunt around your site for how to contact you. Make your
contact info easy to get to. Put your contact info (or a
link to it), on the top of every page. [Example]
If you're not printing your phone and/or email
anywhere because you don't have the resources to handle
inquiries, then do your readers the courtesy of letting
them know that, so they don't spend forever hunting in
vain for contact info that doesn't exist.
Unfortunately you can't link up your email address
with a simple mailto: link, unless you want lots of spam.
That's because spambots are good at stealing such
addresses from web pages. We have a separate article
about how to hide your email address
from spambots.
Make sure it works, and that it
keeps working
W1.
Test your
links.
Make sure your site works! Load your site in a
browser from the Internet (not from your hard
disk), make sure all the images appear correctly, and
click on all the links. This may seem obvious, but if
it's so obvious, then why do I constantly find sites
whose images and internal links don't work right? If
you're using a link checker that's built in to your web
editor and your site is framed, then you can't
depend on the link checker, because it can't check for
framing problems (e.g., pages load into wrong frames,
clicking a link results in frames within a frame, etc.).
Check it yourself.
W2.
Remove dead external
links periodically.
If you link to any external sites, some of those
links will almost certainly stop working at some point as
the sites move or become extinct. Don't waste your
readers' time by forcing them to follow broken links.
Check your links at least once every few months. You can
use software to automatically check your links to
external sites to see if any of them have gone dead.
[Here's
a link checker for Windows.]
W3.
Include a "Last
Modified" date on the top or bottom of your
pages.
If your site contains information that could
become outdated, then do your visitors the courtesy of
letting them know when the information they're reading
was written. That way, visitors won't have to wonder
whether the info was written last week or five years ago.
If your content by its very nature can't become
outdated. (e.g., poetry, stories, art, website design
tips), then a date isn't absolutely essential,, but
readers may still appreciate knowing when a page was
authored anyway.
Hate
Mail
We used to use PsychoCycles
as an example of a site that violated nearly every single
rule listed above, but they've redesigned it several
times since then. But for nearly two years and counting,
they've sent us a ton of
illiterate hate mail and threats.
Links to Technical
Tips
Guidelines
for web credibility. Items that make your website
appear credible to visitors. From Stanford University
research.
WebWeaver
Tips & Tricks
This site has answers to questions like
these:
- How do I find out how many sites
are linked to mine and who they are?
- How
do I link to a specific spot on
a page?
- How
can I give visitors a way out
if they are trapped in a frame?
- How
can I automatically redirect
someone to my new site?
- My
page is slow to load but I
don't want to lose my pictures!
- How
do you preload an
image?
- AAARRGGHHH!
There's a banner in every
frame!
- Why
are some people seeing an old
version of my site?
- On
emails from my site I'd like
the subject filled in for them. How do I do
that?
- Can
I fill out the body of an email
for my visitors?
- I
think someone is linking
directly to my graphics, how do I find out
who?
- How
do I find sites that are
stealing my content?
- What
is "linking directly to
graphics" and why is it wrong?
- Is
it possible to change two out
of three frames at the same time?
- My
server doesn't have SSI, how
can I fake an includes?
|