3 Essential Traits Of Conversion-Optimized Design

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 #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.

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?

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:

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:

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:

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:

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

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:

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.