In February of 2015, I began working on an iOS app called Air Lookout. The goal of the app was to simplify and remove any obfuscation of air quality information. After over a year of working nights and weekends, the total net income since it launched in 2016 has been less than $1,000. Even with those numbers, I would relive every hour of work.
The one thing that I can’t place a monetary value on is how the experience of creating Air Lookout has completely changed my mind on the process of design and development for every project I have worked on since.
(This is a sponsored article.) As designers working in an ever-changing field, it’s important that we develop an understanding of the timeless design principles that underpin everything we do. In the second article in my series for Adobe XD, I’ll explore the foundations that enable us to establish some universal principles of UX.
These principles, which should sit at the heart of everything we design and build, are critical and will stand the test of time:
Keyword cannibalization is what happens when you have multiple pages on your website that all target the same keyword. When more than one page is designed to rank for one particular keyword, you end up competing with yourself. As a result, each page ends up with diminished authority, a lower click-through rate and even lower conversion rates than you’d achieve from having just one target page. Cannibalizing Your Content To put it simply, keyword cannibalization is the act of splitting clickthrough-rate (CTR), links and conversions between two pages that should either be merged together or should be targeting different keywords….
Like those, it manages state changes through its virtual dom aiming to make the code more maintainable and performant. It focuses on developer happiness, high-quality tooling, and simple, repeatable patterns.
I’d guess that over half of the e-commerce stores I visit use entrance popups to advertise their current deal. Most often it’s a discount.
What is an Entrance Popup and What’s Wrong With Them?
They are as they sound. A popup that appears as soon as you arrive on the site. They’re definitely the most interruptive of all popups because you’ve not even had a chance to look around.
I get why they are used though because they work really well at one thing – letting you know that an offer exists, and what it is. And given high levels of competition for online dollars, it makes sense why they would be so prolific.
The intrusion isn’t the only point of frustration. There’s also the scenario where you arrive on a site, see an offer appear, you find it interesting and potentially very valuable (who doesn’t want 50% off?), but you want to do some actual looking around – the shopping part – before thinking about the offer. And when you’re forced to close the popup in order to continue, it’s frustrating because you want the offer! You just don’t want it right now.
So, given the fact that they are so common, and they’re not going anywhere anytime soon, and they create these points of frustration, I’ve been working on developing a few alternative ways to solve the same problem.
The one I want to share with you today is called “Maybe Later”.
“Maybe Later” is a Solution to Increase Engagement and Reduce Frustration
As you saw in the header image, instead of the now classic YES/NO popup – the one that gets abused by shady marketers (Technology isn’t the Problem, We Are.) – “Maybe Later” includes a third option called, you guessed it!
It’s more than just a third button, here’s how it works (I’ll refer to the sketch opposite):
The popup appears when you enter the site. You can choose “No” to get rid of it, “Yes” to take advantage of it, or “Maybe Later” to register your interest but get it out of your way.
When you click “Maybe Later” a cookie is set to log your interest.
Now while you are browsing the rest of the site, a Sticky Bar – targeted at the cookie that was set – appears at the bottom (or top) of the page, with a more subtle reminder of the offer, so that you know it there and ready if you decide to take advantage of it.
If you decide against the offer, you can click “No thanks” on the Sticky Bar, the cookie is deleted, and the offer is hidden for good.
The core purpose of this idea is to put the control back with the shopper while creating an effective method for the retailer to engage with you, with your permission.
When you have more than a single button, it’s important to establish visual design cues to indicate how the hierarchical dominance plays out. For you as a marketer, the most important of the three buttons is YES, MAYBE LATER is second, and NO is the least.
You can create a better user experience for your visitors by using the correct visual hierarchy and affordance when it comes to button design. In the image below, there is a progression of visual dominance from left to right (which is the correct direction – in Western society). Left is considered a backward step (in online interaction design terms), and right is a progression to the goal.
From left to right we see:
The NO button: is designed as a ghost button which has the least affordance and weight of the three.
The MAYBE LATER button: gains some solidity by increasing the opacity
The YES button: has a fully opaque design represented by the primary call to action colour of the theme.
You can achieve a similar level of dominance by making the secondary action a link instead of a button, which is a great visual hierarchy design technique. What I don’t like is when people do this, but they make the “No thanks” link really tiny. If you’re going to provide an option, do it with a little dignity and make it easy to see and click.
See the “Maybe Later” Popup-to-Sticky-Bar Model in Action
Alrighty, demo time! I have a few instructions for you to follow to see it in action. I didn’t load the popup on this page as it’s supposed to be an entrance popup and I needed to set the scene first. But I’ll use some trickery to make it happen for you.
Follow these instructions and you’ll see “Maybe Later” in action:
Please note: this is desktop only. Reason being is that Google dislikes entrance popups on mobile. Sticky Bars are the Google-friendly way to present promos on mobile, so they work, but the combo isn’t appropriate.
Click the “Maybe Later” button and the popup will close.
Refresh that page and you’ll see a Sticky Bar with the same offer appear at the bottom.
Come back to this page.
Refresh this page and you’ll see the Sticky Bar here too.
Click “No thanks” to get rid of it when you’ve had enough
Here’s the entrance Popup you will see:
And the Sticky Bar you will see following that:
How to Use “Maybe Later” on Your Website
If you’d like to give it a try, follow the instructions below in your Unbounce account. (You should sign up for Unbounce if you haven’t already: you get Landing Pages, Popups, and Sticky Bars all in the same builder).
Caveat: This is not an official Unbounce feature, and as such is not technically supported. But it is damn cool. And if enough people scream really hard, maybe I’ll be able to persuade the product team to add it to the list. And please talk to a developer before trying this in a production environment.
Step 1: Create a Popup in Unbounce
Step 2: Add “Maybe Later” Script to the Popup
Add the following script “Before the body end tag”, replacing “lp-pom-button-50” with the id of your “Maybe Later” button, and unbounce.com with your own domain.
Set up the URL targeting for where you want the Sticky Bar to appear. This might be every page on your e-commerce site, or in my case just this post and another for testing.
Step 8: Set Cookie Targeting on Sticky Bar
Set the Trigger to “Arrival”, Frequency to “Every Visit”, and Cookie Targeting to show when the cookie we’re using is set. (You’ll see how it’s set in the next step).
Step 9: Add “Maybe Later” Code to Your Website
This is some code that allows the Popup and Sticky Bar to “talk” to its host page and set/delete the cookie.
// On receiving message from the popup set a cookie
window.onload = function()
var eventData = JSON.parse(e.data);
// Check for the later message
if (eventData === 'later')
document.cookie = "mlshowSticky=true; expires=Thu, 11 May 2019 12:00:00 UTC; path=/";
if (eventData === 'laterForget')
document.cookie = "mlshowSticky=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
// Listen for the message from the host page
Step 10: Enjoy Being Awesome
That’s all, folks!
What Do You Think?
I’d love to know what you think about this idea in the comments, so please jump in with your thoughts and ideas.
In experience design, friction is anything that prevents users from accomplishing their goals or getting things done. It’s the newsletter signup overlay covering the actual content, the difficult wording on a landing page, or the needless optional questions in a checkout flow. It’s the opposite of intuitive and effortless, the opposite of “Don’t make me think.”
Having said that, friction can still be a good thing sometimes. In game design, for example, friction is actually required.
(Click to see the full-length page in a scrolling lightbox.)
High-Traffic, Yes. High-Converting? We’ll see.
I’ll be looking at the analytics (Hotjar click and scroll heatmaps), Google Analytics (changes in basic behavior), KISS Metrics (changes in signups), and I’ll report back with the results later in Product Awareness Month.
Find your highest-traffic lowest-converting page, now
Your music is being streamed on all your devices with Apple Music and your favorite shows find a home at Netflix. Your physical store can accept payments via your Shopify subscription and now you can even get your basics like underwear or healthy food delivered to you through services like Stance and Graze respectively. Subscription services are not just the future of e-commerce anymore. They are very much the present. Subscription services are great for consumers as they get to experience much more content than they do with one-off purchases (think entire music libraries instead of a single album). They…
About two years ago, I begrudgingly opened Visual Studio Code (VS Code) for the first time. The only reason I even did so is that I was working on a TypeScript project (also quite begrudgingly) and I was tired of fighting with the editor and the compiler and all of the settings that I needed to make a TypeScript project work. Someone mentioned to me that TypeScript “just works” in VS Code and I was pleasantly surprised to find that they were right.