Have you met Richard, the eCommerce entrepreneur? This is the story of how Richard found the perfect eCommerce metric to track and measure his eCommerce performance.
Richard runs an online store selling two kinds of water bottles – a generic item worth $1 and a premium designer edition worth $100. As a data-driven marketer, Richard decided to look towards analytics.
Then it hit him.
The analytics universe is full of curiously named metrics. Which of these metrics should he track over time to measure his eCommerce performance?
That should be easy, Richard figured. He’d reach out to the experts.
Expert 1: Go For Conversion Rate
A conversion is any desirable activity performed by a visitor on your site. From a revenue perspective, conversion is checkout. Conversion rate(CR) is simply
Conversion Rate = Number of Checkouts/Number of Unique Visitors
If you have an average 1000 visitors to your site on any given day, and 50 of them become customers your conversion rate is 5%.
Converting more of your current visitors is more cost effective than acquiring new customers
It essentially gives more revenue at the same cost
Since you are already paying in some way to acquire traffic to your website — through PPC, SEO, Email — it would be a great idea to convert more of those visitors into customers. It brings you more revenue for each dollar spent on acquiring traffic.
It made sense.
But Richard wasn’t convinced. He had once conducted an A/B test on the product page and this is what resulted.
Overall conversions increased by 10% and his website that used to convert 1100 customers started converting 1210 visitors.
It was a moment of triumph.
And it lasted exactly a moment.
Later analysis showed that revenues had actually dropped because the conversions among high paying customers had declined.
Unsatisfied, Richard reached out to Expert #2
Expert 2: Without Doubt, Average Order Value is What You Should Be Tracking
Average Order Value(AOV) is just what it says. Total revenue/Number of Checkouts. It’s a direct indicator of what’s actually happening on the profits front.
Average Order Value (AOV) = Total Revenue/Number of Conversions
In the last A/B test he conducted, optimizing for conversion rate alone had left Richard susceptible to the blind spot — the average order value.
Despite the increase in conversion rate, Average Order Value had dropped by more than a dollar, resulting in an overall decrease in revenue.
How does it help?
Comparing AOV against Cost Per Order gives a great idea of the profits you make on each order. Consider your Cost Per Order (shipping costs etc.) is $1 and your AOV is $10, giving you a profit of $9 per order. By increasing AOV by 10% to $11, you stand to gain an additional profit of $1 per order.
At this point I should tell you that Richard didn’t go alone to Expert 2. Tom, Richard’s best friend since that last A/B test hiccup, was there too.
Doubting Thomas asked,
“What if we successfully increase our AOV by bumping up the minimum order value for free shipping, but less people buy as a result? Our revenue could take a hit, harming Richard and his profits while still showing a higher AOV.”
Tom had a point, Richard thought. It was similar to what happened with his last test. There he had forgotten to take into account AOV and suffered. Tracking for AOV alone could make him blind towards conversion rate resulting in a revenue sheet like this:
There had to be something better. A metric that combined both Conversions and AOV to give the whole picture.
Hoping for better, Richard and Tom reached out to Expert 3.
Expert 3: Track Revenue Per Visitor, Dodge The Rest
Revenue Per Visitor(RPV) is deceptively simple. It tells you how much revenue each unique visitor is driving.
RPV = Total Revenue/Total Unique Visitors
Why is it so potent?
The trick is in understanding RPV from another perspective.
We already know that
Total Revenue = AOV x Number of Conversions (checkouts)
So we can rewrite the RPV equation this way:
RPV = (AOV x Conversions)/Total Unique Visitors
and since (Conversions/Total Unique Visitors) = Conversion Rate
RPV = AOV x Conversion Rate
The great thing about the RPV metric is that it combines both AOV and Conversion Rate.
What’s important for any eCommerce business?
For revenues, first you need traffic. Once you are able to attract traffic, increasing revenue is two dimensional process:
Convert more visitors into paying customers (Conversion Rate)
Increase customer-spend per conversion (AOV)
RPV involves both these dimensions leaving no blind spots.
Avinash Kaushik recommends using an ‘actionability test’ before choosing any metric to track. The idea is that any metric you track should help you take definitive actions to correct/improve business.
Does RPV pass the actionability test?
With a crisp dollar certificate.
If there’s a drop in RPV, it could be due to
A sudden increase in visitors without any buying intent (drop in conversion rate): Check if there has been any recent marketing activity that brought a lot of unqualified visitors with low buying intent. Use segmentation to understand what channels are bringing the right traffic.
Customers are buying less of high-value goods and more of low-value goods (drop in AOV): Consider using a recommendation engine. Read the article I’ve linked to under the section above titled ‘AOV’ for 8 quick ways to improve AOV.
Touting RPV as a very useful metric to track does not take anything away from metrics like Conversion Rate or Average Order Value. It’s important to understand that metrics simply show symptoms, and different symptoms become visible through different metrics. RPV is simply one that helps you see the bigger picture.
Although it’s a lot of metric talk to take in, Richard feels he’s found what he was looking for – one metric that he could keep track of to measure his eCommerce success.
He thanked Expert 3 and got ready to leave.
“Wait!”, Tom had more doubts.
Why Use Unique Visitors and Not Total Visitors?
Expert 3 cleared his throat and explained.
Of all first time visitors to an eCommerce site, 99% won’t make a purchase. The typical buying cycle involves a visitor first visiting your site to check out the products, leaving to compare prices elsewhere, consulting a few friends, reading reviews and eventually a trip back to your site for the purchase (if at all a purchase decision is made). There could be even more steps involved here.
Using total visitors (unique and returning) bloats up your metric denominator considerably, resulting in small figures and giving you less credit than you otherwise deserve.
This is not to say it’s a bad practice, just sub-optimal. (In fact, if for some reason, you are getting many orders from repeat buyers it might even make sense to use total visitors instead of unique visitors.)
Using ‘unique visitors’, on the other hand, paints a real-world picture of what’s happening with your users, who are, of course, unique.
With this explanation, Doubting Thomas went poof, and Richard went back wiser.
What’s Your Doubting Thomas Wondering?
What metric have you found most useful to track? Share it with our readers and us.
We’ll soon be coming out with a brilliant guide on understanding all the right metrics, including the bad-ass ‘Customer Lifetime Value”.
As marketers, it’s super easy to get caught up in our data and analytics.
Sometimes, we’re watching our click-through and conversion rates so closely that we lose sight of the fact that there are people behind every click. Real people with real emotions.
In this episode of the Call to Action podcast, we speak to Talia Wolf, CEO and founder of Conversioner, about how tapping into your customer’s emotional needs can make your landing pages more powerful.
In this episode you’ll learn…
Why you should consider revamping your landing page as a whole instead of just testing individual elements.
How catering to visitors’ emotional needs gave one company a 65% increase in revenue.
A framework for determining whether your landing pages are meeting your prospect’s emotional needs.
Let’s pretend you just hired me as a copywriter. I only need two things to skyrocket your conversion rate.
A thorough understanding of your product or service provides
A thorough understanding of your target customer
Over the years, I’ve discovered that virtually every business successful enough to hire a legitimate copywriter has #1 down. They live, breathe, and sleep their business. They thoroughly understand everything their product or service can do and offer.
And really, that’s no surprise. If you don’t understand your own product, you’re gonna have a bad time.
But what is surprising is how few businesses really understand #2 – their target customer.
If you don’t thoroughly understand who you’re targeting, it’s very hard to target with any level of accuracy.
So let’s go back to pretending we’re working together. I’ll give you my questionnaire. How many questions can you answer about your target audience?
You have to start somewhere. And while it’s okay to answer this question somewhat broadly, “men” or “business people” wont’ cut it.
Let’s just get this out of the way: We all want as many customers from as many segments as possible. Saying your targeting men, ages 20-35, doesn’t mean you don’t want 40-year-old women purchasing your product.
But defining a more narrow segment as your “target audience” allows you to directly appeal to that segment. You can’t really advertise or brand in a way that will compel the average 20-year-old man AND 40-year-old woman.
Vague messaging is worse than pointless.
And of course, your target customer profile isn’t limited to demographic profiles. It could be tech industry business owners making between $1-5 million in yearly revenue. It could be marketing managers at Fortune 1,000 firms.
A successful customer profile simply needs to identify a large group of people with something important in common.
2. What Are Your Target Customer’s Most Common Problems Or Pain Points?
This might be the most important question you’ll answer about your customers. What problems are they experiencing? What challenges are they facing? What issues are causing them pain over and over again?
Selling to someone who desperately needs a solution is ridiculously easy. When you understand the issues your customers are facing, it’s very easy to market your solution.
The mistake I see many businesses make here is attempting to create a problem rather than find an existing one.
For example, think about the infomercials that depict people having trouble performing tasks no one in the history of the world has EVER had trouble with.
It’s silly, but it’s all a time-honored practice used in sales called “creating a need.”
The idea is standard practice for traveling, interpersonal sales reps. If you can’t find a way in which your target customer needs your product, you simply create a need and convince them that they have a problem requiring a solution.
And while this makes sense for an interpersonal sales rep, who is limited to the person standing in front of him/her, it doesn’t work for online businesses. You don’t have 20 minutes to tell a story that convinces your would-be clients of their desperate need for your product.
Either they need it or they don’t.
If your product is any good, it is designed to solve a common problem shared by your target audience. Your goal is to thoroughly understand that existing problem rather than thinking up new problems or trying to make your product relevant to a problem-less audience.
How to Reverse-Engineer a High-Conversion Landing Page
3. What Does Your Target Customer Want?
If you’ve managed to produce answers to the last two questions, you have a set of problems your customer might hope to solve with your product or service.
When it comes to understanding these problems, however, there are two levels of awareness we need to have.
We need to understand the basic, immediate problems that need solved.
We also need to understand the underlying WHY that drives behavior—what is really desired?
You have to address “The WHY” that motivates your target customer.
For example, Dan’s immediate problem might be getting an affordable website build, but at his core, he doesn’t really care about websites. He is pursuing his dream to finally own his own online business.
If your messaging to Dan consists of offering a “Fast, Affordable Website Design,” you’ll be evaluated purely on price and samples, if you’re even discovered at all.
If you dive deeper and address Dan’s pain points in your messaging, offering to help Dan “Impress Your Clients Without The Hassle of DIY,” you’ve improved your offer.
If, however, you really go deep and address Dan’s WHY, offering “Everything You Need To Launch The Online Business You’ve Always Dreamed About,” you are really starting to resonate with Dan.
This is where understanding your target customer is so important. If I’m targeting new entrepreneurs, this type of messaging will give me a MASSIVE advantage over my competition. If, on the other hand, I’m targeting users wanting to build a website for the purposing of launching a book or listing their brick-and-mortar business, I’m going to disqualify myself with the above messaging.
If I understand what my customers want, I can connect my business to the fulfillment of their desires. And that, my friend, will make your offer a lot harder to resist.
Get that right, and optimizing for conversions is easier. You can find a compelling value proposition. You can play with your CTA buttons and more. But until you know your target customer, you can’t do any of that.
If you haven’t already, take time to think about these three questions… then use it to optimize your sales copy. You’ll be amazed how how much easier it is to drive conversions.
After almost 20 years of evolution, today’s web typography, with its high-density displays and support for OpenType features, is just a step away from the typographic quality of the offline world. But there’s still one field of graphic design where we still constantly fall back to bitmap replacements instead of using native text: display typography, the art of staging letters in illustrative, gorgeous, dramatic, playful, experimental or unexpected ways.
A Case For Display Text In HTML
Sure, we’re able choose from thousands of web fonts and use CSS effects for type, some with wide browser support (like drop-shadows and 3D transforms) and others that are more experimental (like background-clip and text-stroke), but that’s basically it. If we want really outstanding display typography on our websites, we’ll usually embed it as an image.
The disadvantages of using images for type on the web are obvious: file size, lack of feasibility for frequently altered or user-generated content, accessibility, time-consuming production of assets, etc.
Wouldn’t it be great if we could style letters the same way we usually style text with CSS? Apply multiple borders with different colors? Add inner and outer bevels? Add patterns, textures and 3D-effects? Give type a used look? Use multiple colors and distorted type? Give type a distressed look?
Sophisticated SVG Filters: CSS For Type
Most of this is already possible: The trick is to unleash the magic of SVG filters. SVG filters (and CSS filters) are usually considered a way to spice up bitmaps via blur effects or color manipulation. But they are much more. Like CSS rules, an SVG filter can be a set of directives to add another visual layer on top of conventional text. With the CSS filter property, these effects can be used outside of SVG and be applied directly to HTML content.
Talking about filters in CSS and SVG can be a bit confusing: SVG filters are defined in an SVG filter element and are usually applied within an SVG document. CSS filters can be applied to any HTML element via the filter property. CSS filters such as blur, contrast and hue-rotate are shortcuts for predefined, frequently used SVG filter effects. Beyond that, the specification7 allows us to reference user-defined filters from within an SVG. A further point of confusion is the proprietary -ms-filter tag, which was deprecated in Internet Explorer (IE) 9 and removed when IE 10 was released.
This article mostly deals with the first case: SVG filters used in an SVG document embedded on an HTML page, but later we’ll experiment with SVG filters applied to HTML content.
The illustrations in this article are taken from demos of SVG filter effects applied to text. Click on any one of them to see the original (modern, SVG-capable browsers only). I call them “sophisticated” SVG filters because under the hood these filters are crafted by combining multiple effects into one output. And even though the appearance of the letters has been altered dramatically, under the hood the text is still crawlable and accessible and can be selected and copied. Because SVG filters are supported in every modern browser, these effects can be displayed in browsers beginning from IE 10.
Understanding SVG filters is challenging. Even simple effects like drop-shadows require a complicated, verbose syntax. Some filers, such as feColorMatrix and feComposite, are difficult to grasp without a thorough understanding of math and color theory. This article will not be a tutorial on learning SVG filters. Instead I will describe a set of standard building blocks to achieve certain effects, but I will keep explanations to the bare minimum, focusing on documenting the individual steps that make up an effect. You will mostly read about the how; for those who want to know the why, I’ve put a reading list at the end of this article.
Constructing A Filter
Below is a sophisticated SVG fiter in action. The output of this filter is a weathered text effect, and we will use this for a step-by-step walkthrough:
Let’s break down this effect into its building blocks:
text and extrusion are separated by a transparent gap;
text has a grungy, weathered look.
Our SVG filter effect will be constructed by combining multiple small modules, so-called “filter primitives.” Every building block is constructed from a set of one or more primitives that are then combined into a unified output. This process is easier to understand when shown as a graph:
Adding A Filter
We’ll start with a boilerplate SVG that contains an empty filter and text:
We have to start somewhere, and the filter tag is the element to begin with. Between its start and end tag, we will put all of the rules for transformation, color, bitmap manipulation, etc. The filter can then be applied to a target as an attribute or via CSS. The target will usually be an element inside an SVG, but later on we will learn about another exciting option: applying SVG filters to HTML elements.
A handful of attributes exist to control the filter element:
relative (objectBoundingBox is the default) or absolute (userSpaceOnUse) filterUnits.
A Word on Filter Primitives
As we’ve learned, filter primitives are the building blocks of SVG filters. To have any effect, an SVG filter should contain at least one primitive. A primitive usually has one or two inputs (in, in2) and one output (result). Primitives exist for blurring, moving, filling, combining or distorting inputs.
The specification allows us to take several attributes of the filtered element as an input source. Because most of these do not work reliably across browsers anyway, in this article we will stick with SourceGraphic (the unfiltered source element with colors, strokes, fill patterns, etc.) and SourceAlpha (the opaque area of the alpha channel — think of it as the source graphic filled black), which do have very good browser support.
How To Thicken The Input Text
The first filter primitive we will get to know is feMorphology, a primitive meant to extend (operator="dilate") or thin (operator="erode") an input — therefore, perfectly suited to creating outlines and borders.
Here is how we would fatten the SourceAlpha by four pixels:
The next step is to create a 3D extrusion of the result from the last primitive. Meet feConvolveMatrix. This filter primitive is one of the mightiest and most difficult to grasp. Its main purpose is to enable you to create your own filter. In short, you would define a pixel raster (a kernel matrix) that alters a pixel according to the values of its neighbouring pixels. This way, it becomes possible to create your own filter effects, such as a blur or a sharpening filter, or to create an extrusion.
Here is the feConvolveMatrix to create a 45-degree, 3-pixel deep extrusion. The order attribute defines a width and a height, so that the primitive knows whether to apply a 3×3 or a 9×1 matrix:
Be aware that IE 11 and Microsoft Edge (at the time of writing) cannot handle matrices with an order greater than 8×8 pixels, and they do not cope well with multiline matrix notation, so removing all carriage returns before deploying this code would be best.
The primitive will be applied equally to the left, top, right and bottom. Because we want it to extrude only to the right and bottom, we must offset the result. Two attributes define the starting point of the effect, targetX and targetY. Unfortunately, IE interprets them contrary to all other browsers. Therefore, to maintain compatibility across browsers, we will handle offsetting with another filter primitive, feOffset.
As the name implies, feOffset takes an input and, well, offsets it:
feComposite is one of the few filter primitives that take two inputs. It then combines them by applying a method for composing two images called Porter-Duff compositing. feComposite can be used to mask or cut elements. Here’s how to subtract the output of feMorphology from the output of feConvolveMatrix:
Looks pretty much like the desired result. Let’s make it a little more realistic by giving it a weathered look.
Adding a Fractal Texture
feTurbulence is one of the most fun primitives to play with. However, it can melt your multicore CPU and make your fans rotate like the turbojet engines of a Boeing 747. Use it wisely, especially on a mobile device, because this primitive can have a really, really bad effect on rendering performance.
Like feFlood, feTurbulence outputs a filled rectangle but uses a noisy, unstructured texture.
We have several values on hand to alter the appearance and rhythm of the texture. This way, we can create surfaces that look like wood, sand, watercolor or cracked concrete. These settings have a direct influence on the performance of the filter, so test thoroughly. Here’s how to create a pattern that resembles paint strokes:
By default, feTurbulence outputs a colored texture — not exactly what we want. We need a grayscale alpha map; a bit more contrast would be nice, too. Let’s run it through an feColorMatrix to increase the contrast and convert it to grayscale at the same time:
There are two methods of applying SVG filters to an SVG text element:
1. Via CSS
2. Via Attribute
<text filter="url(#filter)">Some text</text>
Applying SVG Filters To HTML Content
One of the most exciting features of filters is that it’s possible to embed an SVG, define a filter in it and then apply it to any HTML element with CSS:
At the time of writing, Blink and WebKit require it to be prefixed:
As easy as it sounds in theory, this process is a dark art in the real world:
SVG filters on HTML content are currently supported in WebKit, Firefox and Blink. IE and Microsoft Edge will display the unfiltered element, so make sure that the default look is good enough.
The SVG that contains the filter may not be set to display: none. However, you can set it to visibility: hidden.
Sometimes the size of the SVG has a direct influence on how much of the target element is filtered.
Did I say that WebKit, Blink and Firefox understand this syntax? Well, Safari (and its little brother mobile Safari) is a special case. You can get most of these demos working in Safari, but you will pull your hair out and bite pieces out of your desk in the process. At the time of writing, I can’t recommend using SVG filters on HTML content in the current version of Safari (8.0.6). Results are unpredictable, and the technique is not bulletproof. To make things worse, if Safari fails to render your filter for some reason, it will not display the HTML target at all, an accessibility nightmare. As a rule of thumb, you increase your chances of getting Safari to display your filter with absolute positioning and fixed sizing of your target. As a proof of concept, I’ve set up a “pop” filter effect, optimized for desktop Safari17. Applying feImage to HTML elements seems to be impossible in Safari.
Previous Demos, Applied To HTML Content
In these demos, the wrappers are set to contenteditable = "true for convenient text editing. (Be aware that these demos are experimental and will not work in Safari, IE or Edge.)
Depending on its complexity, a filter can quickly become a messy thing. During authoring, you could be adding and removing rules and changing their order and values, and soon you’re lost. Here are some rules I’ve made for myself that help me keep track of what’s going on. People and projects vary; what seems logical and structured for me might be chaotic and incomprehensible for you, so take these recommendations with a grain of salt.
I group my filter primitives into modules depending on their functionality — for example, “border,” “fill,” “bevel,” etc. At the start and end of a module, I put a comment with the name of this group.
A good naming convention will help you structure your filter and keep track of what’s going in and outside of a primitive. After experimenting with BEM-like schemas25, I finally settled on a very simple naming structure:
For example, you would have BEVEL_10, BEVEL_20, OUTLINE_10 and so on. I start with 10 and increment by 10 to make it easier to change the order of primitives or to add a primitive in between or to the beginning of a group. I prefer full caps because they stand out and help me to scan the source faster.
Always Declare Input and Result
Though not necessary, I always declare an “in” and a “result.” (If omitted, the output of a primitive will be the input of its successor.)
Some Building Blocks
Let’s look at some single techniques to achieve certain effects. By combining these building blocks, we can create new sophisticated filter effects.
<!-- 1. Thicken the input with feMorphology: -->
<feMorphology operator="dilate" radius="2"
in="SourceAlpha" result="thickened" />
<!-- 2. Cut off the SourceAlpha -->
<feComposite operator="out" in="SourceAlpha" in2="thickened" />
This method is not guaranteed to look good. Especially when you apply dilate in conjunction with big values for radius, the result can look worse than the geometry created via stroke-width. Depending on the situation, a better alternative would be to store the text in a symbol element, and then insert it when needed via use, and thicken the instance with CSS’ stroke-width property. Be aware that stroke-width cannot be applied to HTML content, though.
<!-- 1. create an feTurbulence fractal fill -->
<feTurbulence result="TURBULENCE" baseFrequency="0.08"
numOctaves="1" seed="1" />
<!-- 2. create a displacement map that takes the fractal fill as an input to distort the target: -->
<feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="9" />
<!-- 1. Create a colored filled area -->
<feFlood flood-color="#F79308" result="COLOR" />
<!-- 2. Cut off the SourceAlpha -->
<feComposite operator="in" in="COLOR" in2="SourceAlpha" />
It should be mentioned that, besides feFlood, feColorMatrix is another method of altering the source input’s color, even though that concept is more difficult to grasp.
<!-- Offset the input graphic by the amount defined in its "dx" and "dy" attributes: -->
<feOffset in="SourceGraphic" dx="10" dy="10" />
<!-- Define a convolve matrix that applies a bevel. -->
<!-- Order defines the depth of the extrusion; angle is defined by the position of "1" in the matrix. Here we see a 45-degree, 4-pixel deep extrusion: -->
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1" in="SourceAlpha" result="BEVEL" />
<!-- offset extrusion: -->
<feOffset dx="2" dy ="2" in="BEVEL" result="OFFSET" />
<!-- merge offset with Source: -->
<feMergeNode in="OFFSET" />
<feMergeNode in="SourceGraphic" />
The feTurbulence filter primitive will create a noisy texture by applying the so-called Perlin noise algorithm (invented by Ken Perlin during his work on TRON in 1981). This will generate a rectangle filled with noise that looks like what you could see on old TV sets late at night before cable TV was invented.
The appearance of the noise structure can be modified by several parameters:
type in its default state will produce a liquid texture.
type can be set to fractalNoise instead, which will output a sandy result.
baseFrequency is there to control x and y pattern repetition.
numOctaves will increase the level of detail and should have a low value if performance is an issue.
The number to start randomization with is determined by seed.
feImage‘s purpose is to fill the target with a texture. If we want to apply a repeating pattern, it must be used in conjunction with feTile.
<!-- The following code will create a 100 × 200-pixel square filled with "myfill.svg": -->
<feImage xlink:href="myfill.svg" x="0" y="0" width="100" height="200" result="IMAGEFILL"/>
<!-- We then use this fill as an input for feTile, creating a repeating pattern this way: -->
<feTile in="IMAGEFILL" resulte="TILEPATTERN"/>
<!-- Now we will use feComposite to "cut off" SourceAlpha's transparent areas from the fill: -->
<feComposite operator="in" in="TILEPATTERN" in2="SourceAlpha" />
The cool thing about this filter is that the specification allows us to use any SVG element as an input and to create a pattern fill from it. So, in theory, you could create pattern fills from symbols, groups and fragments within your SVG and then apply them as a texture, even to HTML elements. Unfortunately, because of an old bug33, Firefox accepts only external resources as input. If you prefer to keep things self-contained and want to avoid the additional HTTP request, there’s hope: Embed the pattern fill as an UTF-8 data URI:
If you want to apply feImage to HTML content, be aware that size matters. The SVG that contains the filter must cover the area where it is being applied. The easiest way to achieve this is by making it an absolutely positioned child within the block element it is being applied to:
This is one “Wow” effect that quickly becomes boring when used too often. This filter has a serious effect on performance, so use it wisely.
<!--We create a heightmap by blurring the source: -->
<feGaussianBlur stdDeviation="5" in="SourceAlpha" result="BLUR"/>
<!-- We then define a lighting effect with a point light that is positioned at virtual 3D coordinates x: 40px, y: -30px, z: 200px: -->
<feSpecularLighting surfaceScale="6" specularConstant="1" specularExponent="30" lighting-color="#white" in="BLUR" result="SPECULAR">
<fePointLight x="40" y="-30" z="200" />
<!-- We cut off the parts that overlap the source graphic… -->
<feComposite operator="in" in="SPECULAR" in2="SourceAlpha" result="COMPOSITE"/>
<!-- … and then merge source graphic and lighting effect: -->
<feMergeNode in="SourceGraphic" />
There is a gap between pure CSS layout and custom design elements created in software such as Photoshop or Illustrator. External assets embedded as background images, icon sprites and SVG symbols will always have their place in the design of websites. But sophisticated SVG filters give us more independence from third-party design tools and bridge this gap by enabling us to create visual styles directly in the browser.
In this article we’ve seen how SVG filters help us to create playful, decorative web typography. But nothing says we have to stop here. Soon, browser support will be good enough for us to use these effects on every HTML element as easily as we use CSS today. Even though the effects behave differently from native CSS techniques (an SVG filter will affect not only an element but all its children), it will be exciting to see how inventive web designers use these techniques in the near future.
This is what happens when you cause anxiety on your landing pages. So stop it. Image credit: Lostateminor.com
We all know someone who isn’t willing to give away their personal information — that person who will never do banking online and thinks you’re an idiot for giving any website your name and email address, let alone your credit card number.
People using the internet already have a level of anxiety about just being online. They’re increasingly suspicious of every page they visit. They’re worried about privacy, they’re worried about having their banking information stolen and they’re worried that they’re not going to get what they pay for.
Consumers are educated about the internet, and they want reassurance that they’re dealing with a company that they can trust their information with. Your landing pages are no exception; they need to work extra hard towards reducing anxiety and building trust with consumers.
Without that trust there is no conversion.
Let’s take a look at five common mistakes that could be causing anxiety on your landing pages – and how you can avoid them.
1. You have weak message match
Imagine clicking an ad that advertises one thing, but winding up on a landing page that has little or nothing to do with that thing. What would you do? Probably panic and hit the back button!
That cognitive dissonance is caused by poor message match: a measure of how well your landing page copy matches the phrasing of the ad that brought people there.
Being promised one thing and then finding another causes anxiety and will most likely make visitors bounce.
What you can do about it
Make sure that your headline is neatly matched up with the message in your ad to reassure people that they’re in the right place. Keep the color palette and typography consistent from display ads to your landing page, and make sure to repeat the specifics of the offer.
Consider the example below by content marketing analytics tool Pathful. Their ad starts out with a simple, green color scheme, and asks whether or not you’re interested in finding out more about how content can affect your business:
Upon clicking, visitors are taken to this page, where they’re greeted with a nice, big headline that repeats the core message from the ad and assures them that they’re in the right place. Anyone who answered “yes” by clicking on the ad will arrive at a page that speaks directly to the expectations created by the ad.
For bonus points, Pathful should consider A/B testing an ad headline that matches their page’s headline more closely. Dead-on message match like that reassures prospects that they’ve made a “good click.”
You pay for PPC ads, so make them count. If you don’t mind your message match, you’re wasting money. Click To Tweet
2. Your forms are too long
How much information do you need from your visitors? Do you really need 15 form fields of info in order to convince them to convert?
This form below from one of the pages we looked at on Page Fights is asking for too much from an initial contact. It may well be that they need all of that information in order to pre-qualify someone for their program, but this step could be taken later.
Long forms cause friction – and friction leads to anxiety.
Perceived friction might be the shock of seeing a long form and worrying that it’s going to take too much time to fill out. The solution to this issue is to either make the form shorter, or break it up so that you collect the information you need on more than one page.
Actual friction happens when physical barriers cause visitors to abandon your page. In this case, that could be the time it takes to fill in the form. Friction may also be unclear instructions or even inline form fields that disappear when you put your cursor in the field. These things confuse visitors and cause them to leave.
What you can do about it
Keep those forms short! Ask for only as much information as is necessary to begin a working relationship with your prospects. If you get their name and email address, you can start asking for a little more information with each new point of contact, starting with the first email you send them.
As always, the caveat here is that the number of form fields that’s right for your landing page will be decided by the visitors. How do they decide? You test a few different variations, and along the way, you’ll find out by which number of fields is most effective.
Who knows? You may even learn that a lengthy form and a bit of friction is an acceptable tradeoff for more qualified leads.
3. Your “facts” are not believable
You’re dealing with a savvy, educated audience who is willing to do further research if they smell something fishy.
Your landing page could have most of the elements of conversion centered design, but start spouting some questionable facts about your product and you’ll put your readers in full-on skeptic mode.
Not only will your prospects cease to trust you – people might even call you out on it, like in the image below. This “rapid hair growth” business made a few seemingly spurious claims, and a fellow has taken the time to build an entire website debunking those claims.
This guyreally didn’t believe this testimonial about rapid hair growth. He didn’t believe it so much that he started a website to debunk the claims.
Testimonials aren’t the “magic bullet” that they’re sometimes made out to be. If they’re not credible, they can reduce conversions.
If you try to pull the wool over your prospect’s eyes, you get the anxiety flowing and the bounce rate rising.
What you can do about it
Stay honest. Use facts that you can verify. Use testimonials from real people who have used your product. It’s as easy to spot sincerity as it is to spot a fake, and testimonials can really help your conversion rates — so long as they’re straightforward and honest.
Oli is fond of saying, “testyourmonials.” What’s good for one page may not work on another, so be sure to test those testimonials!
4. You’re using a lot of words that mean nothing
One of our friends, copywriter extraordinaire Henneke Duistermaat, has at least 17 words that she’d like to see people stop using on landing pages.
All that marketing gibberish like “state-of-the-art” and “world-class” doesn’t actually mean anything to anyone. Is your product “innovative?” Really? How so?
And woe unto those of you who use the word “leverage” on your landing page copy. Woe, I say! You’ve used a word that doesn’t really mean anything unless you’re selling levers. You know what else you’ve done? You’ve just created a bounce-able level of anxiety.
What you can do about it
You can start explaining what you mean instead of using meaningless buzzwords.
“State-of-the-art” doesn’t mean anything real to anyone. Tell prospects what they want to know: what your product does and how it’ll take away their pain.
Talk about the features and benefits of your product using simple, explanatory words. Describe what you’ve got to your potential customers the way that you would describe them to your grandma. You don’t want your grandma to feel anxious, do you? Good. Make it that easy for everyone.
5. Nobody knows who you are
The simple fact is that, unless you’re a major brand, people may not know who you are. If folks don’t know who you are, they’re unlikely to trust you with their personal details.
Consumers are becoming a lot more savvy. One study showed that almost 75% of respondents paid attention to the URL address in browsers looking for “https” connections. From one of the respondents:
For the payment itself, I always seek some trusted logo and the URL bar logo and the URL address.
About 75% of people look for “https” in browser bars when making a purchase. Click To Tweet
If you don’t show that you’re running a legit operation, your visitors are not likely to want to hand over their personal information.
What you can do about it
Give your visitors a reason to trust you. People expect to see a privacy statement, terms and conditions, and trust seals that they’re familiar with.
Trust seals are third-party badges that show people that your page is meeting high security standards, such as employing the use of HTTPS or SSL data security.
Be careful, though – too many trust seals on one page can actually add further anxiety. Be sure to place those seals in a high-visibility spot so that they can be seen.
Not sure exactly where to put it? Start A/B testing until you find the right spot.
How will you reduce landing page anxiety?
Now that you know a little bit more about your potential customers, you’re probably starting to feel a little empathy with them. You know that they have real fears, but you also know that you can alleviate those fears.
Get to know your prospects, their anxieties and what they need from you to convert. Then give it to them.
Anxiety is a massive killer of conversions. By demonstrating your trustworthiness, you reduce the consumer’s perception of risk and allow them to make the purchase they want to make.
What other methods do you use to reduce anxiety on landing pages? Let us know in the comments below!
Customer experience consultant Micah Solomon says millennials want to know your business values. If you’re socially responsible, ethical or environmentally conscious, you have to let them know.
While you may not trumpet this from every page of your website, showing that you stand for something (say, on your about page) can help you build a relationship with your millennial audience.
Take a look at the Quidsi culture statement to see how to do this. This example, from its guiding principles, is exactly the type of thing millenials want to see:
This research-oriented generation is going to check you out so you’d better have something to show them. And they will want to know whether your values are all talk or reflected in the way you do business.
I’m betting the CEO who took a pay cut so his employees could earn more will be a big hit with millennials.
“Each member of my team deserved it,” Gravity Payments founder Dan Price said, adding that he doesn’t want his employees to be distracted by whether they can buy a meal or pay their rent.
Showing off your values may not translate directly to clicks on your landing page, but it will attract people who will stick around because you’re a great company, and it will build trust, which is an important aspect of conversions.
2. Communicate Transparently
Related to values, it makes sense for the company to have a culture of openness, availability, and transparent communication. This is another trust builder, says Marketing Profs:
“Millennials value transparency. They tend to distrust businesses that don’t respond to feedback, or companies that are secretive about their activities.”
To help give millennials a rounded picture of your business, get their attention and win their trust (there’s that word again), share company news and activities and have people at the highest levels share their thoughts.
A great example here is the blog of Richard Branson, the founder of Virgin. Every post showcases some aspect of himself or his business and people respond, connect and share, creating a tremendous amount of goodwill.
Another good example is Buffer’s Open blog, which highlights all aspects of work and life at the company, from mistakes to successes—and people love them for it.
That means that you have look after the end-to-end conversion experience, tweaking everything from referral pages that are part of the funnel (such as your social media profiles) to the landing pages themselves.
And since social sharing is a major activity for millennials, you need to make it all shareable so they can tell their friends about your offer, product or service.
4. Let Users Help
The SocialTimes infographic also shows that for millennials, user-generated content (UGC) is 35% more memorable and 50% more trusted than other media.
Get users involved with your products and services, via social media, reviews (more on that in a moment), and discussions with peers in forums and elsewhere, and your brand will see the benefit.
Many brands have already started doing this. For example, Dorito lets users create its SuperBowl commercial, and a case study on Unbounce shows how Urban Outfitters encourages users to submit photos of themselves wearing fashion items. People browsing the site can then buy the outfits with a single click.
Millennials know what their peers like, so this is a smart strategy.
So if you want to increase conversions, get users to review your products and services and showcase those reviews on your web pages.
How do you get those reviews? Just ask.
I’ve probably mentioned publishing imprint Sterling & Stone before. They ask for reviews in their emails and at the end of every ebook, and sometimes they even offer an incentive. The result is more reviews on their Amazon author pages, which translates to more clicks and sales.
Research from Mintel shows that 60% of millennials are willing to share information about their habits and preferences, and they are twice as likely as baby boomers to share their cell number and social media profiles.
For marketers, this means an unparalleled opportunity to provide personalized and tailored experiences.
According to the Mintel research cited above, they are 87% more likely to feel lost without their phones. That’s why everything has to be fast and convenient (it’s no coincidence so many retailers are offering same-day delivery).
How to Reverse-Engineer a High-Conversion Landing Page
Get these areas right and your millennial customers will love you. And if all else fails, offer a freebie or coupon. Kissmetrics says that millennials are avid bargain hunters and Mintel adds that 30% of millennials will trade their personal info for the right offer.
What offers have you got up your sleeve to convert your millennial customer?
If you’re a UX designer, you’ve probably designed a lot of forms and web (or app) pages in which the user needs to choose between options. And as a designer, you’re likely familiar with best practices for designing forms. Certainly, much has been written and discussed about this topic. So, you probably know all about how best to label and position form fields and so on for optimal usability.
But have you thought about how the design of a form affects the user’s decision-making? Have you ever considered to what extent the design itself affects the choices people make? As always in design, there are a variety of ways to design a form or web page.
For example, let’s say you’re designing a system in which the user needs to indicate whether they would like to sign up for a particular preventive medical procedure, like a flu shot. You could design the form in a number of ways. For example, you could provide a checkbox where the user either opts in or out. Alternatively, you could design it so that the user is required to explicitly choose between two options (via radio buttons).
Examples of these two approaches are shown below:
Would it matter which way you design it? Would the user make the same choice regardless of which design they encounter? Or could the user potentially be led to make a different choice merely as a result of how the choice is presented or designed?
The Power Of Defaults
One key difference between these two designs is that the checkbox requires a default state. That is, upon display, the checkbox will appear either checked or unchecked, as opposed to the radio buttons, which do not require a default selection. In the second example, even if the user does nothing, a “choice” has already been made, via the default.
A robust body of research1 has shown that when a default choice is offered, most people do not deviate from it. For example, if the box is checked by default, many don’t uncheck it (and vice versa). Making an explicit decision requires effort, after all. Time, thought and consideration are often required to determine the best choice. It turns out that people are remarkably sensitive (and averse) to the amount of effort that making a choice demands.
People are also remarkably sensitive to any possibility of incurring a “loss” that might then subsequently trigger feelings of regret. Especially when one is unsure how to choose, not making a choice (by simply accepting the default) feels better than actively making a choice that might end up being the “wrong” choice. Because people often have an unrealistic expectation that they will have more time in the future to make a more informed decision, procrastination also works2 in favor of acceptance of the default. Deviating from the default requires an explicit action, which people delay in taking. In many ways, defaults make decisions feel easier and less risky.
Designing For An Explicit Choice
The judicious use of defaults, then, has proven to be a key driver in the choices that people ultimately end up with, in large part because many people simply go with the default option. But one problem with passive decision-making3 is that it’s less likely to engender the kind of committed follow-up that is often essential to implementation of the decision, such as in the earlier example of the flu shot. Wouldn’t those who actively decide to opt for a flu shot be more apt to actually get one than those who passively accept the default?
Might there be a way to design for explicit decision-making that encourages people to feel better about actively making a choice? With this question in mind, researchers conducted a study to test how the design for an explicit choice might affect decision outcomes. Specifically, they were interested in comparing the outcomes of two approaches to obtaining an explicit choice from users regarding enrollment in a 401(k) plan (an employer-sponsored retirement plan), as shown below.
Example 1 provides two options:
“I want to enroll in a 401(k) plan.”
“I don’t want to enroll in a 401(k) plan.”
Example 2 also provides two options:
“I want to enroll in a 401(k) plan and take advantage of the employer match.”
“I don’t want to enroll in a 401(k) plan and don’t want to take advantage of the employer match.”
Would actual choice outcomes be influenced by which design users interacted with? In example 1, the two choices are weighted equally. That is, if the user doesn’t have a specific or compelling reason to choose one over the other, chances are that they may feel conflicted about which one to choose. Neither necessarily feels better or worse than the other. Example 2, on the other hand, is explicit about what the user will potentially gain or give up as a result of choosing an option.
Results of the research study4 show that enrollment in a program increased when options were “enhanced” with explicit mention of the implications of each choice, and levels of commitment and participation in the program also increased. But why would the wording of example 2 make such a difference in people’s choice? From a design perspective, stating what seems obvious about the implications of each option might seem unnecessary.
But it turns out that, because people are generally unlikely to seek out information to inform their decision, the additional wording makes a difference. Proactively seeking out information is work, after all, and research consistently reveals people’s considerable sensitivity to and avoidance of almost any amount of effort. Because of this, providing information within the options themselves can have a powerful impact on decision outcomes.
Aversion To Potential Loss
For many people who are not enrolled in a 401(k) plan, maintaining the status quo of being unenrolled doesn’t seem to incur any negative emotion, risk or “loss.” Life seems to roll on normally when one is not enrolled. Most people are aware, however, that participation in a 401(k) plan involves regular contributions to the plan — money that is no longer available for daily household expenses or other regular uses. And inherent to the act of investing is the potential for market downturns and losses incurred over the course of an investment. For these reasons, taking the step of enrolling in the plan (and potentially losing one’s investment) might feel a lot riskier than maintaining the status quo by not enrolling.
But when the costs associated with maintaining the status quo (for example, by remaining unenrolled in the plan) are made apparent and are framed as a loss (for example, loss of the employer match), then the decision to enroll in the plan feels more compelling and motivating. People are much more motivated by ways to avoid loss than to realize gains.
Consider what might happen if example 2 were framed differently:
“I want to enroll in a 401(k) plan.”
“I don’t want to enroll in a 401(k) plan and don’t want to take advantage of the employer match.”
Framing the options in this way does not remind users that they have something to gain by enrolling, only that they have something to lose by not enrolling. I suspect that users would still feel strongly motivated to enroll, simply because people give disproportionately greater weight to loss than to gain.
Research has demonstrated the power of design in enhancing explicit choices, but what about examples from the real world? One example we can look to is the US pharmaceutical company CVS/caremark5, which enjoyed greater rates of enrollment for its automatic prescription-refilling program when users were required to choose between two options:
“I prefer to order my own refills.”
“I want to enroll in the ReadyFill@Mail (automatic prescription refill program).”
The first option reminds users that not enrolling for the auto-refill program incurs a cost — the cost of having to do the work of ordering one’s own refills. It turns out that 21.9% of users decided to enroll in the program with this design of explicit choices, compared to only 12.3% of those who encountered an opt-in design. And customers who encountered the explicit choice also ended up filling more prescriptions than those in the opt-in design. It seems that preference for the program was actually enhanced once people made a commitment to joining.
Examples From The Retail World
Enhanced explicit choice is effective because it reminds people what they will gain or lose as a result of making a certain choice. Some online shopping websites are leveraging the power of such “reminders.”
Moissanite6 is one such example. After a short time on its website, the user is presented with a modal requesting their email address in exchange for a 10% discount on their next purchase. Providing one’s email address, of course, incurs the “cost” of potentially getting unwanted email, etc. But at the bottom of the modal is a reminder of the cost of not signing up: “No thanks, I prefer paying full price.” Paying full price, of course, implies loss because the user could instead be enjoying a discounted price.
Consider another example, Bauble Box8, which takes this concept a step further. After a short time on the website, the user is presented with the following modal, offering a 15% discount on one’s first purchase in exchange for an email address.
Noteworthy is the fact that there is no obvious way to close this box — for example, no “X” or “Close” (which would normally be located in the upper-right corner). To dismiss the box, the user must click the “Continue as guest” link towards the bottom of the box. And it might not be immediately apparent that this is a link.
The design seems to leverage these usability issues by forcing the user to hunt around for a way to dismiss the box, until they finally discover the “Continue as guest” link. Although this design risks user frustration, it nevertheless forces more time and attention towards the content of the box than users would ordinarily spend, increasing the likelihood that they will also notice the parenthetical text under the link, “(Without my 15% off coupon!)”
This design raises some interesting questions about how users perceive the experience and, consequently, whether this is a website they want to give their business to. To what extent might user frustration with the (intentional) usability issues adversely affect their perception of the company and the brand? At what point does the design cross the line to the dark side? These are important considerations, especially for companies that want to establish long-term relationships with their customers built on trust and delight.
We’ve covered a lot of ground in this article. We’ve seen that defaults are powerful because they provide a way for users to passively decide, thereby easing the difficulty and effort associated with decision-making. But we also know that, for a variety of reasons, providing a default option is not always appropriate. Sometimes, it’s better for users to make an explicit choice — especially when they are more likely to follow through with a decision and be more committed to taking action on it.
A primary lesson from this article is that merely reminding people what they stand to gain or lose as a result of making a particular choice can have a powerful impact on how they choose. And depending on the type of decision, how they choose can have significant implications for their lives. We’ve seen, too, that designing for explicit choice can manifest itself in different ways, depending on the subject matter and context of the experience.
It’s imperative to understand that the design matters. UX design professionals have a responsibility to understand how design itself influences — and sometimes even drives — user perception and behavior and, therefore, decision outcomes. To this end, the decisions we make as designers matter.
Second in importance only to the headline, this conversion element has the power to convince or confuse prospects in those crucial seconds before a purchase.
I am talking, of course, about CTAs (calls to action).
Whether increasing your list or making a sale, the aim of your CTA is the same, to get your prospects to the next stage in your funnel. It’s an important job and one that deserves a good deal of attention, so why is it often overlooked?
Ask yourself how many times you’ve seen some great copy that was undone by a lackluster, generic and uninspired CTA.
It’s the tipping point between conversion and bounce, so you owe it to yourself to make sure your CTA is as compelling and successful as possible.
So let’s try to put a stop to crappy CTAs and squeeze every last conversion we can out of your prospects by adding a more value at this important stage of your sales pitch.
Join us for a Crazy Egg Hard-Boiled Conversion Webinar
How to Reverse-Engineer a High-Conversion Landing Page
Keep reading for advanced CTA tips, plus a few challenges to accepted CTA rules of thumb.
Don’t Create a Call to Action!
Part of the problem with poor CTAs actually stems from the name.
Call to action.
I see a lot of CTAs using language that simply describes the action you’re about to undertake. The problem with this language is that it’s often associated with effort or loss.
No one wants to think about what a click will cost them. They want to think about what they’re going to gain. If your audience can’t see the gain of clicking, optimizing your CTA colors and positioning is all for naught.
Submit – Simply a poor word choice. Of course, I know they want me to submit my details, but the word sends the wrong message. It’s vague, generic and makes me feel like I’ve lost a battle by submitting to your weak marketing attempt.
Buy – You know what I associate with buying? Losing money. I might be getting something I want out of the purchase but reminding me that I have to pay for it makes me hesitate and question my decision.
Order – Again, this reminds me that I’m having to purchase something. Not only that, having to order makes me think I’m going to have to wait for it. I’m impatient and want my product NOW!
Instead of creating a call to action, create a call to value.
Don’t focus on the word that best describes what a prospect has to do, use words that describe the benefit of taking the next step along your funnel. Make the value of clicking outweigh the cost.
Changing the wording from the negative ‘order’ to the benefit implying ‘get’ is a tiny change that had a huge effect on the effectiveness of the CTA.
If you’re looking for further examples of good CTAs, look no further than two inches to the right. There’s no ambiguity or confusion in the Crazy Egg CTA. You’re told exactly what you’re going to get and how to get it.
Free trial –> click here –> get heat map
Thefocus is on what you’re going to receive, not what you have to do.
See, that’s the thing with awesome CTAs. They don’t try to be clever or witty because they don’t need to be. They’re simple, to-the-point and focus on providing what the customer wants.
It’s not hard set of rules to follow and, despite the other areas we’re about to get onto being important, I honestly think the tone and focus of your CTA text is the most important.
So We Know What to Say, but Where do We Say it?
I can already hear my faithful readers screaming, “Above the fold!”
I get it. It’s one of those marketing myths that has somehow become a rule of thumb. Unfortunately, I’s not a rule I subscribe to.
The best placement for a CTA isn’t at the top of your page. It’s not even at the the bottom of the page. The best placement is wherever your audience is ready to make the commitment.
A car salesman wouldn’t force you to make a purchase the second you stepped on his lot. He’d build your interest and desire before doing so because he knows you’re more likely to say yes. Getting someone to click your CTA is much the same.
After testing an CTAs above and below the fold, neither outperformed the other. There was no discernible difference between the two. It turns out that the Boston Globe audience was motivated enough to convert regardless of CTA position.
If only we all had such motivated audiences!
The truth is there are no hard and fast rules for the perfect CTA placement. It depends on your content, your audience and the perceived cost-to-value ratio of your click.
Wait. That’s a little too vague.
Let’s go back to our original discussion on the cost to value of a click. If you want someone to click, you need the value to outweigh the cost. How easy is it to convey value in two to five words on your button?
It’s a great starting point. If you’re looking to optimize your initial landing page or main site pop-up then yes, look at the complexity of the offer. However, there’s a little more to it than that. Think about where customers are in your sales funnel and how motivated they are.
Think back to our wonderful car salesman. He knows pressuring someone who isn’t ready to purchase will lose him a potential sale.
On your initial landing page, your prospect probably knows very little about you, so you’re going to need to run through the whole AIDA sequence before asking them to sign up.
If a prospect has come through a multi-stage marketing plan to get to your CTA, they should (if you’re doing it right!) arrive pre-sold on the idea, allowing you to place your CTA higher up the page. You’ve already done the hard work of creating and demonstrating value, so CTA placement becomes less important.
As I always say, there’s no one rule for any conversion tactic to work. You’ve got to figure out what’s best for your audience and keep on testing.
Figure out exactly when your prospects are ready to click and commit for the best conversions.
One of the most hotly debated CTA topics pertains to color.
Personally, I don’t think it’s a big deal. As long as your button stands out from the surroundings and is easily identifiable, you shouldn’t have to worry too much. However, there’s more than a few CROs who spend a huge portion of their time working out whether #ffa500 or #feae14 is better for conversions. (By the way, those are hex codes for two very similar colors.)
Whilst I tend not to worry over CTA color, I have noticed a rather peculiar trend on many large sites. It’s a trend that Unbounce noticed and proclaimed to be the future of CTAs: the B.O.B or big orange button.
I quite like orange, both the fruit and the color, but I wouldn’t say it’s the go-to solution for all businesses.
I understand that a lot of large retailers prefer the color and I’ve screen captured a few below (a prize to the first person who correctly identifies every button!), but that doesn’t make it the best overall choice.
If you’re really stuck and don’t know where to go with your buttons, then orange probably is a good place to start, but that’s all it is. A starting point.
Color might affect the result of your testing, and there’s plenty of psychological background behind the meanings and implications of various colors of your site. But an increase in conversions doesn’t come from understanding and exploiting psychological theory. They come from testing.
Sure a lot of the big names use orange, and I’m willing to bet they’ve tested the crap out of their CTAs before settling on the color. Doesn’t mean it’s going to work for you though. Blue might tie in better with your overall brand and message, or you could play around with colors and see no discernible change.
Orange isn’t the future of CTAs and increased conversions.
Proper testing is.
Test your colors to find what works best.
The only rule I’d reiterate is this: Make your CTA stand out with a complimentary yet different color to its surroundings. (Use a service like Adobe Color to find good combos.) After all, a CTA that would outlast Waldo in a hide-and-seek game isn’t going to help anyone.
Take Everything You Read with a Liberal Pinch of Salt
Do you believe everything you read online? No? Good. You shouldn’t, CRO articles are no different and should be taken with a liberal pinch of salt.
Changing the color or location of a CTA might increase the clickthrough rate by 38% for marketer Joe, but did his actual sales increase? There’s a huge difference between a click and a purchase.
We’re rarely presented with a full set of stats and information. For all you know, marketer Joe changed 8 elements on his landing page but only decided to monitor CTR increase. He puts the increase down to the inclusion of a wonderful BOB, but it could well have been any one of the other elements that helped out. You’ll also never find out how his increased CTR affected his overall sales.
Basically I just want everyone to be far more skeptical. Partly so I can be part of the crowd, partly because there are a lot of mistakes made when running tests.
Read what others are doing, but don’t take it as gospel. Take the information, try it for yourself and make up your own mind. For all you know, marketer Joe is a charlatan and a fool.
So how’re your CTAs converting? Do you feel that outweighing the cost with value is the way to go or have I committed blasphemy by defaming the much-used BOB?
I love being a web designer and I’m incredibly thankful that I decided to join this industry many years ago. Still, despite my love of this profession, there have been a number of times during my career when my passion has waned and I’ve found myself simply going through the motions instead of fully applying myself to my work. This scenario is likely familiar to many of my fellow web designers. It is called burnout.
Burnout is a very real challenge that we face as web professionals. The same processes that help us complete projects successfully can also contribute to us falling into a routine and hitting autopilot on our work. Sometimes, an overload of work can force you to fall into a routine and become a production line in order to meet deadlines. Other times, a lack of variety and excitement can lead to apathy with burnout not far behind.
Whenever I have started to experience burnout in my career, thankfully I have recognized the situation and been able to work to resolve the problem. In this article, I will share some of what I have found helpful in rekindling my passion for web design.
Talk To Your Peers
If anyone can understand your feelings of burnout, it is fellow web professionals. They have likely experienced something very similar and they may be able to give you advice on how to handle the situation. Sometimes, simply talking to others is the catalyst you need to break out of a funk and get excited about your work again.
Attending a web conference is one of the best ways to meet and interact with other web professionals. Listening to presentations from some of our industry’s best and brightest, and then being able to discuss that content with fellow attendees at lunch or at an after-conference party, always gets my creative energies flowing. I have never returned to the office after a conference and not been full of fresh ideas and excited to get back to work! Of course, conferences do not happen all the time, nor are they inexpensive to attend.
If you cannot go to a conference for one reason or another, then local meet-ups are another way you can connect with your peers. If there are no groups that meet currently in your area (you can check a site like meetup.com3 to find some events near you) then consider organizing a new group by reaching out to some other designers or agencies, choosing a time and place to meet, and starting a meet-up group yourself.
Take A Break
There’s a reason why companies give their employees vacation time – because time away from the office is an important part of maintaining a healthy work/life balance. This point is something I covered in a previous article I wrote here on Smashing Magazine about fostering healthy non-professional relationships4. Still, while vacations are indeed important, sometimes one week away from work is not enough.
I remember speaking with a web designer I had collaborated with on a few projects about a sabbatical that he took a while back. He had felt himself burning out and decided that he wanted to take six months totally away from his job. Now, few of us can just walk away from our work for half a year, but he planned it out and made preparations so that he could make it happen. He looked hard at his budget and made some changes so he could save some money and give himself a cushion that would allow him to go without any income during his time off. He admitted to me that it was difficult, but workable, and he did take that time off after about a year of working and saving.
During his sabbatical, he surfed, he read books (not ones about web design), took a cooking class, and, above all, he stayed away from work. No checking emails or calling into the office. He truly took time away, and he said that it was wonderful – not only the time during this sabbatical, but also the moment when he returned to work. He was full of new ideas, refreshed and invigorated. He also reported to me that he had a new outlook on his work and on potential burnout. Having taken the steps to make his sabbatical happen, he now knew that should he ever hit that wall of burnout again, he could find a way to take some significant time off to get back on track.
If you are experiencing burnout, be sure to use your vacation time effectively. If that time is not enough, consider taking a more significant break. It may not be easy to manage, but with some proper planning, you can find a way to make it work.
About six years ago, I began teaching website design and front-end development at my state university. When I took the position, I thought that it would be a refreshing change of pace that would allow me to share my knowledge and experience in a whole new way. The reality of what I got out of the experience far exceeded my expectations going in.
For me, teaching helped me remember the energy I had when I first started in this industry. It’s easy to let the weight of project deadlines, client problems, and the day-to-day challenges of the job drown the sense of enthusiasm and excitement you had when you were working on websites in the early days of your career. I see that energy in my students and it is infectious. You can’t help but have it seep back into your work as well!
If you cannot find a position teaching at a school, you can still be a mentor to new web professionals. Consider adding an internship program at your company and allow those web designers just entering the industry to benefit from your years of experience, while you benefit from their enthusiasm for their newly chosen profession!
Take On A Passion Project
Few of us in the web industry truly get to choose the projects that we work on. If you work for an agency, you have to work on the projects that the agency closes and which are assigned to you. If you are an in-house resource, you work on the projects that your company needs completed. Even if you run your own company, you still have bills to pay and, sometimes, you take the projects that you have to – and it is not always the work that you’d like to be doing.
My first job in the web industry was working for a company that made websites for small real estate companies. That is all we did. Day in and day out, I worked on real estate sites. As you can imagine, it became pretty monotonous pretty quickly.
Around this same time, I began playing in a band7 with some long-time friends of mine. Since I knew how to build websites, I became the band’s “webmaster” by default. The work that I was able to do for the band’s site, a project that I was obviously personally invested in and passionate about, gave me an outlet for my creativity that my normal work didn’t provide me at that time. It kept me passionate and interested in my profession.
Do Some Good
While projects you have a personal attachment to can absolutely help rekindle your passion for web design, so can working on projects that help make a real, positive difference in people’s lives. Putting your skills to use in the service of a non-profit organization is a wonderful way to do this.
Think about the charitable organizations in your area that could use some web design assistance. While large, well-established (and well-funded) charities likely have marketing teams and budgets, smaller organizations, like animal shelters or church groups, probably do not. Those are groups where your work can really make a difference and where you can apply your passion for your profession to affect positive change in your community.
Embark On A New Challenge
A number of years ago, I was working for a company that produced touchscreen kiosk systems. I liked the people I worked with and the work that I was doing, but after close to six years on the job, I had to admit that I was not doing my best work. Projects had become routine and I was just returning to comfortable solutions that had worked for me in the past, instead of trying to innovate and grow. I needed a change, and I realized that the only way I could achieve that change was by leaving the company.
This was not an easy decision. As I said, I liked the job and had been there for some time, but it was the right decision. As I thought about it, I was indeed scared, but I was also excited. That excitement was something I had not felt in some time. It felt great and it made me realize I was on the right path.
In the end, I joined a new company that provided me with a wealth of new challenges, including the opportunity to grow and continue to challenge myself in the future. Making this type of change in your career may not be easy – it certainly wasn’t for me – but if you want to rekindle your passion for your work, this kind of drastic change may be exactly what you need.
Is Passion Necessary?
So far, we’ve spent this entire article looking at ways you can bring passion back into your web design work, but we should also ask the question: is passion actually necessary in your work?
The answer to this is an individual one. You need to decide for yourself whether or not passion is an important part of your career needs. For some people, passion simply isn’t that important. I think about my parents, two people who had long and successful careers as a health inspector and a medical transcriptionist. They both enjoyed their jobs and they worked hard, but they certainly weren’t passionate about what they did. They didn’t spend nights and weekends reading up on the latest developments in their field or honing their craft. They liked their jobs, but that is as far as it went, and that was fine for them. For myself, however, that is not what I want out of my career.
For me, passion is, indeed, important. If you feel the same, but have seen that passion slipping lately, hopefully the ideas presented in this article will help you rekindle your excitement for your work.
How Do Your Keep The Passion In Your Work?
How about you? Do find passion for your work an important part of your career? If so, what have you found to be helpful in keeping that passion for your job intact? Share your methods and ideas in the comments section below.
Lance Jones has been involved with conversion rate optimization (CRO) since the early days of the web in 1993. He’s done CRO for Intuit, Conversion Rate Experts and Adobe and is the co-founder of CopyHackers and Snap.
Lance is currently Chief Marketing Officer of a new team task management tool called Flow.
Today we talk to him about CRO and the role of a task management tool in managing the process.
We’re all competing for attention much more than we used to, and that places importance on CRO because you have to figure out a way to squeeze out every last opportunity to begin a relationship with someone. If you don’t convert them, someone else will. And that’s what makes CRO so important.
Over the years, I’ve seen the bar on good marketing always rising. People are so open about sharing the techniques they have tried and what’s worked for them.
Lately, exit intent and opt-in modals have had a lot of attention, the quality and length and frequency of blog posts, using email as a real relationship builder and engagement tool, in-app messaging from tools like Intercom, remarketing, drip campaigns—all of that has been raising the bar.
Is there a downside to this?
The level of sharing is unbelievable. So everybody jumps on the good stuff that’s shared and they eventually wear it out. Once everybody has tried a tactic, it tends to lose its luster. Many of those tactics are starting to approach overuse.
If some tactics are now overused, what do site owners and marketers need to be thinking about from now on?
Something we’re trying, recently written about by Shawn Ellis of Growth Hackers, is high tempo testing. They amped up the experiments they were running and ended up increasing monthly active users from 90,000 to 152,000 in only 11 weeks.
They included things like new email campaigns to get people more engaged, did product feature releases, A/B tests, and gathering info from their most committed users and visitors to understand what they wanted to get out of the community. To make this work, they needed a lot of ideas.
What’s your key takeaway from the Growth Hackers strategy?
The more experiments you can run, the better. Nobody knows for sure going in whether an experiment will be successful. When you maximize the number you run, that maximizes the potential for gains.
Are there any other areas conversion optimizers should think about?
As a technique for CRO, there’s a renewed focus on onboarding.
Conversion is a term that’s used kind of loosely. Just because somebody opts in to your marketing, or they sign up for your free trial, even if they make a first purchase, it doesn’t mean they have converted. To me, those are just the first steps toward adoption.
For us, CRO has been transformed. We have become more focused on getting people to adopt our solution and make a habit of our solution—that’s what onboarding is all about. It’s getting people to that AHA moment as soon as possible and ingraining the behavior so they don’t even think about using your product or service, they just do it.
A good resource we have used is Hooked, by Nir Eyal. We use his Hooked methodology to get underneath what our customers’ triggers, actions and rewards and investments are and optimize for those.
CRO and Mobile Apps
In terms of CRO, how much do we need to care about recent changes in Google algorithms?
I don’t know how much I think about it, but the fact that Google is expanding its use of mobile friendliness as a ranking signal is interesting. It’s clear that if you want to show up in the search results, you need to be aware and make sure you’re not ignoring it.
The more important aspect for CRO is the idea that Google will start indexing apps, just like they do websites. They are going to be deep linking into your web or Android app, and those results will show up.
It’s something we didn’t really have to think about much before. You had to think about your website and the end-to-end user experience, but once you got people into your app, it was less important just because you had more control over the flow of how people ended up there.
If Google is deep linking, you can’t believe that you’re controlling the flow. People could land past the typical entry point for your app. More than ever, you have to think about the entire experience (website plus apps), and that’s going to impact the pages you optimize and how you optimize them.
To me it feels like there’s more work for CRO experts than ever, as a result of Google’s changes.
What are the biggest issues people face when managing CRO projects?
Unlike some of the marketing tactics or experiments, the biggest issues haven’t changed a lot over time. The challenges I continue to have to deal with are:
Everything needs to be on the table. There can’t be any sacred cows, because you don’t know where you will find a gain.
Getting everybody on the same page regarding the creative—emails, page testing—it can be tricky to get agreement and final sign off.
How long to keep an experiment running.
What to do with a winning test. Do we launch the winning creative or not?
What to do next.
How do you use Flow to help with these issues?
Until I joined Flow, I hadn’t used a task management tool to run the experiments, but if you have a team of two or more people, having a task management tool can be a huge help.
We are using Flow to keep track of all the active experiments, plus everything in the hopper, a huge list of ideas.
One of the views inside of Flow is Kanban, which is the approach that Trello uses. We use that view to manage the flow of creative from initial idea to deployment as part of a test and getting feedback on the way, so you always know the status.
We assign tasks to a single person, but subscribe anyone with a stake in that experiment to updates. All discussions take place inside Flow. We also use project templates so we don’t have to start from scratch every time.
And the tasks themselves include the rules about when we’re going to call a test and what the success metrics are so no-one ever forgets what we’re testing and why and what we’re going to measure.
For me, this was new, but I’m pleased with how focused and productive it keeps us.
Can you give another example of how you use Flow for CRO?
We run a lot of tests on our own website and we’re changing a pricing page. To do this, we’re using Flow with Redpen, which lets you look at screenshots and give feedback.
In order to keep everything out of email, when we decide on the page version we want to test, we move the conversation back into Flow to manage the more typical requirements of getting the creative built and making sure that is reflective of the design. We then use additional tasks to decide on when to deploy it and to choose the success metric of the particular test.
There’s a trail of activity all around this pricing page test that you can follow from start to finish—it’s like a timeline of activity that shows every task, sub-task, comment, every link out to Redpen. You don’t need to check email; everything is contained completely within Flow. That’s what makes it so easy to use a task management tool to run this type of experiment.
What does Flow bring to the table that’s different from other task and project management tools?
Metalab—the team that designed Slack—needed a better way to manage its projects. Flow came out of that need and got some early traction because we designed it to help run better projects for the clients we were working for.
People also come to Flow because of its design. They come for the UI but they stay for the way Flow keeps them productive and organized without having to learn a whole bunch of stuff.
It’s got a shallow learning curve. Plus, we don’t want to build bloatware—we only build things that we believe will have a material impact on teams getting things done. The Kanban view is an example of something we did let through the gate and it’s very apparent that it’s helping customers be more productive.
Any last words?
It’s always hard to form a new habit, but it’s clear that you have to commit to it. Getting things organized, not having to remember what you have to work on, not having to remember whether something was said in Gmail or in your task management tool—those are important ways to change the way you work.
Tools like Flow work best when you bring in your team, start assigning tasks and watch them progress. That’s when you get the value.