Tag Archives: psychology

Thumbnail

Grabbing Visual Attention With The Visual Cortex




Grabbing Visual Attention With The Visual Cortex

Susan Weinschenk



(This is a sponsored post.) You are designing a landing page. The goal of the page is to get people to notice, and hopefully click on a button on the screen to subscribe to a monthly newsletter. “Make sure the button captures people’s attention” is the goal you’ve been given.

So how, exactly, do you do that?

Research on the visual cortex in the brain can give you some ideas. The visual cortex is the part of the brain that processes visual information. Each of the senses has an area of the brain where the signals for that sensory perception are usually sent and processed. The visual cortex is the largest of the sensory cortices because we are very visual animals.

Recommended reading: What Is The Role Of Creativity In UX Design?

The Pre-Attention Areas Of The Visual Cortex

There are special areas of the visual cortex that process visual information very quickly. These are called the “pre-attention” areas because they process information faster than someone may realize they’ve even noticed something visually.

Within the visual cortex are four areas called V1, V2, V3 and V4. These are the “pre-attention” areas of the visual cortex, and they are dedicated to very small and specific visual elements.

Let’s take a look at each one:

Orientation

If one item is oriented differently than others, then it is noticed right away:


An image of fifteen short lines with one that stands out because it is oriented differently


(Large preview)

Size And Shape

If one item is either a different size or shape than others then it is noticed right away:


An image of twelve circles with one larger than the rest


(Large preview)

Color

If one item is a different color than others around it then it is noticed right away:


An image of thirteen black circles with one of them shown in red


(Large preview)

Movement

If one item moves in quickly, especially if it zooms in from starting at a small size and then becoming larger quickly (think tiger running quickly towards you), that grabs attention.

But Only One At A Time

The interesting, not immediately obvious factor here is that if you use these factors together at the same time then nothing really attracts attention.


An abstract image of colorful circles in different sizes


(Large preview)

If you want to capture attention then, pick one of the methods and use it only.

Take a look at the two designs presented below. Which one draws your attention to the idea that you should enroll?


A minimalistic image that uses mostly two colors


(Large preview)


An image using a variety of colors and tones


(Large preview)

Obviously, the image that has just one color area draws your attention more, rather than the one area that is color.

The Fusiform Facial Area

The pre-attention areas of the visual cortex are not the only visual/brain connection to use. Another area of the brain you can tap to grab attention on a page could be the Fusiform Facial Area (or FFA).

The FFA is a special part of the brain that is sensitive to human faces. The FFA is located in the mid/social part of the brain near the amygdala which processes emotions. Faces grab attention because of the FFA.


A screenshot of the WIX website with a smiling person presented on the front page


(Large preview)

The FFA identifies:

  • Is this a face?
  • Someone I know?
  • Someone I know personally?
  • What are they feeling?

What stimulates the FFA?

  • Faces that look straight out stimulate the FFA.
  • Faces that are in profile may eventually stimulate the FFA, but not as quickly. In the example below the face is in profile and obscured by hair. It may not stimulate the FFA at all.

  • An image of a woman with her face covered by her hair so that her facial features cannot be seen well


    (Large preview)

  • Even inanimate objects like the picture of the car below may stimulate the FFA area if they have things that look like facial parts such as eyes and a mouth.

A picture of a car that looks like it has facial parts such as eyes and a mouth (front)


(Large preview)

Looking Where The Face Looks?

You may have seen the heat maps that show that if you show a face and the face is looking at an object (for example, a button or a product) on the screen then the person looking at the page will also look at the same object. Here’s an example:


An advertisement for Sunsilk Shampoo in which the lady in the picture is looking at the product compared to a picture of her looking straight


(Large preview)

The red areas show where people looked most. When the model looks at the shampoo bottle then people tend to look there too.

But be careful about drawing too many conclusions from this. Although the research shows that people’s eye gaze will follow the eye gaze of the photo, that doesn’t necessarily mean that people will take action. Highly emotional facial expressions lead to more action taking than just eye gaze.

Recommended reading: The Importance Of Macro And Micro-Moment Design

Takeaways

If you want to grab someone’s visual attention:

  • Use the pre-attention areas of the visual cortex: make everything on the page plain except for one element.

