[18] How to Create Visually Effective Calls-To-Action

The Transcript

Jerod Morris: Welcome to Sites, a podcast by the teams at StudioPress and Copyblogger. In this show, we deliver time-tested insight on the four pillars of a successful WordPress website: content, design, technology, and strategy. We want to help you get a little bit closer to reaching your online goals, one episode at a time.

I’m your host Jerod Morris.

Sites is brought to you by StudioPress Sites — the complete hosted solution that makes WordPress fast, secure, and easy … without sacrificing power or flexibility. For example, you can upload your own WordPress theme, or, you can use one of the 20 beautiful StudioPress themes that are included and just one click away. Explore all the amazing things you can do with a StudioPress Site, and you’ll understand why this is way more than traditional WordPress hosting. No matter how you’ll be using your site, we have a plan to fit your needs — and your budget. To learn more, visit studiopress.com/sites. That’s studiopress.com/sites.

Welcome back to another episode of Sites — another week of unpacking a strategy that will help you build a better, more powerful, more successful WordPress website.

Last week, we talked about how your content can seduce your audience. This week, we’re going to talk about how to capitalize on that moment when the seduction actually works. How do you close the deal?

Whether it’s a small, relatively easy deal — like getting an email signup. Or a larger, more complex deal like asking for a recurring purchase.

It’s all about crafting effective calls to action. And the greatest CTA copy in the world won’t make a lick of difference if your CTA isn’t visually compelling enough to draw attention to it.

So that’s what we’re going to discuss this week: how to create visually effective calls to action.

And we have a great blog post from Rafal Tomal to help us do it.

Here is my reading of Rafal’s blog post: How to Create Visually Effective Calls-To-Action.

How to Create Visually Effective Calls-To-Action

Designing your pages for conversion is a tricky job. It’s a constant fight between what works and what doesn’t. It’s a never ending process of testing, measuring, and making changes.

One of the most difficult tasks I have found in my work is to point your visitors right into your call to action — in order to catch their attention and interest them in your offer.

While your copy is probably the most important part of this process, it’s still very important to support it with suitable design techniques that can put an emphasis on your message.

The good thing is that human behavior is mostly predictable and we can use it for our own advantage.

People love repeatable visual patterns. People will also quickly find any distractions from a well-defined pattern. We can use that knowledge to get their attention.

The question is, how can you lead your visitors right into your call to action in a subtle way without being too annoying and screaming with exclamation marks?

Every call-to-action wants some attention

Ok, before we dive into talking about the design of your website, let’s think about getting attention for a moment. Why do you even need to get someone’s attention and why is it so hard that you have to use some kinds of visual tricks?

The purpose of most websites is to attract the target audience and call them to action. The action can be an email sign up, social interaction or a product purchase.

Of course, the action you want people to take is usually not that attractive for first time visitors. You can’t just invite people to your website by saying “come and sign up for my email newsletter!” That wouldn’t convert well…

So, it is the content that attracts your target audience. It can be a sales page with compelling copy, your blog posts, an infographic, a free ebook, you name it.

Once you have them in, and you have their attention, that’s the time when you want to point them in a certain direction — the next level of your conversion funnel.

Now, getting someone’s attention and calling them to take the action is hard. The bigger the commitment to make, the harder to convert. Different types of actions may also require different approaches.

For example, asking people to sign up for your email newsletter in exchange for valuable free content is much easier than asking them to pay for something.

A call to action with a smaller commitment can be more direct. You can put it right in front of your visitors in the form of a popup or a big top banner.

However, the same approach wouldn’t work well if you used it for your buy button on a sales page. Before asking someone to purchase your product, you want to prepare them, educate them, resolve their concerns and build interest.

That’s why a sales call to action should be positioned more strategically. You need to be careful not to ask for the conversion too early or your visitors may not be ready yet.

If you want to think about how this would look visually, just think about websites that you visit every day.

Where do you typically see an email sign-up form — which is a low-commitment call to action? In the sidebar, in a banner beneath or even sometimes above the header, or maybe even in a pop-up that appears when you start scrolling.

Contrast that with where you see the CTA for a sales page. It’s typically near the end of the page after a lot of copy — the more complicated and expensive the product, the longer and more explanatory the copy (typically).

Okay, now let’s talk about defining visual patterns — because you have to define them first, before you can break them.

Define your visual patterns first

As I mentioned before, you can’t convince someone to take the action just by your design. It’s your copy that does all the heavy lifting, but you can help to emphasize the message and point some visitors right into your CTA through design.

And this brings us to the main point of this whole episode, which is how to effectively break your visual patterns to get a visitor’s attention.

Your website’s visual identity is defined by typography, colors, layout and all the user interface elements. Together, all of these elements create certain repeatable visual patterns.

