How should you lay out your Web site?

The "Fluid" layout is the most traditional method, and allows the contents of a Web page to fill an entire window. In other words, it expands and contracts with the size of the window. The fluid layout is the simplest to implement, but is sometimes perceived by designers as being less modern. The "Centered" method allows users to focus on a narrower layout no matter what screen resolution they are using. The "Left-justified" method is usually slightly wider than the "Centered" layout, and is a popular method for text presentation, particularly with multi-column layouts.

With both the "Centered" and the "Left-justified" layouts, users do not have to visually scan as far horizontally, but when used on a 1024 x 768 pixel resolution monitor, it may require more pages to be scrolled vertically. Also, the latter two layouts cause considerable white space to show when a site is designed to optimize a 800 x 600 pixel resolution, and then used on monitors that are set for a 1024 x 768 pixel resolution.

Based on these results I am not very concerned that only 18% use fluid design. There seems to be little important difference between the designs and is probably easier and cheaper to design using the non-fluid methods.

The researchers had 20 participants search for specific information. Like almost half of the Web sites used today (thecounter.com -- September, 2002), the Web sites in this study were designed for 800 x 600 pixel resolutions. The test subjects used 17-inch monitors set at either 1024 x 768 or 800 x 600 pixel resolution. Half of the questions could be answered on the homepage, the other half on a second level page.

They found no reliable differences among the methods in search time, accuracy of finding information, or in search efficiency (number of clicks, use of the Back button, etc.). However, their users reliably believed that the "Fluid" layout was best suited for reading and that it allowed them to find key information more easily. In addition, users reliably preferred the "Fluid" method.

In July of 2001, Steve Kangas of NetConversions (Kangas, 2001) published an evaluation of several of the most popular home pages on the Web. A total of 87 Web sites were surveyed using a combination of manual checks and automated page measures. He reported that 49% were "Centered" with a fixed-width, 28% were "Left-justified" with a fixed-width, and only 23% used a fluid design that allowed content to grow or shrink with different browser window sizes.
Jakob Nielsen and Marie Tahir evaluated the homepages from 50 Web sites (Nielsen and Tahir, 2001), and reported that only 18% of them used a "Fluid" method (they referred to them as "liquid" layouts). The sites they reviewed were prominent in some way, including top-10 lists, world's largest companies, certain government agencies, well-run small companies and non-profit institutions.

From these studies, it appears that about one out of five Web sites (only 20%) currently are designed using a "Fluid" layout. Unfortunately, the layout most preferred by users, the "Fluid" layout, is the one implemented least often by designers.

Usability Evaluation and Prototype Fidelity

One question that continues to be asked is how high does the fidelity level of a prototype need to be in order for the prototype to be useful in usability testing?

A study by Catani and Biers investigated the effect of prototype fidelity on the information obtained from a performance test. They had three levels of prototypes:

• Paper – low fidelity
• Screen shots – medium fidelity
• Interactive Visual Basic – high fidelity

Thirty university students performed four typical library search tasks using one of the three prototypes. A total of 99 usability problems were uncovered. The mean number of total problems encountered was:

• Low fidelity – 24.8
• Medium fidelity – 29.4
• High fidelity – 28.0

There were no significant differences in the number and severity of problems identified, and there was a high degree of commonality in the specific problems uncovered by users using the three prototypes.

These results seem to support the contention that one can extract as much information from a usability test using low-fidelity (paper) prototypes as from one using higher fidelity prototypes.

Usability Evaluation and Prototype Fidelity: Users and Usability Professionals, Catani, M.B. and Biers, D.W., Proceedings of the Human Factors and Ergonomics Society 42nd Annual Meeting, 1331-1336, (1998).

Web research gives 9 guidelines to improve user performance

Good, research-based information is very sparse concerning the design and development of effective Web sites. Few studies have tried to answer basic Web usability questions. One of these was published by Spool and his colleagues (1997). They tried to identify the design decisions that help, and those that hinder, users' attempts to find information in a large Web site. Some of their conclusions are:

1. Sites can be designed to facilitate either searching or browsing, but not both.
2. Most sites do not help users compare information.
3. Users did not seem to become familiar with the layout of sites (or develop useful mental models).
4. Well-designed frames did not hinder users. But they didn’t help users either.
5. Users preferred to scroll to the bottom of pages to press final buttons.
6. In-site search engines were not generally used; and when they were used, they didn’t improve search performance.
7. Text links were more important in these search tasks than graphic links.
8. The most difficult-to-use sites were more "graphically intense."
9. The best-liked sites were not the same as the most easily searched sites.

Web designers make daily design decisions with little guidance from research-based literature. Good studies, like this one, will help usability specialists make better initial decisions.

Web Site Usability: A Designer's Guide, Spool, J.M., Scanlon, T., Schroeder, W., Snyder, C. and DeAngelo, T. (1997), North Andover, MA: User Interface Engineering.