or

  • Show a large face, facing forward;
  • If you want to spur action have the face show a strong emotion;
  • Resist the urge to use many methods at once, such as a face, and color, and size, and shape, and orientation.

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(cm, ms, yk, il)


Continued here:  

Grabbing Visual Attention With The Visual Cortex

Thumbnail

19 Call-to-Action Phrases That Will Convert Your Users

call-to-action-phrases

What happens when nobody clicks on your call-to-action phrases and buttons? You don’t get any leads. Nor do you generate any revenue. That’s the opposite of the point, right? Which is why I tell business owners and marketers to take the time to refine their CTAs. A poorly-written CTA negates all the hard work you do for the rest of your marketing campaign. Someone who visits your website might be with you up until that point, then decide to bail on the conversion. So, how do you write call-to-action phrases that convert? What is the Psychology Behind CTA Phrases? From…

The post 19 Call-to-Action Phrases That Will Convert Your Users appeared first on The Daily Egg.

See the original article here:  

19 Call-to-Action Phrases That Will Convert Your Users

Thumbnail

Increase Clicks with these 12 Call-to-Action Phrases

call-to-action-phrases

What happens when nobody clicks on your call-to-action phrases and buttons? You don’t get any leads. Nor do you generate any revenue. That’s the opposite of the point, right? Which is why I tell business owners and marketers to take the time to refine their CTAs. A poorly-written CTA negates all the hard work you do for the rest of your marketing campaign. Someone who visits your website might be with you up until that point, then decide to bail on the conversion. So, how do you write call-to-action phrases that convert? What is the Psychology Behind CTA Phrases? From…

The post Increase Clicks with these 12 Call-to-Action Phrases appeared first on The Daily Egg.

This article is from – 

Increase Clicks with these 12 Call-to-Action Phrases

Thumbnail

What Is a Good Conversion Rate? The Answer Might Surprise You

what-is-good-conversion-rate

What is a good conversion rate for your online business? And how do your company’s conversion rates stack up against your competition’s? These are questions I field every day, both from business owners who are struggling and from companies that are killing it. I get it — everyone wants to crush the competition and boost their revenue — but how do you know if you’re making the grade? I’m passionate about metrics because I always want to win. You might feel the same way. To win, though, you have to understand the psychology behind your target customer’s decisions and find…

The post What Is a Good Conversion Rate? The Answer Might Surprise You appeared first on The Daily Egg.

Continued here: 

What Is a Good Conversion Rate? The Answer Might Surprise You

Respect Always Comes First

The past years have been remarkable for web technologies. Our code has become modular, clean and well-defined. Our tooling for build processes and audits and testing and maintenance has never been so powerful. Our design process is systematic and efficient. Our interfaces are smooth and responsive, with a sprinkle of beautiful transitions and animations here and there. And after so many years, accessibility and performance have finally become established, well-recognized pillars of user experience.

Originally from: 

Respect Always Comes First

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)

5 Legitimately Cool 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 a fun joke site called “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

Read this article: 

5 Legitimately Cool Use Cases for Website Popups You’ve Never Considered (Includes Augmented Reality)

4 Ways to Use Advanced Triggers and Targeting to Craft Delightful Popups

I’ve already talked at length about how to design more delightful popups by using The Delight Equation, and today I want to extend that concept by discussing the triggers and advanced targeting you can use to make popup experiences even better.

I think we’d all agree that showing a popup to your visitors on every visit is a bad idea. We can also agree that generic offers and untargeted messaging is a big turnoff.

That’s where triggers and targeting can make a big difference to the user experience.

Advanced Trigger and Targeting Matrix

Below, I’ve sketched out an interaction matrix leveraging the triggering and targeting features that Unbounce Popups & Sticky Bars can use. I’ve filled in a few ideas, and in the rest of today’s Product Awareness Month post I’ll explain how four of these concepts work, including some live demos because it’s really easy and fun to do with Unbounce.

Fair warning. Some of these ideas are a little “out there”. However, I find that being a little ridiculous helps unlock your creativity. And we all need a little more creativity in our marketing.

Use Case #1: Choose Your Own Adventure (CYOA)

