jim.shamlin.com

Page Layout

This chapter refers to content pages of a site (as opposed to the "home" page, which was covered in the last chapter).

1. Avoid cluttered displays (5:3)

Verbatim: "Create pages that are not considered cluttered by users." (EN: this is both poorly described, and contains an inherent admission that this is entirely subjective).

2. Place common items consistently (5:4)

Consistent layout is key to usability - users quickly learn the location of certain elements (logo, navigation, search engine, etc.) and are disoriented if they are placed differently on different pages.

3. Place important items at top center (5:4)

The position at the top of the page is the first place users look, so important items should be placed there.

EN: the examples demonstrate something the author does not mention explicitly: common page elements like the logo and top navigation bar are ignored by users after a few pages - the first thing they notice is the first *new* thing about any given page.

4. Structure for easy comparison (4:4)

When users are likely to analyze two or more items to make comparisons, use a table to present the information side-by-side (rather than expecting users to remember data from page to page)

5. Establish level of importance (4:4)

The author recommends the inverted-pyramid approach, similar to newspaper content, in which the most important information appears closest to the top of a page.

6. Optimize display density (4:3)

This guideline suggests using white space to create visual separation among elements, in order to facilitate scanning.

7. Align items on a page (4:5)

Be consistent in the alignment of content across all pages. (An example given shows a menu in which the first four items are flush-left, then the next four are flush-right).

8. Use fluid layouts (3:3)

The author suggests using a layout that will scale to fit the width of the window.

EN: This is contrary to usability research that suggests that paragraphs that stretch to fill width are harder to read, and that column width should be constrained.

9. Avoid scroll stoppers (3:4)

The author seems to be referring to the use of white space that creates a horizontal break that spans the entire width of the page, which gives the user the impression they have reached the bottom of the page. Also, the author mentions a paragraph of small text might be mistaken for a footer.

EN: Some space is inherent to the medium (spaces between paragraphs) and may be inevitable. However, an unusually long space (artificially widening the gap) should be avoided.

10. Set appropriate page lengths (3:3)

The author indicates that shorter pages should be used for the home page and menus, enabling the user to see all content at a glance, but longer pages should be used for content that should be read - forcing the user to click to the next page creates a distraction from the topic.

EN: There is some argument still going on about whether users prefer an article to be presented in a page that scrolls, or in many short pages they have to click through. This argument goes back and forth, but the current convention is to focus on the content, dividing it into "chunks" related to its structure, and keeping those chunks integrated.

11. Use moderate white space (3:4)

Limit the amount of white space on pages used for scanning and searching.

EN: The first guideline advocated white space on these pages, the ninth indicated it could cause a user to stop reading prematurely, and this one indicates it should be "moderate." How much white space is enough, and how much is too much, is very subjective.

12. Choose appropriate line lengths (2:4)

If reading speed is important, use columns of 75-100 characters wide; if acceptance is important, use 50-character lines. Columns of 20 characters or fewer slow reading speed.

EN: Better resources exist on the topic offline length and ease of use.

13. Use frames when content must remain accessible (1:4)

The author advocates the use of frames to keep specific content on screen while allowing other content to scroll. Side-by-side frames, with functions on the left and content on the right, "Seem to work best"

EN: Other techniques may be used as well - the key is that the functions that modify content and the content itself should not be isolated. The example given is a map that has several variations the user may wish to compare. My sense is that this situation is unusual, and applies to specific instances.