From Volume 1, Issue 8 of
The Net Effect

Conversion By Design

Top design techniques that turn visitors into customers

by Andy Edmonds, StomperNet Faculty Member

In this article, I'm going to review how website design impacts humans and the way their heads, and wallets, operate. Human beings' surroundings and history have a traceable impact on how they’re likely to behave. If this sounds obvious, that’s good. But understanding how humans respond to design is only the beginning. Exercising the 10 "Conversion by Design" points expressed in this article will raise your consciousness about how your web-based design affects your customers.

Great visual design is truly an art form and a challenging skill to acquire. Smart design, which converts well, should never be confused with good artistic design. While artistic skills are always an asset when crafting a well-converting web site, they are neither sufficient nor completely necessary to succeed. We’ll look at ten principles, techniques, and strategies to creating a website that converts.

Regular readers of my The Net Effect articles (and folks who have consumed the StomperNet Click Fu video) will recognize some of the concepts here, but we’ve worked hard to focus on actionable steps to optimize your conversion flows and achieve continuous improvement.

Note: these techniques are specifically grounded in e-commerce and lead generation efforts. They're not specifically for long form sales letters. A few of the following design aspects are perhaps completely inapplicable to the LFSL format, but still – a thorough read should help you if you work with LFSL style of offers.

Keep User Costs Low

Every time your user is confused by your website or makes the wrong choice and has to back up to understand where to go, it’s like you increased the price of your offering.

Every time you streamline the user-transition from one step to the next and make it seamless and engaging, it’s as if you decreased the price. Succeed really well at creating a seamless, effective and interesting experience…and you can even support a premium price.

This #1 principle is a good one to keep in mind as you read through rest of the hit list. Because this is something of a unifying principle.

Sequence it correctly

Bad sequencing is responsible for some of the most common errors in life. Think about it. Have you ever left your originals in a copier? Or your bank card in the ATM? By not returning your bank card until after you have satisfied your goal of getting money, the ATM promotes the error of leaving your card. That's 'bad sequencing.'

Leaving the originals in the copier is similar. After satisfying your goal of getting the copies, there’s a dangling task remaining to retrieve the originals.

There's a similar danger for e-commerce. In e-commerce, that will be like evaluating the cost of a purchase before initiating the effort to buy. Shipping costs make up part of the total cost and if this value is not present early in the process, it violates the user’s expectation for the flow of a transaction.

Even how you place the order of the input fields can have a big effect on how natural and compelling a transaction is perceived.

Keep Your Eye on the Ball

Never take your eye off of the goal. On every page ask the question: if a customer decided they were ready to do business with me at this moment, is the path clear for them to do so?

For example, for blogs associated with businesses, I am a big fan of the sponsorship model. Sure, work hard to write good content that’s interesting and has value to readers who aren’t in the buying cycle. But always be sure that there’s a strong call to action on every page of your blog. Treating your business as a sponsor of the blog is a good way to do this.

Speak the User’s Language

This problem shows up most severely in big corporate websites where they organize content or refer to customer activities in a way that mimics internal organizational divisions, rather than the differences that are meaningful to the customer. Yet, all types of businesses can fall prey to using to much jargon. For example, just because you call a return a "restock" internally doesn't mean you should expse that terminology to your customer.

The advantages of using the right words and phrases can be immense. By using the words your reader is familiar with, you actually increase their IQ for the rest of your content! Anchoring your offer within concepts that are strongly familiar, and ideally using terms which are unambiguous to them, will increase the effectiveness of your entire offer.

And of course, good keywords that match user queries are the key to SEO success.

Stand Out

While it’s art (and not science) a definitive uniqueness to your design, attitude, or style can give you a strong edge over your competition. Part of this technique’s success is memorability. Because if your website experience is similar to previous experiences your visitor has had online, their brains ability to store your website as a distinct item is decreased.

Veering away from common conventions, say for product pages, should be done very carefully. Because we don't live in an ideal world and sometimes bad designs become so common that they actually perform better than designs which are more appropriate, efficient, or ideal. This happens because people are just plain accustomed to the worse design.

The “submit” button is a classic example. Action words, appropriate to the activity, produce strong responses and are way more meaningful to your visitors. Yet, despite the domination overtones, the commonality of the "submit" label on buttons has such familiarity that it’s hard to beat.

Naming your buttons with a custom label that expresses the exact nature of the what you want them to do increases user grounding in the task, but the common default increases the perception of speed. The principle of communicating progress will help you decide between these advantages.

Communicate Progress

You may have heard “no more than two clicks” or four clicks, or some such nonsense. That doesn't matter. What really matters is the perception of forward progress. Raw clicks are a poor metric to design around. That said, time is of the essence. People have many things competing for their time and attention and non-optimal use of time can kill conversion.

Start Strong

Reading on the computer screen is significantly harder than reading from paper. While browsing the web, people are especially hesitant to read. Focus on starting strong in each section of your copy and motivate the reader to continue, or, if it’s not really what the user is after, help them discover that quickly so they can take another path on your site.

In general, working to make paragraphs and even sentences in your online copy stand-alone and not depend on their surrounding context will help you get good re-use for social media and make sure that search engine copy excerpts displayed in SERPS are readable.

Due to the nature of scanning, the passive voice is more acceptable than in other forms of writing.

This is because passive writing often places the core concept at the start of the sentence. For example, writers are trained to say “We earned a top 10 rating for product availability across all available widgets” rather than “Produce reliability is rated in the top 10 of all available widgets.”

Create Personas

It’s a rare Internet business whose visitors are all the same. A solid strategy to help you make solid decisions is to create a small set of personas representing different types of users.

These personas can then be referenced as you iterate on your site design, write copy or optimize AdWords. There are lots of online resources for how to do this as well as full books, but the essence is to create fictional people with different goals, computer experience, working environments, interests, or whatever else is relevant to their experience with your business. It also doesn’t hurt to throw in a few irrelevant attributes (e.g. “Loves AC/DC”) to help distinguish and enliven the personas.

Avoid Pixel Junk

Yes, the horizontal rule tag (HR) was essential to web design in 1998. That was before web authors had the ability to control layout more precisely and create information chunks with more compelling visual elements. In today’s multi-column layouts, the horizontal rule is but a tiny visual feature, while in the single column designs of the '90s made a full width HR a substantive page feature!

The problem is that thin grey lines are not visible to peripheral vision and thus fail to create separation between sections unless the user is scanning that specific bit of content. If you want two sections to appear different from one another, make them really different by using a strong heading, varied background/foreground or … whitespace.

Design with white space

Instead of using what I call "pixel junk," to structure your content, instead use white space. It took me a long time to really grasp this concept. Empty space is a component of your design and in fact is one of the strongest components. So flip your perception on the head and think about empty space as what makes up your design. White space is the roadmap to your page’s content and is critical to both initial perceptions and to the ongoing use of the page.

Wrapup

It’s also very easy to become blind to the most critical aspects of your site’s “user experience” due to familiarity. The techniques described here are specifically chosen to help break through your accumulated exposure to your site and reveal how a new visitor might experience it.

Enjoy this Article? Get an entire Trial Issue of "The Net Effect" for only $1 (plus a special free bonus!)