Tag Archives: popup

5 Mind-blowing Use Cases for Website Popups You’ve Never Considered (Includes Augmented Reality)

Okay, so perhaps only one of these use cases will blow your mind, but it’s worth risking being labeled as click-bait to get this in your hands. Read on for the coolest things you can do with website popups. Ever. Including augmented reality. Yup.

Example #1: The Augmented Reality Customer Postcard

Alright, people. Prepare to have your minds blown. This example comes from one of our designers, and chief hackers, at Unbounce, Luis Francisco.

Imagine the image below is a postcard you sent to your customers.

They visit the URL printed on it, and then this happens!

Watch me blow my own mind

Try it yourself

Note: This demo uses your laptop’s camera (it won’t work without one). Follow these instructions to see how it works!

  1. Print out the postcard image (opens in new tab)
  2. Open this landing page (opens in new tab)
  3. Grant access to your camera when asked by the browser.
  4. Hold the postcard in front of your camera to see the magic! (Stand a few feet back).

Example #2: The Website Login Hijack

35% of all visitors to Unbounce.com are only there to log in to the app. You read that correctly. Thirty-five percent. You can see the details in this GA screenshot from the month of January 2018.

This is an incredibly common thing for SaaS businesses, where customers will visit the homepage to click the login link. You’ll want to create a segment in Google Analytics for this, so you can remove it from your non-customer website behavior analysis.

It’s a huge opportunity for product marketing.

If you drop a cookie on your login screen that identifies the visitor as someone trying to log in, you can then use the cookie targeting built into Unbounce to target returning account holders with a website popup containing new product release info, along with a large login link that makes their experience even easier.

Click here or the image below to see an example popup.

Example #3: Social Referral Welcome

Are you doing as much as you can to convert your visitors from social? Probably not, but that’s okay. For this idea you can add an extra level of personalization by detecting the referring site (an Unbounce popup feature) and present a welcome experience relevant to that source.

You can take it a step further and have custom URL parameters on the social link that populate the popup with relevant content.

This is made possible by the Dynamic Text Replacement feature in Unbounce.

Check out the Tweet below. When I shared the blog post on Twitter, I added a URL parameter to the end of the URL so it reads:

https://postURL/?postTitle=“Maybe Later” - A New Interaction Model for E-commerce Entrance Popups

Try clicking the link in the Tweet. It will take you to our blog, and will show you a popup that’s only triggered when the referrer is Twitter (specifically a URL that contains t.co which is the Twitter URL shortener).

This is a really powerful way of connecting two previously disparate experiences, extending the information scent from one site to another. All without writing a single line of code.

Example #4: Preferred Social Network Share Request

If someone comes to you from twitter it’s a strong signal that Twitter is a social network of choice – or at least somewhere where they look for and respond to, socially shared content. As such you can give them a customized tweet ready for that network when they’ve demonstrated some engagement with your blog.

Using the referrer URL targeting option in Unbounce you can easily detect a visit from Twitter, Facebook, LinkedIn etc. Which is what I showed you in the previous example.

You can use different triggers for this concept that are likely to be more indicative of someone who’s engaged with the post. I’d suggest the scroll trigger (either up or down), time delay, or exit.

The reason I like this approach is that most people have a preferred social network. Mine is Twitter. If you give me a specific task, such as “Would you share this on Twitter for me, please?” with a Tweet button and prepared Tweet text, I’m more likely to engage versus having 5 social share buttons at the side or bottom of the post with no instructions.

Click here or the image below to see this concept in a popup.

You’d then craft a really good Tweet, with text or links specific to this tactic so you can measure its impact.

BTW: the button in that popup is functional and will actually Tweet about this blog post. I’d really love a share from you, just so you know. Show the popup again so you can Tweet it.

Example #5: Joke of the Day

Let’s end the post with a fun one. I’m sure you’ve all seen those messages or jokes that appear on Slack as it’s loading (it’s a thing). It can be fun to have that unusable time filled with something delightful.

Well, this is kinda like that, except that it’s not appearing during a loading sequence, it’s just straight up thrown in the face of your visitors. Because we need to experiment, people!!!!!!!!!

