Blog

Conversion Optimization Design Tips | SplashU

Conversion Optimization

  |   Entrepreneur, Graphic Design, SplashU, Web Development, Web Optimization   |   1 Comment

Design Tips for Better Website Conversions.  

Can I tell you something? 

Conversion optimization seems to be “all the rage” these days… 

And for good reason. 

There is nothing growth hackier than setting something up (like a website, or a social media campaign…), testing various elements within it, and optimizing based on data-driven results.

That’s pretty much the basis of conversion optimization. Creating something, then continually making it better. 

But, as you already know, if you read my previous post The 4 Principles of Good Website Design, not all designers are as concerned with your initial conversion rate as maybe they should be when they are designing your website.

They are probably more concerned with whether you like the way the site looks rather than focusing too much energy on optimizing a site for sales. 

But, let’s be real!

The goal of most business websites is to either sell things, or get visitors to go buy things somewhere else. There is always going to be a purpose behind a website.  

That is why it is up to you as the business founder to understand the ultimate goals of your website and how they are considered during the creation of the site. 

You need to know a few things about design, at least on a basic level, and how it relates to conversion optimization.  

Using the 4 principles of design will help with with website usability, branding and aesthetics… 

But, that’s not all there is when designing for conversion. 

In fact, the 4 principles of design are just a starting point….

 

 

Free Cheat Sheet

Designing for Conversion

Don’t feel like reading the post, but want to apply these conversion optimization tricks right now? Grab your free Designing for Conversion cheat sheet and make some quick changes this instant!

Grab My Free Cheat Sheet

So let’s get into the six main conversion optimization topics…

 

Attention

Oli Gardner from Unbounce defines attention ratio as “the ratio of links to the number of campaign conversion goals.”

The attention ratio that converts the best is 1:1.

That means for every campaign goal, there should only be one place to click.

Obviously, this concept is great for landing pages, where there really only is one ultimate goal most of the time. But for a website, how can you utilize attention ratio to your benefit?

Well, first of all, knowing your goal for each page is half the battle.

If you have 80 million links to click, but your main success metric is email signups, maybe tone that ‘ish down a little bit right? Make your number one call to action the first thing they see when they come to your website.

Don’t crowd the home page with social buttons and multiple calls to action. Focus on the ONE THING you really want them to do.

If you REALLY want them to leave your site and go get lost somewhere on social media, make your social buttons huge and place them at the top. Maybe they’ll remember to like your Facebook page while they’re watching dogs ride roombas dressed as Santa Claus. (I probably just lost a few readers just for including this link!)

The thing is, website visitors don’t know this, but they are looking for your help. They want you to show them what to do.

So, by all means, don’t confuse them!

Highlight your main goal, make it easy for them to find it, and don’t offer them ways to do what you don’t want them to do ok?

 

Remodeling Fair - Bad Attention Ratio

 

This website offers 13 potential links that I could click on, and no real CTA. I don’t even know what they actually want me to do.

In fact, the biggest, most obvious piece of information is a Free something. I’m assuming that it’s the actual Home Remodeling Fair event itself, but there are so many competing potential actions that it’s hard to tell.

Ironically, they’ve updated their website since I started writing this post, and it looks much cleaner now:

 

 

A Poorly Optimized Conversion Example

…but there are still visible issues with alignment (and look at the lonely Facebook icon at the top!).

At least they’ve cleaned up there message, and now I can now figure out what this site is all about.

 

Here’s an example of a good attention ratio:

 

conversionxl button

Now, this is a little bit unfair since Peep Laja, pronounced “Pep Laya,” (you’re welcome), is an absolute CRO ninja. You should probably subscribe to his blog if you’re looking for world-class CRO advice.

Anyways, you can clearly see what he wants you to do here… It’s no mystery, and that’s why it works.

 

Forms

Another topic when designing for conversion is to do some serious testing with your forms. And if you don’t have any forms (an email opt-in with one field is still considered a form), I think I found your main conversion optimization problem 😉

Having an optimized form can increase your conversion rate drastically.

Here’s a couple of examples of effectively designed web forms.

The form is imperative because that is where you are attempting to gather information, possibly even actual dollars from your visitors, so it’s pretty important not to screw it up.

What form fields are actually needed for your specific business and goals are going to vary from one person to another, but there are a couple of widely accepted rules when it comes to form design, and those are:

  1. Form field number – Minimize the number of form fields for free things like blog subscriptions, content, or webinar registration. You don’t want to scare away your potential customer, audience member, or blog subscriber by asking for way too much for not very much. You can add more fields as the quality of what is being offered goes up. When you are offering a more expensive item, you probably want to pre-qualify people who filled out your form by making them pony up more info and spend more time filling out the form to gauge their actual interest.
  2. Make the form user friendly – don’t disable copy paste, don’t use captchas, don’t use those three, annoying boxes for phone numbers!
  3. Don’t scare the form filler by using negative words (or images) ANYWHERE!
  4. Don’t hide, crowd, or forget your CTA – use a complimentary color that stands out from the surroundings. This is not the place to be matchy matchy.

 

