Tag Archives: clarity

11 Awesome Popup Design Examples – Scored by The Delight Equation

I admit it. I’m a geek. Or am I a nerd? Definitely not a dweeb, but probably a keener (that’s a Canadian term).

One of my favorite things to do (as a marketer) is to reverse-engineer marketing experiences – good and bad – to define an equation that can be used to score them. It’s primarily a heuristic exercise, but I find it’s an incredibly helpful way to analyze a design, especially when it has the ability to leave you with a simple checklist of things to consider to make it better.

In the past, I’ve created The Clarity Equation (for value propositions), and The Testimonial Equation (for customer social proof).

For today’s post, I focused on popup design examples that exude positive characteristics, to create The Popup Delight Equation.

What Makes a Popup Design Delightful?

Hands up if you thought “That’s an oxymoron.”? I know, I know, how can a popup be delightful? Well, just like any other aspect of marketing and web design, it’s all about the details, and finding those magical ways of combining what makes your brand special, with a dose of responsible interaction design.

I see delightful popups all the time, usually because the copy is hilarious, or the design is surprising.

If your perception of a popup is one of those ugly WordPress template type things with three big green checkmark bullet icons (see below), and a Johnson box (those fat dashed red lines that resemble a coupon cutout), then no, that’s not delightful. That’s just shitty.

It is possible to make a popup delightful, and it’s not that hard if you know which aspects of interaction and visual design are required to do it right. Which brings me to…

The Popup Delight Equation

The equation (shown in the image at the top of the post) is broken down into 7 principles; Clarity, Control, Creativity, Relevance, Charm, Value, & Respect.

Each principle has a few checklist questions that build up a score between 0 and 1 (you can choose 0.5 for any of them if you like) for a maximum score of 7. These are then combined and turned into an overall percentage score as shown below:

0 1 1 1 0 1 0 57%

I’ll explain each of the delight principles, and then I’ll get to the popup designs.
(skip to the examples)

Principle #1 – Clarity

The clarity principle represents how easy it is to understand the offer presented by the popup. First, there’s the immediacy factor, can you read and understand it very quickly. The second part concerns the use of a primary “hero” image and whether it helps or hinders visual communication.

Clarity = ( Immediacy + Hero ) / 2
Immediacy Can you explain what the offer is after looking at it for only five seconds? Yes 1, No 0
Hero Is there a primary image (not a logo) that shows what you will get (or who you will get it from)? Yes 1, No 0
If it’s a generic site-wide offer like a discount that doesn’t need an image, score 1.

Principle #2 – Control

The control principle represents a visitor’s ability to fully control the experience. This includes being able to easily accept, reject, or discard the interruption.

Control = ( Close [On] + Close [Out] + Close [Esc] + Continue + Cancel ) / 5
Close [On] Is there a close button (typically an x) on the popup? Yes 1, No 0
If it’s a fullscreen “Welcome Mat” you can take a 1 here unless there’s no “No thanks” button.
Close [Out] Does the popup close if you click on the background surrounding it? Yes 1, No 0
If it’s a fullscreen “Welcome Mat” you can take a 1 here.
Close [Esc] Does the popup close if you press the escape button on your keyboard? Yes 1, No 0
Continue Is it clear what you need to click in order to accept the offer? Yes 1, No 0
Cancel Is it clear what you need to click in order to decline the offer? (Score 1 if there’s only one option) Yes 1, No 0

Principle #3 – Creativity

Like any type of marketing communications, a creative popup will be more likely to be well received. This principle is comprised of visual design esthetic, the inclusion of (non-tacky) animation, and how on-brand it is.

Creativity = ( Design + Animation + Brand ) / 3
Visual Design Esthetic Is it unique looking (non-rectangle), or just look awesome to you (some subjectivity is okay here)? Yes 1, No 0
Animation Does it include some motion as it appears that makes it more noticable. Yes 1, No 0.5, Yes, but it’s annoying 0
On Brand Does it match the site’s design or look like a cheap template that could be from any site? Yes 1, No 0

Principle #4 – Relevance

A popup that isn’t highly relevant will convert poorly and moves you closer to the wrong end of the interruption spectrum. This principle includes congruence (how aligned the offer is with the page you are visiting) and targeting.

Relevance = ( Congruence + Targeting ) / 2
Congruence Does the offer feel related to the page you’re on? Yes 1, No 0
If it’s somethng like a site-wide discount it’s a 1, but if it’s a blog subscribe popup on a homepage, product or pricing page etc. (not your blog), that’s a 0.
Targeting Score 1 unless one of these scenarios is true: it doesn’t apply to you (such as wrong country), or it’s referring to you coming from a page/partner/place that you didn’t come from (and in general if it’s making assumptions about you that are incorrect), in which case it’s a 0

Principle #5 – Charm

You know a charming marketing experience when you see one. Same goes for popups. If the design and/or copy make you laugh, or smile, or want to share it with someone, it’s a winner.

Charm = ( Smile [Design] + Smile [Copy] ) / 2
Smile [Design] Does the visual design make you smile? Yes 1, No 0
Smile [Copy] Does the copywriting make you smile? Yes 1, No 0

Principle #6 – Value

Some popups only contain information, some have a discount, others ask you for personal information in order to claim the offer. The value principle is concerned with how fair of an exchange it is, and it’s completely binary. If the reward is equal or greater than the ask/effort, you win.

Value = ( Reward >= Ask )
Reward > Ask Is the offer worth more than or equal to the requested information/effort? Yes 1, No 0
Score a 0 if it seems unfair, such as a ton of form fields for very little in return.

Principle #7 – Respect

