The 7 Deadly Sins of Landing Page Usability
How Focusing on User Experience Can Help You Increase Conversion Rates
Copyright 2015 Unbounce.com - The Landing Page Builder For Marketers
What People Have Said About Previous Unwebinars
@AlexisAntonelli
Most useful webinar I think I have ever attended. Thank you! @unbounce #unwebinar
@desiraeo
I'm not kidding when I say this is the most fun I've ever had on a webinar. Well played, @unbounce.
@Ciao_Drew
Excited for another #unwebinar! @unbounce always has loads of great info packed into celeb hosted webinars.
Privacy Policy
Can't make it? Sign up anyway!
We'll send you the recording & other
content to improve your conversion rates.
First Name *Last Name *Email *How do you build your landing pages? *What marketing channel are you most interested in improving? *Save My Spot
Register for the Unwebinar
Stef Miller is a Marketing Manager at UserTesting, leading the company’s Demand Gen strategy. She believes that true happiness comes from collaborating with creative people to make awesome things happen. Find her @supahstef on Twitter.
About Stef Miller
No matter how different people are from one another, we’ll always share a set of predictable behaviors.
There’s no magic or romance to these behaviors: we squint when we see bright lights; we jump when we’re startled; we cringe when we watch The Bachelorette.
But according to data from UserTesting, tapping into these shared behaviors can help marketers unlock more conversions.
In this Unwebinar, Stef Miller—marketing manager at UserTesting—will share how extensive tests by her team uncovered 7 common usability issues, and how avoiding these issues can help you increase your conversion rates.
You'll learn:
- How to design for what your audience wants
- 7 UX solutions for building higher-converting landing pages
- How imagery, icons, copy and CTAs should work together
...plus, much more!
[Expert Panel] New Google Shopping Ads Strategies Uncovered
[Unwebinar] The 7 Deadly Sins of Landing Page Usability
1.
2. @supahstef @unbounce #unwebinar
Stef Miller
Marketing Manager, Demand Gen
UserTesting
The 7 Deadly Sins of Landing Page Usability
Thank you for joining us!
We’ll be starting in just a few minutes.
Ryan Engley
Director of Customer Success
Unbounce
21. @morys @unbounce #unwebinar
Look out for
distractions!
• Too much going on
• Multiple calls to action (CTA’s)
• Navigation elements
• Animations and music
@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
28. @mackfogelson @unbounce #unwebinar
Figuring out what to click on shouldn’t be
a process of trial and error.
@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
40. @mackfogelson @unbounce #unwebinar
A form isn’t just a form,
it’s a complete experience all on it’s own.
@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
41. @morys @unbounce #unwebinar
Let’s take a step back.
What does a form do?
• Sets an expectation
• Requires attention
• Blocks access
• Triggers an emotional response
• Slows people down
@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
46. @morys @unbounce #unwebinar
Tips for great
form experiences
• Extend the brand’s experience
• Provide access to something of value
• Include a contextual call-to-action
• Surprise users by their ease-of-use
• Optimize for both desktop & mobile
@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
49. @supahstef @unbounce #unwebinar
Consistency is one of the most powerful
usability principles: when things always
behave the same, users don’t have to
worry about what will happen. Instead,
they know what will happen based on
earlier experience. ”
Jakob Nielsen
User Advocate and principal of the Nielsen Norman Group
54. @morys @unbounce #unwebinar
Tips for writing
effective copy
• Learn from users, use their language
• Avoid jargon, don’t get gimmicky
• Read it out loud first
• Ask no less than 3 others to read it too
• Get to the point, but make sure to
provide enough context
• Test it!
@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
63. @morys @unbounce #unwebinar
Tips for better
ad-to-landing page
transitions
• Consistent copy and images
• Continue the conversation from ad
to landing page
• Keep the messages simple
• Designers and marketing or ad
teams should work together
• Ask for campaign results
to measure performance
@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
71. Beware of distractions
Make sure that whatever is on your page is
pointing people to take action, not preventing
them from completing the task at hand.
Links + CTA’s should be recognizable
Tried and true link conventions from the early
days of the web are still the most effective ways
to format your links. CTA’s must be compelling!
Extremes can be unsettling
Keep it simple! Make your point, provide a clear
call to action, get rid of everything else. Be sure
to test new ideas to see if they improve
conversions.
Forms shouldn’t scare people
Forms can make or break landing page UX.
Copy matters, a lot
Write it, read it, say it, test it.
Ads should be consistent with
landing pages
Maintain the theme from your ads to your
landing pages and continue the conversation
that brought users to your page.
Don’t forget about the ‘after’ effect
Consider the entire experience, not just the
initial view.
73. Try UserTesting for free! 3 Free Credits for
our Unbounce Friends with code: unwebinar
Get videos of real people
speaking their thoughts as
they use your website or
mobile app.
Loved by over 25,000 companies worldwide
No matter how different we like to think we are, there are always going to be things we have in common. Think of how we react to certain situations. If you smell something awful, you’re likely to cover your nose. If you see a bright light, chances are you’ll shield your eyes and squint, or close your eyes altogether.
These common behaviors also extend to the way we browse the Web, or use an app on our smartphone. And after watching hundreds of thousands of videos from companies like Google, Apple, Facebook, and Twitter, we’ve found that certain elements on a site trigger certain behaviors in people.
Examining how users experience a company’s landing page, website, mobile app or real-world setting is incredibly important for marketers and designers today.
I figured it might be helpful to give you a really quick overview of UserTesting, since I make a couple of references to watching users and getting insights. UserTesting gets you videos of real people interacting with your brand, regardless of device or location.
Design, product, marketing and research teams use our cloud-based research platform to launch studies that are picked up by our huge panel of users. The participant follows along with tasks and answers questions that are recorded and then available on our client dashboard for reviewing, annotating, and creation of highlight reels that are shared across teams and entire companies.
User experience has become THE thing that can make or break a brand in today’s digital landscape. It wasn’t very long ago that most CEOs didn’t think too much about UX, but that is changing and hopefully you’ve seen that in your own work.
Look for commonalities! The biggest issues are felt by the majority. Power users, newbies, there will always be a subset of your users who don’t fit into the common use cases - it’s important to consider their paths too, but if you can’t solve for the majority you’ll never get a chance to focus on the minority.
It is important to realize that usability is not a single, one-dimensional property of a product, system, or user interface. Quality is gauged through the following areas:
Intuitive design: a nearly effortless understanding of the architecture and navigation of the site
Memorability: after visiting the site, if a user can remember enough to use it effectively in future visits
Efficiency of use: How fast an experienced user can accomplish tasks
Ease of learning: how fast a user who has never seen the user interface before can accomplish basic tasks
Error frequency and severity: how often users make errors while using the system, how serious the errors are, and how users recover from the errors
Subjective satisfaction: If the user likes using the system
This is where you’ll hear words like delight pop up. There are a lot of approaches to providing an experience that goes above and beyond just simply meeting expectations. Good design will get the job done. Great design will do a lot for loyalty and word of mouth.
We need to build a natural liking of our brand, by doing that we’ll increase the likelihood that someone will buy from us in the future, recommend us when the time comes, and maintain a longer relationship with us over time. This can have a huge impact on our bottom line.
While it may sound like a great idea, what happens when visitors on your site actually starts using elements like navigation and click-through elements is that they lose focus.
The point of a landing page is to get people exactly what they intended to receive when they landed on the page - then, all is fair game!
I’m going to share a lot of examples in this presentation, and I’m definitely not going to assume that I know how well any of these landing pages are performing. It’s super important to test how visitors are interacting with your site, especially when it comes to providing great experiences.
When people don’t know what to focus on there’s a greater likelihood that you’ll lose them for good.
Multiple CTA’s should be treated with caution. Test!
Whenever I see navigation elements, I get curious. When I get curious, I get distracted.
Animations, music, and other dynamic elements have the potential to draw attention away from the call-to-action you want them to interact with. Video has been known to help, so it’s important to test!
Hover tunnels require users to keep their mouse in precisely the right place in order to keep the menu open and functional. Clicks indicate intention, better for tracking too!
Hover tunnels require users to keep their mouse in precisely the right place in order to keep the menu open and functional. Clicks indicate intention, better for tracking too!
Section Title Slides:
Centred, Title case
We’ve found that there are two traits that people use to identify a link: it’s underlined and it’s a different color from the body text. Simple, right? Based on our studies, navigation elements are the exception, and we’ve found that users expect navigation elements to be clickable. As long as your text is legible, you’re good to go.
I can easily links from regular copy, and there’s a clear CTA. Great page by Dropbox.
LightCMS has a great landing page. It’s simple, includes many of the elements we might expect, in a beautiful way. Check out the clear CTA’s. A video Play button (bonus points for the caption!) and a form with a button that reads ‘Start My Free Trial’. It’s pretty clear what I need to click on right?
As you scroll down the page (3 SCREENS) there aren’t any more links, so nothing to distract me, and I’m driven to another CTA at the bottom of the page.
Zoho - another example of powerful CTA’s, no distracting links.
They’ve included a video as well, pretty easy to tell it’s a video right?
Section Title Slides:
Centred, Title case
Pop-ups, slide-ins, instant music, hello bars, there are a lot of landing page experiences that deserve to be featured on Marketers Gone Wild!
Section Title Slides:
Centred, Title case
Forms play a leading role in just about any digital experience. They allow people to sign up for healthcare benefits, make dinner reservations, download useful content, register for conferences, connect with causes we care about, purchase new shoes, and much more.
What to do next:
• Audit your existing forms
• Start with the most important forms first
• Run user tests to find out what to fix
• Run user tests on others forms to identify new ideas
• A/B test your ideas
• Don’t forget to test both mobile and desktop
Section Title Slides:
Centred, Title case
Tweet slide
I love this quote, because it reminds me just how easy it is for us to assume our users think just like us - but actually don’t.
Section Title Slides:
Centred, Title case
If you decide to watch a movie based on a trailer, it’s likely because you saw something you liked. Now if it turned out that what you liked about the trailer didn’t show up in the movie at all, you’d probably be disappointed. Well, through the studies we’ve conducted, we’ve found that ads and their corresponding landing pages work the same way.Think of your ads like movie trailers, and your landing pages as the movie. If a visitor finds something they like in an ad and clicks though only to find that the landing page has nothing to do with the reason they clicked the ad, chances are they’re not sticking around to look for what you were advertising.
I was browsing on TechCrunch the other day and saw an ad for Volvo. I actually really like their site’s presentation of information - not that I’m all that into cars really - so I decided to click through and check out the crossover they were advertising—my dad has been thinking about getting some kind of an SUV so I thought this might give me something to talk to him about this weekend. So it turns out that the landing page has nothing to do with the car, and since I didn’t know my dad’s zip code I bounced. I wasn’t looking for a special offer, I was looking for more information about that specific vehicle.
Then, I’m on TNW and I see an add for the same car (well, I think it’s the same car) so of course I click on the ad to see if maybe I’ll get a different landing page. I did. And it still doesn’t really give me what I’m looking for!
Here’s another example of an ad that doesn’t match up with the landing page. The colors are different. The message doesn’t carry through very clearly, and I’m still not clear that IBM Cloud has anything to do with developers. Granted, I’m probably not the target audience for this ad, but with all that technology and big data out there why did I get it in the first place? This is a classic case of designers and marketers not aligning on audience and messaging up front. I’m all for A/B testing ad creative, and attempting to optimize landing pages. But it’s really really easy to neglect the fact that both ends of the advertising funnel need to work together.
I love dwell - and saw an ad for fashion lovers. Great color that stood out, clean and clear message with this woman in what looks like a cool coat. I clicked. And this is what I got?! A popup asking me to sign up for something. Nothing to do with the ad. Then, I close the popup and I see a page that doesn’t show me that coat, or talk to me at all about fashion meant for people who don’t follow trends, but create their own. Yeah, I bounced.
I couldn’t help but include the Marketing Rock Star campaign from Full Sail University. I mean, really, who doesn’t want to be a rockstar? They definitely succeeded on consistency, but there is a LOT going on with this landing page.
Shout out to General Assembly for getting things right! Here’s an ad that offers something to me that is 1) relevant 2) easy to understand and 3) effective in it’s call-to-action
Your landing pages should include the same elements in your ads. This is how your customers know they’ve landed on the right page. Remember that volvo ad? Different type treatments, different messaging, in fact - no wording at all about the car I was interested in!
Much in the same way that you’re maintaining consistency with your copy and design, when appropriate, your ad copy should also continue the conversation from your ad. For example, if your promotes women’s fashion like the ad I showed from FarFetch, deliver a landing page experience that mirrors the same messaging and pulls people in to explore.
In the case of the General Assembly ad, the landing page provided me with all of the information I needed to understand what the course was about, and how to register. It is a perfect example of continuing the conversation from the ad.
While it might not always be possible - in-house creative and agency teams working with in-house marketing are often given creative direction for a new campaign, and then once they’ve completed the work they hand off final assets without having a chance to solve for the entire experience.
Try to get results from the campaigns that are run with your creative. Look up industry averages, and ask for input on what is the most successful campaign. Then explore ways to improve that campaign and offer up suggestions. Marketers are looking for great conversion rates and more leads, so try to translate what you can do and how it will help them reach their goals.
Section Title Slides:
Centred, Title case
Forms play a leading role in just about any digital experience. They allow people to sign up for healthcare benefits, make dinner reservations, download useful content, register for conferences, connect with causes we care about, purchase new shoes, and much more.
Section Title Slides:
Centred, Title case
Use these findings to guide your own studies, and in time, you'll be able to find the solutions that are right for you.