Trigger: Entrance, Timed, or Scroll Up
Targeting: URL

This is a great way to learn about the intentions of your visitors.

We’ve been running experiments on our “What is a Landing Page?” page to figure out what people want to do when they arrive. interesting. On that page, I asked the question “What are your landing page needs?” providing three options (each with their own next step CTA):

I’ll be sharing complete results from this experiment at the end of the month.

CYOA Demos

Pro Tip: You can attach a parameter to a URL (?ttdemo1 for instance) which lets you use URL targeting to only show the popup in that instance. Because I want to keep you on this page, I’m just going to provide three links that reload this page, but with individual URL parameters.

  1. Entrance trigger demo
    with URL parameter targeting ?ttdemo1
  2. Scroll Up trigger demo
    with URL parameter targeting ?ttdemo2
  3. Time Delay trigger demo
    with URL parameter targeting ?ttdemo3

To set this up, I simply duplicated the first popup twice, and set the URL targeting and trigger options appropriately.

What’s even cooler is that because I used the URL targeting for any Unbounce.com URL that contains ?ttdemo1, the experience can be shown to anyone, via any link, just by appending the URL parameter. Like this link to our homepage. #mindblownmuch?

Scroll Up and Time Delay are good triggers to use to capture the attention of people who may not have found what they’re looking for. Like U2. Scroll Up is great for mobile as it’s a little bit like an exit signal on desktop.

Make sure you track these pathways in Google Analytics and stick a heat map on the page (I use Hotjar) so you can get a simple visual of where people are clicking. This is one of the original click maps for “What is a Landing Page?”.

Once you’ve learned something about your visitors’ needs you can start making changes to the page to reflect that. I’ll be digging into a concept I’m calling “No-Touch CRO” next week, which has more examples of how you can use Popups and Sticky Bars to learn about your visitors without having to change your site.

Use Case #2: You Didn’t See My Most Valuable Page (MVP)

Trigger: Exit
Targeting: Cookie

Every website has pages that we consider critical to the conversion experience. For you, it might be the features page, the pricing page, or the homepage. It could even be a blog post that’s particularly good at convincing people to sign up.

How dare someone come to your site without visiting your favorite pages! Let’s be realistic though, not everyone has the time, inclination, motivation, or easily identifiable path to get to where you want them to go.

I’m calling this use case “You didn’t see my MVP!” – as it’s designed to at least make sure they’re given an opportunity to see your magic content.

This is how it works:

  1. Drop a cookie on your most valueable page (MVP).
  2. Set up a Popup or Sticky Bar to fire on exit when the MVP cookie is NOT present.

Pretty simple right?

MVP Demo **Desktop Only**

Follow these instructions to see a demo. It’s desktop only because you can trigger an exit popup on a phone.

  1. Click here
    To reload this page adding a URL parameter ?ttdemomvp.
  2. Trigger the exit popup
    Move your mouse out of the browser as if you are going to close it.
  3. Click the button on the popup to visit the MVP page
    The cookie will be set on that page.
  4. Click the back button to return to this page
  5. Refresh this page and try to trigger the exit popup
    Now that the cookie has been set the popup won’t fire, as we’ve already seen your high-converting content.

Use Case #3: Maybe Later

Trigger: Entrance + Click
Targeting: URL + Cookie

“Maybe Later” is one of my favorite concepts to come out of this month’s exploration. You can read the full post about it here, and I’ll provide the elevator pitch below.

“Maybe Later” is a Solution to Increase Engagement and Reduce Frustration

As you can see in the sketch above, instead of the now classic YES/NO popup “Maybe Later” includes a third option called, you guessed it, “Maybe Later”.

It’s more than just a third button, here’s how it works:

  1. The popup appears when you enter the site. You can choose “No” to get rid of it, “Yes” to take advantage of it, or “Maybe Later” to register your interest but get it out of your way.
  2. When you click “Maybe Later” a cookie is set to log your interest.
  3. Now while you are browsing the rest of the site, a Sticky Bar – targeted at the cookie that was set – appears at the bottom (or top) of the page, with a more subtle reminder of the offer, so that you know it there and ready if you decide to take advantage of it.
  4. If you decide against the offer, you can click “No thanks” on the Sticky Bar, the cookie is deleted, and the offer is hidden for good.

