[Unwebinar] The 7 Deadly Sins of Landing Page Usability
•Download as PPTX, PDF•
6 likes•1,903 views
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!
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to [Unwebinar] The 7 Deadly Sins of Landing Page Usability
Similar to [Unwebinar] The 7 Deadly Sins of Landing Page Usability (20)
More from Unbounce
More from Unbounce (20)
Recently uploaded
Recently uploaded (20)
[Unwebinar] The 7 Deadly Sins of Landing Page Usability
- 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
- 5. Stick around after the Unwebinar See how Unbounce can help you quickly build and publish targeted landing pages (without having to code)
- 6. @Ryan_Engley @unbounce #unwebinar Join our chat on Twitter Ryan Engley Director of Customer Success Unbounce @Ryan_Engley
- 7. @supahstef @unbounce #unwebinar Join our chat on Twitter Stef Miller Marketing Manager, Demand Gen UserTesting @supahstef
- 8. The 7 Deadly Sins of Landing Page Usability
- 11. @morys @unbounce #unwebinar Remote UX Research @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 13. Rockefeller Corporation of users give up because they think you don’t care about them.
- 14. What is Usability? The quality of a user's experience.
- 15. usability.gov
- 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
- 22. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 23. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 24. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 25. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 26. Let’s Talk About Navigation
- 27. LINKS & CTA’s SHOULD BE RECOGNIZABLE
- 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
- 29. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 30. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 31. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 32. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 33. Let’s Talk About Links and CTA’s
- 35. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 36. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 37. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 38. Let’s Talk About Extremes
- 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
- 42. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 43. @supahstef @unbounce #unwebinar A solid redesign of a bad form could increase conversions 10–40%. Luke Wroblewski Digital Product Leader
- 44. @morys @unbounce #unwebinar@mackfogelson @unbounce #unwebinar@chrisgoward @unbounce #unwebinar@supahstef @unbounce #unwebinar
- 45. @morys @unbounce #unwebinar@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
- 47. Let’s Talk About Forms
- 48. @mackfogelson @unbounce #unwebinar Marketers need to K.I.S.S. more often. (Keep It Simple Stupid) @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
- 55. Let’s Talk About Copy
- 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
- 64. Let’s Talk About Advertising
- 65. DON’T FORGET ABOUT THE ‘AFTER’ EFFECT
- 70. Let’s Talk About The ‘After’ Effect
- 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.
- 72. Research Design Build Optimize
- 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
Editor's Notes
- Webinar title slide
- Presenter Slide - light version
- Webinar end slide
- Presenter Slide - light version
- Presenter Slide - light version
- Webinar title slide
- 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.
- Webinar end slide
- Demo slide 1
- Demo slide 2
- Demo slide 3
- Demo slide 4