A creepy guy will watch you as you fill out form…

 

“Don’t be afraid. Connect with us.”

Example of bad conversion optimization - Millennium 1 wtf

Borrowed from: http://www.millenniuminteractive.com/

…or not.

 

Font Choice and Spacing

According to Marketing Land, typography decisions are one of the most overlooked areas in conversion optimization.

But simply paying close attention to your font type, the line height, letter spacing and line length can significantly improve user experience, and ultimately your conversion rate. 

For the web, (and this is pretty obvious information,) you want to choose fonts that are easy to read.

You also want to make sure that the lines are the correct height. If the text is too close together, it can feel cramped and stifling. But, when there is too much white space, it makes it hard for the eye to remember which line it is reading.

Opt for a line height that provides some breathing room. Around 1.5x is generally good.

The same goes for letter spacing. You want to make sure that the end of one word and the beginning of another is very obvious and fluid.

As for line length, website copy should almost always be punchy and to the point. You want the user to have the ability to scan through your words without getting bogged down by long, heavy lines of text and run on sentences that are hard to understand.

Remember that you always want to make your user’s experience as easy as possible. Don’t overwhelm them with too many words per line.

 

Message and Design Consistency

I talked about this a little bit in my principles of design post, but consistency is key when it comes to conversions.

Usually, there are going to be several touch points between your brand and the customer.

Like a relationship with an old friend, you want to make sure that the conversation is being continued every time you pick up where you left off.

Inconsistent messaging creates distrust, and that can kill your conversions.

Inconsistent design produces weak action, and that can also kill your conversions.

If you are running an ad that says one thing, when they get to your website, the message should match. It should feel like they’ve never left which ever platform they were currently experiencing when they clicked your ad and got to your site.

If it feels different, they’ve been disrupted and it will probably shock them into recognizing this discrepancy.

 

And then you’ve got a problem.

 

It’s pretty easy to fix though. Just make sure the elements of your design are cohesive, and that you actually deliver what you are promising.

If your call to action says “download my free ebook,” you should give them a free ebook… And it should teach them all of the things you said it would.

Now, aside from stealing a quick look into the things that Facebook thinks (knows) I’m interested in, I’m going to show you what I mean.

Here are two examples of sponsored Facebook ads and their respective landing pages. The first one is from Instapage, a company that (ironically) sells WordPress integrated landing pages.

In this example, the messaging is pretty well matched. The ad talks about conversion rates, and low and behold, when I get to the landing page, the first thing I see is a message about conversions.

design missmatch 

design missmatch 2

Now, I may be picky about this because I’ve studied it so much, (and I know, Facebook ads with pictures of women looking fondly off into the distance, or painting their nails or pretty much just existing tend to convert better than any other type of ad), but the design doesn’t really flow from the ad to the landing page.

The stock photograph has absolutely ZERO to do with the landing page that I’m taken to.

And quite honestly, I would’ve liked to have seen her there! I got to the page and thought “Hey…wait a minute! Where’d that girl drinking coffee go? Now I’m all alone with a book and a button… Someone is trying to sell me something…”

I’ve always liked the idea of keeping humans on the page because no one wants to be alone with a book, a button, and a message about leads and conversions…but maybe that’s just me.

I also dislike copy that says generic crap like “More conversions! More leads! More sales!” Is that the real benefit to your product? More sales? C’mon.

Clarity of word choice is one thing, but there’s still room for a hint of creativity. Be specific. Your audience will thank you, and you’ll convert better because they’ll know you’re talking exactly to them. 

Again I’m getting off topic.

Nothing against the people over at Instapage, the rest of the landing page is pretty good. They just need to re-think their customer journey from ad click to landing page.

Continuing that design conversation from ad to page is just as important as the messaging.

This next example from Autopilot, a marketing automation platform.

messaging match 

messaging match2

This journey I liked.

I clicked on the ad which was a simple picture that showcased their product. There was no girl looking off into the distance, but I knew from looking at the ad that it was some sort of marketing platform, app or software. When I got to the landing page, I was not surprised to see these little colorful shapes pop up with a message that talked about marketing automation.

There are some flaws with the rest of the landing page, but for the sake of messaging continuity, I think they did a fine job.

 

Usability

Usability is a measure that relates to whether or not your site is difficult to understand and/or navigate.

Poor usability means poor conversions.

