Designing web pages for conversion with "Save The Pixel"

Posted by Ben Hunt on 30 September 2010

In his book, Save The Pixel, Ben Hunt gives a clear step-by-step guide to making your website more effective.

He shares some of its secrets with you here.

The success of any website comes down to only two fundamental factors.

Your conversion rate is the percentage of visitors who complete a goal, whatever goals your website may have.

Anyone familiar with Wordtracker will have a good idea of how easy it is to increase targeted traffic to a website, with the right tools.

Beyond a certain point, it can get harder to find niche terms to continue to dramatically increase traffic, which is why today many web marketers are finding they can boost their profits by driving up their conversion rates.

In this article, I’ll give you a rundown of some of the major design factors that have most impact on your conversion rate. When you implement these principles of simple, direct web design, you’ll get the maximum benefit from every visitor you attract to your websites.

Attention: The Currency of Conversion

Conversion is all about attention. When someone arrives on your site, how do you grab their attention instantly? And how can you keep that attention so that you can communicate your message, and show your visitor the path to achieve what they want?

The single easiest way to increase attention is to reduce the amount of stuff on your web pages. Every single element on every page uses up attention. You want people’s attention to be directed at the things that will engage them. Anything that might draw attention and that does not help engage a visitor and draw them to interact further is a waste.

That’s why my book is called “Save the Pixel – the Art of Simple Web Design”. Web page designs should adopt a minimal approach. I don’t mean they should be bare and stark. They should use every pixel with care. Use pixels to communicate, to drive interaction, and to instruct.

Any pixels on your web pages that draw attention away from what’s really important are working against you. Look to communicate, not to decorate!

A great way to test how many pixels are working for you, and how many are working against you, is to remove any on-screen elements that are either:

*branding *content *or signage (navigation or pointers)

What’s left is decoration, which may look nice but doesn’t help you convert anyone. Try this example from the book.

When all the content, branding, and signage are stripped away, the result is a bare page. That’s an indicator of a page whose pixels are used with precision.

Here’s another example from "Save the Pixel", where no more than a smudge of color remains.

Getability

What are the first few things that get your attention when you first arrive on a web page? What do those first few clues tell the visitor? Is it a clear message, or are they overwhelmed with conflicting information?

I call the principle of instant recognition “getability”. When someone arrives on any of your pages, they should be able to say, “Oh right, this is a ***** site.”

That’s getability. When everything resonates to the same tune. This includes both hard, factual information and soft, more subtle information. Whenever anyone arrives at any web page ever, they only have one question at the back of their mind. This critical question is, “Am I in the right place?”

Whatever they’re in the right place for, your web page needs to help them answer the question positively – and fast! You only have a few moments. You need to tip the balance of probability that they’re more likely to get what they want by persevering on this site than by going back to the search results. It’s as simple as that.

This is why you must capture attention quickly, and then focus that attention in the right places. In other words, the things that should stand out most are branding, signage and content, as in the example below.

Some pages don’t have any most noticeable elements. Everything on the page is competing for attention, which gives the eye nowhere to start and creates confusion. This is very bad news, and will cripple your conversion.

You see, every element has a level of “noticeability” - how strongly it draws attention. Balancing noticeability is absolutely vital for successful graphic design.

Noticeability is relative. If you turn up to work tomorrow dressed as Elvis, everyone will notice. But if you go to an Elvis convention dressed as Elvis, you won’t stand out at all. That’s how noticeability works.

Noticeability Factors

There are nine basic visual factors that impact noticeability:

• Space – things in space stand out and are easier to distinguish.
• Position – things in premium positions are perceived as more important.
• Size – the bigger something is, the easier it is to see.
• Color – color that contrasts with other colors on a page stands out.
• Contrast – the eye is drawn to strong tonal contrast.
• Boldness – heavy lines or type have more contrast and draw the eye.
• Content – we’re drawn to what is interesting or appealing.
• 3D effects – create the effect of literally “standing out” from the page.
• Dynamism – the eye is drawn to stuff that moves or uses dynamic lines.

The first essential step to conversion is to use these factors to draw attention to the things a visitor needs in order to “get” what the page is about, and to answer their #1 question.

The second step is to keep their attention so that you can communicate your message fully and finally draw the visitor to a call to action. The more effectively you can do this, the more people will take the actions you want them to take.

Get "Save the Pixel" for 30% off This Week – Only for Newsletter Readers

The original edition of the “Save the Pixel” e-book inspired thousands of web designers and website owners to strip away decoration and to make their websites far more engaging – and successful.

Here’s what just a few readers have said:

• “This book is fantastic! As a self taught web designer I have been on the lookout for this book for years!”
• “It has revolutionised the way that I think about websites and I only wish I could have read it sooner.”
• “My favourite e-book of all time”
• “Whether you are a web designer or a company looking to enhance your web presence, Save The Pixel is a must read.”
• “Why should you read it? Simple: you will learn to work less, work faster and work more efficient.”
• “Save the Pixel will change the way you design websites.”
• “If you haven't discovered the strategies and tactics in Save the Pixel, I guarantee you're throwing away money.”

Now in an expanded second edition, it features 186 pages giving you insight, inspiration, and practical tips for how you can make your pages far more effective.

The 12 chapters also contain 22 complete worked examples, showing real home pages before and after the “Save the Pixel” treatment, with dozens of helpful screenshots that show you just how to apply these simple techniques yourself.

Normally selling for GBP £27 (USD $43 at today’s rates), for the next few days only we are offering you the 2nd edition for just GBP £19 (USD $29 at today’s rates) – that’s 30% off!

Just click this special link to claim your copy for instant download, and start to transform your website’s conversions!