How to develop the best notifications

When building a notification component, you need to think ahead to what that might mean as the product grows or as new notification features are requested.

Why you don’t want to build a fully custom solution

We’ve already discussed the build vs. buy conversation, but we’ll reiterate that unless your core business is notifications, building and maintaining a fully custom solution is a big hassle.

In a nutshell

Third-party tools will give you options to integrate a variety of SDKs and setups. If you change your tech stack down the road, there might be some time-consuming tasks with overhauling some or all of the notification system. But doing so with a third-party tool won’t be as bad as overhauling a custom-built solution.

Looking beyond the limitations of various APIs and browser compatibility, the time suck of building a notification system can’t be overlooked. A very basic notification system might not seem like a big ask, but as notifications become a successful strategy for the product, the notification structure will have to grow.

Beyond a basic notification system, requests for segmentation, translations, managing subscriptions, and A/B testing will eat up your time. A notification system is likely to be a never-ending project, and it’s a huge ask for a team whose main focus is not notifications.

Improving core features and writing new features that move the core business forward should be what you focus your time on as a developer. With a third-party notification solution, you can offload a lot of the behind-the-scenes work to non-devs through GUIs.

Marketing teams can take control over segmentation and tags, so you don’t have to stop what you’re doing to update the notification system with every new request.

Data from The New Stack shows developers spend only 32% of their time improving on or writing new features.

Toast Notifications

A popular notification is a toast message, that little notification that pops up on your screen that lets you know your attention is needed. Let’s look at some considerations when developing toast notifications for your product.

Custom notification types

This is another obvious but important feature. Choose between a default notification style, or implement color-formatting notifications for information, success, warnings, and errors (blue, green, yellow, red respectively). You could even build in support for dark mode!

Position on screen

This is an obvious one — top or bottom on the left, right, or center. Where you place your notifications for maximum visibility and to ensure high engagement rates will depend on your product and your users’ habits. If this data isn’t available to you, consider creating a tracking plan to start gathering data about how users respond to your notifications (this rings true for all choices you make regarding notification design).

Auto-close with timing and transitions and Swipe to close:

There are multiple options for dismissing notifications, including auto-close with a timer you can customize or have pause on user hover. You can also build a classic swipe/drag to close or a straightforward click to close option. These should be consistent across web and mobile.

Right-to-left text support:

If your market includes those who speak languages that are written right to left, think about building support for RTL text. If your product currently only supports one left-to-right language, having right-to-left text support for future growth is always a good thing. We love inclusion.

Custom Animations:

Build out custom animations for when a toast needs to slide in or out of view. While they shouldn’t be distracting, they can still be fun.

Beyond the component: scaling considerations

The reality is the work doesn’t just end with the visible notification component. Personalized content, collection of user data, tracking requests, and security might need to be a part of the full solution. Let’s take a look at some of the considerations beyond the basic UI and functionality of a notification component.

Incorporating user data

A report from SmarterHQ shares that even though users are wary of how much data is collected about them, 90% of people are willing to share data to create an “easier brand experience.” This data can be used to personalize notifications, which can lead to increased engagement.

Segmenting notifications

One step beyond basic personalization is sending notifications to user groups based on engagement trends. Well-timed notifications can have a 7x increase in user retention. Because segmenting has such a positive return on user engagement, it’s likely that this feature will be requested in a custom notification build.

Gathering data through tracking

Last-minute tracking requests in any feature can be a headache, and notification components are no exception. Some level of tracking is likely to be requested to gauge interaction rates. This could range from logging how many users close out a notification versus engage with the notification to more advanced tracking on forms. Setting up a reliable tracking system will be imperative to gauging the success of notifications to the goal.

Testing

A very basic notification component might only need UI and simple functionality testing. But complex notification systems will need more, especially if you’re gathering user data or sending off tracker results. Testing can often be at the bottom of a priority list when it comes to building out features on deadlines, but when you’re dealing with data, testing should be higher on the list.

Developing for accessibility

While we touched a lot on accessibility in the design section, developers also need to take active steps implementing accessible design.

Navigation

Ever tried to navigate a website without a mouse or trackpad, using only the keyboard instead? Or tried to navigate a mobile device with accessibility settings turned on? If so, you might know that without a mouse or trackpad, you need to navigate a website in alternative ways, like with a keyboard.

Without proper code architecture, this can pose problems for app accessibility in notification systems, which rely on pop-ups and badges to alert users and identify an element that needs attention.

A tab index order is something for developers to be aware of—it’s what makes elements on a website selectable without the use of a mouse or trackpad. Websites and apps need to have a proper structure to navigate around and find elements, like menu options and notification inboxes.

Depending on the complexity of a website’s structure, the tab index order can get botched. This means that elements could be out of order or missed completely when using the tab key. Elements like pop-ups, modals, or toasts need to interrupt that order and be easily tab-able by the user no matter where they are focused on the site.

The tab index order is important because, on top of helping non-mouse users navigate, it tells screen readers what needs to be read aloud. If things are focused out of order, the messaging gets mixed up or missed.

For example, if a user hears a notification sound, they expect to be able to tab right to that notification. If the next thing they hear isn’t the notification’s content, it could be a very confusing user experience.

And the order of the content isn’t the only thing to watch out for here. The timing of the content also needs to be taken into account. A toast notification (or pop-up modal) will typically have a preview of the full message, usually in text format. These are often displayed quickly and disappear after a few seconds. To address app accessibility, notifications need to remain on-screen long enough for users to absorb or interact with the content, regardless of whether they use a mouse or keyboard.

More overlap with design considerations here! Adding alt text attributes to elements is something you will have to incorporate into the code. This alternate text gives users essential information in the case that media doesn’t load. Plus, it provides a way for those who can’t rely on sight to receive a message by reading the alt text with screen readers.

Failure to load

More overlap with design considerations here! Adding alt text attributes to elements is something you will have to incorporate into the code. This alternate text gives users essential information in the case that media doesn’t load. Plus, it provides a way for those who can’t rely on sight to receive a message by reading the alt text with screen readers.

A/B Testing for Success

Have an A/B testing environment set up with your notification system — this can help you make informed decisions when sending in segments, or for future design decisions. If you need to notify every user about an update they need to do, a strategy for these notifications might be to segment your users and run A/B tests on the first batch.

If you need people to click the CTA and update their app, test a different set of CTA copy. Whichever notification receives a high click-through rate, chose that one to send to the rest of the user segments.

Want to test all the knowledge you just got?