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:
| EXAMPLE POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 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
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 0.75 | 0.8 | 1 | 0.5 | 0.5 | 1 | 1 | 83% |
Analysis
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!
- CLARITY:
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. - CONTROL:
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. - CREATIVITY:
I love the design. It’s fresh and open. The visual hierarchy of the buttons is perfect: dominant continue, secondary cancel. - RELEVANCE:
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. - RESPECT:
“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
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 1 | 1 | 0.83 | 1 | 0 | 1 | 1 | 80% |
Analysis
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.
- CLARITY:
Easy. - CONTROL:
Full control. - CREATIVITY:
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. - RELEVANCE:
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. - RESPECT:
No problems here.
Popup Design #3: Tasting Table
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 1 | 0.8 | 0.17 | 1 | 0 | 1 | 1 | 71% |
Analysis
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 ;)
- CLARITY:
Get an email, about food. Easy. - CONTROL:
No escape button close on this one either. Grrr. - CREATIVITY:
It gets a few points for being on brand, but nothing original otherwise. - RELEVANCE:
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. - RESPECT:
Great.
Popup Design #4: Get Response
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 1 | 1 | 0.67 | 1 | 1 | 1 | 1 | 95% |
Analysis
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.
- CLARITY:
Pretty clear, and they get a few extra seconds of reading because it’s cute. - CONTROL:
Full control. - CREATIVITY:
Not the slickest design, but I think it’s got a lot of fun in it. - RELEVANCE:
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. - RESPECT:
Yes.
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.
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 0.5 | 0.6 | 0 | 0 | 0 | 0 | 1 | 30% |
NOT delightful.
Popup Design #5: Groupon
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 0.75 | 0.4 | 0.67 | 1 | 0 | 1 | 1 | 69% |
Analysis
- CLARITY:
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. - CONTROL:
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. - CREATIVITY:
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. - RELEVANCE:
Perfect. - CHARM:
None. - VALUE:
Hard to argue with deals. - RESPECT:
Good job.
Popup Design #6: How-To Geek
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 1 | 1 | 0.17 | 1 | 0.25 | 1 | 1 | 77% |
Analysis
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.
- CLARITY:
Super obvious. - CONTROL:
All functional. - CREATIVITY:
On brand but nothing else positive from a creative standpoint. - RELEVANCE:
Yup. - CHARM:
I gave it a tiny bit cos of the nerdy logo guy. - VALUE:
Standard newsletter value. - RESPECT:
All good.
Popup Design #7: ClassPass
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 0.5 | 0.4 | 0.33 | 1 | 0 | 1 | 1 | 60% |
Analysis
I thought this would do better when I first saw it, then after playing with the interaction it let me down a bit.
- CLARITY:
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. - CONTROL:
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. - CREATIVITY:
On brand, nothing else. - RELEVANCE:
Yes. - CHARM:
A bit cold. - VALUE:
Without question. - RESPECT:
Good job.
Popup Design #8: Lemonstand – Squishy Animation
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 1 | 1 | 0.67 | 1 | 0.25 | 1 | 1 | 85% |
Analysis
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.
- CLARITY:
Ebook with an image of a book. Done. - CONTROL:
Full control. - CREATIVITY:
Scores for animation and being on brand. Mix in a different shape or a design like a lemon stand for bonus points :D - RELEVANCE:
It’s on the blog, so full points. - CHARM:
Only the squishy animation saves it here. - VALUE:
Fair indeed. - RESPECT:
No confirm shaming here.
Popup Design #9: PetSmart
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 1 | 1 | 0 | 1 | 0 | 1 | 1 | 71% |
Analysis
Granted, this is the lamest of the bunch, but I included it because of its simplicity. Sometimes an offer is just an informative statement.
- CLARITY:
Crystal. - CONTROL:
Complete. - CREATIVITY:
Nope. Sorry. - RELEVANCE:
It’s an ecommerce store. Yes. - CHARM:
Nope. Add some kittens! - VALUE:
Definitely. - RESPECT:
All good.
Popup Design #10: Travelzoo << The worst!
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 1 | 0 | 0.67 | 1 | 0 | 0 | -1 | 24% |
Analysis
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.
- CLARITY:
Yep, super clear with the photo of Ireland. - CONTROL:
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. - CREATIVITY:
Minor points for the rounded corners. - RELEVANCE:
Very. - CHARM:
Started with zero, got worse from there. - VALUE:
See respect, below. - RESPECT:
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
| POPUP DELIGHT SCORE | |||||||
| CLARITY | CONTROL | CREATIVITY | RELEVANCE | CHARM | VALUE | RESPECT | TOTAL |
| 1 | 0.6 | 0.67 | 1 | 0.5 | 1 | 0.5 | 75% |
Analysis
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.
- CLARITY:
Super clear - CONTROL:
No escape key function, and the close (x) button doesn’t always show up. - CREATIVITY:
Looks great,and on brand. - RELEVANCE:
Perfect. - CHARM:
As before, the friendly photo works. - VALUE:
As expected. - RESPECT:
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.
Cheers
Oli
p.s. Don’t forget to subscribe to the weekly updates.
from Unbounce http://ift.tt/2CQfv93
via IFTTT
