Install this web app on your iPhone for free. Tap and then Add to Home Screen.

There is a new version of the App.

Accept

Designing Meaningful Notification Experiences

By Anna Potanina

Progressive Web Apps support push notifications on Android, with or without the user installing. Notifications bring great value for businesses: they increase repeated visits and consecutively sales and conversions. 

But, a poor notification experience can affect customer relationships. Asking users to sign up for web notifications when they first arrive will often have very low acceptance rates. 

Instead, wait until users understand the context and see benefit in receiving notifications before prompting for the permission. 

Note: Apps installed from Play automatically enroll users in web notifications. This includes PWAs published in Play using Trusted Web Activities.  

Asking for permission

An important part of the notification experience is notifications permission prompt. The best practices are similar to the install prompt.

Appear when appropriate

The ground rule here is not to ask users for permission to send notifications when they first visit the site. Ask for permission at the right moment, when notifications can bring value to the user. Use a pre-permission UI prompt and customize the copy, visuals and style.

Consider making the prompt discoverable throughout the site, however make sure not to interrupt the user and break the flow.  It is better to prompt when the user is either in browsing mode and not deep in a specific task, or when they have just completed a certain action (added product to favorites, completed the purchase, finished reading the page or finished the game).  

Also fix the notifications permissions prompt UI element in the side drawer or within the navigation header, so that it’s always available to the user without being interruptive.

Use a value proposition 

Customize the value proposition of notifications according to the context of the current page and actions that the user is completing there. For example: on a product page, the value proposition could be ‘get notified when this item is back in stock’.

pwa book
Example1: a good notification permission looks native to the UI, contains value proposition and visuals, and is presented at a contextually relevant time
pwa book
Example 2: One of the placements for notification opt-in and settings should always be available for the user, e.g. in the side menu to allow users to change or cancel the sign-up options

Sending Notifications

Every notification that is sent should be timely, precise and relevant. That means arriving in a moment when it matters to the user and showing specific information that is relevant to the specific user.

Every notification consists of three high-level elements. 

Copy - what the message says and how. 

  • The copy consists of the PWA name, message headline and message content 
  • The text has to be clear and concise and fit under 40 characters 
  • Do not duplicate the app name in the headline (it is already in the header)
  •  make sure all information displayed is relevant for the user

Visuals - PWA icon or other visual assets 

  • A PWA icon is a must have as it will visually inform the user which app is sending a message 
  • Sometimes an image can be added to visualize some other information of the core message: e.g. picture of the sender, photograph of the product that is back in stock, or a photo of a new banking card that has been ordered by the user 
  • The image and the icon should not duplicate each other 

Actions (optional) - what action the user can take. 

  • Here it is important to let users complete some of the actions based on the information received without opening the app 
  • Do not duplicate the actions that are already built into the Android notifications interaction system e.g. default actions “Tap-to-open” and “Dismiss” 
pwa book
Brain FoodVol 6