We regularly perform expert CRO reviews of web designs for our clients. What informs these reviews? Is it just our aesthetic opinion? Must a design look a certain way to be effective at conversions? No. But whatever their appearance, conversion-optimized designs do share some common traits, and in this article I’ll discuss three I consider to be fundamental.

Trait #1: It’s Usable

Usability is the underlying framework for every conversion-optimized design. Think of it this way: if a web site were a house, usability would be the building code requirements that make structures work for human beings; doors must be so wide, ceilings so high, light switches wired in such a way that they don’t electrocute you when you visit the bathroom at night. It might not be glamorous or edgy, but usability makes things safe, easy, and efficient for users.

Since usability is so foundational, its fundamentals underlie much of what I look for during a CRO review. Take, for example, the basic usability concept of “affordance.”

Affordance: things should look like what they do, and be distinct from their surroundings.

Let’s look at two button designs for a quick comparative illustration of this concept:

Button #1

This button doesn’t look like a button, and it’s hard to tell where it begins and ends. It’s probably not going to be very effective, because visitors will either miss seeing it entirely, or not recognize that it’s a clickable element.

Button with poor affordance

Button #2

This button looks like a button, and it clearly stands out from the background. Compared to button #1, it’s much more likely to be effective. Visitors will see it and understand what its function is.

Button with good affordance

Another usability concept I rely on quite a bit is “perception of ease-of-use.”

Perception of ease-of-use: if something looks easy, it becomes easy—at least in your mind.

Perception can have a significant effect on how users interact with a web site. We’ve all heard about how design affects perceptions of credibility (see the Stanford Web Credibility Research site). Design can also affect how easy something appears to be. And all else being equal, visitors are more likely to take an action that looks easy than one that looks difficult or complicated, and—possibly even more important—to remember it as being easy when they recall the experience later.

With that in mind, let’s compare two forms. They both do the same thing, but which one looks easier to use?

Form design comparison

Most people agree that the form on the right looks simpler and easier than the original form on the left. The fields are larger and more clearly aligned, the labels are easier to read, and extraneous information has been offloaded to on-time displays that appear when the corresponding field is activated. All of these design techniques serve to make the form look less intimidating.

Trait #2: It’s Persuasive

An interface can be clear, obvious, and easy to use—and still fail miserably. Why? Because for CRO it’s not enough to be purely usable, it must also be persuasive. Usability simply paves the road—you still have to convince people to drive on it.

Here’s a good example of a usable failure. This is a screenshot of an actual banner ad I ran into somewhere in my online journeys:

Usable but non-persuasive interface

Now, this is a highly usable interface. The gigantic orange button is obviously a button. It looks very easy to use. But why the heck would I want to use it? I don’t understand the offer, and the flimflam benefit statement “Free & immediate” is not motivating enough for me to try it.

Let’s compare with this interface from an insurance company’s landing page:

Interface with persuasive features

Here we have another highly usable interface, with a nearly identical-looking orange button. Like the previous example, I know exactly what to do here. The difference is that this offer includes benefits that mean something to me. I like saving money, and I like the idea of accident forgiveness. The design visually displays these benefits in a way I can quickly scan and understand.

Trait #3: It’s Properly Prioritized

A design can be usable and persuasive but still fall short of being conversion optimized. How? By failing to help visitors understand the differences between options. This challenge comes into play whenever there are multiple choices or calls to action presented on a page.

For example, take a look at this example:

Non-prioritized comparison chart

This example is beautifully designed, quite usable and somewhat persuasive, but all the options are equally weighted, visually speaking. The icons are attractive but empty of meaning. The contextual information is contained in quite small, dense-appearing text that takes some time to read and compare. Essentially, this design provides very little prioritization for visitors.

In contrast, consider this prioritized example:

Prioritized comparison chart

In this design, the center plan, tagged “Most popular”, is larger and a different color than the others. This gives the visitor a visual anchor—a place to look first—as well as a point from which to compare the other options. The design also provides a ton of context to help with a decision. Notice how the summary information about each option is easy to scan and compare quickly, and how the products have not only a specific name and price, but also a concise, descriptive tagline: “For big groups”, “For small teams”, etc.