For bonus points, only show this to folks who have the cookie set in example #2 – “The Website Login Hijack” cos they’re customers and might appreciate it.

To do this, I took Unbounce co-founder and Chief Product Officer, Carter Gilchrist’s pet project “Good Bad Jokes” and embedded a random joke into an iframe in a popup. Boom!

Fair warning, some of these jokes are a little NSFW.

Click here for your Joke Of The Day.


Now go back to the top and try the augmented reality example again, and then share it on your preferred social network because it’s awesome, and that’s an awesome way to do business!

Cheers my dears,
Oli

Original source – 

5 Mind-blowing Use Cases for Website Popups You’ve Never Considered (Includes Augmented Reality)

Product Marketing Lessons Learned: An Interview with Shopify’s Hana Abaza [Video]

Hana Abaza runs the marketing show over at Shopify Plus, the enterprise arm of e-commerce software giant Shopify. In the interview, we unpack some of the ways they’re increasing product awareness and adoption of a new product – including the genesis of the idea for Shopify Plus, and some product marketing lessons learned.

We also talk about MacGyvering, crazy startup ideas, and a ton of resources you can use for your own product marketing efforts.

Watch My Interview with Hana Abaza on Product Marketing Lessons Learned

Show Notes

Here are all the resources we talked about:

  1. 09:03 Jobs to be Done (JTBD) Framework | Framework
  2. 15:45 Product adoption tips
    Some of Hana’s presentation slides.
  3. 18:00 Partner Marketing
    How Shopify leveraged their partners to create content to influence organic search for a new product.
  4. 20:08 Marketing a product with no pricing on your website
    Is it harder or easier to market an enterprise product when you only have a demo request?
  5. 24:10 Who does product marketing well?
  6. 25:15 First Round Capital Interview with Joanna Lord
  7. 27:14 Intercom Product Marketing
  8. 30:13 MacGyvering
  9. 31:10 Who would Hana take to a deserted island?
    The Unpublished David Ogilvy.
  10. 33:50 Hana’s favourite dad joke
    What do you call cheese that isn’t yours? Nacho Cheese!

Cheers
Oli Gardner

Get back here on Monday where I’ll be showing you how to use Sticky Bars to craft really cool mobile user experiences.

See the original post: 

Product Marketing Lessons Learned: An Interview with Shopify’s Hana Abaza [Video]

Doing the Two-Step: Opt-In Forms That Is [A Psychology Principle With Conversion Data]

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.

Let’s try a demo. You can subscribe to follow along with Product Awareness Month here.
Clicking that link uses the two-step concept to launch a popup containing the subscribe form.

Pretty simple, right?

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.

Cheers
Oli

p.s. Come back tomorrow to see a video interview I did with the awesome Head of Marketing at Shopify Plus, Hana Abaza.

More here – 

Doing the Two-Step: Opt-In Forms That Is [A Psychology Principle With Conversion Data]

9 Creative Sticky Bar Examples – Plus 21 New Unbounce Templates

alt : https://unbounce.com/photos/sticky-bar-condoms.mp4https://unbounce.com/photos/sticky-bar-condoms.mp4

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.

Lead Gen Popup


#3 Sticky Video Widget

You’ve seen these on many blogs I’m sure. It’s really cool functionality for increasing engagement in your videos. You can see a demo here. And instructions on how to implement it can be found in the Unbounce community here.


#4 E-commerce Product Reminder

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.


#7 EU Cookie Policy

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.

We released a new Cookie Bar template below that you can use until you deal with the new legislation.

#8 Microsite Navigation

Another example from earlier in Product Awareness Month. You can use a Sticky Bar as the connective global navigation that turns a group of landing pages into a microsite.

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:


Follow our Product Awareness Month journey >> click here to launch a popup with a subscribe form (it uses our on-click trigger feature).


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.


Click to show this Sticky Bar at the bottom | at the top.


Sticky Bar Template #2: Location Redirect

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.

Cheers
Oli Gardner

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.

Jump to original:  

