Good design and effective copy come together to create a website that converts.
Simple equation, right? But, sometimes, it can be hard to find just the right approach to creating and combining those two elements to reach the optimal conversion rate.
With that in mind, here’s a few techniques you can use to get people so excited about your website they can’t help but convert.
Obvious always wins.
– Luke Wroblewski
Flat, minimalist design can help improve conversion rates by stripping design and content down to only the most vital elements. With dramatic drop shadows, gradients, and other “realistic” visual effects removed, a clean and simple two-dimensional design emerges.
By focusing you on fundamental elements instead of embellishments, this two-dimensional approach can be super helpful in creating an orderly layout and optimizing conversion rates. It also creates more space for those all-important calls to action (CTAs) to live and breathe without being crowded by the nonessential.
People have grown used to buttons that have some sort of depth or dimensionality. Through years of designer effort, these characteristics have become “affordances” — indicators of interactivity.
Without these characteristics, a flat button can be easy to overlook when you’re scanning through a page. That’s why it’s vital that you choose a contrasting button color and a location that makes your buttons’ interactivity obvious. Obvious roll-over styles and visual tricks that lead the visitors’ gaze to these CTAs can also help.
We read best what we read most.
Even with a minimal aesthetic, you still need to make sure there’s an underlying logic to the placement of content. Someone browsing through your site should go from one idea to the next with ease. One of the easiest ways to do that is to ensure your layouts adhere to human reading patterns, like the F-pattern.
The blog VWO gives a great example of a redesign following the F-pattern that led to a 35.6% increase in sales.
When designing your website, think about the action you want people to take, then structure your site so that it logically walks them toward that action in a natural, frictionless way.
Don’t make me think.
–Steve Krug, speaking for everyone ever
When we search for something on the web, we’re usually not doing it for “general” reasons. Instead, we’re looking to solve a particular problem. So acknowledging that in your designs just makes a whole lot of sense.
For example, a travel company called Nature Air created a bunch of pages for their website covering specific destinations. Each page boasted a clear call to action in the upper right of the screen.
The problem? The CTA was general. It read “Daily Flights throughout Costa Rica” and paired it with a button reading “Book A Flight.”
But on a specific page for Tamarindo, for example, that just wasn’t cutting it. So, the company added a second CTA that directly addressed the visitor’s desire: to go to Tamarindo.
With the revised CTA reading “Fly to Tamarindo from $58,” Nature Air saw a whopping 591% increase in conversions.
So, always be specific with your CTAs. Even though “throughout Costa Rica” obviously includes Tamarindo, it takes extra mental effort to make that connection. Don’t ask people to make mental leaps for you — do it for them.
With so many mobile devices out there, responsive design is a must-have to provide a uniform experience. And when your website works on a wide variety of devices, more people will be able to convert, when and where they want to.
Responsive design is key for conversion rate optimization on ecommerce websites — as you’ll know, if you’ve ever tried to shop a non-responsive site on your phone. To call it “frustrating” would probably earn me an understatement of the year award.
Google reports that 90% of people who own multiple types of devices will switch between screens while trying to get something done. And that just makes sense, right? How many of us have browsed for shoes on our work computer (on a break!), only to order them later, on our phone? A consistent — and functional! — user experience is vital in keeping someone engaged and optimizing for high conversion rates.
However, designing responsively requires rethinking navigation. Instead of leaning on Amazon-esque mega-menus, you’ve got to focus on a handful of vital pages (at best) for your main nav, then link out from the body of the site where it makes sense.
Thankfully, this is a good thing for conversion rate optimization: it forces you to focus on the pages that are most likely to lead to conversion, and relegate the rest to body and footer links. This is standard practice for landing pages.
As you design your responsive website, you’ll want to pay close attention to how the elements you’ve so carefully laid out on desktop will translate to mobile devices. You don’t want that right-column CTA in your site’s hero section getting buried near the footer on smaller screens.
Handily, Webflow lets you customize every element of your responsive designs, so the right elements always display in the right place. And with flexbox, you can even reverse layouts on different devices with a click of a checkbox.
Let’s make it official: image sliders (or carousels) are done. They’ve become about as exciting as pet rocks.
Plus, sliders can slow down your website with large images, add unnecessary distractions, and be an accessibility no-no, as they often don’t allow people the time they need to consume the content. In some cases, the can be directly contributed to lower conversion rates.
According to a post by Peep Laja on conversionxl.com, elements such as sliders and carousels are distracting because of how the human eye reacts to our environment.
Our brains are hardwired to detect motion in otherwise static landscapes. This was really helpful for tracking wooly mammoths across the frozen tundra back in the day! Unfortunately, this instinctual response can cause people to pay more attention to the movement of sliders and carousels than the conversion points we want them focused on.
Sliders also don’t make sense when navigating on a mobile device. Brian Krogs makes the point in his piece “Sliders Suck” that it’s much easier to scroll than to swipe. The easier it is to navigate your site on a mobile device, the higher your conversion rates.
Instead, use a single, static hero image with a forceful headline-subhead combination. This will say more about your brand than a carousel-full of scattered messages ever will.
Sliders can also bring too many H1 tags to your site. Web crawlers hate these, as they confuse them about the hierarchy of information on the page. This can affect your page ranking, so it’s best to avoid them. (Granted, you could simply style P tags to look like the H1, but that’s a hack, and adds an unnecessary style to your CSS.)
Master the basics of flexbox in 28 increasingly challenging — and fun!— levels, without writing a line of code.
Another design approach that’s evolved in response to increased mobile browsing is the “card” layout. In this technique, discrete containers integrate text, video, and other types of content, not to jam-pack all you can into a limited area, but to efficiently communicate a specific message. These cards rely on visuals and sparse copy to highlight the most vital information, just like Google’s mobile search results.
Card layouts work perfectly with a modular design approach. Each container represents a fraction of the overall page design, and they all come together to communicate a page’s greater message. This helps people move from one idea to the next with each container, gradually digesting the overall message. The simplicity of this layout also translates easily to mobile devices.
When done right, cards can create a logic and rhythm that improves the overall user experience (and conversion rates).
Colors evoke emotions, so the combination you choose will play a vital role in conveying brand personality, and getting people to take action.
Colors evoke emotions, and people make purchase decisions from an emotional place. So the color combinations you choose can play a vital role in not only conveying brand personality, but also optimizing your conversion rates.
Colors become especially important in calls to action, which need contrasting hues to stand out from the rest of the design. And while you’re picking colors, keep industry standards in mind. Some colors are so frequently used for particular states and interactions — such as the bold red of error messages — that divergent applications could create confusion.
Sure, with a thoughtful layout and stunning images, your website looks fantastic. But that doesn’t mean you can get lazy about copywriting. The way you say things inevitably has a huge impact on how people perceive your brand. Filling your otherwise-fantastic website up with bad or misleading copy is like pouring ketchup all over a five-star restaurant’s signature dish.
You need to write for your audience, using language and a tone that they understand. The writing on a party-supply website is going to be very different from one that sells high-end designer clothing. Research who your audience is so you can communicate with them in the most effective way possible. (Even if you consider yourself part of your audience.)
The most important thing to consider when writing conversion-oriented copy is to focus on the benefits the visitor will experience by acting on your offer. Highlight how having your product or service will change the visitor’s life, and you’ll convert them.
On the average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar.
Your websites’ headlines may be your only chance to communicate your message.
So make sure they grab people’s attention and keep them reading. You can do this by:
If it sounds like a headline any of your competitors would use, don’t use it. Be creative and unique in writing headlines and the rest of your copy.
Just as a minimalist aesthetic can free your layout from distraction, the same can be said of copywriting. Your content needs to communicate your message in the simplest way possible, while still being engaging.
We’ve seen this trend (literally) popping up more and more across the web. You’re innocently reading some blog post a site was so keen for you to read when — bam! — a modal pops up with a heaping spoonful of snark.
We’re sure that the first copywriter to try this thought it was super-funny, but it’s bitter messaging like this that can ruin an experience. It’s a response that would be rude in real life, so why do it on your website?
Think we're being unrealistic with the image above? We're not.
You’ve probably tried all kinds of things to improve conversions on your sites. If so, we’d love to hear about them, so don’t hesitate to comment below!
In your inbox, every other week. And unsubscribe in a click, if you want.