The respect principle leans on the concept of “a responsible use of technology”. The biggest offense in this regard is the idea of “Confirm Shaming”. This is where there are two options (continue or cancel), but in order to cancel, you have to click a button/link with offensive copy – such as “I don’t like free money”. You get penalized extra for this offense.

Respect = 1 – 2*(Confirm Shaming)
Confirm Shaming If this is a two-button Accept/Decline popup, and the decline button is offensive in any way, it’s confirm-shaming. Yes 1, No 0
A 1 here results in a -1 score for principle 7.

Mid-post call to action: click here to subscribe to the weekly updates.

Brands Appearing in Today’s Popup Design Examples

Thanks to these awesome companies/people for inspiring me to include them: Tim Ferriss, Leesa, ClassPass, How-To Geek, Groupon, Tasting Table, Get Response, Lemonstand, PetSmart, Travelzoo.

Note: None of these popup designs score 100%

I’m sure you’ll like some, and dislike others. I’m including a wide variety of examples because they each show different aspects of the delight criteria.

Popup Design #1: Tim Ferriss

0.75 0.8 1 0.5 0.5 1 1 83%


This fullscreen “Welcome Mat” popup takes over the screen when you’re leaving. I dislike this style when it happens when you arrive, but on exit, it’s totally cool. It’s a simple and classy design. Let’s score it!

    I gave it 0.5 for immediacy as I had to figure out what the content was (fortunately I just bought a book about Seneca so I caught on). Having Tim in the background makes it very clear it’s coming from him.
    The only failing here is the lack of the escape button working, which is my favourite way of dismissing a popup (I’m a big keyboard shortcut fan). It’s much faster than hunting for a close icon/button.
    I love the design. It’s fresh and open. The visual hierarchy of the buttons is perfect: dominant continue, secondary cancel.
    It loses out a bit on relevance, as it’s a speaker contact page, making this popup incongruent.
  • CHARM:
    Visually, yes. His authentic smile makes you feel welcome.
  • VALUE:
    It’s a 2-step opt-in form (email address if you click “Unlock”), which is a fair deal.
    “No thanks, I’m not interested.” is great. It’s all you need to do on your cancel button. No confirm shaming here.

Popup Design #2: Leesa Mattress – Countdown Timer

1 1 0.83 1 0 1 1 80%


There are so many mattress 2.0 companies out there now, it’s hard to tell them apart aside from the colour. This one’s really plain, and quite boring, but it does get bonus points for the countdown timer, and not breaking any of the fundamental delight rules.

    Full control.
    It got it’s creativity 1/3 only for being on brand, but I added a 0.5 bonus for the countdown timer, which is a nice touch for ecommerce.
    Timely and on point.
  • CHARM:
    Nah. They could do way more with the copy and the visuals are kinda bleh.
  • VALUE:
    Hard to argue with a discount.
    No problems here.

Popup Design #3: Tasting Table

1 0.8 0.17 1 0 1 1 71%


I like the use of a question headline in this popup. If you aren’t then you probably shouldn’t be on the site, so they’re helping to self select their ideal customer/subscriber. I’m not a foodie, however, so I’m closing it ;)

    Get an email, about food. Easy.
    No escape button close on this one either. Grrr.
    It gets a few points for being on brand, but nothing original otherwise.
    It’s food.
  • CHARM:
    Lots of potential, but doesn’t deliver.
  • VALUE:
    I was going to ding it for asking for a zipcode, but it probably increases the value so it get’s a pass.

Popup Design #4: Get Response

1 1 0.67 1 1 1 1 95%


Simple and a bit weird (and basic) looking, but it rocks the scores beacuse it doesn’t break the fundamental delight rules, and adds some playfulness to stand out. Give it a little wiggle animation to go with that cute little alien thing and it would get a perfect score.

    Pretty clear, and they get a few extra seconds of reading because it’s cute.
    Full control.
    Not the slickest design, but I think it’s got a lot of fun in it.
    It’s SaaS, and this is for a free trial. Totally relevant.
  • CHARM:
    This one made me smile based on the copy and the design. Nicely done.
  • VALUE:
    It’s no different than clicking any other signup button on the site, so it’s regular ol’ fair.

A quick contrast break…

Some pretty amazing score so far, and that’s because they’re doing it right. Before I continue, I just want to run one of the examples from yesterday’s “6 Really Bad Website Popup Examples” post through The Popup Delight Equation to provide some perspective.

0.5 0.6 0 0 0 0 1 30%

NOT delightful.

Popup Design #5: Groupon

0.75 0.4 0.67 1 0 1 1 69%


    I would’ve given it a higher score if there had been a photo of Vancouver in the popup, as it gives that immediate sense of locale.
    Neither the escape key or clicking the background close the popup, which is really annoying when the “No thanks” link is so tiny. I dinged it extra for that.
    This is what I’m referring to re: looking different from a shape perspective. Yes, it’s a circle and not a rectangle, but that’s the point. 99.999999% of popups are rectangles. So this simple change makes a world of difference. And the transparency allows lots of breathing room, and for it to not look like it’s completely shutting out the site.
  • CHARM:
  • VALUE:
    Hard to argue with deals.
    Good job.

Popup Design #6: How-To Geek

1 1 0.17 1 0.25 1 1 77%


I bet you didn’t expect a score like that. Which just goes to show that when you do some of the fundamentals correctly: it’s very clear, it’s easy to control, relevant, fair value, and respectful. It looks pretty awful, but that’s why it scores so poorly on creativity and charm. The fundamentals matter a lot. Get those right, and you can spend your time being exceptional.

    Super obvious.
    All functional.
    On brand but nothing else positive from a creative standpoint.
  • CHARM:
    I gave it a tiny bit cos of the nerdy logo guy.
  • VALUE:
    Standard newsletter value.
    All good.

Popup Design #7: ClassPass

