Category Archives: Conversion Rate Optimization

Air Lookout Is The Side Project That Changed My Design Process Forever

In February of 2015, I began working on an iOS app called Air Lookout. The goal of the app was to simplify and remove any obfuscation of air quality information. After over a year of working nights and weekends, the total net income since it launched in 2016 has been less than $1,000. Even with those numbers, I would relive every hour of work.
The one thing that I can’t place a monetary value on is how the experience of creating Air Lookout has completely changed my mind on the process of design and development for every project I have worked on since.

Link to article – 

Air Lookout Is The Side Project That Changed My Design Process Forever

Universal Principles Of User Experience Design

(This is a sponsored article.) As designers working in an ever-changing field, it’s important that we develop an understanding of the timeless design principles that underpin everything we do. In the second article in my series for Adobe XD, I’ll explore the foundations that enable us to establish some universal principles of UX.
These principles, which should sit at the heart of everything we design and build, are critical and will stand the test of time:

Source article:  

Universal Principles Of User Experience Design

What is Keyword Cannibalization?

glossary keyword cannibalization

Keyword cannibalization is what happens when you have multiple pages on your website that all target the same keyword. When more than one page is designed to rank for one particular keyword, you end up competing with yourself. As a result, each page ends up with diminished authority, a lower click-through rate and even lower conversion rates than you’d achieve from having just one target page. Cannibalizing Your Content To put it simply, keyword cannibalization is the act of splitting clickthrough-rate (CTR), links and conversions between two pages that should either be merged together or should be targeting different keywords….

The post What is Keyword Cannibalization? appeared first on The Daily Egg.

Continue reading here: 

What is Keyword Cannibalization?

Learning Elm From A Drum Sequencer (Part 1)

If you’re a front-end developer following the evolution of single page applications (SPA), it’s likely you’ve heard of Elm, the functional language that inspired Redux. If you haven’t, it’s a compile-to-JavaScript language comparable with SPA projects like React, Angular, and Vue.
Like those, it manages state changes through its virtual dom aiming to make the code more maintainable and performant. It focuses on developer happiness, high-quality tooling, and simple, repeatable patterns.

See the article here: 

Learning Elm From A Drum Sequencer (Part 1)

“Maybe Later” – A New Interaction Model for Ecommerce Entrance Popups

I’d guess that over half of the e-commerce stores I visit use entrance popups to advertise their current deal. Most often it’s a discount.

What is an Entrance Popup and What’s Wrong With Them?

They are as they sound. A popup that appears as soon as you arrive on the site. They’re definitely the most interruptive of all popups because you’ve not even had a chance to look around.

I get why they are used though because they work really well at one thing – letting you know that an offer exists, and what it is. And given high levels of competition for online dollars, it makes sense why they would be so prolific.

The intrusion isn’t the only point of frustration. There’s also the scenario where you arrive on a site, see an offer appear, you find it interesting and potentially very valuable (who doesn’t want 50% off?), but you want to do some actual looking around – the shopping part – before thinking about the offer. And when you’re forced to close the popup in order to continue, it’s frustrating because you want the offer! You just don’t want it right now.

So, given the fact that they are so common, and they’re not going anywhere anytime soon, and they create these points of frustration, I’ve been working on developing a few alternative ways to solve the same problem.

The one I want to share with you today is called “Maybe Later”.

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

As you saw in the header image, instead of the now classic YES/NO popup – the one that gets abused by shady marketers (Technology isn’t the Problem, We Are.) – “Maybe Later” includes a third option called, you guessed it!

The middle option gives some control back to the shopper.

It’s more than just a third button, here’s how it works (I’ll refer to the sketch opposite):

  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.


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


Visual Hierarchy on Popup Buttons

When you have more than a single button, it’s important to establish visual design cues to indicate how the hierarchical dominance plays out. For you as a marketer, the most important of the three buttons is YES, MAYBE LATER is second, and NO is the least.

You can create a better user experience for your visitors by using the correct visual hierarchy and affordance when it comes to button design. In the image below, there is a progression of visual dominance from left to right (which is the correct direction – in Western society). Left is considered a backward step (in online interaction design terms), and right is a progression to the goal.

From left to right we see:

  • The NO button: is designed as a ghost button which has the least affordance and weight of the three.
  • The MAYBE LATER button: gains some solidity by increasing the opacity
  • The YES button: has a fully opaque design represented by the primary call to action colour of the theme.

