Want to impress your visitors? Forget the fancy graphics and neat
technical tricks, just choose the right page width and hyperlink colors.
Here's a basic introduction to the science of usability, drawing on
research, expert opinion, and common features from the Web's most
popular sites.
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 (http://www.useit.com/jakob/) 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 (http://www.thecounter.com/), (repeated on echoecho.com).
Popular Screen Sizes
53% 800x600
32% 1024x768
5% 640x480
3% 1280x1024
2% 1152x864
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
(http://javascript.internet.com/user-details/style-sheets-by-resolution.
html) 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.
About the author:
Andrew Starling is a Web developer, consultant and author based in the UK. He was previously the Managing Editor of the Web Developer's Journal for internet.com and Technology Editor of the UK's Internet Magazine, for which he still writes. His own Web sites are Foxglove.co.uk and Tinhat.com. Foxglove is a satirical site and was chosen as the Mirror newspaper site of the day back in August 2000. Tinhat covers Internet security and privacy. In his "spare" time, Andrew likes to travel and write poetry and novels. Email: astarling@foxglove.co.uk