9 Creative Sticky Bar Examples – Plus 21 New Unbounce Templates

11 Surprisingly Awesome Popup Design Examples – Scored by The Delight Equation [Tool]

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.

Taken from: 

11 Surprisingly Awesome Popup Design Examples – Scored by The Delight Equation [Tool]

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

It’s Day 3 of Product Marketing Month. Today’s post is about discovering new use-cases for your products that can be useful for different functional users in your customer’s company. — Unbounce co-founder Oli Gardner

If you read the opening post of Product Marketing Month, you would have read about the concept of Productizing Our Technology (POT).

Productizing Our Technology
By taking our core tech, combining the available features, with new jQuery scripts, CSS, and some 3rd-party integrations, it’s possible to create a plethora of new “mini-products” that if embraced by the community, could inform future product direction.

When we created an initial list of product ideas, expanding upon what the base product can already do, I realized that — as we’ve moved from a single product to multiple — we’d not changed our perception of who the functional buyer persona is.

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

PRODUCT
#1 Landing Pages #2 Popups #3 Sticky Bars
Primary Use Case Use standalone landing pages to convert more of paid (AdWords) traffic. Use on website pages to convert more organic traffic. Use on website pages to convert more organic traffic.
Primary Persona Campaign Strategist Website Owner Website Owner
Secondary Persona Designer Campaign Strategist Campaign Strategist
Tertiary Persona Copywriter Web Designer / Developer Web Designer / Developer

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

We didn’t immediately realize that the teams using these products may not even be in the same department (marketing vs. web team vs. software development), for example. Or if they are in the same department (marketing), they might not work together on a daily basis.

This is a huge problem because it assumes that someone who runs paid campaigns is also going to be optimizing the organic traffic to a website, and is no doubt one of the reasons for low adoption of product #2 and #3.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Yes, you can, if you want. But the primary use case for the new products is for your website. We really didn’t see this misconception coming, which shows how important it is to always talk to your customers.

Who uses your products?

If you have more than one product, or if the users of your single product have different job roles, are you targeting and communicating with them in different ways? Or have you assumed that everyone will understand the same messaging?

Web developers are not very likely to be downloading an ebook about marketing, and thus will not be on our mailing list to hear about new products that could, in fact, make their job easier and more productive.

So, today, I’m going to share some of the functional use cases of popups and sticky bars that would be used by the UX and web teams that work on and manage your website. This is a very different market than we normally speak to, but super important as some of our research has indicated after the initial launch.

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

Productizing Unbounce Technology
(Click image for full-size view)

Across the top (in yellow) are the core products, their features (such as targeting, triggers, display frequency), and the different hacks, data sources, and integrations, that can be combined to produce the new products listed in green in the first column.

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

NOW: These products are possible now with our existing feature set.
MVP: These products are possible by adding some simple scripts/CSS to extend the core.
NEW: These products would require a much deeper level of product or website development to make them possible. These are the examples that came from “blue sky” ideation, and are a useful upper anchor for what could be done.

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

