Marginalia of Web Design

by Jakob Nielsen on November 1, 1996

This column has been touching on some pretty Big Issues lately, including disabled access, international usability, and site structure. This month, let's look at some details that may not be as profound but still matter for Web usability.

Page Titles

As part of the HTML standard, every Web page should have a <TITLE> defined in its header. Page titles are important for navigation support since they are normally the default way to refer to pages in various navigation support mechanisms such as bookmark lists, history lists, overview diagrams, etc. Titles are also often used as the best way of listing retrieved pages in search engines.

Many of these important uses of the page <TITLE> are taken out of context, and it is therefore important that the title has enough words to stand on its own and be meaningful when read in a menu or a search listing. On the other hand, overly long titles slow down users, so as a guideline aim at titles between four and ten words.

Different pages need different titles. It is very unpleasant to visit, say, seven pages with the same title and then try to go back to a specific page from the history list. Also, of course, bookmarking more than one page from such a site is a guaranteed usability problem, since the bookmark/favorites menu will contain several identical entries with different results.

A final point is to optimize titles for quick scanning. This implies moving information carrying terms toward the beginning of the title and preferably starting with a word that will match the user's needs when scanning down a menu or listing of titles. A classic mistake is to use a title like Welcome to MyCompany. It would be much better to call the page MyCompany - Home Page. Similarly, eliminate articles like The, A, and An from the beginning of the title. Doing so is particularly important because some title listings are alphabetized.

Page miniature of this webpage In addition to titles, other ways of referring to Web pages include verbal and visual summaries. Normally, such summaries are very difficult to produce algorithmically. The main exception is the miniature as shown by the illustration to the right. The figure shows a miniature of this page, generated by scaling it to 15 percent of full size. In general, page miniatures are only good as representations for highly graphic pages or pages with very characteristic layout.

Two of the better uses of miniatures are for building a site map and for the history list when navigating sites that focus on visual arts.

Text Size and Color

Tell me, did you feel like clicking on the word "Color" in the above heading? Most likely, the word appeared in blue type, and if so you probably thought it was a hypertext link.

On the Web, blue text equals clickable text, so never make text blue if it is not clickable. It is also bad, though not quite as bad, to make text red or purple, since these two colors are often used to denote hypertext links that have already been visited.

Another commonly seen mistake in text design is the use of large or small font sizes as the body text of a page. Page designers sometimes think that the default text in their browser is wrong for the effect they want to achieve, and it is certainly acceptable to make a small percentage of the text on a given page large or small, as appropriate. It is not recommended to change the font size of all the text on a page since the user must be assumed to have set the default font size in his or her browser to exactly the size that is most comfortable for that user on his or her monitor. Any other font size is thus by definition suboptimal for reading body text.

Relevance-Enhanced Image Reduction: Better Thumbnails

It is quite common to use thumbnail versions to represent images that are too large to be downloaded without a specific user request. Thumbnails are smaller, meaning that more can fit on a page and that download times are minimized. Unfortunately, the two most common ways of reducing images, scaling and cropping, both result in thumbnails that can be hard to interpret, as shown in the figure.


A photo and three different thumbnails of same
Three different ways of making thumbnails.

 

Scaling reduces the image so much that pictures with extensive detail wash out and become too crowded to be meaningful. Cropping preserves those details that are within the new viewport, but at the cost of losing the context of the image as a whole. My recommendation is to use a combination of cropping and scaling, resulting in a technique I call relevance-enhanced image reduction . For example, to get a thumbnail that is 10 percent of the original image, first crop the image to 32 percent of the original size and then scale the result to 32 percent. The final image will be 0.32 x 0.32 = 0.1 of the original.

As shown in the figure, relevance-enhanced image reduction results in a pleasant balance between presenting discernible detail and conserving context.


Share this article: Twitter | LinkedIn | Google+ | Email