FR = First Reaction

“How does this site make me feel?” The first question a visitor—Sam—asks, even if unconsciously. This is exactly like our first impression of people: made in our limbic systems within 4/10s of a second. A positive first reaction will improve conversions; a negative one will push them down. The First Reaction is governed by four main factors:–

1. Expectations. Does the site match or exceed what Sam was expecting—or does it try his patience or trigger feelings of uncertainty? The first expectation Sam has is that it will load promptly; he usually won't wait more than a few seconds. Once loaded, it still needs to prove itself; for example, a B2B page should be part of a larger business site—Sam may feel anxious about a page alone in the ether. Or, if he arrived via PPC, the page should deliver exactly what the ad promised, with similar wording.
2. Layout & Proportion. Are the page’s elements laid out in a familiar way: masthead at the top, navigation below, search on the top right, and body content aligned along the left margin? Is the layout open and inviting, or does a lack of whitespace make it seemed cramped and hard to read? Do the elements’ relative proportions fit the Golden Ratio—in a 2-column layout, 62% body width, 38% sidebar width?
3. Typography. Is the body copy set to a consistent grid, in a consistent font, at a consistent size (20px or above), with a measure no more than about 75 characters and a line-height around 140%? Are there scannable elements, like drop caps, short paragraphs, subheads, and lists?
4. Color. Is the page designed with an attractive palette, featuring no more than four main colors? Is this palette appropriate for the site? Is the body copy set black on white (or close enough)? Is color used to guide the eye in a logical path, or are some elements too visually dominant, standing out when they should not?

O = Orientation

“Am I in the right place?”—is the second question Sam asks. The page must look promising at first blush, and if he doesn’t feel confident about where he is within 7 seconds, he’ll leave. Therefore, every page must clearly orient him. There are four elements to watch out for here:–

1. Masthead. This includes both your logo and tagline. Even a self-explanatory logo-type—such as “Jameson Web Design”—will benefit from a tagline to further explain the site’s purpose in clear language Sam himself would use (no jargon!)
2. Navigation. This is the first place Sam glances to get a sense for the site’s structure—the places he can go and the options available to him. Is it clearly identifiable, with items labeled in a conventional way—or is it hard to spot, with “branded” labels he doesn’t understand, such as “Carrier Pigeon” instead of “Contact”?
3. Search. Over 50% of web users are search-oriented. Is the search bar clearly identifiable, located on or next to the navigation element, at the top of the page, with a button labeled “Search”?
4. Headline. This serves two purposes: It works with your tagline to further orient Sam, using keywords to help him understand the specific page he is on in relation to the site as a whole; and it compels him into the copy by implying the benefit or value of reading.

D = Desirability

“Will I gain more than I invest?” Sam always wonders this—if not in as many words—before he clicks on anything. So before you ask him to click you must explain the value. His perceived return must be greater than his perceived investment. This is always measured primarily in emotion—not in time or money.

If the investment is small the desirability can be small too. But if it is the potential emotional turmoil and effort of talking to someone, if it is the pain of parting with hard-earned cash, then the desirability must be high. There are four main elements which affect this:–

1. Headline. This has to make Sam read your copy; if it doesn’t, you won’t get any conversions. So engage with what he is already thinking. Take a question, problem, fear or desire already on his mind, and appeal to his self-interest there—directly and clearly. Then put yourself in his shoes, read the headline you’ve written and ask, “So what?” If you can’t answer, rewrite.
2. Body copy. The purpose of your copy is to get Sam from what he believes about your offer when he arrives, to the belief that he should take you up on it immediately. Whether the page is a lead-generation form offering a free PDF, or a sales letter for your $90,000 flagship product, you can use the “Four Ps”:–
   1. Promise him something;
   2. Picture that promise fulfilled;
   3. Prove that you can fulfill it;
   4. Push him to accept your offer.
   Whatever you’re asking Sam to do, don’t focus on selling it. You’re not an advocate for your offering. You’re an advocate for Sam. Genuinely care that he makes the choice which is best for him. Then explain, in exactly the same way as if you were speaking directly to him, how you believe your offering is best for him. Clarity trumps persuasion. People hate being sold to and know when you’re trying to do it. But they love to buy, and they love feeling they’ve been helped to make a wise decision. If you can make Sam feel that way, you’ll do well.
3. Images & video. These convey desirability with great force—provided they’re used correctly. They must demonstrate to Sam that his return will outweigh his investment. In most cases copy does this better, which is why websites with flashy graphics and videos often perform poorly in terms of conversions. But there are times when media conveys value more effectively than copy:–
   • Hero shots help Sam relate to the author as a real person;
   • Product shots or videos show rather than tell;
   • Trends & statistics are easy to grasp when presented graphically.
4. Speed. The “faster” your page feels the better it will do. Long sign-up forms with numerous fields look like a lot of effort; they are slow. Multiple columns of text slow Sam down because he doesn’t know which one to read first. Excess verbiage prevents him finding the information he wants, stalling his momentum. And a slow loading-time will prompt him to abandon the page before he even sees it.

O = Offers

“Do my goals match the options?” Sam wonders, looking at the links and buttons available at the end of the copy. Assuming the desirability elements have been done right, the final hurdle the page must overcome on the way to success is the offers. How well these will work is determined by four factors:–

1. Placement. Is what is being offered the same thing that Sam wants at this point on the page? Is the offer logical given what he currently knows and feels—or is it asking for a commitment he’s not yet ready to make? Is it considering his goals and fitting the page’s objectives to these—or is it considering the page’s goals, and asking him to fulfill them regardless of what he wants? Very often, one of the objectives on a company’s homepage is to buy something. This is illogical—like asking a prospect to buy as soon as he walks in the door of your office.
2. Visibility. Does the call to action (especially the button) stand out? It is almost impossible to make a call to action button too large. As it gets bigger it will get more clicks—but it must look clickable; dimension is important here. Orange is a good color to start with for buttons; avoid red if possible; but above all make it stand out.
3. Phrasing. Does the call to action reiterate the payoff Sam gets—or does it reiterate what he must do? The former will always work better than the latter. Buttons should start with a verb like “Get.”
4. Weight. On pages with more than one objective, are two calls to action present, both reflecting logical goals that Sam may want to fulfill and which will work towards the site’s main objective? Do they offer graded levels of investment to create an either/or rather than a yes/no decision? Are the buttons visually distinct, with one having greater size, brightness, or some other kind of contrast to the other?