0.5 0.4 0.33 1 0 1 1 60%


I thought this would do better when I first saw it, then after playing with the interaction it let me down a bit.

    This is an entry popup, so the visuals are covered. Having a photo in the popup would help with the clarity around what kind of class they’re talking about for a first-time visitor.
    no on, out or esc. The reason having no visible close button is undelightful is because it forces you to choose (and read) one of the buttons to close it. That’s too much effort when I’ve decided I want to get rid of it.
    On brand, nothing else.
  • CHARM:
    A bit cold.
  • VALUE:
    Without question.
    Good job.

Popup Design #8: Lemonstand – Squishy Animation

1 1 0.67 1 0.25 1 1 85%


I stuck an animated GIF in for this one so you could see the animation. It’s a prety plain looking popup aside from that, but you can see how it does add that extra attention-grabbing effect.

    Ebook with an image of a book. Done.
    Full control.
    Scores for animation and being on brand. Mix in a different shape or a design like a lemon stand for bonus points :D
    It’s on the blog, so full points.
  • CHARM:
    Only the squishy animation saves it here.
  • VALUE:
    Fair indeed.
    No confirm shaming here.

Popup Design #9: PetSmart

1 1 0 1 0 1 1 71%


Granted, this is the lamest of the bunch, but I included it because of its simplicity. Sometimes an offer is just an informative statement.

    Nope. Sorry.
    It’s an ecommerce store. Yes.
  • CHARM:
    Nope. Add some kittens!
  • VALUE:
    All good.

Popup Design #10: Travelzoo << The worst!

1 0 0.67 1 0 0 -1 24%


Looks sure can be deceiving. At first glance I really like this one. Then I started playing with it. And it became the worst popup of them all.

    Yep, super clear with the photo of Ireland.
    Can’t click the background to close. Oh, and wait, no matter what you do, IF you manage to close it you get turfed to the homepage. Horrible.
    Minor points for the rounded corners.
  • CHARM:
    Started with zero, got worse from there.
  • VALUE:
    See respect, below.
    Wow. If I were critiquing this solely on a screenshot, I’d have given them a 1 for respect. But I just tried to interact with it. If you close the popup (without signing up) it redirects you right back to the homepage. You can’t even see the deal. That’s seriously gnarly. Shoulda put this one in yesterday’s post.

Popup Design #11: Tim Ferriss

1 0.6 0.67 1 0.5 1 0.5 75%


We close it out with another from Mr. Ferriss. It’s from the same page as the first one, but instead of being an exit popup, it’s triggered when you click a small banner that appears in the lower-left as you scroll down the page. Because it’s an on-click triggered popup, you typically get full points for relevance and clarity as you asked for it specifically.

    Super clear
    No escape key function, and the close (x) button doesn’t always show up.
    Looks great,and on brand.
  • CHARM:
    As before, the friendly photo works.
  • VALUE:
    As expected.
    Not quite as nice as the other one on the cancel link, so I’m dinging him a little.

Alrighty then, that’s a wrap for those 10 delightful popups, and one most certainly not delightful (Travelzoo) popup. Let me know if you agree/disagree with my ratings.

How Delightful are Your Popups?

I showed you mine, now show me yours! I hope you enjoyed learning about the delightful side of the website popup. I’d really love to see some of your popups, and how you score them, so drop a URL in the comments with your score and we can see if I agree.


p.s. Don’t forget to subscribe to the weekly updates.

This article is from – 

11 Awesome Popup Design Examples – Scored by The Delight Equation

6 Really Bad Website Popup Examples

If you want to craft a delightful marketing experience and you’re using popups, you need to make sure you hold them to the same high standards as the content they are covering up. You can learn a lot by looking at bad website popup examples.

Once you understand what not to do, you’ll default to starting your own popup designs from a better baseline.

What does a bad popup design actually look like?

Well, it depends on your judging criteria, and for the popup examples below, I was considering these seven things, among others:

  1. Clarity: Is it easy to figure out the offer really quickly?
  2. Relevance: Is it related to the content of the current page?
  3. Manipulation: Does it use psychological trickery in the copy?
  4. Design: Is it butt ugly?
  5. Control: Is it clear what all options will do?
  6. Escape: Can you get rid of it easily?
  7. Value: Is the reward worth more than the perceived (or actual) effort?

The following popup examples, each make a number of critical errors in their design decisions. Take a look, and share your own worst popup design examples in the comments!

#1 – Weather Channel Rudeness

What’s so bad about it?

Okay, I get it Weather.com, ads are one of, or your only, revenue stream. There are plenty of sites who ask you to turn off an ad blocker to read the full article. I don’t have a problem with it, and the main paragraph of text here is okay.

What I *do* have a problem with is the copy on the CTA. “Turn off your ad blocker”.

Really? You can’t even say please? That’s just obnoxious.

Fun fact, the Canadian version of the site doesn’t have this popup. Go figure. ;)
(I had to VPN to get the U.S. version.)

Submitted by Ramona from Impact)

#2 – Mashable Shmashable

What’s so bad about it?

If you peer into the background behind the popup, you’ll see a news story headline that begins with “Nightmare Alert”. I think that’s a pretty accurate description of what’s happening here.

  • Design: Bad. The first thing I saw looks like a big mistake. The Green line with the button hanging off the bottom looks like the designer fell asleep with their head on the mouse.
  • Clarity: Bad. And what on earth does the headline mean? click.click.click. Upon deeper exploration, it’s the name of the newsletter, but that’s not apparent at all on first load.
  • Clarity: worse. Then we get the classic “Clear vs. Clever” headline treatment. Why are you talking about the pronunciation of the word “Gif”? Tell me what this is, and why I should care to give you my email.
  • Design: Bad. Also, that background is gnarly.

