E-sellers attempting to scale online eventually begin to focus on the art of sales conversion rate optimization. Why is this such an important area of focus for online merchants who want to grow? When discussing e-commerce conversion rates, a conversion is said to occur when an individual makes a purchase from your online store. An […]
With so much of your traffic coming from people’s phones, it’s essential that we start to craft exceptional mobile experiences. This means going beyond simple responsive design if you’re going to create a superior mobile UX (user experience) that stands out from your competition.
IMPORTANT: Use your phone to read this post – it’s designed as a mobile experience.
***Click here to show a mobile nav bar***. The concept here is to use a nav bar with icons, to turn this blog post into an app-like mobile user experience. Click the nav buttons to move up and down the blog post on your phone and you’ll get a sense of how the experience has changed from a regular blog post reading experience.
You can use this technique with landing pages, blog posts, or anywhere you want to create a mobile app experience.
For those reading on desktop, this is what you’ll see at the bottom of your mobile browser.
Why Do Landing Pages (and Your Blog) Need Good Mobile UX?
When a landing page or blog post is long, there will most likely be a small percentage of visitors who will actually read the whole thing. You can increase engagement, and make a better experience if you guide people to the most important chapters or segments of the content.
To achieve this you can use a navigation bar with clearly labeled sections that are not only helpful but and also feels like you’re inside an app native to your phone.
Turning Your Landing Page into an App-Like Mobile Experience with Unbounce Sticky Bars – in 4 Simple Steps
I’ve set it up so there are 4 main sections in the blog post that you can navigate to using the sticky app nav. So go ahead and click the nav icons to jump to each of the four steps you can follow to add this experience to your own landing pages and blog posts.
Step #1 – Create a Sticky Bar With Retina-Grade Icons
I created a sticky bar with four icons. To make them retina I made them with a width of 160px and a height of 130px, and shrank them to 80×65 in the Unbounce builder. To do this, I added 4 boxes and set the background style to be “Image” and “Background to fit container”. Then I added a fully transparent button above each of the images (because boxes don’t have a link action) to link to each of the 4 page sections.
Step #2 – Add Anchor Links and Sections
You can do this by setting the link action of the icons to point to a page element ID. For instance, the horizontal rule (line) that appears above step #2, has an ID of “section2”. In Unbounce this looks like the settings below. Note that the target of the link is set to “Parent Frame” as the Sticky Bar is set in an iframe above the page.
Step #3 – Hide the Close Button with CSS
As with many hacks that I’ve come up with for Product Awareness Month, this one requires that we hide the “Close” button that is part of the Sticky Bar functionality. When your Sticky Bar is used for promotional purposes it’s important that people can close it. But when you’re creating a navigational experience, the bar becomes part of the interface, and we need it to be always present.
To do this, you need to add a line of CSS to the landing page or blog that you want it to appear on. Note: this is not an official Unbounce feature, so your best bet for geeking out with functionality will be in the Unbounce community.
I’ve no idea how to actually do the two-step. Apparently it looks a little something like this:
It’s way too complex for me. Fortunately, when it comes to marketing, the two-step opt-in form is much simpler.
What is a Two-Step Opt-In Form?
Well for starters it’s a two-time hyphenated term that’s really annoying to type. Functionally though, instead of including a form on your landing page, blog, or website, you use a link, button, or graphic to launch a popup that contains your form.
Why are Two-Step Opt-In Forms Good For Conversion?
There are two reasons why this approach is good for conversion rates, both of which have an element of behavioural psychology.
Foot in the Door (FITD): The FITD technique is an example of compliance psychology. By design, it’s good because the form is launched after a user-driven request. They clicked the link to subscribe with the intent to do exactly that, subscribe (or whatever the form’s conversion goal is). The click demonstrates the reaction to a modest request, creating a level of commitment that makes the visitor more likely to complete the form (the larger request) when it’s presented.
Perceived friction: Because there is no visible form, the idea of filling out a form is not really top of mind. This reduces the amount of effort required in your visitor’s mind.
What Does a Two-Step Opt-In Form Look Like?
They look a little like this aetful sketch I did last night.
You could also click on any of the images below to do the same thing.
I configured all of these with Unbounce Popups by targeting this blog post URL and using the “On Click” trigger option set to function when an element with the ID #pam-two-step-v1 is clicked.
This trigger option is awesome because you can apply it to any element on your pages. And as you’ve just seen, you can have as many different popups as you like, all attached to different page elements.
You Can Also Use a Sticky Bar for a Two-Step Opt-In Form
The functionality is exactly the same if you want to use a Sticky Bar. Click the image below to show a Sticky Bar with a form, at the top of the page.
How Do Two-Step Opt-In Forms Perform?
Great question! I’m glad you asked.
Throughout Product Awareness Month I’ve sprinkled a few two-step opt-in popup links like this one: Subscribe Now. I’m also using the exact same popup using the exit trigger, so visitors see it when they are leaving the page.
To compare the data, the exit popup obviously gets seen a lot more as it triggers once for everyone. Conversely, the “On Click” popup gets fewer views because it’s a subtle CTA that only appears in a few places.
You can see some initial conversion rates below from the Unbounce dashboard.
Not huge sample sizes just yet (I’ll report on this again at the end of the month), but the difference is staggering.
The “On Click” triggered popup conversion rate is 1169% better than the exit popup.
Convinced yet? I hope so. Now I’d like to challenge you to try your own experiments with popup triggers and the awesome two-step opt-in form.
Sign up for a 30-day trial and build some Popups today. You also get the Sticky Bar and Landing Page products included in your account.
p.s. Come back tomorrow to see a video interview I did with the awesome Head of Marketing at Shopify Plus, Hana Abaza.
Sticky Bars are the less intrusive cousin of the noble Popup. They appear at the top or bottom of the page (and sometimes the sides) when a visitor arrives, leaves, scrolls down or up, stays on the page for a certain time period or clicks a link or button. They have a million useful use cases, some of which you may not have considered.
In today’s Product Awareness Month post, I’ll be sharing:
9 Sticky Bar Examples From Out in the Wild: These are examples the team has found on other folks websites, and a couple of our own.
21 New Unbounce Sticky Bar Templates: Check out our latest designs that you can use today.
To get things started, here’s an example that I’ll talk about later in the new templates section. Click to show a Sticky Bar with a countdown timer.
I’d love to see your Sticky Bars too, so drop me a link in the comments, please.
9 Creative Sticky Bar Examples to Inspire Your Next Campaign
Discounts and newsletter subscriptions are valid, common and effective use cases, but I want to explore different types of interaction design, or campaign concepts that can compliment what you’re already using them for.
#1 Maybe Later
If you’ve been following along with Product Awareness Month (PAM), you’ll have seen the “Maybe Later” concept. This is where an entrance popup morphs into a persistent Sticky Bar when your visitors click the middle “Maybe Later” button instead of yes or no.
You can see a live demo of how it works here. A popup will appear when you arrive. Click “Maybe Later”, then refresh the page and a Sticky Bar will appear, and can be configured to show up site-wide until you convert or say “No Thanks”.
#2 Sticky Bar to Popup
This concept is the exact opposite of “Maybe Later”, and it uses a concept known as a two-step opt-in. Instead of showing a form on the Sticky Bar, it just shows a button to express interest.
Click-Through Sticky Bar
When you click the Sticky Bar CTA it launches a popup to collect the email address. This two-stage concept can increase conversions because the first click establishes intent and a level of commitment to continue – while not showing a scary form right away. I’ll be discussing the two-step opt-in in a future post.
This example is really cool. As you scroll down a product page on an e-commerce site, an “Add to Cart” Sticky Bar appears when you scroll past the main hero image.
#5 E-commerce Checkout Discount Nudge
This Sticky Bar sticks with you for every step in the photo creation and checkout process. Clearly, they are comfortable with the coupon being applied to the sale because it’s an incredibly competitive business niche and let’s face it when you see a coupon code field you go searching for one. So why not just offer it straight up.
For the record, trying to buy canvas prints to deliver to family in the UK is a freakin’ nightmare. I had to try 8 different sites before one of them would allow me to put a Canadian address in the billing info fields. They are losing a TON of money by not realizing that customers can be in other places.
#6 On-Click Side Slide
On-click Sticky Bars and Popups are the best kind when it comes to a permission-based interaction. You make something interesting and ask people to click on it. In this example, there is an element on the left side of the page which slides in from the side when clicked.
Unbouncer Noah Matsell created a similar thing in Unbounce (see demo here). It doesn’t actually use a Sticky Bar. Instead it’s just a box with text in it. I love how it works. Try it out, and think about all the cool stuff you could stick in a sidebar.
European Union laws around privacy are some of the toughest in the world, and for the last few years, the EU Cookie Privacy Law required that all EU businesses, as well as international businesses serving EU customers, show a privacy statement with a clickable acknowledgment interaction. I’m not a lawyer so I don’t know all the ins and outs, but needless to say, it’s a great use case that you may not even know that your web team or legal team actually needs.
Coming up in May is the new GDPR legislation which will usurp this law, but offer its own needs and requirements, so stay tuned for more on that, and how you should be dealing with it. In fact, I did a quick poll on Twitter to see what people thought about the cookie law and got an interesting mix of responses. Don’t be in the “Haven’t dealt with it yet” camp when it comes to GDPR. That could get you dinged.
A really simple way to create a multi-page marketing campaign experience.
#9 Net Promoter Score (NPS)
Net Promoter Score surveys are a method of measuring how your customers feel about your product or service. Based on a scale from 0-10 and the question “How likely are you to recommend company name to a friend?”
Co-founder Carter Gilchrist made this NPS demo to show how it works:
21 New Unbounce Sticky Bar Templates You Can Use Today
We just released a whole bunch of new Sticky Bar and Popup templates which you can see inside the Unbounce app screenshot below. I chose a few of them to showcase below based on some of the examples I discussed above.
Sticky Bar Template #1: Countdown Timer
Countdown timers are great for creating a sense of urgency, and can have a positive influence on conversions as a result.
If you have multiple websites or online stores, you can use Location Targeting (Unbounce supports city, region, country, and continent) to let people know there is a local version they might want to switch to.
Sticky Bar Template #3: Product Release
Announce product releases on your website to drive people to the features page of the new product.
Sticky Bar Template #4: Cookie Privacy Law
As I mentioned earlier, this is big for companies in Europe, and also businesses who have European customers. On May 25, 2018 this law will be usurped by the new General Data Protection Regulation (GDPR).
Sticky Bar Template #5: Product Beta Access
Build an email list for an upcoming beta release.
Sticky Bar Template #6: Product Hunt Launch
Product Hunt can be a great place to launch new products. To be successful you need to get upvotes and you can use a Sticky Bar to send people there from your website.
Check Out Our Sticky Bar Live Demo
We built a cool tool that shows what Sticky Bars and Popups look like on your site. Simply enter your URL here to preview. It even grabs your brand colors and in this case, Amanda from Orbit Media makes a cameo appearance.
p.s. You should check out The Landing Page Analyzer. Why? Because – hyperbole alert – it’s the single greatest tool in the history of the world when it comes to grading your landing pages.
Is it possible to design the perfect popup? One so fiercely potent that people just can’t refuse to convert?
Of course not.
As small as seemingly simple as a popup is, it’s still important to understand a little about its anatomy. There are five primary elements to make up the architecture of a popup, and then there’s a layer of interaction design beneath that which deals with the functional aspects such as triggers and targeting.
The five primary elements of a popup blueprint are:
Headline and subhead
Trust and social proof
Call to Action
Using a structural approach to your popup designs helps us avoid mistakes and choose the right interaction modes and content elements that will create a good conversion experience.
Obviously, you can’t use every version of every element on a single small popup, but you can choose the best parts of each anatomical section to craft something that presents your offer in the best possible way.
An important thing to know is that the circled icons beneath each section represent Unbounce functionality that allows you to make your popups way more awesome than they would be if you simply showed it to everyone.
Got any weird and wonderful popup designs?
If you have designs that include elements I didn’t include in the blueprint, share them in the comments so I can add them to my layout specs.
Popups that don’t suck, rule! Make better popups, please.