Ask for push notification opt-in properly. You have only one chance

Filip Rakowski
UX Collective
Published in
4 min readAug 22, 2018

--

Push Notifications are one of the greatest features available among Progressive Web Apps stack. Combined with Service Workers and Web Push they can reengage your users in a way that was previously available only for the native apps. But as we know from Spider-Man movies ‘with great power comes great responsibility’.

So how we can use such power properly? After spending countless hours on trying to figure it out in Vue Storefront I may have some answers ;)

Setting the goals

The first thing that we need to do is setting our goals. Without knowing what we are aiming for it’ll be hard to tell how to do it properly.

  • Obviously we want users to opt-in for Push Notifications
  • …but what we want more is to never allow them clicking ‘block’ in the subscription pop-up

As the first goal may be obvious to you it’s crucial to understand why the second one is even more important.

Once user declines subscription we can’t show the pop-up again. The only option to change the notification settings is digging into site preferences which is not what people usually do. Moreover there is no way to make it easier for the user to change his decision.

Soft vs hard opt-in

While the opt-in popup for Push Notification subscription looks always the same there are two common approaches for displaying them:

  • Hard opt-in happens when we are displaying subscription popup to the user right after he/she enters the website without any additional context.
  • Soft opt-in happens when the subscription pop-up is triggered by user action. We can usually see this approach being used by showing another popup describing why user should subscribe.

…and in most cases you should use the second one. Let’s see why ;)

Why it’s bad to use hard opt-in?

When native subscription pop — up appears to the user there are three possible scenarios:

  • User accepts the proposed subscription — obviously this is a desired state
  • User ignores pop-up. It’ll be shown again on the next visit
  • User declines subscription — worst possible scenario — at this point it’s almost impossible to ask him again.

By showing the subscription pop-up without any context we are hoping that user will trust us enough to subscribe. But why the hell should he trust a web app he just entered!? Asking people to blindly subscribe to Push Notifications is like taking a candy from stranger — it’s risky and people tend to avoid it. With hard opt-ins we are literally asking people if they are brave enough to subscribe instead of telling them why it’s beneficial for them.

With soft opt-ins on the other hand we are gently informing people about possibility to opt-in exactly in the way that we want instead of just showing the pop-up without a context. We can tell the users why it’s beneficial to subscribe and try to convince them. Stats shows that this approach is much more appreciated. For example, the NHL grew its opt-in rate nearly 10 percent since implementing a customized screen before the default one. What is more important if one declines on such opt-in we can show it again after some time.

How to make good soft opt-in

Good subscription opt-in is all about the right context. Before making a decision user should know two things:

  • why exactly he/she should subscribe and why it’s beneficial
  • what type of messages will he/she receive

There are few ways of achieving this goals but two of them are most common:

  • Show opt-in banner to the user right after he/she enters the website. In opposite to hard opt-in instead of just showing a pop-up without any useful information we can provide a details to the user. ‘Hey, do you want to receive discount coupons from time to time?’ is much more descriptive than default ‘Show notifications’.
Soft opt-in example from clio with all the information user should be provided with before making a. decision
  • Show opt-in banner as a response to action performed by the user. For example you can display it in eCommerce store after a purchase to notify user with order status updates. Another example: In Vue Storefront we have possibility to place orders while user is offline. Once he/she comes back online a notification asking for order confirmation arrives.
example from https://demo.vuestorefront.io

Summary

Convincing users to subscribe for Push Notifications will always be hard. While we can’t always achieve this goal immediately it’s important to at least leave a possibility to try in the future. With soft opt-ins we have much more control over this process and we can tell the users why it’s beneficial for them or find a right moment to ask for a permission.

--

--

Co-founder @ Vue Storefront / Frontend Developer @ Divante | Twitter @filrakowski