The core purpose of this idea is to put the control back with the shopper while creating an effective method for the retailer to engage with you, with your permission.

“Maybe Later” Demo

Follow these instructions and you’ll see “Maybe Later” in action:

Please note: the demo is desktop only right now.

  1. Visit this page (opens in new window).
  2. Click the “Maybe Later” button and the popup will close.
  3. Refresh that page and you’ll see a Sticky Bar with the same offer appear at the bottom.
  4. Come back to this page.
  5. Refresh this page and you’ll see the Sticky Bar here too.
  6. Click “No thanks” to get rid of it when you’ve had enough :D

Use Case #4: Location Redirect

Trigger: Entrance
Targeting: URL + Location

It’s common for e-commerce businesses to have localized websites like amazon.com/amazon.ca/amazon.co.uk etc. But sometimes you need to redirect people to the correct country because the link they clicked is coming from an affiliate (or other) that’s only pointing to the US domain.

The simplest way to handle this scenario is to create a popup that combines an entrance trigger with URL and Geo Location targeting.

You can then target a “We have a Canadian Store, Eh! Wanna go there instead?” message on the U.S. site to visitors who’s location is in Canada.

I created two popups. One to be shown to Canadians, and one to the rest of the world using the location targeting settings.

Click here to see the popup. If you’re in Canada you’ll see a redirect popup, and if you’re anywhere else you’ll see a “Continue to the U.S. store” popup.

And here’s a video of me VPN’ing to New York to show how the popup changes.

There are so many ways you can combine triggers, targeting, and frequency to create popup experiences that treat your visitors with relevance and respect. If you have any cool combos that you’re using, please chuck ’em into the comments so we can discuss how they work.

Cheers
Oli

p.s. Don’t forget to give the 30-day trial of Unbounce a go. You get landing pages, popups, and sticky bars all included in your plan.

View the original here – 

4 Ways to Use Advanced Triggers and Targeting to Craft Delightful Popups

4 Ways to Use Advanced Triggers & Targeting to Craft Delightful Popups

I’ve already talked at length about how to design more delightful popups by using The Delight Equation, and today I want to extend that concept by discussing the triggers and advanced targeting you can use to make popup experiences even better.

I think we’d all agree that showing a popup to your visitors on every visit is a bad idea. We can also agree that generic offers and untargeted messaging is a big turnoff.

That’s where triggers and targeting can make a big difference to the user experience.

Advanced Trigger and Targeting Matrix

Below, I’ve sketched out an interaction matrix leveraging the triggering and targeting features that Unbounce Popups & Sticky Bars can use. I’ve filled in a few ideas, and in the rest of today’s Product Awareness Month post I’ll explain how four of these concepts work, including some live demos because it’s really easy and fun to do with Unbounce.

Fair warning. Some of these ideas are a little “out there”. However, I find that being a little ridiculous helps unlock your creativity. And we all need a little more creativity in our marketing.

Use Case #1: Choose Your Own Adventure (CYOA)

Trigger: Entrance, Timed, or Scroll Up
Targeting: URL

This is a great way to learn about the intentions of your visitors.

We’ve been running experiments on our “What is a Landing Page?” page to figure out what people want to do when they arrive. interesting. On that page, I asked the question “What are your landing page needs?” providing three options (each with their own next step CTA):

I’ll be sharing complete results from this experiment at the end of the month.

CYOA Demos

Pro Tip: You can attach a parameter to a URL (?ttdemo1 for instance) which lets you use URL targeting to only show the popup in that instance. Because I want to keep you on this page, I’m just going to provide three links that reload this page, but with individual URL parameters.

  1. Entrance trigger demo
    with URL parameter targeting ?ttdemo1
  2. Scroll Up trigger demo
    with URL parameter targeting ?ttdemo2
  3. Time Delay trigger demo
    with URL parameter targeting ?ttdemo3

To set this up, I simply duplicated the first popup twice, and set the URL targeting and trigger options appropriately.

What’s even cooler is that because I used the URL targeting for any Unbounce.com URL that contains ?ttdemo1, the experience can be shown to anyone, via any link, just by appending the URL parameter. Like this link to our homepage. #mindblownmuch?

