By Andrew Starling
Usability is the science of making sites easy to use. It’s a
young science with only a modest basis in research and user
testing. For this reason it often gets lost in the no-man’s-land
of personal opinion. Two designers can argue forever about
whether one page design is easier to use than another, and
chances are, neither side has scientific proof that they’re
right.
That’s where usability gurus such as
Jakob Nielsen
step in. With
a thorough knowledge of the field’s meager scientific research,
and plenty of real experience, even when scientific proof is
missing they’ll be able to hazard a better guess than anybody
else about what will work and what will have the user cursing the
screen — or, more likely, slipping off to a better site or back
to the TV to watch “The Simpsons”.
As well as science and the opinions of experts, there’s now a
third source for usability information — look at what the
most successful sites do. Companies like Amazon, eBay, AOL and
Yahoo! have now had a few years to make their usability mistakes
and come out the other side. It’s no coincidence that if you look
at the Web’s most popular sites you’ll find their designs are
basically the same — white backgrounds, black text, blue
hyperlinks, modest graphics, three or four columns on the home
page, navigation at the top, and so on. Why? Because it makes
them easy to use.
In this article we’ll combine information from research, the
experts and successful sites to introduce the basics of
usability. Since there are so many usability aspects to site
navigation, it’s a subject that will be covered in detail in a
later article.
Page Width
If you’re starting a site from scratch or revamping an existing
site, one of your first decisions is how wide the pages should
be. You want to make the most of available screen space but avoid
the edges of your site disappearing into thin air at the sides of
small screens. Horizontal scrolling should be avoided if
possible. It’s awkward to do and users hate it.
To make an informed decision, we need to know the demographics of
screen sizes. Which are the most popular?
Here are figures from
TheCounter.com, (repeated on
echoecho.com).
| ||||||||||||
800 pixels wide is the most popular and many sites choose this
option (though 1024 is catching up fast). Just 5% of visitors
still use 640 pixel screens — and they have to scroll
horizontally to see 800 wide pages.
A few sites choose 1024 pixels wide, but that can’t be
recommended because it means the majority of users have to scroll
horizontally. 640 pixels is a very safe option, yet isn’t popular
because it doesn’t look good on large screens.
Incidentally, designing for an 800 pixel screen means turning out
pages at 760 pixels wide to allow for screens that don’t really
produce as many pixels as they say, plus scroll bars and other
nonsense at the sides. If you think your visitors use vertical
toolbars, like the one for Microsoft Office, you may decide to
lose even more space at the edges, but most designers assume this
isn’t an issue and just allow 40 pixels. That means 600 pixel
pages for 640 wide screens, 760 for 800, and 980 for 1024.
Another width issue is that if you make full use of the space
then you also need to take care that left margins created in
browsers don’t push your page to the right and cause the pixels
at the edge to be lost in one browser or another. It’s a common
error, especially where composite images take up the entire width
of the page. For Internet Explorer, left margins can be set to
zero using leftmargin=0 in the
<body> tag. Netscape Navigator doesn’t
recognize this instruction and if you want to remove the margin
in this browser you need to also include
marginwidth=0 in the <body> tag.
None of the fixed widths are entirely satisfactory, which is why
many big sites go for 100% width pages. These change size to
fully fit the user’s screen. In terms of usability, it’s
definitely the best option. The only problem is that it places
limits on design, since any page elements with a fixed width,
including graphics, will cause the rest of the page content to
reflow on different screen sizes, so you can finish up with
conflicts or gaps. That’s where the skill of the expert designer
comes in — making sure everything works on all screen
sizes.
In the past, some sites, including those of major players, used
JavaScript to recognize the viewer’s screen size and create
an appropriate page at a specific size. This is no longer popular
because an increasing number of visitors disable JavaScript to
avoid the annoyance of pop-up windows.
Highly sophisticated sites look at the environment variables sent
by the browser to the server and send appropriate pages back,
even changing the number of columns on the page for different
screens. This is only feasible on the most technically-advanced
sites.
A trick often used on simpler sites is bundle the less important
elements into a column on one side, where they can be ignored by
visitors with small screens. On 760 pixel pages it’s common to
keep the main text within a 600 pixel wide column, with blank
space or promotions in the remaining area.
To sum up, use 100% page width if possible. Otherwise the best
balance of usability and decent design (as seen on popular sites)
currently comes from 760 pixel width pages, with the main text in
a 600 pixel wide column.
