Reading gravity pulls the curious users’ eyes from the top-left to the bottom-right of a layout. It is a natural human habit to scan something quickly before focusing all of our attention on it. How many times do we want to read the blurb of a book before reading it’s contents? Or watch the trailer to a movie before paying to see it at the cinema? Demos for games, radio singles from music albums—the list goes on. It’s common practice to want a taste of something before giving it full attention—it’s why all great stories start and end with action or drama to draw us in. We can apply this psychology to graphics and interface design, and the Gutenberg Rule is all about just that.

We know that we have a certain amount of time, wording, graphics and pixel-space to grab our user (returning or otherwise) and draw them into further reading, so designing an interface to accomodate for this is a science within itself.

The diagram suggests that the bottom-left area of the page will get the least attention as our eyes scan from top-left to bottom-right and that our glance would eventually end up in the lower right portion of the page. Of course this sort of theory depends on the dimensions and weight of the design, but would it not be beneficial for your call to action to be placed in the bottom-right of that marketing area? Maybe, maybe not…

Logical Applications of the Gutenberg Rule

Let’s take a look at some real-life examples of the theory in practice to see how it works. You should start to see the pattern in many interfaces and other pieces of design.

37signals do a tremendous job with their project management application, Basecamp. This website is the pinnacle of marketing design for the web. Notice how the two calls to action are in the Primary Focal Area where the site gives it’s elevator pitch to a new user and at the bottom right in the Terminal Area, where the site presents it’s final call after the user has scanned the page’s content.

It’s also a smart move to keep a call to action at the top of the screen and the bottom (or somewhere in the middle) for accessibility purposes. This means that wherever your user is on your page, if you manage to sell them at some point throughout your “pitch” then they don’t have to go very far to convert.

In the Strong Fallow Area, we’re hit with a screenshot of the application—but only if we want to, do we have to watch the video testimonials.

Ballpark’s application landing page is another great demonstration of Gutenberg’s rule in play. Once again, study the flow of the pitch; the calls to action on both ends of it’s “message” and the content that’s laid out in between.

The interesting thing is that designers often don’t even realise that they’re implementing this theory in their work because it’s such a natural way for us to think. We use it all the time in everything we do, often subconsciously.

Understand that the concept is more likely to work on pages which have a balanced distribution of content and a good text vs graphics ratio. If parts of your page are highlighted through other design techniques then those elements are likely to stand out and damage the flow of usability. It’s importent to try and select one model for your design if you intend for it to work, avoiding a clash in the user’s scan process.

Consider this rule for your next design, whether it be for a resume, business card or website landing page—the Gutenberg theory applies to all areas of design and it’s completely natural for the human mind to interpret information in this way.

A “conversion” is a term used (not only) in online marketing to describe the transformation of a “visitor” into a “customer”. It is the instance of a passing user on your site clicking that button, performing that action, or submitting that form. Whatever your ultimate goal is for your website—and you should have one—when your user succeeds in meeting that goal, they have completed a conversion.

Everyone wants a high conversion rate—the trouble is how to meet it? Programming won’t help you achieve that. Design & Information Architecture will. Let’s outline some best practices in design & copy for the web to discover exactly what sells.

What are potential customers looking for?

Customers look for solutions to their problems, not products. You don’t go shopping for a piece of clothing; you go shopping to solve your problem of not having any pants. You don’t browse Amazon.com for a book; you look for the answer to your crisis of not knowing what Miley Cyrus was up to when she was 12. The same theory applies online with your website. Your customers aren’t looking to buy your fancy new WordPress theme, they’re there to solve a problem: they don’t have a nice, easy to customise design for their blog.

Think about that for a second. How do you market a solution instead of a product? It’s quite simple when you step back and analyse what you’re actually offering. You promote the benefits of your product, not it’s features. Something your users can understand and relate to.

iPods don’t store 16 gigabytes of data, they hold 4,000 songs. Basecamp isn’t a web-based project management application built on Ruby on Rails, it’s a “better way to get projects done.” This is the mindset you must be in with your own product to truly connect on your users’ level.

Which of these two one-liners sells me better?

1. I use XHTML & CSS to produce standards-compliant hypertext documents for the world wide web.
2. I make good websites.

While the first option certainly tells you a lot more about the specifics, does it really sell? Think of your visitors first impression to your website as an elevator pitch. You have 7 seconds and 1004 x 580 pixels to sell yourself and open the funnel towards a conversion. Now answer that question again.

Applying a marketing pitch model to your landing page

The point I’m making is that you need to be as broad and brief as possible with your opening lines or “grabs” and use clever copy to funnel your users into the details. A common approach to selling is the AIDA model.

Attention: Make them Listen

You draw your users to a certain part of your screen using fundamental design elements: white space for focus, animation to draw, colour to contrast, size for hierarchy. It’s absolutely essential to ensure this happens above the fold—that is to assume your users will not click anything on your site and will not scroll down past their regular browser cut-off point.

Interest: Make them Want to know More

Use clever, solid copy to get them interested. Start to describe the benefits of your product or service—but keep it basic for now. The whole idea is to draw the line between what is too much and what will encourage a click-through. You can hit them with the details after they’ve made that decision.

Desire: Tease them

If your user has come this far, they’re obviously keen on knowing more about your product, so tease them. Testimonials, screenshots and case studies. Show them you mean what you say and have proof to back it up. Make them want your product, not just like the sound of it.

Action: Give it to them

Give them easy access to it. It’s so common to find a call to action at the top of the page thinking users need to see it right away but that’s a fool’s mistake. How many people buy a product without reading about it or trying it out? How many people sign contracts without first glimpsing over what they’re agreeing to? No one. Filter your users towards your call to action, don’t hit them with it before you’ve even told them what your product is.

AIDA converts. Try applying that model to your website or landing page and watch your rate grow.

I will be following this article up shortly with more information and examples on the AIDA model and other techniques. Stay tuned for round two.