Try to make navigating and browsing your website predictable. You want to create a consistent and positive user experience in reading your content. That should be your base and foundation.

Now, consistency is the main point here. The more consistent your visual patterns are, the easier it’ll be to break it in a more subtle and elegant way.

And why would you want to break your beautiful design? To lead your visitor’s eye right into your offer on a busy page full of content.

In other words, to get your visitor’s attention where you need it.

To explain better, imagine you’re invited to a party where everyone is dressed in whatever they want. So, you have all different colors and styles. It would be pretty hard to stand out from the crowd if you wanted someone to pay attention to you. It’s still possible, but you would need to take some ridiculous steps to do so.

Now, imagine that you’re going to a party where everyone is dressed in black and white. What could you do to stand out from the crowd? It would be as easy as wearing a red t-shirt. People would notice you and you wouldn’t have to run around and scream.

As you can see in this analogy, it all makes sense only when there is a certain consistent theme applied as a base. Without it, when everything is different, nothing can clearly stand out.

Now, break your visual patterns

In your design, emphasizing your call to action can be easily achieved by using contrast. I’m not talking about just color contrast, but a contrast in size, boldness, space or even position.

Some techniques work better for some people and may not even affect another group of visitors. So, the best idea is to combine at least a few of them.

For example, your call to action can be placed on a contrasting background and the title font set in bold. Additionally, you can add some extra space around it to make a bigger content/space contrast.

Using white space is a great way to make something more prominent without adding more noise to your design. By simply creating more space around something, you separate it from the rest of the content. That separation and a clear layout break can quickly draw the user’s eye.

You can also break your grid if your design is set on a layout grid.

Layout grid is a common design tool used by web designers these days. It’s a good topic for a whole new episode, and Rafal covered this concept deeper in his ebook, The Essential Web Design Handbook, if you’re interested in learning more about it.

For now, all you need to know is that a grid is nothing more than just an invisible web of vertical and horizontal lines that dictate your entire layout.

By placing all your content elements along those lines, you can create an organized and consistent design structure throughout the entire page. It helps to create a visual pattern in your website layout.

Breaking that grid will make your call to action stand out. It’s that simple. Just by positioning a certain element loose on the grid will put more emphasis on it.

Our eyes love patterns and we follow them. Every human eye will catch such a distraction in a perfectly designed layout.

And that, my friends, is how you get your visitor’s attention.

Now stick around for this week’s hyper-specific call to action.

Call to action

Here is this week’s call to action:

Open up your website …

Take a look at it. What visual patterns do you see? Don’t spend any time judging yet. Just look. Get a feel for it.

Next, focus on your calls to action. What jumps out about them? How do they fit in with the visual patterns on your site? Do they fit in too much? Do they clearly stand out? In other words, why is your eye drawn to them — or, conversely, why is your eye NOT drawn to them?

Take what you learned from Rafal’s insight and use it to make your CTAs stand out more. Perhaps it’s adding more contrast. Perhaps it’s adding more white space around it. Perhaps it’s moving a sales page CTA further down the page — so you’re not asking for the sale before someone is ready to move forward.

Look at your site, analyze the patterns … and then break them. Do this for at least one call to action. Then track it.

Okay — coming next week, we’re back to technology. We’re going to talk about WordPress updates.

Finally, before I go, here are two more quick calls to action for you to consider:

Subscribe to Sites Weekly

If you haven’t yet, please take this opportunity to activate your free subscription to our curated weekly email newsletter, Sites Weekly.

Each week, I find four links about content, design, technology, and strategy that you don’t want to miss, and then I send them out via email on Wednesday afternoon.

Reading this newsletter will help you make your website more powerful and successful. Go to studiopress.com/news and sign up in one step right there at the top of the page. That’s studiopress.com/news.

Rate and Review Sites on Apple Podcasts

And finally, if you enjoy the Sites podcast, please subscribe to the show on Apple Podcasts (formerly known as iTunes), and consider giving us a rating or a review over there as well.

One quick tip on that: to make the best use of your review, let me know something in particular you like about the show. That feedback is really important.

To find us in Apple Podcasts, search for StudioPress Sites and look for the striking purple logo that was designed by Rafal Tomal. Or you can also go to the URL sites.fm/apple and it will redirect you to our Apple Podcasts page.

And with that, we come to the close of another episode. Thank you for listening to this episode of Sites. I appreciate you being here.

Join me next time, and let’s keep building powerful, successful WordPress websites together.

This episode of sites was brought to you by StudioPress Sites, which was awarded “Fastest WordPress Hosting” of 2017 in an independent speed test‏. If you want to make WordPress fast, secure, and easy — and, I mean, why wouldn’t you — visit studiopress.com/sites today and see which plan fits your needs. That’s studiopress.com/sites.