#3 – KAM Motorsports Revolution!

What’s so bad about it?

It’s motorsports. It’s not a revolution. Unless they’re talking about wheels going round in circles.

  • Clarity: Bad. The headline doesn’t say what it is, or what I’ll get by subscribing. I have to read the fine print to figure that out.
  • Copy: Bad. Just reading the phrase “abuse your email” is a big turn off. Just like the word spam, I wasn’t thinking that you were going to abuse me, but now it’s on my mind.
  • Relevance: Bad. Newsletter subscription popups are great, they have a strong sense of utility and can give people exactly what they want. But I don’t like them as entry popups. They’re much better when they use an exit trigger, or a scroll trigger. Using a “Scroll Up” trigger is smart because it means they’ve read some of your content, and they are scrolling back up vs. leaving directly, which is another micro-signal that they are interested.

#4 – Utterly Confused

(Source unknown – I found it on confirmshaming.tumblr.com)

What’s so bad about it?

I have no earthly clue what’s going on here.

  • Clarity: Bad. I had to re-read it five times before I figured out what was going on.
  • Control: Bad. After reading it, I didn’t know whether I would be agreeing with what they’re going to give me, or with the statement. It’s like an affirmation or something. But I have no way of knowing what will happen if I click either button. My best guess after spending this much time writing about it is that it’s a poll. But a really meaningless one if it is. Click here to find out how many people agreed with “doing better”…
  • It ends with “Do Better”. I agree. They need to do a lot better.

#5 – Purple Nurple

What’s so bad about it?

  • Manipulation: Bad. Our first “Confirm Shaming” example. Otherwise known as “Good Cop / Bad Cop”. Forcing people to click a button that says “Detest” on it is so incongruent with the concept of a mattress company that I think they’re just being cheap. There’s no need to speak to people that way.
  • I found a second popup example by Purple (below), and have to give them credit. The copy on this one is significantly more persuasive. Get this. If you look at the section I circled (in purple), it says that if you subscribe, they’ll keep you up to date with SHIPPING TIMES!!! Seriously? If you’re going to email me and say “Hey Oli, great news! We can ship you a mattress in 2 weeks!”, I’ll go to Leesa, or Endy, or one of a million other Casper copycats.

#6 – Hello BC

What’s so bad about it?

Context: This is an entry popup, and I have never been to this site before.

  • Relevance: Bad. The site is Hellobc.com, the title says “Supernatural British Columbia”, and the content on the page is about skydiving. So what list is this for? And nobody wants to be on a “list”, stop saying “list”. It’s like saying email blast. Blast your list. If you read the first sentence it gets even more confusing, as you’ll be receiving updates from Destination BC. That’s 4 different concepts at play here.
  • Design: Bad. It’s legitimately butt ugly. I mean, come on. This is for Beautiful Supernatural British Columbia ffs. It’s stunning here. Show some scenery to entice me in.
  • Value: Bad. Seeing that form when I arrive on the page is like a giant eff you. Why do they think it’s okay to ask for that much info, with that much text, before I’ve even seen any content?
  • Control: Bad. And there’s not any error handling. However, the submit button remains inactive until you magically click the right amount of options to trigger it’s hungry hungry hippo mouth to open.

Train. Wreck.

Well, that’s all for today, folks. You might be wondering why there were so few popup examples in this post. Honestly, when the team was rallying to find me a bunch of examples, we all struggled to find many truly awful ones. We also struggled to find many really awesome ones.

This is where YOU come in!

Send me your terrible and awesome popup examples!

If you have any wonderfully brutal, or brutally wonderful examples of website popup design, I’d really appreciate a URL in the comments. If you could share the trigger details too that would be rad (e.g. exit, entrance, scroll, delay etc.).

Tomorrow’s Post is about Awesome Popup Examples! YAY.

So get your butt back here same time tomorrow, where I’ll be sharing my brand new Popup Delight Equation that you can use to grade your own popup designs.


p.s. Don’t forget to subscribe to the weekly updates.

View original post here:  

6 Really Bad Website Popup Examples

Your mobile website optimization guide (or, how to stop pissing off your mobile users)

Reading Time: 15 minutes

One lazy Sunday evening, I decided to order Thai delivery for dinner. It was a Green-Curry-and-Crispy-Wonton kind of night.

A quick google search from my iPhone turned up an ad for a food delivery app. In that moment, I wanted to order food fast, without having to dial a phone number or speak to a human. So, I clicked.

From the ad, I was taken to the company’s mobile website. There was a call-to-action to “Get the App” below the fold, but I didn’t want to download a whole app for this one meal. I would just order from the mobile site.

Dun, dun, duuuun.

Over the next minute, I had one of the most frustrating ordering experiences of my life. Labeless hamburger menus, the inability to edit my order, and an overall lack of guidance through the ordering process led me to believe I would never be able to adjust my order from ‘Chicken Green Curry’ to ‘Prawn Green Curry’.

After 60 seconds of struggling, I gave up, utterly defeated.

I know this wasn’t a life-altering tragedy, but it sure was an awful mobile experience. And I bet you have had a similar experience in the last 24 hours.

Let’s think about this for a minute:

  1. This company paid good money for my click
  2. I was ready to order online: I was their customer to lose
  3. I struggled for about 30 seconds longer than most mobile users would have
  4. I gave up and got a mediocre burrito from the Mexican place across the street.

Not only was I frustrated, but I didn’t get my tasty Thai. The experience left a truly bitter taste in my mouth.

10 test ideas for optimizing your mobile website!

Get this checklist of 10 experiment ideas you should test on your mobile website.

Why is mobile website optimization important?

