7 Visual Design Tips and Tricks that Boost Conversion

by 1 05/25/2012

Your visitors have ADD.

Well, not literally but they do share some characteristics with people who suffer from ADD (Attention-deficit disorder): They are inattentive, easily distracted, don’t like to do things right away and forget all about coming back. All of which spell doom for your landing page.

It’s not just your fault though: The Internet is so full of options and information that it’s very hard to cut through the noise and be heard. You might get visitors for only a split second before they’ve clicked off to some other web page or closed your window altogether.

The good news is that there’s a lot you can do to improve your conversion rate. But before you can implement all your charms to keep your visitors engaged, you need them to stick around long enough to give you a chance.

In a previous article, I talked about designing websites in a way that improved conversion rates by creating better user experiences. However, for your visitors to hang around long enough on your web page to appreciate that experience, you need to have something that immediately sticks: Something that instantly grabs attention and makes them want to find out more.

Here are 7 tips and tricks of the conversion trade that make that engaging first impression:

1. Direct Focus by Using Whitespace and Visual Cues

Out of everything you can place on a single webpage, the item most important to you is your CTA (Call to Action). Whether it’s a ‘download now’ or ‘sign up’ button, a link inviting visitors to ‘find out more’ or a blatant ‘buy now’ plea, your CTA is the most valuable element on your webpage. And that’s why the biggest mistake you can make is to make it hard for your visitors to find or click it.

To make your CTA pop out and look inviting, you can direct your visitors’ focus to it by using some simple visual strategies:

Whitespace/Blankspace

By using a bright and irresistibly designed button in the center of some nice whitespace (or more accurately, ‘blank space’ as the color of the space doesn’t matter- you just need to give your CTA some room to breathe), you can direct all your visitors’ attention to that button and nothing else.

Visual Cues

If you have lots of other stuff on your landing page and don’t really have room for some white nothingness, you can:

  • Paint your CTA in a color different than the rest of the your color scheme
  • Contrast it dramatically against the background (black against white, yellow against dark gray)
  • Have a person/animal in a picture/illustration stare directly at it
  • Design it in an unexpected shape
  • Encapsulate it within a dynamic shape
  • Have arrows or pathways lead up to it.

Even in a landing page as busy as Foodzy’s, the CTA is made to stand out by using a brightly colored button that is completely different from the rest of the color scheme.

Foodzy

2.     Exploit Your Visitors’ Inner Curiosity

We are all curious creatures and you can exploit this inherent human characteristic in a variety of ways to make your landing page highly converting. As long as your visitor is curious, there will be enough time and opportunity to take them deeper into your lair (creepy as that may sound!).

The following Clearvale landing page was designed with just one objective: Make the visitors curious. And it does a great job of it. Because of the billboard situated cleverly next to the fork in the road, you really want to click on ‘learn more’ and see what it’s all about even if you have no clue what the question is talking about.

Clearvale

3. Inject a Healthy Dose of Color

Nobody wants a black and white world. Sure, the somber color combination can make for an effective or artistic statement when used properly but, generally, Internet users respond better to bright, vivacious colors than they do to ‘boring’ old black and white.

Think of your visitors as kids in a candy store: Your landing page needs to pack the requisite sugar rush for them to choose you over the rest.

The Ringtone landing page is brightly colored, simple and to-the-point. It cuts right to the chase and does so in a splashy, eye catching way.

Ringtone

4. Always Leave Room for the Element of Surprise

There are so many information channels around us and such a steady stream of advertisement- whether it’s on the radio, the TV, the Internet or your inbox- that we’ve subconsciously developed a mechanism to filter it all out.  Our brain now expects a certain tone and quantity of promotional information that it just skims through and no longer registers. To break out of this information monotony, your webpage needs to hit your visitors like a jolt of lightening: It needs to be different, unexpected, interesting and creative.

While your landing page can be made pleasantly surprising by choosing a unique layout, a strange but pleasing color scheme, an unusual choice of content or a combination of multimedia, there is also plenty of room to surprise your visitors with the oft-overlooked 404 pages.

Usually when a user lands on a page on your site that doesn’t exist (for whatever reason), they’re greeted by a dull-as-death standard browser error message. However, if you even design your 404 page in a unique and intuitive way, you can encourage your visitors to check out the pages on your website that do work. That way you can not only make up for the bad or missing links but also use the opportunity to promote your site.

Zivity

5. Use Arrows. They Really Work.

Here’s the simple truth: The average Internet user wants to find what they are looking for while doing the least amount of mental work. And there’s nothing more helpful to a lost traveler (your visitor in this case) then some nice arrows pointing toward what they need. Arrows not only convey direction and focus but also urgency and progress. With such a significant quantity of positive connotations, you can never go wrong with a good arrow or two!

The ‘Wanted’ landing page boasts some compelling copy even if not the best aesthetic. However, by using a swooshing arrow, they manage to add extra emphasis to their CTA button.

6. Throw in Some Nice Photos

Ever wondered why all these big, serious, financially driven corporations hide behind images of smiling families having some ‘home cooked’ dinner in their ads?  That’s because, as cliché as this sounds, pictures do say a thousand words. If you’re selling a product that will solve your visitors’ spyware problem, a picture of a smiling man or a tech geek hard at work is both relevant and enticing.

The Opera browser landing page succeeds because it features a prominent, nicely photographed shot of a guy happily interacting with his laptop. This particular picture is much more effective in connecting with visitors in the first encounter than lots of text detailing all the security and network features of the browser. There’s a place and time for all that too- but only if the visitor clicks for it or scrolls below the image.

Opera

7.     Don’t overdo it.

There’s nothing more that tempts visitors to hit the ‘close’ button than a webpage that is too busy.

Unpleasant and lurid colors, bad formatting, information overload, pop ups and too much movement makes up for the sort of clutter that users want to put an end to as soon as they encounter it.

Keep your landing page, clean, focused and cohesive. Only display comprehensive and essential information, don’t use design that overwhelms or overpowers and never start throwing ads at your visitors. I mean it: Never.

One of my favorite examples (and one that I quote often) of the ‘simple yet perfect’ landing pages is the Groupon landing page.

Groupon

Your website may have a lot of high quality content and plenty of substance but unless you manage to capture your visitors’ attention, your conversion rate will always remain below the mark. As a landing page designer, your first objective should always be ‘love at first sight’!

Print Friendly

About 

Babar Suleman is a visual storyteller and a communication planner. He is interested in the interplay of words and visuals in the communication process and uses his diverse experience as a writer and designer in creating meaningful user experiences and effective branding strategies.

You can contact Babar at his official website or on the social media channels below.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

1 COMMENT


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>