# Product Name Product Description Where Used Core Tech Core Features Extras
NOW: Can be built with existing features
1 Microsites By using the URL targeting feature, a single Sticky Bar with links to multiple Landing Pages can effectively create a microsite. Landing Pages LP + SB Targeting: URL
Trigger: Entry
N/A
2 EU Cookie Law Bar You’ve probably seen them all over the place. “All websites owned in the EU or targeted towards EU citizens, are now expected to comply with the law.” The EU has always been very strict and this requirement is why these bars have been popping up everywhere. Good news is, they’re wasy to make with geo-targeting. Website SB Targeting: Geo
Trigger: Entry
N/A
3 Two-Step Opt-In Form Instead of showing a lead gen form, you use a button or link that shows the form in a popup when clicked. This can help remove the perceived friction that a form conveys, and applies a level of commitment when the button is clicked that makes people more likely to continue and fill out the form. Website, Landing Pages POP Trigger: Click N/A
4 Cart Abandonment Use an exit Popup on your ecommerce product/cart/checkout pages to provide an offer to encourage a purchase. Website POP Trigger: Exit N/A
5 Multi-location GEO Redirect If you have websites for multiple countries, you can present the entry Popup that uses geolocation to ask if the visitor would like to visit the site in their own country. Website POP Targeting: Geo
Trigger: Entry
N/A
6 Poll/Survey Add a form to a Popup of Sticky Bar to present poll or survey questions. Website POP or SB Trigger: Entry, Exit, Scroll Down, Scroll Up, Delay N/A
7 NPS Survey Present a Net Promoter Score in a Sticky Bar to ask your visitors and customers to rate how likely they are to recommend your product or brand to others. Website, Landing Pages SB Targeting: None, Cookie
Trigger: Exit, Scroll, Delay
N/A
8 Outage Notification Present an entry Popup or Sticky Bar when there is site maintenance happening. SB or POP Website Targeting: URL, Cookie N/A
9 Tooltips Present a popup when someone clicks to show more info/instructions. Website, Landing Pages POP Trigger: Click N/A
10 Referrer Contextual Welcome Present a contextually relevant message to people arriving from another site. Website, Landing Pages POP or SB Targeting: URL, Cookie, Geo
Trigger: Entry
N/A
11 Co-marketing Contextual Welcome Present a contextually relevant message to people arriving from a campaign run by you and a comarketing partner. This could show the relationship (both logos) and the joint offer. Website, Landing Pages POP or SB Targeting: Referrer, URL, Cookie
Trigger: Entry, Scroll Up, Scroll Down,
Exit, Delay
N/A
12 Mobile GPS: Closest Store Present a Sticky Bar when someone on a mobile site would benefit from knowing where the closest store is to them (potentially with an incentive to visit the store). Website, Landing Pages SB Trigger: Entry, Scroll Up, Scroll Down,
Exit, Delay
N/A
13 Holiday Hours Announcement Show details of changes in store hours. Could be used on exit to provide some urgency “We’re closing in 1 hour”. Website, Landing Pages SB or POP Trigger: Entry, Exit N/A
MVP: Can be built with existing features
14 Sticky Navigation By removing the standard close button [x] from a Sticky Bar and adding smooth scroll anchor links, you can create a sticky navbar which can help increase page engagement. Website, Landing Pages SB Trigger: Entry CSS: Hide close button
Javascript: Smooth scroll
15 Mobile App-Style Navigation By placing a Sticky Bar at the bottom of the page (on mobile), using icons/text, you can create a mobile experience that looks and feels like an app. Check out plated.com on your phone as an example. Adding smoothscroll Javascript lets you use the nav to scroll up and down the page. Mobile Website, Mobile Landing Pages SB Trigger: Entry CSS: Hide close button + mobile only
Javascript: Smooth scroll
16 Mobile Hamburger Menu A hamburger menu is the three lined icon that opens up a navigation menu. They typically slide in and out from the left side or top.Check out a demo in the Unbounce Community. Mobile Website SB Trigger: Click jQuery: Slide in/out
17 Progress Bar Similar to a microsite, a progress bar could be targeted to appear on several pages. Using cookie targeting and CSS the progress bar could be updated to show which pages (steps) have been completed and which steps are remaining. Website, Microsite, Landing Pages SB Targeting: URL, Cookie jQuery: Set/Read cookies
CSS: Prev/next step visual state
18 “Maybe Later” Maybe Later is a new concept for ecommerce entrance popups that I will explore in depth on day 9 of Product Marketing Month. A large number of ecommerce sites have discounts/offers that show on arrival. This can often be a major disruption to the experience, even if the offer is of interest. The way ML works is that the popup would present 3 options: Yes/No/ML. If “Maybe Later” is clicked, the Popup closes and a persistent Sticky Bar appears at the bottom of the page to act as a subtle reminder of the offer – ready for when the visitor wants it. Website POP + SB Targeting: Cookie jQuery: Set/Read cookies, Log “Maybe Later” click
19 Video Interaction Offers Having a CTA embedded in a video is great, but it’s very limited in its ability communicate more than a few words.This product idea enables you to launch a popup when the video is complete, or when it’s paused, or when you’ve watched a series of videos. It’s seriously badass. Click here to visit a demo of this concept (created by Unbouncer, Noah Matsell). Website, Landing Pages POP Targeting: Cookie jQuery
20 End-of-video Talk to Sales Present a popup to someone who completes a video such as a demo. Website, Landing Pages POP or SB Trigger: Custom script jQuery
21 Sticky Video Widget You may have seen this on news blogs, where a video at the top becomes a smaller video stuck to the side or bottom of the window as you scroll. It’s a great way to ensure higher engagement with the video. Noah made a demo of a sticky video widget in the Unbounce community. Blog SB Trigger: Scroll CSS
22 Guided Tour Show a popup that begins a guided tour of the page/product. If you close it, the tour is over. If you click a next button it closes and a new popup is opened, positioned close to the feature it’s describing. Website, In-app POP Trigger: Click jQuery
NEW: Can be built with existing features
23 Ship it Faster By setting a cookie based on the shipping method on an ecommerce site, an exit Popup or Sticky Bar could be used to suggest a different shipping method (more expensive) to get it delivered faster. A smart upsell feature. Ecommerce Website POP or SB Targeting: Cookie
Trigger: Exit
Feature: Dynamic Text Replacement
jQuery
24 Out of Stock By setting a cookie based on stock availability on an ecommerce site, an exit Popup or Sticky Bar could present an email address field to ask if the visitor would like to be notified when the item is back in stock. Ecommerce Website POP or SB Targeting: Cookie
Trigger: Exit
jQuery
CSS
25 Sold Out: You Might Like By setting a cookie based on stock availability on an ecommerce site, a Popup or Sticky Bar could be shown that presents a set of recommended products related to an out of stock item. Ecommerce Website POP or SB Targeting: Cookie
Trigger: Exit
Feature: Dynamic Text Replacement
jQuery
CSS