In 2017, every marketer ‘knows’ the importance of the mobile shopping experience. Americans spend more time on mobile devices than any other. But we are still failing to meet our users where they are on mobile.

Americans spend 54% of online time on mobile devices. Source: KPCB.

For most of us, it is becoming more and more important to provide a seamless mobile experience. But here’s where it gets a little tricky…

Conversion optimization”, and the term “optimization” in general, often imply improving conversion rates. But a seamless mobile experience does not necessarily mean a high-converting mobile experience. It means one that meets your user’s needs and propels them along the buyer journey.

I am sure there are improvements you can test on your mobile experience that will lift your mobile conversion rates, but you shouldn’t hyper-focus on a single metric. Instead, keep in mind that mobile may just be a step within your user’s journey to purchase.

So, let’s get started! First, I’ll delve into your user’s mobile mindset, and look at how to optimize your mobile experience. For real.

You ready?

What’s different about mobile?

First things first: let’s acknowledge that your user is the same human being whether they are shopping on a mobile device, a desktop computer, a laptop, or in-store. Agreed?

So, what’s different about mobile? Well, back in 2013, Chris Goward said, “Mobile is a state of being, a context, a verb, not a device. When your users are on mobile, they are in a different context, a different environment, with different needs.”

Your user is the same person when she is shopping on her iPhone, but she is in a different context. She may be in a store comparing product reviews on her phone, or she may be on the go looking for a good cup of coffee, or she may be trying to order Thai delivery from her couch.

Your user is the same person on mobile, but in a different context, with different needs.

This is why many mobile optimization experts recommend having a mobile website versus using responsive design.

Responsive design is not an optimization strategy. We should stop treating mobile visitors as ‘mini-desktop visitors’. People don’t use mobile devices instead of desktop devices, they use it in addition to desktop in a whole different way.

– Talia Wolf, Founder & Chief Optimizer at GetUplift

Step one, then, is to understand who your target customer is, and what motivates them to act in any context. This should inform all of your marketing and the creation of your value proposition.

(If you don’t have a clear picture of your target customer, you should re-focus and tackle that question first.)

Step two is to understand how your user’s mobile context affects their existing motivation, and how to facilitate their needs on mobile to the best of your ability.

Understanding the mobile context

To understand the mobile context, let’s start with some stats and work backwards.

  • Americans spend more than half (54%) of their online time on mobile devices (Source: KPCB, 2016)
  • Mobile accounts for 60% of time spent shopping online, but only 16% of all retail dollars spent (Source: ComScore, 2015)

Insight: Americans are spending more than half of their online time on their mobile devices, but there is a huge gap between time spent ‘shopping’ online, and actually buying.

  • 29% of smartphone users will immediately switch to another site or app if the original site doesn’t satisfy their needs (Source: Google, 2015)
  • Of those, 70% switch because of lagging load times and 67% switch because it takes too many steps to purchase or get desired information (Source: Google, 2015)

Insight: Mobile users are hypersensitive to slow load times, and too many obstacles.

So, why the heck are our expectations for immediate gratification so high on mobile? I have a few theories.

We’re reward-hungry

Mobile devices provide constant access to the internet, which means a constant expectation for reward.

“The fact that we don’t know what we’ll find when we check our email, or visit our favorite social site, creates excitement and anticipation. This leads to a small burst of pleasure chemicals in our brains, which drives us to use our phones more and more.” – TIME, “You asked: Am I addicted to my phone?

If non-stop access has us primed to expect non-stop reward, is it possible that having a negative mobile experience is even more detrimental to our motivation than a negative experience in another context?

When you tap into your Facebook app and see three new notifications, you get a burst of pleasure. And you do this over, and over, and over again.

So, when you tap into your Chrome browser and land on a mobile website that is difficult to navigate, it makes sense that you would be extra annoyed. (No burst of fun reward chemicals!)

A mobile device is a personal device

Another facet to mobile that we rarely discuss is the fact that mobile devices are personal devices. Because our smartphones and wearables are with us almost constantly, they often feel very intimate.

In fact, our smartphones are almost like another limb. According to research from dscout, the average cellphone user touches his or her phone 2,167 times per day. Our thumbprints are built into them, for goodness’ sake.

Just think about your instinctive reaction when someone grabs your phone and starts scrolling through your pictures…

It is possible, then, that our expectations are higher on mobile because the device itself feels like an extension of us. Any experience you have on mobile should speak to your personal situation. And if the experience is cumbersome or difficult, it may feel particularly dissonant because it’s happening on your mobile device.

User expectations on mobile are extremely high. And while you can argue that mobile apps are doing a great job of meeting those expectations, the mobile web is failing.

If yours is one of the millions of organizations without a mobile app, your mobile website has got to work harder. Because a negative experience with your brand on mobile may have a stronger effect than you can anticipate.

Even if you have a mobile app, you should recognize that not everyone is going to use it. You can’t completely disregard your mobile website. (As illustrated by my extremely negative experience trying to order food.)

You need to think about how to meet your users where they are in the buyer journey on your mobile website:

  1. What are your users actually doing on mobile?
  2. Are they just seeking information before purchasing from a computer?
  3. Are they seeking information on your mobile site while in your actual store?

The great thing about optimization is that you can test to pick off low-hanging fruit, while you are investigating more impactful questions like those above. For instance, while you are gathering data about how your users are using your mobile site, you can test usability improvements.

Usability on mobile websites

If you are looking take get a few quick wins to prove the importance of a mobile optimization program, usability is a good place to begin.

The mobile web presents unique usability challenges for marketers. And given your users’ ridiculously high expectations, your mobile experience must address these challenges.

mobile website optimization - usability
This image represents just a few mobile usability best practices.

Below are four of the core mobile limitations, along with recommendations from the WiderFunnel Strategy team around how to address (and test) them.