You can achieve a similar level of dominance by making the secondary action a link instead of a button, which is a great visual hierarchy design technique. What I don’t like is when people do this, but they make the “No thanks” link really tiny. If you’re going to provide an option, do it with a little dignity and make it easy to see and click.

See the “Maybe Later” Popup-to-Sticky-Bar Model in Action

Alrighty, demo time! I have a few instructions for you to follow to see it in action. I didn’t load the popup on this page as it’s supposed to be an entrance popup and I needed to set the scene first. But I’ll use some trickery to make it happen for you.

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

Please note: this is desktop only. Reason being is that Google dislikes entrance popups on mobile. Sticky Bars are the Google-friendly way to present promos on mobile, so they work, but the combo isn’t appropriate.

  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

Here’s the entrance Popup you will see:

Maybe Later - A New  interaction model for ecommerce entrance popups

And the Sticky Bar you will see following that:

How to Use “Maybe Later” on Your Website

If you’d like to give it a try, follow the instructions below in your Unbounce account. (You should sign up for Unbounce if you haven’t already: you get Landing Pages, Popups, and Sticky Bars all in the same builder).

You can also see what Popups and Sticky Bars look like on your website by entering your URL on our new Live Preview Tool.

“Maybe Later” Setup Instructions

Caveat: This is not an official Unbounce feature, and as such is not technically supported. But it is damn cool. And if enough people scream really hard, maybe I’ll be able to persuade the product team to add it to the list. And please talk to a developer before trying this in a production environment.

Step 1: Create a Popup in Unbounce

Step 2: Add “Maybe Later” Script to the Popup

In the “Javascripts” window located in the bottom-left.

Add the following script “Before the body end tag”, replacing “lp-pom-button-50” with the id of your “Maybe Later” button, and unbounce.com with your own domain.

document.getElementById("lp-pom-button-50").onclick = function() 
parent.postMessage(JSON.stringify('later'), 'https://unbounce.com');

Step 3: Set URL Targeting on Popup

Set up the URL targeting for where you want the popup to appear. I chose the post you’re reading right now (with a ?demo extension so it would only fire when I sent you to that URL).

Step 4: Set Cookie Targeting on Popup

Set up the cookie targeting to “Not show” when the “Maybe Later” cookie is present. The cookie is set when the button is clicked. (You’ll see how in step 9).

Step 5: Create a Sticky Bar in Unbounce

Step 6: Add “Maybe Later” Script to the Sticky Bar

Add the following script “Before the body end tag”, replacing “lp-pom-button-45” with the id of your “No Thanks” button, and unbounce.com with your own domain.

document.getElementById("lp-pom-button-45").onclick = function() 
parent.postMessage(JSON.stringify('laterForget'), 'https://unbounce.com');

Step 7: Set URL Targeting on Sticky Bar

Set up the URL targeting for where you want the Sticky Bar to appear. This might be every page on your e-commerce site, or in my case just this post and another for testing.

Step 8: Set Cookie Targeting on Sticky Bar

Set the Trigger to “Arrival”, Frequency to “Every Visit”, and Cookie Targeting to show when the cookie we’re using is set. (You’ll see how it’s set in the next step).

Step 9: Add “Maybe Later” Code to Your Website

This is some code that allows the Popup and Sticky Bar to “talk” to its host page and set/delete the cookie.

// On receiving message from the popup set a cookie
window.onload = function() 
function receiveMessage(e) 
var eventData = JSON.parse(e.data);
// Check for the later message
if (eventData === 'later') 
document.cookie = "mlshowSticky=true; expires=Thu, 11 May 2019 12:00:00 UTC; path=/";

if (eventData === 'laterForget') 
document.cookie = "mlshowSticky=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

}
// Listen for the message from the host page
window.addEventListener('message', receiveMessage);
}

Step 10: Enjoy Being Awesome

That’s all, folks!


What Do You Think?

I’d love to know what you think about this idea in the comments, so please jump in with your thoughts and ideas.

Later (maybe),
Oli

p.s. Don’t forget to see what Popups and Sticky Bars look like on your website with the new Live Preview Tool

View original: 

“Maybe Later” – A New Interaction Model for Ecommerce Entrance Popups

Designing Friction For A Better User Experience

In experience design, friction is anything that prevents users from accomplishing their goals or getting things done. It’s the newsletter signup overlay covering the actual content, the difficult wording on a landing page, or the needless optional questions in a checkout flow. It’s the opposite of intuitive and effortless, the opposite of “Don’t make me think.”
Having said that, friction can still be a good thing sometimes. In game design, for example, friction is actually required.

