Guide to html web page design
Make things easy to find
Make the important bits quick to show
Help people find their way around your pages
Help people follow their interest easily
How big should one page be?
Make pages easy to update
Can people copy your pages?
Be consistent
-
Make things easy to find
[up to guideline list]
- A good part of the web is finding things.
So provide a number of pages
just to help people find their way about,
and make sure that they are easy to use.
We will call this kind of page a
"navigation page".
A web page index or table of contents
would be a natural navigation page.
- These navigation pages need to give the right
amount of information for choosing the next link to follow.
Each link should make it clear where it is going.
If you don't make it clear, your readers will be puzzled
or go a way they didn't mean to. If you put in too much
information, your readers will have more difficulty finding
the link they want, because it will be swamped.
- When a page does present something (not just navigation),
make it clear near the beginning of the page what the page has in it.
Good titles, and an index or summary at the top for long pages,
can be helpful.
- Make the important bits quick to show
[up to guideline list]
-
Don't put big graphics in navigation pages, and
in pages with information leave big graphics at least
until after the bits which say what is in the page.
When you do use images, explore
ways
of saving bytes to make downloading faster.
-
The first thing to show should be what's in that page.
Then people will know whether they want to read on
or scroll down. Best to do this with text, or maybe
graphics that are common to all your pages (so that
they won't have to be downloaded again).
-
For navigation pages, the next things that need to be
shown are the links to other pages.
-
For long pages which present something, perhaps try having
internal links near the top, to the lower parts
(as here).
Jacob Nielsen's March 1997 Alertbox
"The
Need for Speed" takes the argument further and deeper.
- Help people find their way around your pages
[up to guideline list]
-
You just don't know which page people will start on and
where people will end up in your pages - that's the nature
of the web and of search engines. So you should provide
a consistent, straightforward means of finding your way around
from any page, not just the main index or navigation pages.
Many people have followed the example of Jakob Nielsen's
Alertbox
either directly (look at the navigation bar near the top of
any
page deep down in Yahoo; or many news sites, or
this site)
or indirectly
(as my FWCC pages).
In each case, the pages are organised in a hierarchy,
and each page has, at the top, links to each level above it.
This both reminds people where they are and lets them
get to related pages quickly. Something like this is needed
for any large site.
- Help people follow their interest easily
[up to guideline list]
-
Sometimes you know that one page will lead on to another.
Make the links easy to find and follow.
Think also of ways people may want to go which you might not
have thought of to begin with.
If you can find any good links to link to relevant words
anywhere in your pages, put them in!
It makes browsing your pages more interesting, and gives
the reader more of a sense of choice.
- How big should one page be?
[up to guideline list]
-
There is no way of telling exactly
how much will fit on someone's screen.
So how much you put on a page must depend on the logical
arrangement of your information. Try to find out (or guess)
how much a reader would like to see together, and don't put more.
For navigation pages, try to fit a page on one screen if possible,
to save mouse-clicks scrolling down. But it's more important
to keep together everything that belongs together.
-
Frames: don't even consider using frames until you
have at least read and understood Jakob Nielsen's article
"Why
Frames Suck (Most of the Time)"
- Make pages easy to update
[up to guideline list]
-
Your readers are likely to spot more mistakes than you.
So, put your email address (perhaps as "mailto:" links) at
the bottom of the pages you maintain. It's a way of "signing"
them and taking responsibility. It also helps readers to see
when the page was last revised. Put the date as well.
- Can people copy your pages?
[up to guideline list]
-
Copyright on the web is very similar to copyright on paper.
You do not have the right to make use of other
people's material or content just because they have put it on the Web.
However, as copying is extremely easy, policing your own copyright can
be practically impossible. There are many honest, public-spirited
people on the Internet, and for them at least you can make it
clear what you intend, or what you would like to do about copyright.
In particular, if you want people to make use of your pages
freely, make this clear, otherwise people may assume you retain
copyright. Consider whether you need to think about copyright
more, and if you do, consult an expert for the latest opinion.
- Be consistent
[up to guideline list]
-
Try to do things the same way in all the pages that belong
together. If you do things in different ways in different
places, your reader may get confused, and will certainly
take longer to get somewhere.
Summary:
A usable web page is one which gives as soon as possible
the information needed to know whether to read on,
go "Back" or go onwards to a more relevant linked page.
My own pages try to show the ideas I suggest.
Where they fail, please feel free to tell me,
and say whether it is the page or the idea at fault.
For a good, comprehensive selection of web design guidelines,
see Keith Instone's
http://usableweb.com/
site (based in the USA).
The one site above others that I would
rate "must see" has to be Jakob Nielsen's
Alertbox,
and in particular, from October 1999,
10 Good
Deeds in Web Design.
Another concise guide from 1998 is at
http://www.webreview.com/1998/05_15/designers/05_15_98_2.shtml
which echoes some of the points above.