People don’t have time for wild internet goose chases… If your site is hard to use, you’re losing money.

Simple as that.

The design of your website should heavily consider the user experience, and you should probably always be testing it to find out all of the areas of friction that your visitors may be running in to.

Sites with good usability are designed to help the user find the information they are looking for. They are intuitive from the visitor’s perspective, not your own.

In order to design for good usability, you need to test your site with actual users, get their feedback, and optimize.

Luckily, there are tools that you can use to help you with usability testing.

One that I recommend is UsabilityHub.

You can run simple tests on elements of your website like the copy or your logo, or you can even have people take a 5 second test which will help you understand what the user sees in the first five seconds of looking at your website.

Another option is using a heat map.

You can check out Neil Patel’s CrazyEgg heat mapping software, or another option would be HotJar. I haven’t used either of these personally, but heat maps typically study visitor mouse patterns and help you understand what the user is clicking on.   

In this heat map example from Estine Muki, you can see exactly what his audience is interested in reading about…(and what they clearing don’t care about…)

hotjar-review

http://enstinemuki.com/hotjar-review/

If his main goal was to get people to read his premium blog posts, he’d need to seriously re-think his current strategy.

 

Color

Probably the most well-known topic on this list is color. People just LOVE testing button colors! They can’t help themselves.

Color Wheel Image

If there’s one thing that I’ve learned over the past few years of doing this, it’s that your CTA should stand out from the rest of your content, and the best way to do that is to choose a bright, pure color that is on the opposite side of the color wheel from the rest of your color palette.

(Green is the opposite of red, purple is the opposite of yellow…)

A pure color is defined as a primary, secondary, or tertiary color that doesn’t have any white, black, or a third color, mixed into it.

Here’s a little color theory fact that I learned from esteemed conversion and growth marketing specialist Angie Schottmuller:

When your eyes get exhausted of seeing a certain color, they will perceive the complementary (opposite) color to give themselves a break.

If you look at a bright red square for a minute, when you look away, you will see a distinct green square. This is your eye giving itself a break.

That’s why using a button color that is the exact opposite of the rest of your color palette and isn’t featured anywhere else on the screen works so damn well. Your user’s eye is actually begging to look at it.

For the highest conversions, you don’t really need to test your button color. Just use a pure color that is the opposite from the rest of your palette for your CTA, and use shades, tones and tints for everything else.

For a reminder on what those are, check out this Co-Schedule post.

 

Here are some examples of not great button color usage:

a CTA i don't love

This has a rather bland “submit” button that just gets lost at the bottom of the page.

 

 

CTA example

This one uses the same green that was used in a nearby photo. It doesn’t jump out or offer that relief the eye is looking for.

 

 

freshly button fail

This one also doesn’t grab attention. Sure, the image looks nice, but the CTA blends in with the broccoli and kale.

 

 

If I were these companies, this is what I would do:

better-button-3

better-button-2

better-button-1

Boom! Can’t miss those buttons now.

All it takes is a little color knowledge to get those buttons to stand out.

And referring back to the basic elements of good design that I talked about earlier, high contrast is typically a good thing when it comes to website colors.

Low contrast text is hard to read and disrupts usability, which leads to lower conversions:

An example of low contrast blue on blue

Ultimately, color has a lot to do with the design of a website, and should be well-considered from a conversion point of view.

Alright, that’s it for me.

I know that there was a lot to cover in this post, so I’ve made a handy cheat sheet for you to download for your reference. Bring it with you the next time you meet with a potential web designer and make sure they know their stuff! Or, just use it to do some usability research of your own.

 

Free Cheat Sheet

Designing for Conversion

Don’t feel like reading the post, but want to apply these conversion optimization tricks right now? Grab your free Designing for Conversion cheat sheet and make some quick changes this instant!

Grab My Free Cheat Sheet

 

Is there anything I forgot or that you would like to add? Please comment here in the comments section below or Tweet me @ArtworksByShana.

 

There was an issue loading your exit LeadBox™. Please check plugin settings.

AUTHOR - Shana Haynie

Creative Director and Co-Founder of SplashOPM - a Growth Marketing Agency for Entrepreneurs and Startups.

  • Lenna Reichmanngho

    Hey, Shana, nice tips you got here in your article!

    I have been researching conversion optimization for a project I am currently busy with. It is really important to get the attention of the persons or individuals who find their way into your pricing page. Getting their attention helps increase your chances of scoring a conversion.

    It’s just interesting how each article on conversion optimization have different yet oddly similar approaches.

    I noticed that in your case, the emphasis is focused on visual cues. A similar article: http://www.leadchat.com/blog/examples-conversion-driven-website-copy/, likewise emphasizes the effective use of visual cues but also delve into psychology.