Note: For this section, I relied heavily on research from the Nielsen Norman Group. For more details, click here.

1. The small screen struggle

No surprise, here. Compared to desktop and laptop screens, even the biggest smartphone screen is smaller―which means they display less content.

“The content displayed above the fold on a 30-inch monitor requires 5 screenfuls on a small 4-inch screen. Thus mobile users must (1) incur a higher interaction cost in order to access the same amount of information; (2) rely on their short-term memory to refer to information that is not visible on the screen.” – Nielsen Norman Group, “Mobile User Experience: Limitations and Strengths

Strategist recommendations:

Consider persistent navigation and calls-to-action. Because of the smaller screen size, your users often need to do a lot of scrolling. If your navigation and main call-to-action aren’t persistent, you are asking your users to scroll down for information, and scroll back up for relevant links.

Note: Anything persistent takes up screen space as well. Make sure to test this idea before implementing it to make sure you aren’t stealing too much focus from other important elements on your page.

2. The touchy touchscreen

Two main issues with the touchscreen (an almost universal trait of today’s mobile devices) are typing and target size.

Typing on a soft keyboard, like the one on your user’s iPhone, requires them to constantly divide their attention between what they are typing, and the keypad area. Not to mention the small keypad and crowded keys…

Target size refers to a clickable target, which needs to be a lot larger on a touchscreen than it is does when your user has a mouse.

So, you need to make space for larger targets (bigger call-to-action buttons) on a smaller screen.

Strategist recommendations:

Test increasing the size of your clickable elements. Google provides recommendations for target sizing:

You should ensure that the most important tap targets on your site—the ones users will be using the most often—are large enough to be easy to press, at least 48 CSS pixels tall/wide (assuming you have configured your viewport properly).

Less frequently-used links can be smaller, but should still have spacing between them and other links, so that a 10mm finger pad would not accidentally press both links at once.

You may also want to test improving the clarity around what is clickable and what isn’t. This can be achieved through styling, and is important for reducing ‘exploratory clicking’.

When a user has to click an element to 1) determine whether or not it is clickable, and 2) determine where it will lead, this eats away at their finite motivation.

Another simple tweak: Test your call-to-action placement. Does it match with the motion range of a user’s thumb?

3. Mobile shopping experience, interrupted

As the term mobile implies, mobile devices are portable. And because we can use ‘em in many settings, we are more likely to be interrupted.

“As a result, attention on mobile is often fragmented and sessions on mobile devices are short. In fact, the average session duration is 72 seconds […] versus the average desktop session of 150 seconds.”Nielsen Norman Group

Strategist recommendations:

You should design your mobile experience for interruptions, prioritize essential information, and simplify tasks and interactions. This goes back to meeting your users where they are within the buyer journey.

According to research by SessionM (published in 2015), 90% of smartphone users surveyed used their phones while shopping in a physical store to 1) compare product prices, 2) look up product information, and 3) check product reviews online.

You should test adjusting your page length and messaging hierarchy to facilitate your user’s main goals. This may be browsing and information-seeking versus purchasing.

4. One window at a time

As I’m writing this post, I have 11 tabs open in Google Chrome, split between two screens. If I click on a link that takes me to a new website or page, it’s no big deal.

But on mobile, your user is most likely viewing one window at a time. They can’t split their screen to look at two windows simultaneously, so you shouldn’t ask them to. Mobile tasks should be easy to complete in one app or on one website.

The more your user has to jump from page to page, the more they have to rely on their memory. This increases cognitive load, and decreases the likelihood that they will complete an action.

Strategist recommendations:

Your navigation should be easy to find and it should contain links to your most relevant and important content. This way, if your user has to travel to a new page to access specific content, they can find their way back to other important pages quickly and easily.

In e-commerce, we often see people “pogo-sticking”—jumping from one page to another continuously—because they feel that they need to navigate to another page to confirm that the information they have provided is correct.

A great solution is to ensure that your users can view key information that they may want to confirm (prices / products / address) on any page. This way, they won’t have to jump around your website and remember these key pieces of information.

Implementing mobile website optimization

As I’m sure you’ve noticed by now, the phrase “you should test” is peppered throughout this post. Because understanding the mobile context, and reviewing usability challenges and recommendations are first steps.

If you can, you should test any recommendation made in this post. Which brings us to mobile website optimization. At WiderFunnel, we approach mobile optimization just like we would desktop optimization: with process.

You should evaluate and prioritize mobile web optimization in the context of all of your marketing. If you can achieve greater Return on Investment by optimizing your desktop experience (or another element of your marketing), you should start there.

But assuming your mobile website ranks high within your priorities, you should start examining it from your user’s perspective. The WiderFunnel team uses the LIFT Model framework to identify problem areas.

The LIFT Model allows us to identify barriers to conversion, using the six factors of Value Proposition, Clarity, Relevance, Anxiety, Distraction, and Urgency. For more on the LIFT Model, check out this blog post.

A LIFT illustration

I asked the WiderFunnel Strategy team to do a LIFT analysis of the food delivery website that gave me so much grief that Sunday night. Here are some of the potential barriers they identified on the checkout page alone:

Mobile website LIFT analysis
This wireframe is based on the food delivery app’s checkout page. Each of the numbered LIFT points corresponds with the list below.
  1. Relevance: There is valuable page real estate dedicated to changing the language, when a smartphone will likely detect your language on its own.
  2. Anxiety: There are only 3 options available in the navigation: Log In, Sign Up, and Help. None of these are helpful when a user is trying to navigate between key pages.
  3. Clarity: Placing the call-to-action at the top of the page creates disjointed eyeflow. The user must scan the page from top to bottom to ensure their order is correct.
  4. Clarity: The “Order Now” call-to-action and “Allergy & dietary information links” are very close together. Users may accidentally tap one, when they want to tap the other.
  5. Anxiety: There is no confirmation of the delivery address.
  6. Anxiety: There is no way to edit an order within the checkout. A user has to delete items, return to the menu and add new items.
  7. Clarity: Font size is very small making the content difficult to read.
  8. Clarity: The “Cash” and “Card” icons have no context. Is a user supposed to select one, or are these just the payment options available?
  9. Distraction: The dropdown menus in the footer include many links that might distract a user from completing their order.

Needless to say, my frustrations were confirmed. The WiderFunnel team ran into the same obstacles I had run into, and identified dozens of barriers that I hadn’t.

But what does this mean for you?

When you are first analyzing your mobile experience, you should try to step into your user’s shoes and actually use your experience. Give your team a task and a goal, and walk through the experience using a framework like LIFT. This will allow you to identify usability issues within your user’s mobile context.

Every LIFT point is a potential test idea that you can feed into your optimization program.

Case study examples

This wouldn’t be a WiderFunnel blog post without some case study examples.

This is where we put ‘best mobile practices’ to the test. Because the smallest usability tweak may make perfect sense to you, and be off-putting to your users.

In the following three examples, we put our recommendations to the test.

Mobile navigation optimization

In mobile design in particular, we tend to assume our users understand ‘universal’ symbols.

Aritzia Hamburger Menu
The ‘Hamburger Menu’ is a fixture on mobile websites. But does that mean it’s a universally understood symbol?

But, that isn’t always the case. And it is certainly worth testing to understand how you can make the navigation experience (often a huge pain point on mobile) easier.

You can’t just expect your users to know things. You have to make it as clear as possible. The more you ask your user to guess, the more frustrated they will become.

– Dennis Pavlina, Optimization Strategist, WiderFunnel

This example comes from an e-commerce client that sells artwork. In this experiment, we tested two variations against the original.

In the first, we increased font and icon size within the navigation and menu drop-down. This was a usability update meant to address the small, difficult to navigate menu. Remember the conversation about target size? We wanted to tackle the low-hanging fruit first.

With variation B, we dug a little deeper into the behavior of this client’s specific users.

Qualitative Hotjar recordings had shown that users were trying to navigate the mobile website using the homepage as a homebase. But this site actually has a powerful search functionality, and it is much easier to navigate using search. Of course, the search option was buried in the hamburger menu…

So, in the second variation (built on variation A), we removed Search from the menu and added it right into the main Nav.

Mobile website optimization - navigation
Wireframes of the control navigation versus our variations.


Both variations beat the control. Variation A led to a 2.7% increase in transactions, and a 2.4% increase in revenue. Variation B decreased clicks to the menu icon by -24%, increased transactions by 8.1%, and lifted revenue by 9.5%.

Never underestimate the power of helping your users find their way on mobile. But be wary! Search worked for this client’s users, but it is not always the answer, particularly if what you are selling is complex, and your users need more guidance through the funnel.

Mobile product page optimization

Let’s look at another e-commerce example. This client is a large sporting goods store, and this experiment focused on their product detail pages.

On the original page, our Strategists noted a worst mobile practice: The buttons were small and arranged closely together, making them difficult to click.

There were also several optimization blunders:

  1. Two calls-to-action were given equal prominence: “Find in store” and “+ Add to cart”
  2. “Add to wishlist” was also competing with “Add to cart”
  3. Social icons were placed near the call-to-action, which could be distracting

We had evidence from an experiment on desktop that removing these distractions, and focusing on a single call-to-action, would increase transactions. (In that experiment, we saw transactions increase by 6.56%).

So, we tested addressing these issues in two variations.

In the first, we de-prioritized competing calls-to-action, and increased the ‘Size’ and ‘Qty’ fields. In the second, we wanted to address usability issues, making the color options, size options, and quantity field bigger and easier to click.

mobile website optimization - product page variations
The control page versus our variations.


Both of our variations lost to the Control. I know what you’re thinking…what?!

Let’s dig deeper.

Looking at the numbers, users responded in the way we expected, with significant increases to the actions we wanted, and a significant reduction in the ones we did not.

Visits to “Reviews”, “Size”, “Quantity”, “Add to Cart” and the Cart page all increased. Visits to “Find in Store” decreased.

And yet, although the variations were more successful at moving users through to the next step, there was not a matching increase in motivation to actually complete a transaction.

It is hard to say for sure why this result happened without follow-up testing. However, it is possible that this client’s users have different intentions on mobile: Browsing and seeking product information vs. actually buying. Removing the “Find in Store” CTA may have caused anxiety.

This example brings us back to the mobile context. If an experiment wins within a desktop experience, this certainly doesn’t guarantee it will win on mobile.

I was shopping for shoes the other day, and was actually browsing the store’s mobile site while I was standing in the store. I was looking for product reviews. In that scenario, I was information-seeking on my phone, with every intention to buy…just not from my phone.

Are you paying attention to how your unique users use your mobile experience? It may be worthwhile to take the emphasis off of ‘increasing conversions on mobile’ in favor of researching user behavior on mobile, and providing your users with the mobile experience that best suits their needs.

Note: When you get a test result that contradicts usability best practices, it is important that you look carefully at your experiment design and secondary metrics. In this case, we have a potential theory, but would not recommend any large-scale changes without re-validating the result.

Mobile checkout optimization

This experiment was focused on one WiderFunnel client’s mobile checkout page. It was an insight-driving experiment, meaning the focus was on gathering insights about user behavior rather than on increasing conversion rates or revenue.

Evidence from this client’s business context suggested that users on mobile may prefer alternative payment methods, like Apple Pay and Google Wallet, to the standard credit card and PayPal options.