As you can see, there are a ton of new use cases for the products, which are useful to a completely different set of functional users. Unless we do something to specifically target these new functional users, adoption won’t be our only problem, acquisition will be too.

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

One way to start validating these use cases is to create new product pages for them to see if you can attract some organic traffic. In our case, this would allow those searching for this type of product to arrive on our website where we may be able to demo the product as part of the experience.

Approach 2: Cross-Function Advocate Email Marketing

Another approach is to explicitly connect the different team members, through suggestive email copy. For instance, we could email our customers and educate them that our product can help others on their team – getting the conversation started. This has the benefit of communicating through an established brand advocate.

Prioritizing Product Development

One of our goals with POT is to gather insights into which new product ideas are in demand. There will without question be an increase in technical support questions based on the implementation requirements of these ideas, but I consider that a good problem to have. If there’s enough call for full productization, that’s a great way to increase adoption and the stickiness of our products.

How many new products could YOU build?

I’d love to hear in the comments how you can imagine doing this with your own software/products/services. Please jump into the comments and let me know. If you’re worried about your competitors stealing your ideas (I definitely thought about that when I decided on this approach – but I’m erring on the side of our core Transparency value), you could simply mention how many you think you could come up with, which is also very cool.

Now, everybody POT!
Cheers
Oli Gardner

p.s. Tell your web/UX teammates about this blog post :D

View original: 

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

5 Real-Life Popup A/B Tests That Will Help Boost Your Conversion Rate (Based on Actual Case Studies)

5 tests

