- About us
- Contact us: +1.641.472.4480, hfi@humanfactors.com
Cool stuff and UX resources
Introduction
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.
References
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.
Message from the CEO, Dr. Eric Schaffer — The Pragmatic Ergonomist
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.
Leave a comment here
Reader comments
M. Wanstall
Isn't it more than a little ironic that this article was published on a centered fixed-width page?
I find it strange that with all of the resources at the fingertips of these major corporations (NineMSN, IBM, Cisco, HP etc...) they have all preferred to implement left justified fixed-width solutions. Surely they have the research and development power to be able to make justified (no pun intended) and informed decisions.
Through your research did you think of contacting some of these companies to try to find out why this approach was taken?
Brendan D.
Reading a "stretchy" site on a large monitor is not comfortable. On the other hand, restricting the size leaves you with huge white margins on that same monitor.
There is a third way, so to speak, that I use on my sites. By placing the entire page in a table set with a % width, you can compromise between ugly margins and readibility. Set it to, say 80%, and it will have acceptable margins on the large monitor, whilst still adapting to the user's display.
Not so clever, I know, and there's a catch with this: on a small display (e.g. 800), there are still margins on 20% of the screen – a waste of valuable real estate.
One solution I've found is to use a 1px white / transparent spacer at the very top or bottom of your page, just inside the table. Set the image width to 790, and your site will never shrink below this level.
The result: a Web site that displays at full screen on an 800 width, but balances margins with readibility at above. The user gets some control over the size, but within the boundaries set by the designer.
Screen width:
-------------
800 = 790
1024 = 820
1280 = 1024
Roni Korenshtein
I am surprised that the research has concluded that all three layout resulted in equal efficiency... unless of course that was the intention... Let's consider some out-of-the-lab scenario: these Web sites that are designed for 800x600 or whatever, assume their page will occupy that whole space, but often, in a windowing environment, the user needs to view two windows at the same time. Anyway, for whatever reason, the user may want to view the Web site in a window smaller than the designers have hoped for and in that case, the fluid layout adjusts the text/content, whereas the fixed size layouts would now require the user to do a considerable amount of scrolling to get to some information. So how about running the same research again, this time limiting the browser window area to something like a quarter of the monitor area? Let's see if they are still all equally efficient?
Subscribe
Sign up to get our Newsletter delivered straight to your inbox
Privacy policy
Reviewed: 18 Mar 2014
This Privacy Policy governs the manner in which Human Factors International, Inc., an Iowa corporation (“HFI”) collects, uses, maintains and discloses information collected from users (each, a “User”) of its humanfactors.com website and any derivative or affiliated websites on which this Privacy Policy is posted (collectively, the “Website”). HFI reserves the right, at its discretion, to change, modify, add or remove portions of this Privacy Policy at any time by posting such changes to this page. You understand that you have the affirmative obligation to check this Privacy Policy periodically for changes, and you hereby agree to periodically review this Privacy Policy for such changes. The continued use of the Website following the posting of changes to this Privacy Policy constitutes an acceptance of those changes.
Cookies
HFI may use “cookies” or “web beacons” to track how Users use the Website. A cookie is a piece of software that a web server can store on Users’ PCs and use to identify Users should they visit the Website again. Users may adjust their web browser software if they do not wish to accept cookies. To withdraw your consent after accepting a cookie, delete the cookie from your computer.
Privacy
HFI believes that every User should know how it utilizes the information collected from Users. The Website is not directed at children under 13 years of age, and HFI does not knowingly collect personally identifiable information from children under 13 years of age online. Please note that the Website may contain links to other websites. These linked sites may not be operated or controlled by HFI. HFI is not responsible for the privacy practices of these or any other websites, and you access these websites entirely at your own risk. HFI recommends that you review the privacy practices of any other websites that you choose to visit.
HFI is based, and this website is hosted, in the United States of America. If User is from the European Union or other regions of the world with laws governing data collection and use that may differ from U.S. law and User is registering an account on the Website, visiting the Website, purchasing products or services from HFI or the Website, or otherwise using the Website, please note that any personally identifiable information that User provides to HFI will be transferred to the United States. Any such personally identifiable information provided will be processed and stored in the United States by HFI or a service provider acting on its behalf. By providing your personally identifiable information, User hereby specifically and expressly consents to such transfer and processing and the uses and disclosures set forth herein.
In the course of its business, HFI may perform expert reviews, usability testing, and other consulting work where personal privacy is a concern. HFI believes in the importance of protecting personal information, and may use measures to provide this protection, including, but not limited to, using consent forms for participants or “dummy” test data.
The Information HFI Collects
Users browsing the Website without registering an account or affirmatively providing personally identifiable information to HFI do so anonymously. Otherwise, HFI may collect personally identifiable information from Users in a variety of ways. Personally identifiable information may include, without limitation, (i)contact data (such as a User’s name, mailing and e-mail addresses, and phone number); (ii)demographic data (such as a User’s zip code, age and income); (iii) financial information collected to process purchases made from HFI via the Website or otherwise (such as credit card, debit card or other payment information); (iv) other information requested during the account registration process; and (v) other information requested by our service vendors in order to provide their services. If a User communicates with HFI by e-mail or otherwise, posts messages to any forums, completes online forms, surveys or entries or otherwise interacts with or uses the features on the Website, any information provided in such communications may be collected by HFI. HFI may also collect information about how Users use the Website, for example, by tracking the number of unique views received by the pages of the Website, or the domains and IP addresses from which Users originate. While not all of the information that HFI collects from Users is personally identifiable, it may be associated with personally identifiable information that Users provide HFI through the Website or otherwise. HFI may provide ways that the User can opt out of receiving certain information from HFI. If the User opts out of certain services, User information may still be collected for those services to which the User elects to subscribe. For those elected services, this Privacy Policy will apply.
How HFI Uses Information
HFI may use personally identifiable information collected through the Website for the specific purposes for which the information was collected, to process purchases and sales of products or services offered via the Website if any, to contact Users regarding products and services offered by HFI, its parent, subsidiary and other related companies in order to otherwise to enhance Users’ experience with HFI. HFI may also use information collected through the Website for research regarding the effectiveness of the Website and the business planning, marketing, advertising and sales efforts of HFI. HFI does not sell any User information under any circumstances.
Disclosure of Information
HFI may disclose personally identifiable information collected from Users to its parent, subsidiary and other related companies to use the information for the purposes outlined above, as necessary to provide the services offered by HFI and to provide the Website itself, and for the specific purposes for which the information was collected. HFI may disclose personally identifiable information at the request of law enforcement or governmental agencies or in response to subpoenas, court orders or other legal process, to establish, protect or exercise HFI’s legal or other rights or to defend against a legal claim or as otherwise required or allowed by law. HFI may disclose personally identifiable information in order to protect the rights, property or safety of a User or any other person. HFI may disclose personally identifiable information to investigate or prevent a violation by User of any contractual or other relationship with HFI or the perpetration of any illegal or harmful activity. HFI may also disclose aggregate, anonymous data based on information collected from Users to investors and potential partners. Finally, HFI may disclose or transfer personally identifiable information collected from Users in connection with or in contemplation of a sale of its assets or business or a merger, consolidation or other reorganization of its business.
Personal Information as Provided by User
If a User includes such User’s personally identifiable information as part of the User posting to the Website, such information may be made available to any parties using the Website. HFI does not edit or otherwise remove such information from User information before it is posted on the Website. If a User does not wish to have such User’s personally identifiable information made available in this manner, such User must remove any such information before posting. HFI is not liable for any damages caused or incurred due to personally identifiable information made available in the foregoing manners. For example, a User posts on an HFI-administered forum would be considered Personal Information as provided by User and subject to the terms of this section.
Security of Information
Information about Users that is maintained on HFI’s systems or those of its service providers is protected using industry standard security measures. However, no security measures are perfect or impenetrable, and HFI cannot guarantee that the information submitted to, maintained on or transmitted from its systems will be completely secure. HFI is not responsible for the circumvention of any privacy settings or security measures relating to the Website by any Users or third parties.
Correcting, Updating, Accessing or Removing Personal Information
If a User’s personally identifiable information changes, or if a User no longer desires to receive non-account specific information from HFI, HFI will endeavor to provide a way to correct, update and/or remove that User’s previously-provided personal data. This can be done by emailing a request to HFI at hfi@humanfactors.com. Additionally, you may request access to the personally identifiable information as collected by HFI by sending a request to HFI as set forth above. Please note that in certain circumstances, HFI may not be able to completely remove a User’s information from its systems. For example, HFI may retain a User’s personal information for legitimate business purposes, if it may be necessary to prevent fraud or future abuse, for account recovery purposes, if required by law or as retained in HFI’s data backup systems or cached or archived pages. All retained personally identifiable information will continue to be subject to the terms of the Privacy Policy to which the User has previously agreed.
Contacting HFI
If you have any questions or comments about this Privacy Policy, you may contact HFI via any of the following methods:
Human Factors International, Inc.
PO Box 2020
1680 highway 1, STE 3600
Fairfield IA 52556
hfi@humanfactors.com
(800) 242-4480
Terms and Conditions for Public Training Courses
Reviewed: 18 Mar 2014
Cancellation of Course by HFI
HFI reserves the right to cancel any course up to 14 (fourteen) days prior to the first day of the course. Registrants will be promptly notified and will receive a full refund or be transferred to the equivalent class of their choice within a 12-month period. HFI is not responsible for travel expenses or any costs that may be incurred as a result of cancellations.
Cancellation of Course by Participants (All regions except India)
$100 processing fee if cancelling within two weeks of course start date.
Cancellation / Transfer by Participants (India)
4 Pack + Exam registration: Rs. 10,000 per participant processing fee (to be paid by the participant) if cancelling or transferring the course (4 Pack-CUA/CXA) registration before three weeks from the course start date. No refund or carry forward of the course fees if cancelling or transferring the course registration within three weeks before the course start date.
Cancellation / Transfer by Participants (Online Courses)
$100 processing fee if cancelling within two weeks of course start date. No cancellations or refunds less than two weeks prior to the first course start date.
Individual Modules: Rs. 3,000 per participant ‘per module’ processing fee (to be paid by the participant) if cancelling or transferring the course (any Individual HFI course) registration before three weeks from the course start date. No refund or carry forward of the course fees if cancelling or transferring the course registration within three weeks before the course start date.
Exam: Rs. 3,000 per participant processing fee (to be paid by the participant) if cancelling or transferring the pre agreed CUA/CXA exam date before three weeks from the examination date. No refund or carry forward of the exam fees if requesting/cancelling or transferring the CUA/CXA exam within three weeks before the examination date.
No Recording Permitted
There will be no audio or video recording allowed in class. Students who have any disability that might affect their performance in this class are encouraged to speak with the instructor at the beginning of the class.
Course Materials Copyright
The course and training materials and all other handouts provided by HFI during the course are published, copyrighted works proprietary and owned exclusively by HFI. The course participant does not acquire title nor ownership rights in any of these materials. Further the course participant agrees not to reproduce, modify, and/or convert to electronic format (i.e., softcopy) any of the materials received from or provided by HFI. The materials provided in the class are for the sole use of the class participant. HFI does not provide the materials in electronic format to the participants in public or onsite courses.