To make things even more interesting, this client wanted to determine the desire for alternative payment methods before implementing them.

The hypothesis: By adding alternative payment methods to the checkout page in an unobtrusive way, we can determine by the percent of clicks which new payment methods are most sought after by users.

We tested two variations against the Control.

In variation A, we pulled the credit card fields and call-to-action higher on the page, and added four alternative payment methods just below the CTA: PayPal, Apple Pay, Amazon Payments, and Google Wallet.

If a user clicked on one of the four alternative payment methods, they would see a message:

“Google Wallet coming soon!
We apologize for any inconvenience. Please choose an available deposit method.
Credit Card | PayPal”

In variation B, we flipped the order. We featured the alternative payment methods above the credit card fields. The focus was on increasing engagement with the payment options to gain better insights about user preference.

mobile website optimization - checkout page
The control against variations testing alternative payment methods.

Note: For this experiment, iOS devices did not display the Google Wallet option, and Android devices did not display Apple Pay.


On iOS devices, Apple Pay received 18% of clicks, and Amazon Pay received 12%. On Android devices, Google Wallet received 17% of clicks, and Amazon Pay also received 17%.

The client can use these insights to build the best experience for mobile users, offering Apple Pay and Google Wallet as alternative payment methods rather than PayPal or Amazon Pay.

Unexpectedly, both variations also increased transactions! Variation A led to an 11.3% increase in transactions, and variation B led to an 8.5% increase.

Because your user’s motivation is already limited on mobile, you should try to create an experience with the fewest possible steps.

You can ask someone to grab their wallet, decipher their credit card number, expiration date, and ccv code, and type it all into a small form field. Or, you can test leveraging the digital payment options that may already be integrated with their mobile devices.

The future of mobile website optimization

Imagine you are in your favorite outdoor goods store, and you are ready to buy a new tent.

You are standing in front of piles of tents: 2-person, 3-person, 4-person tents; 3-season and extreme-weather tents; affordable and pricey tents; light-weight and heavier tents…

You pull out your smartphone, and navigate to the store’s mobile website. You are looking for more in-depth product descriptions and user reviews to help you make your decision.

A few seconds later, a store employee asks if they can help you out. They seem to know exactly what you are searching for, and they help you choose the right tent for your needs within minutes.

Imagine that while you were browsing products on your phone, that store employee received a notification that you are 1) in the store, 2) looking at product descriptions for tent A and tent B, and 3) standing by the tents.

Mobile optimization in the modern era is not about increasing conversions on your mobile website. It is about providing a seamless user experience. In the scenario above, the in-store experience and the mobile experience are inter-connected. One informs the other. And a transaction happens because of each touch point.

Mobile experiences cannot live in a vacuum. Today’s buyer switches seamlessly between devices [and] your optimization efforts must reflect that.

Yonny Zafrani, Mobile Product Manager, Dynamic Yield

We wear the internet on our wrists. We communicate via chat bots and messaging apps. We spend our leisure time on our phones: streaming, gaming, reading, sharing.

And while I’m not encouraging you to shift your optimization efforts entirely to mobile, you must consider the role mobile plays in your customers’ lives. The online experience is mobile. And your mobile experience should be an intentional step within the buyer journey.

What does your ideal mobile shopping experience look like? Where do you think mobile websites can improve? Do you agree or disagree with the ideas in this post? Share your thoughts in the comments section below!

The post Your mobile website optimization guide (or, how to stop pissing off your mobile users) appeared first on WiderFunnel Conversion Optimization.

See original: 

Your mobile website optimization guide (or, how to stop pissing off your mobile users)


[VIDEO] The Landing Page Sessions: Marketing Campaigns Deconstructed

There are so many things to keep track of when designing a landing page. Is the goal clear? Is the page mobile responsive? Have you optimized the copywriting, testimonials, UX and design? How’s your attention ratio?

With all that responsibility comes a lot on uncertainty. Wouldn’t it be nice to have a sounding board? How about the guy who’s seen more landing pages than anyone else on the planet?

With our new series The Landing Pages Sessions, we made that happen for 12 lucky marketers; we deconstructed their marketing campaigns so you can learn from their mistakes.


The Landing Page Sessions are 15-20 minute videos analyzing real-world marketing campaigns from start to finish. In each episode, Unbounce co-founder Oli Gardner dissects a campaign landing page along with the ad or email that drove traffic to it.

He gives his feedback on what he thinks could improve conversions, offers A/B testing inspiration, then actually implements those changes in the Unbounce builder so you can get the full picture of the optimized page.

And because we like you so much, we’re dropping the first three episodes today. (After this week, we’ll be releasing an episode every Friday.)

Episode 1: Five Hot Seconds

Powder White, a booking service for ski holidays, wants to collect leads by sending email traffic to a landing page. Unfortunately, this goal is lost in a mix of competing CTAs, unclear copy and disappearing form fields. Oli tries to right the ship with a five-second test in UsabilityHub and some quick copy edits in Unbounce.

Episode 2: A Moment of Clarity

NRG Edge is a social network for oil and gas professionals…or is it? Oli isn’t sure at first. “Tabloidy” headlines, bloated copy and generic business speak get in the way of clearly communicating the value. Can an “Unbounce style” makeover bring a needed dose of clarity?

Episode 3: Message Match… Where Art Thou?

Photosocial is driving Facebook traffic to a landing page for its 12-month mentorship program. In this episode, Oli discusses message match vs. design match, how “conversion context” varies between inbound channels, and how to make your testimonials believable. Oh yeah, and how soon is too soon to say “welcome”?

Happy learning!


[VIDEO] The Landing Page Sessions: Marketing Campaigns Deconstructed