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.

So what do I think we’ll start to see a lot more of very soon?

Serif Fonts

In the past, it has been difficult to use serif fonts on screen due to low resolution displays and lacked support for font anti-aliasing in certain browsers or operating systems, causing illegible type. As screens become larger, graphics cards and displays having higher pixel resolution and browsers supporting more powerful font rendering, it’s time to bring back the good old serifs and make them new once again.

More Experimental Typography

Now that it’s relatively easy to use custom fonts on the web—whether that be through sIFR or CSS3 @font-face or even just an image, I think it’s about time we see a little more advanced typography on the web. It’s time for Georgia and Arial to move aside and make way for some fancy fonts and type treatments.

Minimalist Designs

Minimalist web and graphic design seems to be all the buzz at the moment, with galleries designed specifically for showcasing the lastest work. With corporations like Apple and Google slowly taking over the digital world and influencing modern design, I don’t see this pattern changing any time soon.

Stricter Grids

Today, websites in general hold much more content than ever before and the only way to maintain and properly present the vast amounts of content without it getting lost is through a cleverly designed grid structure. CSS and web design frameworks such as the 960 Grid System and Blueprint are trying to help streamline the web design process with commonly used grid dimensions based on usability standards and best practices in design.

Wider Designs

As of January 2010, 76% of computer users have displays higher than 1024×768 and 97% use 24-32 bit hardware to display 16.7 million colours. In theory, this means we’re no longer restricted to our safe area of 1004×580 pixels and in fact have a much wider canvas. When the new generation of web designers catch on to this, it’s going to be interesting to see what they can do with an extra 250+ pixels of horizontal space, not to mention a lower fold line.

CSS3 Effects

Alpha transparency, text shadows, rounded corners and even CSS animations without the need for javascript of Flash are all new effects that are becoming possible, or at least much easier to implement with the introduction of CSS3. I am looking forward to seeing what the industry churns out using these new features in the years to come so long as they aren’t overused and subsequently turned into a gimmick.

Stronger Marketing Models

The final trend—or perhaps even more than that—is not an aesthetic or functional prediction, but more of a purpose. People are really starting to understand the power of the web as a marketing tool; whether through email campaigns, social media or search engine optimisation. For me, there’s nothing more stunning than a cleverly designed landing page, using all of the above features and a bit of strategy to ensure success. This really is what I love about the web.

In Conclusion

I think we can expect one of the most experimental years to date in web design for 2010. The death of IE6 and the continual rise of standards compliant browsers; Firefox, Chrome & Safari, the growing presence of CSS3, HTML5 and jQuery and the increased methods of accessibility will all contribute to this. What are your predictions for the new year or even decade?

Business owners can be over-zealous, over-bearing and at times they can even come across as tyrannical—but put things into their context: as a business owner there are 3 main prerogatives that warrant such a pushy demeanour: the goal of maximising profit, the goal of investing as little amount of money as possible to attain maximum profit, and the final objective of doing both within the scarce constraints of time. Business owners are entering an age of enlightenment as websites are beginning to receive more emphasis as the favoured conduit between business and consumer. Design reconvenes the conventions of commerce, marketing and information sharing. By acknowledging the growing importance of online communication and design, what else would a pirate be doing other than conjuring up all available resources and preparing them to commandeer the latest vessel of opportunity? Let’s set the scenario…

Let’s call the captain of the pirate ship, or the business owner, Blackbeard. Now, aside form being a cliched fairytale persona, Blackbeard speaks a little differently to you and I because he speaks the language of business. The flaw of many designers is that they don’t understand the nature of business and how to effectively translate the language without drowning in the nomenclature. It’s the first day of the project, Blackbeard’s already speakin’ his language and he’s starting to get a little bit churlish… You’re neck-deep in demands and the whole time he’s been niggardly about costs. You don’t have much time on your side either, he’s looking at you for a design concept and he wants it NOW. At the moment, you’d love to do nothing more than to throttle that stupid squawking parrot on his shoulder and stick it where the sun don’t shine, but you won’t… He’s a respective customer, so we’ll stick to the agenda with:

5 ways you can ensure that you’re giving Blackbeard the design he wants

1. Be the boss. Tell the client when they’re wrong, but back it up with valid reasoning
   Clients and employers love nothing more than to be proved wrong about something they’re not educated in. It let’s them know they’re working with someone who knows what they’re doing. Everybody knows that some clients can have an overwhelming presence, and may appear intimidating – this is something you need to overcome if you want to achieve the best possible result. The pirate might be the Captain of the ship, but I’m sure he’s going to appreciate it if you prove him wrong for a purpose – particularly if he’s reading the map upside down. Remember, you’re the expert. Does he know anything about a page structure, or code…? No, he just wants to make damn sure that he’s there when you unleash the bounty. Assert your knowledge! (in a nice way, let’s not get our throats cut…)
2. Plan, plan and then plan again
   This gives the designer time to carry out the entire design process rather than to be worried about trying to find short cuts and ultimately not achieving the best possible end result. Overcompensate, assume the worst, allow for delays and GET IT RIGHT the first time around. Clients and employers alike are happier to expect their project in 3 months and have it delivered in 2 and a half, than to be told it will be ready in a week and receive it a day later. It is the responsibility of the designer, not the employer, to have a contingency plan ready… if the route to treasure cove is blocked, you better find another way round baby otherwise you’re gonna end up as shark’s breakfast.
3. Always request a brief
   Truth be told, employers have no idea what they really want. They just want a successful end product that reflects their business. You’re the designer, you know how to achieve that—they dont. When a client is forced to write a brief and sign a contract, we know that both designer and client are on the same page with what needs to be done, it’s simply a matter of translating the “needs” into a “solution”. Blackbeard is easily agitated and appreciates it when things are all the bit more foreseeable, by providing a brief with a workable “solution”, he knows exactly what he’s going to be working towards.
4. Keep them informed all the way throughout the process
   The worst thing you can do is go away for a few weeks/months and come back with a finished design. No matter how pretty and polished it is, it will be wrong. Keep the client up to date with regular progress reports and you’ll be failure-proof. What will happen if you don’t? Well, uhhh… He’s going to be requesting millions of last minute “changes” and your original design concept is going to come crashing down on you like the thunderous tentacles of the Kraken.
5. Don’t simply meet the brief, blow it out of the water… like a fish
   It’s a common theory that as a designer, if we can check all of the boxes on the brief then we’ve done our job. This isn’t true. It’s important to go above and beyond the call to action, by monitoring the end product after it’s been delivered and informing the client/employer of ways to improve in the future. Simply meeting the general requirements just won’t do… Doubloons are great, but why not go for those gold bullion’s? Hell, the Captain may even increase your commission or at least keep your expert services up his sleeve for future endeavours!

In Conclusion…

It’s really not that hard, is it? There you were, thinking pirates were all surly and a little bit dogmatic, but the truth be told they’re only just looking to get a job done. Business owners always have their eyes on the prize, and now that they understand that they can better achieve their goals through a splendiferous web design, it’s up to you to take them that extra step further by providing them with a painless, transparent design process that not only delivers on but out-performs their own expectations. And who knows, they might even love you for it…