Page Layout

All web pages should be structured for ease of comprehension. This includes putting items on the page in an order that reflects their relative importance. Designers should place important items consistently, usually toward the top and center of the page. All items should be appropriately aligned on the pages. It is usually a good idea to ensure that the pages show a moderate amount of white space—too much can require considerable scrolling, while too little may provide a display that looks too ‘busy.’

It is also important to ensure that page layout does not falsely convey the top or bottom of the page, such that users stop scrolling prematurely. When a Web page contains prose text, choose appropriate line lengths. Longer line lengths usually will elicit faster reading speed, but users tend to prefer shorter line lengths. There are also important decisions that need to be made regarding page length. Pages should be long enough to adequately convey the information, but not so long that excessive scrolling becomes a problem. If page content or length dictates scrolling, but the page's table of contents needs to be accessible, then it is usually a good idea to use frames to keep the table of contents readily accessible and visible in the left panel.

Avoid Cluttered Displays

Create pages that are not considered cluttered by users. Clutter is when excess items on a page lead to a degradation of performance when trying to find certain information. On an uncluttered display, all important search targets are highly salient, i.e., clearly available. One study found that test participants tended to agree on which displays were least cluttered and those that were most cluttered.

Place Important Items Consistently

Put important, clickable items in the same locations, and closer to the top of the page, where their location can be better estimated. Users will try to anticipate where items will appear on their screen. They will start ’searching’ a page before the layout appears on their screen. When screen items remain constant, users learn their location on a page, and use this knowledge to improve task performance. Experienced users will begin moving their mouse to the area of the target before the eye detects the item. Users can anticipate the location of items near the top much better than those farther down the page.

Place Important Items at Top Center

Put the most important items at the top center of the Web page to facilitate users’ finding the information. Users generally look at the top center of a page first, then look left, then right, and finally begin systematically moving down the total Web page. All critical content and navigation options should be toward the top of the page. Particularly on navigation pages, most major choices should be visible with no, or a minimum of, scrolling.

Structure for Easy Comparison

Structure pages so that items can be easily compared when users must analyze those items to discern similarities, differences, trends, and relationships. Users should be able to compare two or more items without having to remember one while going to another page or another place on the same page to view a different item.

Establish Level of Importance

Establish a high-to-low level of importance for information and infuse this approach throughout each page on the website. The page layout should help users find and use the most important information. Important information should appear higher on the page so users can locate it quickly. The least used information should appear toward the bottom of the page. Information should be presented in the order that is most useful to users. People prefer hierarchies, and tend to focus their attention on one level of the hierarchy at a time. This enables them to adopt a more systematic strategy when scanning a page, which results in fewer revisits.

Optimize Display Density

To facilitate finding target information on a page, create pages that are not too crowded with items of information. Density can be defined as the number of items per degree of visual angle within a visually distinct group. This density either can be crowded with many items, or sparse with few items. One study found that locating a target in a crowded area took longer than when the target was in a sparse area. Also, participants searched and found items in the sparse areas faster than those in the crowded areas. Participants used fewer fixations per word in the crowded areas, but their fixations were much longer when viewing items in the crowded areas. Finally, participants tended to visit sparse areas before dense groups. To summarize, targets in sparse areas of the display (versus crowded areas) tended to be searched earlier and found faster.

Align Items on a Page

Visually align page elements, either vertically or horizontally. Users prefer consistent alignments for items such as text blocks, rows, columns, checkboxes, radio buttons, data entry fields, etc. Use consistent alignments across all Web pages.

Use Fluid Layouts

Use a fluid layout that automatically adjusts the page size to monitor resolution settings that are 1024x768 pixels or higher. When web page layouts are fixed either to the left or centered, much of the available screen space is not used. It is best to take advantage of as much of the screen space as possible because this will help move more information above the fold. There has been no degradation in user performance when using the non-fluid layouts. However, most users prefer the fluid layout. One 2003 study reported a compliance rate for this guideline of twenty-eight percent, and a 2001 study found that only twenty-three percent of top websites used a fluid layout. Keep in mind that large monitors and higher pixel resolutions allow viewing of more than one window at a time.

Avoid Scroll Stoppers

Ensure that the location of headings and other page elements does not create the illusion that users have reached the top or bottom of a page when they have not. In one study, three headings were positioned in the center of a page below a section of introductory text— the headings were located about one inch below the navigation tabs. When users scrolled up the page from the bottom and encountered these headings, they tended to stop, thinking the headings indicated the top of the page. Similarly, users have been found to not scroll to the true bottom of a page to find a link because they encountered a block of text in a very small font size. This small type led users to believe that they were at the true bottom of the page. Other elements that may stop users’ scrolling include horizontal lines, inappropriate placement of ’widgets,’ and cessation of background color.

Set Appropriate Page Lengths

Make page-length decisions that support the primary use of the web page. In general, use shorter pages for home pages and navigation pages, and pages that need to be quickly browsed and/or read online. Use longer pages to (1) facilitate uninterrupted reading, especially on content pages; (2) match the structure of a paper counterpart; (3) simplify page maintenance (fewer web page files to maintain); and, (4) make pages more convenient to download and print.

Use Moderate White Space

Limit the amount of white space (areas without text, graphics, etc.) on pages that are used for scanning and searching. ’Density’ is the percentage of the screen filled with text and graphics. One study found that higher density is related to faster scanning, and has no impact on user accuracy or preference. Another study found that users prefer moderate amounts of white space, but the amount of white space has no impact on their searching performance. On content (i.e., text) pages, use some white space to separate paragraphs. Too much separation of items on Web pages may require users to scroll unnecessarily.

Choose Appropriate Line Lengths

If reading speed is most important, use longer line lengths (75-100 characters per line). If acceptance of the website is most important, use shorter line lengths (fifty characters per line). When designing, first determine if performance or preference is most important. Users read faster when line lengths are long. However, they tend to prefer shorter line lengths, even though reading shorter lines generally slows overall reading speed. One study found that line lengths of about twenty characters reliably slowed reading speed. When space for text display is limited, display a few longer lines of text rather than many shorter lines of text. Always display continuous text in columns containing at least fifty characters per line. Research done using a paper-based document found that medium line length was read fastest.