Page Structure and Layout

Page Layout and the Tao of Scent

The best designed web site is one that makes it easy for the user to accomplish her task in the least amount of time--and clicks--possible. Usability expert Jared Spool provides an approach to enhancing usabilty based on the scent of information in his article "Designing for the Scent of Information" (2004). The scent leads them toward the information that they require, and the stronger the scent, the closer the user is to her end goal.

Jared Spool is not a web designer, but he is a keen researcher and observer of human interactions with web sites. Through his usabilty research studies Spool has identified web site traits that either enhance or block the scent of information.

Things that enhance scent

Trigger words. These are words or phrases that the user (not the designer) associates with what they are seeking. "Trigger words jump right out of the page".

Questions that move from general to specific. Questions are not annoying to the user if each subsequent question increases the scent of information, and reassures the user that they are moving closer to their goals, giving them confidence to proceed.

Quick recovery from bumps or distractions. Information-rich sites will provide users with plenty of relevant trigger words that will help them key in to the scent if they get lost or confused.

Longer links. Seemingly in contrast with Steve Krug's advice to keep text short, research shows that in the case of hyperlinks longer links say more and provide more trigger words. The ideal link length is 7 - 12 words. Such links help remove any question about the link's destination.

Longer pages. Users do not mind scrolling if they are hot on the trail of information! Indeed, a longer page provides more context and more opportunities for trigger words.

Things that block scent

Iceberg syndrome. When critical information is hidden "below the fold". On the web the "fold" is the lower limit of their web browser's initial screen, and must be scrolled vertically through. Spool reminds us that "the idea that users won't scroll is only a myth." However, if navigation appears to be complete above the fold, or it appears as if there is no pertinent information lead to (or the information is going to be more of the same) below the fold, users might skip scrolling down to it.

Question: Is the fold consistent across browsers? Is it consistent across computers? Why or why not?

Camouflaged links. Obviously these are links that don't look like what users expect a link to look like. Do you know what the characteristics of a hyperlink are?

The first two are pretty obvious, and when using hyperlinks we should avoid confusing users by eliminating either of these entirely. We might compromise and say, OK we're not going to underline links for the sake of style but we'll stick with the contrasting bright blue color. Or we might maintain a color scheme and have the links orange or red or green, but maintain the underline.

The following diagram gives one approximation of what is clickable and less-so with respect to button-like shapes. Remember some of this requires context.

clickability

Banner-Blindness We have been trained to ignore dumb, flashing, animated advertisements in page banners and in side bars. Users therefore are shown to ignore top 60-100 pixels. Anything in this area has a likliehood of being lost to the user.

Links that lie. As opposed to long links that instill confidence, badly worded links weaken the scent when they take the user somewhere other than expected, or links who's meanings are confusing. Designers don't mean to be confusing liars, but that sometimes happens on the road to creativity, or when project specs or scope changes.

Cute Link Names. Almost as bad as links that lie are cute links. In this case, creativity backfires. As Spool puts it, "Clarity always trumps fun", so be creative with aesthetics, not with communication techniques. My advice is to use words that your 80-year old grandmother would understand.

Missing words. If I click on a link to a page, that page needs to reinforce my expectations. The page needs to have the same trigger words on that page, and not lead me somewehre else. This is easily achieved with hierarchical headings, which we'll talk about later.