Scroll Up and Time Delay are good triggers to use to capture the attention of people who may not have found what they’re looking for. Like U2. Scroll Up is great for mobile as it’s a little bit like an exit signal on desktop.

Make sure you track these pathways in Google Analytics and stick a heat map on the page (I use Hotjar) so you can get a simple visual of where people are clicking. This is one of the original click maps for “What is a Landing Page?”.

Once you’ve learned something about your visitors’ needs you can start making changes to the page to reflect that. I’ll be digging into a concept I’m calling “No-Touch CRO” next week, which has more examples of how you can use Popups and Sticky Bars to learn about your visitors without having to change your site.

Use Case #2: You Didn’t See My Most Valuable Page (MVP)

Trigger: Exit
Targeting: Cookie

Every website has pages that we consider critical to the conversion experience. For you, it might be the features page, the pricing page, or the homepage. It could even be a blog post that’s particularly good at convincing people to sign up.

How dare someone come to your site without visiting your favorite pages! Let’s be realistic though, not everyone has the time, inclination, motivation, or easily identifiable path to get to where you want them to go.

I’m calling this use case “You didn’t see my MVP!” – as it’s designed to at least make sure they’re given an opportunity to see your magic content.

This is how it works:

  1. Drop a cookie on your most valueable page (MVP).
  2. Set up a Popup or Sticky Bar to fire on exit when the MVP cookie is NOT present.

Pretty simple right?

MVP Demo **Desktop Only**

Follow these instructions to see a demo. It’s desktop only because you can trigger an exit popup on a phone.

  1. Click here
    To reload this page adding a URL parameter ?ttdemomvp.
  2. Trigger the exit popup
    Move your mouse out of the browser as if you are going to close it.
  3. Click the button on the popup to visit the MVP page
    The cookie will be set on that page.
  4. Click the back button to return to this page
  5. Refresh this page and try to trigger the exit popup
    Now that the cookie has been set the popup won’t fire, as we’ve already seen your high-converting content.

Use Case #3: Maybe Later

Trigger: Entrance + Click
Targeting: URL + Cookie

“Maybe Later” is one of my favorite concepts to come out of this month’s exploration. You can read the full post about it here, and I’ll provide the elevator pitch below.

“Maybe Later” is a Solution to Increase Engagement and Reduce Frustration

As you can see in the sketch above, instead of the now classic YES/NO popup “Maybe Later” includes a third option called, you guessed it, “Maybe Later”.

It’s more than just a third button, here’s how it works:

  1. The popup appears when you enter the site. You can choose “No” to get rid of it, “Yes” to take advantage of it, or “Maybe Later” to register your interest but get it out of your way.
  2. When you click “Maybe Later” a cookie is set to log your interest.
  3. Now while you are browsing the rest of the site, a Sticky Bar – targeted at the cookie that was set – appears at the bottom (or top) of the page, with a more subtle reminder of the offer, so that you know it there and ready if you decide to take advantage of it.
  4. If you decide against the offer, you can click “No thanks” on the Sticky Bar, the cookie is deleted, and the offer is hidden for good.

The core purpose of this idea is to put the control back with the shopper while creating an effective method for the retailer to engage with you, with your permission.

“Maybe Later” Demo

Follow these instructions and you’ll see “Maybe Later” in action:

Please note: the demo is desktop only right now.

  1. Visit this page (opens in new window).
  2. Click the “Maybe Later” button and the popup will close.
  3. Refresh that page and you’ll see a Sticky Bar with the same offer appear at the bottom.
  4. Come back to this page.
  5. Refresh this page and you’ll see the Sticky Bar here too.
  6. Click “No thanks” to get rid of it when you’ve had enough :D

Use Case #4: Location Redirect

Trigger: Entrance
Targeting: URL + Location

It’s common for e-commerce businesses to have localized websites like amazon.com/amazon.ca/amazon.co.uk etc. But sometimes you need to redirect people to the correct country because the link they clicked is coming from an affiliate (or other) that’s only pointing to the US domain.

The simplest way to handle this scenario is to create a popup that combines an entrance trigger with URL and Geo Location targeting.