Prioritization can also be applied to more general content to create an information presentation hierarchy that’s clear and effective. Let’s look at a quick case study to illustrate this more clearly.

Case Study Before: Poor content prioritization

Lead generation page before

Among other conversion issues, this page did not have a clearly prioritized content hierarchy, which made the content difficult to scan and digest. For example, it takes several moments to even determine what the offer is, exactly (a free white paper). The title of the white paper being offered is positioned next to the company logo, which is just confusing—it fails to connect the dots for visitors quickly enough.

Case Study After = a 25X conversion rate improvement:

Lead generation page after

In contrast, this version of the page provides a much clearer content hierarchy, prioritized like this:

  1. What’s being offered (Free White Paper)

  2. What the offer is called (the title) and what it looks like (the hero image)
  3. What you should do next (the call to action and form action area)
  4. Why you should listen to this company’s opinion (the blue credibility splash icon)
  5. Summary features (the bullet points)
  6. What the challenge is, and how this offer helps solve that challenge (the first 2 paragraphs)

In this case, the re-prioritization of content truly drove the design, and the synergy between the two produced amazing improvements for the client.

In Summary

These are only three of the characteristics I think conversion-optimized design must have in order to be successful. Disagree? Think I should’ve prioritized (ahem) a different trait? Let me know in the comments below—I love a good lively discussion.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: Channel: Analytics | Search & Conversion

Sponsored


About The Author: is co-author of the popular book Web Design for ROI and VP UX of Closed Loop Marketing, an online marketing agency that's been making websites more profitable since 2001.

Connect with the author via: Email



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • MarkSimpson_Maxymiser

    These traits are great guidance for readers, but it’s important that readers understand that the only way they will receive the best optimized designs for their individual websites is by engaging a conversion management solution with multivariate testing. For example, the second “Add to Cart” design in trait #1 is without a doubt much stronger than the first, but we’ve found in the past that some websites are best optimized by removing the “Add to Cart” all together, or placing it in a different location–it all depends on the way your customers are using your site.

  • http://www.Weberest.com weberest

    Thanks, great post!
    By implementing similar tactics we have achieved nearly 15% conversion rate on several lead generation company websites.

  • http://www.moovinonup.com/blog kevingallagher

    Hi,

    Thank you for a great read. I have two questions that I would like your thoughts on.

    1) As great as conversion/usability optimisation is. The problem that people face is not that they know that they need to test these things. Its what they test is where they find the problem. What’s your thoughts on this?

    And

    2) As Usability goes drop down menus are evil for the obvious reasons. As I see some in the above example. So if this is true what in your opinion is a good alternative to drop downs that make it more usable?

  • http://www.closed-loop-marketing.com Sandra Niehaus

    MarkSimpson_Maxymiser – Absolutely – I certainly hope no one takes the above examples as literal directives! These are meant to illustrate guiding principles, and of course they must be tested for each particular company and channel/audience. We even see response variation at the level of individual product or service. There is no one ‘magic’ solution.

  • http://www.closed-loop-marketing.com Sandra Niehaus

    weberest –
    Thank you, and great work! Love to hear more about it if you can share the result details…

  • http://www.closed-loop-marketing.com Sandra Niehaus

    kevingallagher – great questions. A couple thoughts:
    RE #1 – I could go on about this all day! It’s a matter of A) being able to prioritize what to test based on potential business impact, and B) having copywriters and designers who are knowledgeable about CRO and can create strong, valid test options. If a company is weak in either area, the tests are likely to underperform. Luckily, there is a growing number of CRO consultants and designers who can assist with either area – help you identify test opportunities and plan out a testing strategy, and/or create strong test variations for you.

    RE #2 – If you mean site navigation menus, the larger versions you see on sites such as http://www.REI.com are an improvement to the typical drop-down menu. The careful use of small delays helps accommodate normal human mousing errors, for example.

    Hope that helps, let me know if you have follow up questions.

  • http://renanpoa renanpoa

    Hi

    The links of the images are broken? or is it just with me?

  • http://www.closed-loop-marketing.com Sandra Niehaus

    Hi renanpoa, Not sure what the issue might be, but I’m seeing the images OK, and haven’t heard any other reports of them being broken… Let me know if you still can’t see them and I’ll be happy to send copies over to you if you’d like.

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide