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.
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?
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
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
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.
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.