15 B CKS THAT C ONVERT TRAFFIC O LEADS 1 · Your site’s ability to churn out leads is directly...
27
15 BRILLIANT WEB DESIGN HACKS THAT CONVERT TRAFFIC INTO LEADS 1 T
Transcript of 15 B CKS THAT C ONVERT TRAFFIC O LEADS 1 · Your site’s ability to churn out leads is directly...
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 1
T
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 2
The secret to consistently turn web traffic into leads is to find the right balance between content and design.
In this eBook, we’ll focus on the latter and check out fifteen (15) proven web design ideas you can quickly put into use to move more visitors of your website and landing pages into the next stage of your funnel.
The best practices we’ll go over in this guide cover fifve (5) key areas of your website’s look and feel that you need to carefully tweak to transform it into an effective lead generation tool:
• Overalldesign/layout• Text• Imagesandgraphics• Calls-to-action(CTAs)• Leadcaptureforms
That’s a lot of ground to cover, so let’s get going.
introDUction
T
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 3
Some Preliminaries
Your website’s or landing page’s design can make all the difference in the world (that’s not an exaggeration) when it comes to getting decent conversion rates. Your site’s ability to churn out leads is directly related to how much credibility it’s able to build in the minds of your visitors.
This depends on how complex your funnel is, but your website or landing page typically comes in at the interest stage (i.e., what comes ater awareness). It’s the next thing that traffic from paid, organic and social media sources encounter ater clicking your ad, viewing your blog post, or fifnding out more about your company from a link on your social media profifle. At this point in your funnel, there are a number of actions your visitors can take that get them classififed as leads. Some examples are fiflling out a form, requesting more information, subscribing to your newsletter, or viewing specififc pages on your site. It’s important that you get a good understanding of the process visitors follow to become a lead, since the whole point of optimizing web design elements is to make their journey toward taking action as smooth as possible.
Your site’s ability to churn out leads is directlyrelated to how much credibility it’s able to buildin the minds of your visitors.
According to an ot-cited Stanford study, almost half (roughly 46.1%) of website visitors rank a site’s design as the top factor that establishes a company’s credibility online. So investing in good web design isn’t only for pure aesthetics; it’s for your top and bottom lines as well.
Before you start optimizing design for lead generation, you fifrst need to take a step back and fifnd out where your website fifts in your sales funnel.
46.1%ofwebsitevisitorsrankasite’sdesignasthetopfactorthatestablishesa
company’sonlinecrediblity.
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 5
People don’t read webpages; they either skim or scan. Thatwastrue20yearsago, and is still very much the case today. That’s why the overall layout of a page needs to reflect visitors’ tendency to simply glance and notice only those things that pique their interest. The fifrst three tips below help you achieve this.
Create a layout that mirrors natural eye movement.1Eye-tracking studies have found that most people follow an “F” pattern when scanning through a webpage, not the typical let-right direction usually associated with reading printed content. With the F-shaped pattern, the user’s eye movements on the page go through three main phases:
• An initial let-right motion across the page, usually starting at the top-let
• A short vertical movement down the let side of the page followed by a second (shorter) let-right motion
• Another vertical scan down along the let side of the page
overall Design/laYoUt
An example of an “F” pattern wireframe
Source: Tutsplus
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 6
Here are some specific layout tips that can help you take advantage of this user browsing behavior:
• Start with the most important piece of information at the top
• Place your CTAs at the let and right sides where the user starts and ends scanning
• Give more visual emphasis on key page elements
• Use bullets along the vertical part of the F pattern and make sure to cover only one idea per item
overall Design/laYoUt
Entrepreneur using the F-shaped pattern
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 7
Choose a color scheme thatpaints an experience.2
Color is a widely-studied and frequently-tested web design element. It’s been consistently found that color can impact conversion rates. Of course, colortheoryandpsychology are topics beyond this guide’s scope, so we’ll instead focus on some key color best practices in web design to optimize your site’s lead generation potential:
Understand that different colors evoke different reactions in people
Even in a B2B setting, personalemotions can still hold some influence over your prospects’ decisions. So choose a color scheme that reflects the responses and emotions you want your visitors to associate with your page.
overall Design/laYoUt
View the full Infographic from Marketo
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 8
Choose a color scheme for both usability and accessibility
Finally, colors help make your site more accessible for visitors with impaired vision. Colorblindness affects as much as 8% of males and 0.5% of females. To accommodate these users’ needs, apply a color scheme that overlays colors from opposite ends of the color wheel (i.e., contrast and accent colors).
An example of Callbox’s use of contrast and accent colors
Color Wheel
overall Design/laYoUt
Use contrast to make important elements on the page stand out
Aside from subtly indicating what to feel, color choices can also help you tell your visitors what to do. Accent colors let you direct users’ attention to specififc links, buttons, text, or other pieces of a page. Callbox’s homepage shows some examples of accent color usage (particularly with CTA buttons)in action.
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 9
Learn and apply a little psychology in your designs.3
Web design is both an art and a science, and psychology can help you adopt a more systematic approach when optimizing page layout for conversion. Two ideas in psychology stand out when it comes to effective web design: Hick’s Law and the Gestalt Effect. Hick’s Law
Hick’sLaw essentially implies that the more choices a site visitor faces, the lower the chance of taking action becomes. So, this means that you should limit the number of choices or features available to users of your page. Take a look at a side-by-side comparison of Google’s and Yahoo’s homepage, and you’ll see Hick’s Lawin motion.
overall Design/laYoUt
Google’s Homepage Yahoo’s Homepage
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 10
Gestalt Effect
The Gestalt Effect describes several ways that people perceive what they’re looking at, two of which are readily applicable in web design. First, visitors tend to see a page (or a page section) in its entirety rather than its individual components. Next, people tend to lump related components into a single group. To take these into account, consider the following: • Keep your page clean, focused, and clutter-free.• Use ample whitespaces around page elements.• Group associated elements close together.
Text-based data analysis startup, Quid Inc., has a functionally-simple and clutter-free homepage that’s able to capture the Gestalt principle.
overall Design/laYoUt
Quid’s Homepage
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 12
They say that web design is 95% typography. Whether you agree or not, there’s no denying that typography drives web design. Even for pages dominated by images and multimedia content, properly displaying text is still an important part of a designer’s to-do list. The following three web design ideas focus on turning text into page elements that users respond to.
Set a proper hierarchy of text elements on the page.4
Users should be able to quickly identify the relative importance of text elements. This is achieved through the proper use of size, weight, color, position, and type contrast. A three-level typographic hierarchy might consist of:
• Level 1: The most important content or information (CTAs, H1, H2)• Level 2: Organizes your page into sections or groups (H3, H4, links)• Level 3: Descriptions and paragraph text
Spacing is also an important part of defifning a text hierarchy. Keep related text close together (such as a sub-header and its child paragraph). On the landing page for a MicrosoftPowerBIe-zine, bolded characters create an effective visual hierarchy that points the viewer’s attention to important text.
teXt
Microsoft Power Bl’s Landing Page
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 13
Place ample breathing space between, around, and within text.5
Whitespace is used around and within text elements to make them more visually digestible. They make your text more readable; they allow your viewers’ eyes to relax; and they actually help your visitors quickly fifgure out what your page is all about. That’s why whitespace is very important for optimizing conversion rates.
To apply the right amount of whitespace for text, consider the following:
• Increase the amount of whitespace around text with smaller font sizes• Break up large paragraphs into smaller ones and add more whitespace between them• Set the line height to 1.5 times the font size of the paragraph text
The Callbox Blog page, despite being text-heavy (as one would expect), is able to make full use of whitespaces for text elements in order to enhance readability.
Callbox’s Blog Page
teXt
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 14
Understand that typefaces/fontshave unique personalities.6
In 2012, a New York Times opinion writer conducted an experiment that revealed people’s tendency to find a statement more trustworthy when written in a specific typeface. The experiment showed readers a passage randomly displayed in one of six font choices. Readers who were presented with the Baskerville version had a higher propensity to fifnd the passage convincing.
So, does your choice of font/typeface affect your page conversion rates? Some sources say it does, arguing that people associate specififc fonts with various personalities and voices. But even more importantly, typefaces have unique characteristics that make each suitable for different parts of the page.
Generally, sans serif typefaces (Arial, Helvetica, Myriad, Tahoma, Verdana) work well for the body of the copy, while serif fonts (Baskerville, Garamond, Georgia) are recommended for titles and subtitles.
Source: Web Design Depot
View the full infographic here
teXt
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 16
As much as 60% of people searching for businesses are more likely to consider results with images, while another 23% are more willing to contact a business showcasing an image. With the web design ideas in this section, a picture isn’t only worth a thousand words--it’s your ticket to tons of conversions.
Use big images to reinforcethe page’s main message.7
The brain can process images 60,000 times faster than text. That’s why placing a compelling image on a page shortens the time it takes for visitors to grasp the main message and (eventually) to take action. In fact, a studyofmorethan10,000onlinepages found that relevant imagery almost doubles page performance. Here are a few considerations to make when choosing the right image or graphics to use on a page:
• Dimensions: Use big, attention-grabbing images, but be sure they don’t distract users
• Context: Choose an image that expresses your message
• Size: Keep the fifle size to no more than 200 KB for optimal page load times
• Type: Use PNG, GIF, or SVG for graphics-heavy images; choose either PNG or JPEG for photos
iMages anD graPHics
Callbox uses graphics to explain the company’s lead
generation process. This is among our best-performing
pages in terms of conversion rates.
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 17
Leverage faces to increase familiarity.8
Images of people add some human touch into your pages and, more importantly, they can improveconversionrates. That’s because humanizing a page increases its credibility in the minds of visitors which can then drive action. Try the following ideas when using images of people on your page:
• Place images with faces on your opt-in and landing pages• Choose warm, smiling faces to connect with your page visitors• Avoid closed poses, such as crossed arms and hands on the hips• Use faces that are looking toward your CTA
The Callbox Client Feedback page uses photos of clients along with their reviews and comments. This adds authenticity and builds trust with potential prospects.
iMages anD graPHics
Callbox’s Client Feedback Page
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 18
Avoid using generic stock imagery.9
This really should go without saying, but a lot of web pages out there still seem to fall into this trap. Generic stock images may not align with your page’s message and even if they do, the fact that anyone can use them counts against your page’s conversion performance. Here are examples of generic stock photos you should avoid at all costs:
iMages anD graPHics
How many Vince Vaughn cameos can you find?
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 20
CTAs are arguably the most important component of your pages. That’s because they’re essentially the gateway your site visitors need to go through to get into your pipeline. Effective CTAs inspire users to take action, and this section considers three ways for you to achieve this with your designs.
Tweak the size, position, and color relative to other page elements.10
While you want your CTAs to stand out from among the other page elements, you also want them to be part of the group (recall the Gestalt Effect). CTAs need to fift within the natural flow of the page. This means you have to consider how your CTAs interact with the rest of the page’s components.
• Apply the F-pattern; place it at the let and right sides• Keep it above the fold, make it impossible to miss• Draw attention through contrasting colors• Make the button or form text large enough without being distracting• Limit the number of CTAs on a page; don’t break Hick’s Law
On the landing page for its downloadable Facebook Ad Template Library, DigitalMarketer uses clear CTAs that not only stand out but are the logical next steps to the page’s benefift copy.
calls-to-action (ctas)
Digital Marketer’s CTA
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 21
Give CTAs enough real estate around them.11 It’s not only where on your page you place your CTA that affects conversions but how much empty space you include around it, too. Whitespace makes your CTAs easier to fifnd and removes page clutter so that your CTAs are easier to follow. How much whitespace should you apply? If there needs to be a close relationship between another page element (such as text in a benefift copy) and the CTA, then lesser whitespace would work best. Keep in mind that the larger the amount of whitespace you use, the more separate the CTA is going to appear from your users’ point-of-view. Take a look at Sendible’s landing page below. Clearly, it doesn’t take the F-shaped pattern into account, yet it’s still able to easily direct your attention toward the page’s CTA. That’s because of the ample amount of whitespace at the let and right sides of the page.
calls-to-action (ctas)
Sendible’s Landing Page
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 22
Reduce the effort required tocomplete a CTA.12
Cognitive load is the amount of mental effort needed to use your page. The higher the cognitive load, the less inclined your visitors will be to take action. You can reduce the amount of friction users encounter with CTAs on your site through design practices that: • Minimize the time it takes to fifnd a CTA• Remove anything that diverts the visitors
attention
• Ensure that the button copy and surrounding text are readable
• Make your CTA part of a clear click-path• Provide social proof and assurance
Wistia’ssign-uppage is a very good example of page design that reduces cognitive load. The heading and subheading clearly indicate the action and the benefift, while the short form conveys exactly what information the user needs to provide.
calls-to-action (ctas)
Wistia’s Sign Up Page
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 24
Balance the right number of fields.13 Finding the right number of fields to use in your lead capture form can get a little tricky. Having too few fifelds can result in a higher number of leads being generated, but these prospects may not be that qualififed at all. On the other hand, placing too many fifelds can increase the quality of leads but reduce their numbers. There’s no general rule to help you determine this number. The only way for you to fifnd this sweet spot is to test it out. Litmus takes this idea to extremes with its download page for the 2016StateofEmailReport. The form only has one fifeld that visitors need to fifll out to get the report.
leaD caPtUre forMs
Litmus’ Download Page
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 25
Get more creative with the form fieldsand the submit button.14
Sometimes, it takes some outside-the-box thinking to drive the action you want from site visitors. Try out the following ideas and see how they impact your form CTR: • Use accompanying icons on the fifelds• Change the button text from the generic “Submit” to a more specififc action• Make the shape of the button a bit more unconventional to ease the monotony• Add hover effect to clearly indicate that the button is clickable Callbox’s SavvyMarketersubscription sign-up page uses a clear and specififc copy on the submission button. Notice also how the entire form including the topic check boxes is located above the fold.
leaD caPtUre forMs
Savvy Marketer Subscription Page
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 26
Add click triggers.15 In the crucial moments leading up to a conversion, a site visitor might need a little nudge before submitting a lead capture form. Click triggers can help you build trust with would-be leads. These are typically bits of text or graphics that reassure visitors about the action they’re about to take. Some examples are: • Testimonials• Security seals and badges
• Privacy policy• Guarantees
The landing page for Salesforce’sServiceCloudLightning guided tour makes use of click triggers, including testimonials and security badges.
leaD caPtUre forMs
Salesforce Service Cloud Lightning Tour Page
USA: +1 888.810.7464
UK: +44 207.442.5066
AU: +61 2 9037 2248
call us. email us.
NZ: +64 9.9143122
SG: +65 3159.1112
my: +60 3.2772.7370
hk: +852 3.6786708 [email protected]
15 Brilliant WeB Design Hacks tHat convert traffic into leaDs 27
The Takeaway
In this guide, we’ve taken a look at a number of web design hacks tailored to maximize your site’s and landing page’s lead generation potential. The things we’ve covered here serve as guidelines, not hard-and-fast rules. The best way to determine the optimal design for your site is, of course, to systematically test out each component through careful A/B split testing. Use the ideas in this guide as starting points and work from there.
The best way to determine the optimal design for your site to systematically test out each component through careful A/B split testing.
T