You can then target a “We have a Canadian Store, Eh! Wanna go there instead?” message on the U.S. site to visitors who’s location is in Canada.

I created two popups. One to be shown to Canadians, and one to the rest of the world using the location targeting settings.

Click here to see the popup. If you’re in Canada you’ll see a redirect popup, and if you’re anywhere else you’ll see a “Continue to the U.S. store” popup.

And here’s a video of me VPN’ing to New York to show how the popup changes.

There are so many ways you can combine triggers, targeting, and frequency to create popup experiences that treat your visitors with relevance and respect. If you have any cool combos that you’re using, please chuck ’em into the comments so we can discuss how they work.

Cheers
Oli

p.s. Don’t forget to give the 30-day trial of Unbounce a go. You get landing pages, popups, and sticky bars all included in your plan.

Read this article – 

4 Ways to Use Advanced Triggers & Targeting to Craft Delightful Popups

Thumbnail

[Mobile] How to Turn Your Blog Posts Into a Mobile App Experience – Using Sticky Bars

With so much of your traffic coming from people’s phones, it’s essential that we start to craft exceptional mobile experiences. This means going beyond simple responsive design if you’re going to create a superior mobile UX (user experience) that stands out from your competition.

IMPORTANT: Use your phone to read this post – it’s designed as a mobile experience.

***Click here to show a mobile nav bar***. The concept here is to use a nav bar with icons, to turn this blog post into an app-like mobile user experience. Click the nav buttons to move up and down the blog post on your phone and you’ll get a sense of how the experience has changed from a regular blog post reading experience.

You can use this technique with landing pages, blog posts, or anywhere you want to create a mobile app experience.

For those reading on desktop, this is what you’ll see at the bottom of your mobile browser.


Why Do Landing Pages (and Your Blog) Need Good Mobile UX?

When a landing page or blog post is long, there will most likely be a small percentage of visitors who will actually read the whole thing. You can increase engagement, and make a better experience if you guide people to the most important chapters or segments of the content.

***Click here to show the mobile nav bar***.

To achieve this you can use a navigation bar with clearly labeled sections that are not only helpful but and also feels like you’re inside an app native to your phone.


Turning Your Landing Page into an App-Like Mobile Experience with Unbounce Sticky Bars – in 4 Simple Steps

I’ve set it up so there are 4 main sections in the blog post that you can navigate to using the sticky app nav. So go ahead and click the nav icons to jump to each of the four steps you can follow to add this experience to your own landing pages and blog posts.


Step #1 – Create a Sticky Bar With Retina-Grade Icons

I created a sticky bar with four icons. To make them retina I made them with a width of 160px and a height of 130px, and shrank them to 80×65 in the Unbounce builder. To do this, I added 4 boxes and set the background style to be “Image” and “Background to fit container”. Then I added a fully transparent button above each of the images (because boxes don’t have a link action) to link to each of the 4 page sections.


Step #2 – Add Anchor Links and Sections

You can do this by setting the link action of the icons to point to a page element ID. For instance, the horizontal rule (line) that appears above step #2, has an ID of “section2”. In Unbounce this looks like the settings below. Note that the target of the link is set to “Parent Frame” as the Sticky Bar is set in an iframe above the page.


Step #3 – Hide the Close Button with CSS

As with many hacks that I’ve come up with for Product Awareness Month, this one requires that we hide the “Close” button that is part of the Sticky Bar functionality. When your Sticky Bar is used for promotional purposes it’s important that people can close it. But when you’re creating a navigational experience, the bar becomes part of the interface, and we need it to be always present.

To do this, you need to add a line of CSS to the landing page or blog that you want it to appear on. Note: this is not an official Unbounce feature, so your best bet for geeking out with functionality will be in the Unbounce community.

.ub-emb-iframe-wrapper .ub-emb-close visibility: hidden;

Step #4 – Look at Your Phone and Say Hells Yeah!

I can’t state enough how much I think this is a better mobile experience, so please give it a try and join the conversation in the comments (or ping me on Twitter).

Cheers
Oli

Taken from – 

[Mobile] How to Turn Your Blog Posts Into a Mobile App Experience – Using Sticky Bars