Follow the F Pattern and Make Your Visitors Pay Attention

One of the big surprises marketers faced when the first studies about web use were becoming mainstream was that nobody reads anything. To be sure, there are exceptions, like blogs and certain types of news articles. Generally, though, when looking for something, visitors don’t even choose between two options in their head. The grand total of things they compare is zero. They scan what’s available, do a mental check for problems, and then go with the first option that “seems” right.

Now, compare that against your experience surfing the web. You see sites with tons of text, even on landing pages. You see descriptions that include “world-class” or “cutting-edge” in industries where those are not that relevant. Your web site cannot afford to be part of that mess. As the web offers a wealth of information, businesses need to manage a scarcity of attention. You need to sculpt visitor attention so they can find what they need.

The F Pattern

People scan from top to bottom, from left to right. This is why on heat maps, there are typically “Fs” formed by areas noticed by visitors. There are tons of web sites that ignore this. On pages with multiple goals, you need to put the most important visitor tasks near the top-left section of the content area, and organize the rest in decreasing priority.

You can glean some of this information from searches on your site, you can take this from exit surveys, and if you don’t have either, you can try and take this from the most visited pages on your site. But somehow, you need to know what visitors typically want from your site. Organize your content according to how visitors consume your information – start with the most important at the top left, then work your way from there.

Fixations

If you have the F pattern down, the next thing you need to think about is saccades and fixations. The brain doesn’t “see” everything on the page in one go. There are saccades, where eyes just zip past content, and fixations, where attention lingers. You need to limit and control the fixations on your pages – you need those to be on the headline and the calls-to-action. If there are too many points of fixations on a page, that page will fail to lead the visitors to the correct area. If there are too few fixations, you are selling your CTA short.

You can control how your page is scanned by understanding what the brain prioritizes. Visitors are more likely to notice bigger fonts, and areas without clutter. Use negative space to draw attention to your headline and CTA. Make sure the main CTA pops by making it larger than the other content areas.

Irregular Shapes

Say you’re already prioritizing conversion points by layout, font size, and object size. What else is there?

The next thing you need to think about is how the brain recognizes shapes. Visitors will tend to notice irregular shapes before regular ones. If you’re using mostly straight grids, the rounded corners of the CTA will go a long way in calling attention to that area. It will also help certain visitors notice that buttons are indeed buttons, increasing visual affordance.

Contrast

Just as rounded corners will draw attention to your shapes in a layout dominated by straight lines, a green button will pop out in a page with a gray theme. Make sure you subdue elements that you don’t mean to highlight, and use colors to quickly draw attention to your key conversion points.

If you’re using other images like trust elements, ensure that the logos of other companies blend into the background theme of the page, while your CTA does not. You want your supporting points to be noticed, but the logos you are using to build trust will tend to have near-universal reach and the potential for instant recall; ensure that they can be recognized, but not at the expense of your main conversion path.

Faces

If you followed all that, you should be well on your way to creating a page that sculpts user attention. If you need that extra kick, you can use faces that point towards your CTA. As with most things about imagery, be extra careful in how you apply this. The brain is hardwired to notice faces and you can use that to your advantage, but professional image use is very important in establishing credibility; ensure that you do not apply imagery using faces too liberally. Think icing – a little is good for that extra “oomph,” and a lot just makes your cake look cheap.

In the old days, digital marketers chalked this up to, “the web is young. It’ll improve.” Well, the web has aged quite a bit since then. There have been improvements, but we can do a lot better – make sure you are doing your part. Ensure that you improve experiences using the F pattern, fixations and saccades, regular and irregular shapes, contrast use and effective imagery, and your bottom line will follow.