UI Design Newsletter – October, 2002

Bernard, M. and Larsen, L. (2001), What is the best layout for multiple column Web pages? Usability News – Summer 2001.

Kangas, S. (2001), Layout and content of popular sites, netconversions.com.

Nielsen, J. and Tahir, M. (2001), Homepage Usability: 50 Sites Deconstructed, New Riders Publishing, 40.

How should you lay out your Web site?

Michael Bernard and Laurie Larsen from Wichita State University published a study where they compared three layouts: Fluid, Centered (fixed-width) and Left-justified (fixed-width).

Thanks to Mark Powell at Wordscapes for allowing us to use these icons.

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.

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.

This research is really useful. It suggests that there are no performance differences between the common page design strategies. I am not sure if I believe this. But at least any difference in reading speed or search time is probably small.

The study did not even really show that users had a preference for fluid designs. The report seems to indicate that users simply perceived the fluid designs to be easier. The users indicated that "the 'Fluid' layout was best suited for reading and that it allowed them to find key information more easily." Notice that this does not say that users enjoyed the fluid sites more. Notice that it does not suggest they will buy more from fluid sites. It is nice that the users recommend the fluid design as best for reading and search. But as we know, users often make mistakes in their design recommendations and here they have done it again.

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.