8. The Web Page
EN: The chapter introduction is a bit disjointed and random. I think the author is trying to convey that the page-design level is where the user forms an overt impression of a site.
8.1 General Page Design Issues
This first section examines some general issues, which are independent of the specific type of page in question (menu, content, or transaction).
8.1.1 Consistency
Consistency enables a user to learn specific techniques of conventions of a site that apply to every page rather than each page being a unique case with its own unique circumstances.
Certain page elements are consistent across the site (logo, top-level navigation bar, universal links, etc.) and are consistently placed. It is likewise important to establish consistent practices within a section or a flow (and among sections and flows).
8.1.2 Coherence
The author uses "coherence" to refer to a number of things. He mentions information density and the confusion that comes from a cluttered page. He then mentions methods of navigating content (scrolling versus paging), then layout (title at the top of the page, left-aligned or centered), use of white space to separate page elements, reducing the volume of content (links for extraneous details rather than including them in the page), use of layout to group and/or separate items, and a few other topics.
EN: Ironically, this section on "coherence" is very incoherent, and the relationship among the topics is unclear, as is the point he's trying to make. Perhaps he's provided a model of what should not be done?
8.1.3 Placement of Information
Cites studies that indicate Western users look at the top left of the screen, scan to the right, then down. This tells the designer how to arrange blocks of content (text, images, etc.) on a page so that they receive attention in the appropriate/desired order.
Also, items such as bright colors of animations will call the eye away - so a designer can distract a user from the top-left orientation. If this is not done purposefully, it can be counterproductive.
8.1.4 Information Coding
"Coding" refers to using techniques such as size, color, or boldness to call attention to items, suggest their level of importance, and emphasize the similarity or difference among content chunks.
The author warns that having too great a number of different coding techniques can undermine their effectiveness, making the code signals seem random and meaningless. There is no indication of exactly how many cues are "too" many.
Also, techniques such as animation can be distracting in an interface that requires prolonged focus on any element other than that which is animated. (Likewise, sound distracts from reading comprehension, etc.)
8.1.5 Color
The use of color can be used to draw attention - but the more colors used on a page, the less these differences stand out. The convention, borrowed from other media, is five to six colors at most (Carter 1979) - but the fewer the better: a color is used in an otherwise monochrome interface is the most effective. As more colors are used, the impact is diminished.
In choosing background and foreground colors, contrast is key: the higher the contrast, the greater the readability (EN: also, the harder it is on the eyes to view the page for a long period of time).
He tries to provide a quick summary of color theory and established color schemes, but does a bad job of it. Better information is available from more qualified sources on this topic.
Random bits:
- Color is less effective on the periphery of vision (gutters of a page)
- Low-frequency colors (blue and purple) should be avoided for text and icons, ans they are more difficult to focus upon.
- For Web sites used in bright areas, light colors (pastels) may be washed out.
- Recall that 8% of males and 0.5% of females have some degree of color blindness: consider the common patterns (red-green and blue-yellow)
- Certain shades in close proximity create visual vibrations (red-green, yellow-blue, blue-red, and blue-green)
EN: There was other random bits, more a matter of unsupported opinion than fact, which I've omitted.
8.1.6 Text Clarity
This seems to be a mix of editorial and design tips. The stuff that's based on research is summarized here:
- Mixed-case text is more readable than all-caps or all-lowercase, though uppercase used conservatively can call attention. (Moskel 1984)
- Regarding line length: text to be scanned should not be more than 35 characters wide. Text to be read word-for-word can be up to 74 (Gould 1984)
- Reading speed is significantly lower for screen reading than for hard-copy reading (Grischkowsky, 1984).
8.2 Home, Content, and Transaction Pages
The author divides all Web pages into one of three types:
- Home Page - An introduction to the site, indicating its purpose and structure
- Content page - Contains content for the user to view (text to read, video or animation, etc).
- Transaction page - Pages into which users enter data and receive responses
EN: This seems a bit oversimplified, but I'll let that go.
8.2.1 The Home Page
The home page is the front door of a Web site, through which all users are presumed to enter. The author stresses the importance of the top half of the first screen as the place that users view first and decide whether to go further, and that the remainder of content should be above the fold without scrolling (based on Nielsen's 1996 study that demonstrated users prefer not to scroll - EN: later studies find otherwise).
Links back to the home page should be provided from all pages within the site, to enable users to go back to the main entry and start over at any time.
EN: later studies find that the home page usually not the point at which users enter a site, due to deep links from search engines. The figures vary according to the site in question, but can be very low. While it's important to consider for the users that do come through the front door, realize that this does not describe all users.
EN: Also, the user describes the home page as a singular item: I think that pages that introduce sections of a site also have much the same purpose, and needs, as the home page of the entire site.
8.2.2 The Content Page
Author stresses the importance of function over style. The designer's first priority in designing the content pages is to make the content accessible and usable, catering to the functional needs of the user.
Also, the "content" may be more than one item (one story, one image, one video clip). A product page is a content page, but contains several chunks of information that need to be arranged in a way that will accommodate the way in which the user will need to use the content.
Recall also that site-wide decisions supersede decisions to be made within a specific page, so if there is standard layout template that indicates the size and position of a headline, the content page must comply.
There's a handful of random advice on how to handle specific situations. Again, this author is not qualified to provide this sort of advice, and can cite no evidence to support his opinions, so I'm omitting it.
EN: I think the author lumps too much into this category. Menu pages, which present a number of selections to allow a user to request more detail on one of the items, are not content pages. A page that contains a product is not just content, but transactional, as the user will add the product to a cart, perhaps specifying size, color, quantity. Some pages contain a blend of content items and transactional items. His categorization is too broad here.
8.2.3 The Transaction Page
The author defines "transaction" pages as being interactive - the user takes action, using page elements, and receives a response based on his actions. In other words, they are interactive (as opposed to static).
EN: There's another reference I have recently read that provides much better information about forms-based transactions on the Web, so I'll elide most of the opinions this author dispenses.
Largely, he says designers should provide instructions, consider the user's mouse/keyboard actions when doing data entry, provide clear feedback when data is received, provide instructional error messages, check for errors before submitting data for processing, etc. Nothing revolutionary.