Do you think your popups are converting at their highest potential? I’m guessing that unless you’ve been testing them to figure out what makes your audience tick, then probably not. Luckily, you can figure that out by, well,..testing of course :). And if you’re wondering what to assess first, I have some suggestions. As Head of Customer Success at WisePops, an intelligent popup builder, I’ve reviewed hundreds of A/B tests. Based on this experience, I’ll share 5 popup A/B tests which can make a difference for your future and existing campaigns (spoiler: one of our customers almost tripled the number…

The post 5 Real-Life Popup A/B Tests That Will Help Boost Your Conversion Rate (Based on Actual Case Studies) appeared first on The Daily Egg.

More:

5 Real-Life Popup A/B Tests That Will Help Boost Your Conversion Rate (Based on Actual Case Studies)

Thumbnail

Dissecting Popup Anatomy: What Works & What Hurts Your Bottom Line

Popups get a bad rap.

To put it bluntly, people hate them.

There’s almost nothing online that’s more annoying than something getting in your way, interrupting your research, FORCING you to take time out just to close a window. Or worse—signing up for an email list you don’t care about just to keep reading.

Sure, things have gotten better from the all-out popup war that led to browser popup blockers, but just because the popup itself has gotten a little more sophisticated doesn’t mean it’s stopped being an unwelcome party guest.

Even in 2013, 70% of people thought irrelevant popups were really annoying, putting them on the same level as lottery scams.

popup anatomy

The popups we grew to hate. All caps yelling, the stench of desperation, and an all-out denial of the fact they’d already lost the reader’s interest.

Why They’re Still Around

But, let’s face it. Popups are still around and they aren’t going away anytime soon.

In fact, the reason they’re still around is because they work—better than almost any other lead generation strategy.

As annoying as the bad ones may be, marketers find popups nearly irreplaceable in increasing blog subscriptions and lead volumes.

In fact, Econsultancy found that an overlay can increase email opt-ins by 400%.

popup - placeitSource: Placeit.net

Bad Popup Anatomy: A List 6 Things NOT to Do

The flip side of this, though, is that a 400% increase in opt-ins doesn’t mean those subscribers are as high quality as the ones that actively seek you out.

Fortunately, you can use popups to dramatically increase your subscribers and leads while keeping quality in check.

When you break down the anatomy of a popup, there are good practices and bad practices, so we’ll explore both. But first, a list of anatomical characteristics to avoid:

1. Don’t use bully language
Your visitors aren’t stupid, so don’t treat them that way. You can’t trick them into giving you their email address by using clever wording and trickery. They can read right through it.

popup anatomy

There’s no need to insult your users like this. They’re intelligent people who can make their own decisions, so respect them for it.

2. Avoid being a conversion sell-out

Sometimes, less is more.

It’s entirely possible that 50 quality conversions can increase your bottom line more than 500 generic ones.

Don’t get caught up in the thrill of a 400% increase until you find out that it’s also significantly impacting your bottom line. When you do your A/B testing and data tracking, use the monetary value of each conversion as your deciding data, not just the number of conversions themselves.

3. Don’t use blanket popups
Blanket popups with generic messages don’t serve anyone, and may be irrelevant to your visitor, turning them off from your website and services forever.

For example, if you have a website that sells health supplements and you’ve got a popup pushing your latest weight loss pill, it might get in front of the eyes of a lot of people, but don’t show it to people who want to boost muscle mass.

Instead of blanket popups, customize them based on purchase and browsing history. At the very least, make them page-specific so you know you won’t be too far off the mark.

4. Don’t hide the X
You might be desperate for people to convert, but hiding the X and making it harder for people to get rid of your popup only makes visitors resent you more.

And, the less they resent you, the higher your chances are for a quality conversion.

5. Don’t get in the user’s way
People get online to do their own thing. They don’t want you to boss them around. If you’re going to use a popup that stops users from doing what they want, you need to have a very easy-to-see escape route.

Better yet, use a popup that doesn’t get in their way at all. It’s less irritating and you won’t get the annoying website reputation.

And the email IDs you do collect will be higher quality ones because it’s more of an elected opt-in than a forced one.

popup anatomy, bottom popup

Econsultancy’s popup is at the bottom of their page. It’s still noticeable, but doesn’t get in the way of scrolling, clicking and reading.

6. Don’t go popup crazy

In short, keep your popups in check and use them in moderation. Don’t use one on every single page, and definitely don’t use multiple popups per visit.

Choose a popup that offers the most value for each landing page, and employ it in a tactful manner. (Not right away, but ideally before they’ve already decided to close the window. Make Web World suggests a 30-second delay.)

The Anatomy of Page-Stopping Popups

Today, the most popular popups are light boxes and overlays. They increase opt-ins, but they do interrupt the user experience by forcing them to look at and interact with the popup.

lightbox, page-stopping popup

As soon as this page loads, a popup stops me from reading and requests me to like their Facebook page, even though I’ve already done so.

There’s a good side and a bad side to both of these, so you can’t really have a 100% win either way: to use them or not.

Since you know you visitors better than anyone else, you’ve got to decide whether or not the leads you get are worth interrupting your user experience and annoying them a little bit. A short stint of A/B testing should do the trick if you’re unsure. But these pros and cons will help you decide where to start:

Pros of Page-Stopping Popups

  • A significant increase in the number of leads and opt-in conversions
  • The ability to catch a reader’s eye with special value offers
  • Can use customized versions of popups to optimize online sales funnels

Cons of Page-Stopping Popups

  • Renders the site useless and forces readers to interact with something against their will
  • Lowering the quality of the visitor experience in exchange for lower quality leads
  • With too many, people become annoyed with your site and may stop visiting

The Anatomy of Hello Bar

Another, more recent popup option that doesn’t impede so much on the user experience is the Hello Bar.

It’s an app that lets you design custom bars that display across the top or bottom of your page—visible to the visitor while he’s scrolling and reading, but doesn’t force him to interact.

Depending on your goals, you can customize formats to drive traffic to a specific URL, collect email addresses, or promote your social media pages.

Even though it doesn’t get directly in the face of the visitor, it’s helped businesses like DIY Themes gain more than 1,000 extra blog subscribers in one month.

hello bar, popup anatomy, more subscribers

When creating your Hello Bar, you get to choose which goal most suits your needs: more traffic, more subscribers, or more social media followers.

Effective Popup Anatomy: 5 Things You SHOULD Do

Though popups get a bad rap for their ability to irritate Web surfers, their reputation shouldn’t stop you from trying them out.

There are ways you can actually make popups valuable rather than irritating, vastly increasing your leads and subscribers while making sure the leads have sales potential.

To make your popups effective:

  1. Be as unobtrusive as possible. To be clear this doesn’t necessarily mean avoiding overlay or page-stopping popups, but it does constant data checking if you do. For example, if you have a valuable well-designed overlay popup that gives you better bottom-line conversions than a message bar across the top of your page, use it. However, if the value of both are equal, opt for the message bar.
  2. Offer real value. Offer users something that will actually help them in return for their email address. Hint: “bi-weekly updates” isn’t nearly as valuable as “7 concrete ways to reduce your ad spend while increasing conversions.”
  3. Have a nice, minimalistic design. Use clear, direct wording with clear, direct images and design layout so your visitors know exactly what you’re offering them and whether or not they want to take part. Clarity wins over confusion every time.
  4. Use respectful language. Don’t try to shame your visitors into agreeing with your offer. It will only make them resent you for insulting their intelligence. Instead, when they feel respected, they’ll have respect for you in return.
  5. Use brand-friendly colors. Bright red and yellow are only acceptable in McDonald’s advertisements. In designing your popups, use your brand colors or colors your brand designer gave you in your color pallet.
popup design, popup anatomy, popup language

Social Triggers offers real value with their well-designed popup, while respecting the visitors who reject their offer.

What’s Worked for Your Business?

What are your thoughts on different kinds of popups? If you’re a marketer who’s employed popups in your on-page marketing, which types gave you the most improvement in your bottom line?

Check out some of Crazy Egg’s other posts on user experience, or read more articles by Chelsea Baldwin.

The post Dissecting Popup Anatomy: What Works & What Hurts Your Bottom Line appeared first on The Daily Egg.

Link:

Dissecting Popup Anatomy: What Works & What Hurts Your Bottom Line

Magnific Popup, A Truly Responsive Lightbox Plugin

A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. For this reason, I created Magnific Popup, an open-source lightbox plugin focused on performance.
In this article, I’ll share the techniques I employed in creating this plugin, techniques that can make your lightbox much faster and easier to use, whatever the device being used.

Read more:  

Magnific Popup, A Truly Responsive Lightbox Plugin

Just another WordPress site