Credit:

Designing Friction For A Better User Experience

Why are You Neglecting the Highest-Traffic Lowest-Converting Page on Your Website?

I’m not talking about your home page. Sure that gets the most traffic, but notice the qualifier in the post title; highest-traffic “lowest-converting”.

But why would you care about a low converting page? Because chances are, it’s not converting because you forgot to add a call to action (CTA).

I’m sure you know about some pages like this on your website, but you’re using one of the following excuses to do nothing about it:

  1. I don’t have the bandwidth to deal with it.
  2. It’s not my responsibility.
  3. I don’t know what to do with it.
  4. I’ll get to it later.

The last excuse is the absolute worst. Because you never will “get to it”.

It’s 2018 – Stop Wasting Time Ignoring This Page

Don’t start this year with yet another failed attempt to go to the gym. Commit one day to optimizing just one page.

For Unbounce, that page is “What is a landing page?“. We’ve held the #1 spot in Google for this term since early 2010, and guess what? We haven’t updated it since early 2010.

Every time we look at Google Analytics, we see this:

10,000 unique visitors every month to that page. And 84.15% of them are NEW visitors. That’s an incredible amount of value.

What does the page look like?

It was embarrassing, to say the least. Spoiler alert I updated it last night. But here’s a screenshot of the abomination that was our previous 8 years of letting visitors down.

A few observations

  • The content is ancient, and has a lot of useless information. Some of which is fundamentally wrong.
  • The CSS is all broken making the layout and reading experience terrible.
  • It links to a bad blog post I wrote in 2010 that has a photo of Miley Cyrus wearing a carrot costume.

You read that right. Miley Cyrus in a carrot costume is the call to action on the highest traffic page on our website (aside from our homepage). #facepalm

How to Convert Top-of-Funnel (TOFU) Traffic

“What is a Landing Page?” is the most TOFU page on our website, which means we need to choose carefully when we ask people to do something.

I decided to go with three options in a choose-your-own-adventure format, as a learning exercise so we can study what these visitors are actually looking for.

Option 1: “I’m new to landing pages, and want to learn more.”
CTA >> [ Watch The Landing Page Sessions Video Series ]

Option 2: “I have a landing page, but I’m not sure how good it is.”
CTA >> [ Grade Your Page With The Landing Page Analyzer ]

Option 3: “I need to build a landing page.”
CTA >> [ Try The Unbounce Builder in Preview Mode ]

The New “What is a…” Page

(Click to see the full-length page in a scrolling lightbox.)

High-Traffic, Yes. High-Converting? We’ll see.

I’ll be looking at the analytics (Hotjar click and scroll heatmaps), Google Analytics (changes in basic behavior), KISS Metrics (changes in signups), and I’ll report back with the results later in Product Awareness Month.

Find your highest-traffic lowest-converting page, now

Do it.

Cheers
Oli Gardner

p.s.

Originally posted here: 

Why are You Neglecting the Highest-Traffic Lowest-Converting Page on Your Website?

Designing for Subscription: 6 UX Musts for Increasing Sign Ups

Your music is being streamed on all your devices with Apple Music and your favorite shows find a home at Netflix. Your physical store can accept payments via your Shopify subscription and now you can even get your basics like underwear or healthy food delivered to you through services like Stance and Graze respectively. Subscription services are not just the future of e-commerce anymore. They are very much the present. Subscription services are great for consumers as they get to experience much more content than they do with one-off purchases (think entire music libraries instead of a single album). They…

The post Designing for Subscription: 6 UX Musts for Increasing Sign Ups appeared first on The Daily Egg.

Original article:

Designing for Subscription: 6 UX Musts for Increasing Sign Ups

Visual Studio Code Can Do That?

About two years ago, I begrudgingly opened Visual Studio Code (VS Code) for the first time. The only reason I even did so is that I was working on a TypeScript project (also quite begrudgingly) and I was tired of fighting with the editor and the compiler and all of the settings that I needed to make a TypeScript project work. Someone mentioned to me that TypeScript “just works” in VS Code and I was pleasantly surprised to find that they were right.

View this article:

Visual Studio Code Can Do That?

9 marketing trends you should track in 2018

“Growth marketing” has become mainstream. Experimentation is revolutionizing organizational culture and breaking down internal silos. Testing is bridging sales, marketing,…Read blog postabout:9 marketing trends you should track in 2018

The post 9 marketing trends you should track in 2018 appeared first on WiderFunnel Conversion Optimization.

More:

9 marketing trends you should track in 2018