User Experience Design or UX design is the process for improving the satisfaction of your website visitors by making your site more usable, accessible, and pleasurable to interact with. When you consider that nearly 80% of buyers will quickly bounce from a site if they don’t like what they find, and will quickly choose another […]
Lean UX or lean user experience is the method for creating web offerings that are streamlined and visitor-centric, the very elements visitors today demand. Lean UX design best practices help website visitors enjoy a more streamlined and memorable web experience. Similar to lean manufacturing, which is used by top brands to eliminate waste in production, […]
How many articles have you read recently about the “conversion funnel”? Probably a lot. If you regularly read marketing blogs, it can sometimes feel like you’re hearing, seeing, and having the term “conversion funnel” shoved in front of your eyeballs constantly. I personally come across conversion funnel information multiple times per day when I’m focused on research and reading. It seems like every marketer in existence wants to be sure I don’t forget about this part of my strategy. So why is this? The short is answer is that an optimized conversion funnel is critical to your online marketing success. You might be…
For such a small design element, buttons sure are a complicated one to tackle. It makes sense, what with call-to-action buttons serving as the next step in your visitors’ path to conversion. Mess that up and you might as well say “bye-bye” to business.
Though we have a good understanding of the types of button design rules that universally work, there will be times when you’re surprised by a rogue element that performs well.
Most people use Facebook ads to pump up their visitor numbers. Wait, what? Let me be clear. They don’t wake up with that goal in mind, but it’s usually what ends up happening. I see this all the time with clients I work with. The problem isn’t that they can’t set up the Facebook ad campaigns or get visitors to their websites. It’s the next step where things go haywire. The visitors they’re paying for don’t download ebooks, sign up for accounts or buy products. The reason for this simply is that the thing they offer doesn’t appeal to those…
Conversions are a numbers game. Sure, quality matters. You don’t want to fill your funnel for the sake of quantity alone. But at the end of the day, driving more site conversions is all about maximizing the amount of people who visit > see > click > interact > opt-in > convert. That’s it. Really that simple. All the fancy metrics and flashy tactics plastering the interwebs are designed to do just that. Your design has one of the biggest bearings on that equation. And yet, it’s commonly performed in a vacuum without any real context. That’s a problem. Because…
Do you remember the Windows game Pipe Dream? In it, the player creates a continuous “goo” path using randomly assigned pieces of pipe.
Fail to build a path in time and the goo oozes everywhere… Game over.
For a marketer, the pipe pieces are your web pages. And the goo? Your visitors. Fail to provide your visitors with a logical next step and it’s game over.
A logical next step could mean many things, like a sale or a signup. Or maybe it’s simply to keep your prospects on your website by strategically presenting them with opportunities to learn more about what you have to offer.
Like pipe building, traffic shaping is all about creating incentivized pathways that convince users to go where you want them to go. It’s effective for:
getting visitors from low-converting to high-converting pages.
showing visitors relevant offers based on what they’re currently browsing.
recommending further reading thereby keeping visitors on site.
But first, why is this tactic even necessary?
Take a look at your analytics. You’ll probably find your highest-traffic pages aren’t necessarily your highest-converting pages. In many cases, that’s okay; the purpose of a blog post is different from a pricing page. But that’s not to say you should ignore your organic visitors. Instead, you should provide them with clear paths to the “next step.” And that’s when traffic shaping comes in.
Using overlays as a traffic-shaping tool
So how can marketers engage users on high-converting pathways that produce better results? How can we move users through the pipes and follow our desired path?
One great way of doing this is by using a traffic shaping overlay.
Psst: Unbounce recently launched our own suite of overlays called Convertables. Install one in seconds on any of your web pages, and set it to trigger on exit, on arrival, on scroll or after delay.
Traffic shaping overlays are designed to either move visitors from low-converting pages to high-converting pages or to re-engage them with additional content. They never have a form, and they’re best triggered either on exit or after delay.
Here’s a diagram of how traffic shaping with overlays works:
Not unlike Pipe Dream, amirite?
As you can see, traffic shaping overlays offer a unique way to better align your needs with the needs of your visitors: you want to move them farther down your sales funnel and they want the incentive to do so.
Here are a few use cases with real-life examples to get you thinking ‘bout how you can use traffic shaping overlays in your own overlay strategy:
Use case #1: Cross-Sell
Blog visitors are prime candidates for traffic shaping overlays because they’ve already spent time absorbing your content and familiarizing themselves with your brand. They likely recognize your brand — heck, they may even be regular readers — but they may overlook your on-site calls to action.
A cross-sell overlay can help focus a user’s attention on a relevant offer.
Figuring that people who read about conferences also go to conferences, we saw an opportunity to cross-sell tickets to our own conference at a greatly reduced price.
Use case #2: Re-engage with more content
Keeping visitors on your blog or resource library has a lot of advantages. The more they stick around, the more opportunities you have to:
Show visitors that you understand their pain and are uniquely qualified to help alleviate it
Educate visitors about your solution (ideally the solution to their burning marketing pain)
A strategically placed exit overlay on your blog can help keep visitors on site by recommending content similar to what they were reading previously:
This type of overlay is most effective when targeted at first-time visitors. These are the prospects that need a lil’ warming up before you ask them for their email address.
But back to Pipe Dream…
When you think of traffic shaping like playing Pipe Dream, you realize that building a logical path is just as important for you as it is the user. You don’t want to lose your visitors any more than your visitors want to be stopped in their tracks.
By implementing traffic shaping overlays on your web pages, you can better align your needs with the needs of your visitors. And that, my friends, is how everyone wins.
Find out how you can use overlays for traffic shaping, lead gen, sales and more!
Download Unbounce’s newest ebook, 12 Proven Ways to Convert with Overlays
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.
Do you remember when people used to buy full music albums?
Like, the good ‘ol days of records, cassette tapes and CDs? The days before iTunes made it easy to be a one-off consumer, obsessed with the next, delicious single?
Well… your web page is your hit album. When you created it, you probably envisioned it in its entirety, as the sum of its parts. For you, each section on your page is a part of the narrative.
But, visitors often have short attention spans. They’re hungry for that hit single. Think of the space above the fold as that single. This is the area that captures or loses your visitors. For many businesses, the space above the fold is all anyone will ever see. (Much like Carly Rae Jepsen’s “Call Me Maybe” — did anyone download that whole album??)
That said, it’s entirely possible that your target audience still prefers complete albums; these visitors want to examine all or most of your webpage. They are patient, they’re scrollers, they want the whole story.
As a modern marketer, you know that the more you understand about your visitors, the better. Fortunately, technologies exist nowadays that allow you to capture certain aspects of visitor behavior. Scrollmaps and other tools help you visualize the visitor experience: how far down your page are visitors going, what are they clicking, and how are they consuming information?
If you’re doing or considering conversion optimization (and you should be), it’s a good idea to incorporate scrollmaps, clickmaps, and heatmaps into your analytics arsenal.
Scrollmaps are particularly useful because where you’re testing is just as important as what you’re testing. (I’ll get into this more in a second).
If you haven’t explored this aspect of your visitors’ behavior yet, don’t worry. This post is all about how to leverage the tools that are out there so that you’re not only testing the right elements, but you’re testing them in the right place.
What is a scrollmap?
Scrollmaps, heatmaps, and clickmaps are all tools that allow you to visualize visitor behavior on your webpage. Scrollmaps display a visual representation of the amount of time a visitor spent viewing each section of your page.
Scrollmaps speak with colors. Depending on the tool, red, white and yellow generally indicate areas that visitors spent the most time viewing, while teal, dark blue and black indicate areas that visitors almost never see.
How do these tools work?
Three of the most popular scrollmap tools today are Hotjar, Crazy Egg and Clicktale. Each is a little different. Generally, you’ll tell your tool what page and for how many visitors you want it to collect data for.
A big factor here is how much traffic you have on the page. Rather than time, I would look at the sample size included e.g. pageviews or visitors. For low traffic sites you will see [user behavior] patterns emerge with just 2,000 pageviews. On higher traffic sites you might want to bump that up to 10,000.
– David Darmanin, Founder & CEO, Hotjar
Your tool will collect user data until it has sufficient pageviews, then it will generate your scroll/click/heat-map for you.
Take a look at this scrollmap from Telestream, a screencasting and video editing software:
There are a few things we can gather from this scrollmap:
There’s a major drop-off point just below the 4 tile images: that dark band of color tells us that fewer than 20% of users are scrolling past these images
The data seems to indicate that these 4 images are creating a “false bottom” on this page
Important product features (the 3 points underneath the dark band of color) are being missed
These insights can become hugely important when you’re testing. For Telestream, we were able to use this information to form a testable hypothesis (and a winning variation).
At this point, you might be thinking, Wait a sec, do I really need to test anything? If I discover that most of my visitors don’t scroll past the fold, can’t I just move the most important information on my page above the fold?
Yes and no. Let’s say you go for it. You move the information you deem most important above the fold: your call-to-action, your main product value points etc. Maybe you see a spike in conversions, maybe you see a decrease in conversions…maybe nothing changes at all.
There are a few reasons this is problematic:
You’re guessing: How do you know that the information you think is most important will be the most influential for your visitors?
You’ve taken an action, but you haven’t set yourself up to look at cause and effect: Did your changes actually have any effect at all or are external factors at play?
You’ve cornered yourself: You have an outcome, but you’re missing the ‘why’ >> without the ‘why’ it’s tough to move forward.
Without a control, you can’t be sure that your changes had any effect on the outcome. In fact, the only thing that you can be sure of is that you have no way of knowing whether your changes were the cause of an increase or reduction in conversions. You’re left in the dark.
Scrollmaps, while useful, are just a part of the puzzle. They allow you to create more informed hypotheses to test, based on observed visitor behaviors and patterns on your webpage. Testing is the only way to both have confidence in a change and gather further insights about your visitors.
So, yes. You still need to test when using scrollmaps.
Exploring with scrollmaps
At WiderFunnel, our testing program begins in Explore (phase 1 in the Infinity Optimization Process™). Explore is organic and expansive: it’s the data-collection phase. You want to be armed with as much information as possible before you begin hypothesizing.
A portion of this data-collection revolves around digging into your digital analytics and user research. This is where scrollmaps, heatmaps and clickmaps join the party.
As you can see, these tools provide just a fraction of the data you want to get your hands on before you start testing. But, that doesn’t diminish their importance. For some businesses, scrollmap data can be a total game-changer.
Don’t kill your A/B test before it begins
Let’s say you are not using any extra analytics tools like scrollmaps. You’ve decided to run a test with a single variation. In this variation, you add a new section halfway down your webpage. The test runs…and runs…and runs. The data comes back showing that the variation didn’t make any difference. Naturally, you scrap this test strategy.
Here’s the main rub: when you’re A/B testing, you must capture enough conversions to reach statistical significance. I won’t get down and dirty with statistics in this post (that’s a whole other blog post series). In laymen’s terms, if a variation beats a control with 95% statistical significance, you can assume that 19 times out of 20, the result you’re seeing is not due to chance.
Suffice it to say, you should shoot for 95% statistical significance on every test you run.
If you’re testing on an area of your page that most visitors aren’t seeing, you’ll have a much harder time detecting a change in conversion rate lift. The majority of your visitors won’t see any difference between your control and your variation. If 90% of visitors aren’t scrolling past the fold, and that is where your change is, then 90% of visitors are seeing control vs. control.
The small number of people that do see your test won’t have much impact on the conversion rate because they’re such a small portion of your audience. You would need to run your test for a much longer time to reach 95% statistical significance because the conversion rate lift would be very small, requiring more traffic to detect a change.
We recently reviewed a page for a current WiderFunnel client…
…and saw that just 25% of their traffic scrolled past the fold. As a result, we knew that any test built for that page had to impact the elements above the fold if we wanted to maximize impact for the business. Otherwise, few visitors would be influenced by the change.
If we had designed a test impacting an element below the fold, it would have taken much longer for us to achieve statistically significant results. Nobody (or very few) people would have actually scrolled down the page to see what had been changed. It would be impossible to know whether the lack of impact from our test was due to the change we’d made or to the fact that nobody saw it. It would be a shame if you discounted a great idea just because of poor placement!
Don’t neglect that first single
I’ve talked about the benefit of scrollmaps in better understanding visitor behavior on your webpage. But, I haven’t yet discussed what might be motivating or demotivating your visitors to scroll in the first place.
Remember the music album analogy? It’s entirely possible that your visitors do want to listen to an entire album, but your first single (the space above the fold) turned them off.
Above the fold is where you make a first impression with visitors: good, bad or ugly. If it’s a bad impression, new visitors won’t be motivated to scroll further and will most likely bounce. If you’re just getting started with conversion optimization, it’s a good idea to test above the fold: perfect that opening message and see if they start scrolling!
What do you think about scrollmaps and similar analytics tools? How do you employ these tools in your optimization efforts? What are your favorite tools? Let us know in the comments!
It’s easy to see your top-visited pages, navigation patterns and conversion metrics using visitor-tracking tools like Google Analytics. However, this data doesn’t show the roadblocks that users typically run into on your website. Tracking and optimizing error messages will help you measurably improve your website’s user experience. We’ll walk through how to add error tracking using Google Analytics, with some code snippets. Then, we’ll assemble the data and analyze it to figure out how to improve your error message drop rates.
Every website has to perform maintenance at some point or another. Whether it’s just to upgrade a portion of the site or because of some problem with the site, it’s an inevitable fact of website ownership. And in many cases, maintenance requires taking your site offline for at least a few minutes.
So what should you do if your site is going to be down for maintenance? You don’t want users coming to a 404 or other error page.