Designing the perfect notification UX

Notifications are all around us on the web and on mobile. Originally intended to help our user experience and usability in general, that’s not always been the case in practice since notifications can quickly become an annoyance if they’re designed poorly or not managed properly.

From desktop-based notifications to the notifications you can toggle on and off on your mobile apps, these alerts are all around us today. Thanks to their prevalence, it’s easy to take their design for granted, which usually leads to unsatisfactory UX.

What makes a notification design good? When and where should a specific notification appear?

UNOBTRUSIVENESS

There’s a fine line between notifications that serve their purpose and help users with timely alerts and reminders, and notifications that are nothing more than distractions because of how they make their way onto a user’s screen. Designers need to know what this fine line is so they can always stay on the UX-friendly side of it.

Notifications should always be as unobtrusive as possible. They shouldn’t interfere with what task the user needs to accomplish at any time, yet they should obviously still achieve their intended purpose of letting users know of something important that’s coming up.

On my Mac, for example, OS X is the OS that decides how my calendar app will notify me of important events. I never have my calendar open as with other, more heavily used applications and programs, so the calendar has to find a way to get my attention while still promoting great usability.

When your event gets nearer, my calendar sends me small notifications that slide in at the top right of my screen. Although they’re small, I’ll always see them because the movement catches my eye, and their small size means that they’ll never obstruct what I’m doing. In short, these unobtrusive notifications from my calendar are wonderful because they fulfill their purpose without being a hassle to my UX.

LOCATION-BASED RELEVANCE

One of the hallmarks of excellent usability is pushing relevant notifications to users, particularly when they’re out and about. Smartphones today are so under siege by a plethora of notifications, but not all of them are designed with the user in mind, unfortunately.

Location-based notifications provide a very helpful benefit because of their relevance to where users are in the moment. If an app has properly gathered information from its users, it should already know the user’s likes and dislikes and can therefore push relevant notifications. For instance, when it comes to retail apps, one of the most favorite activities people do on those apps is create shopping and wish lists. This info is a goldmine for the app’s administrators because they can see exactly what’s relevant to a user and what’s not.

If an app has properly gathered information from its users, it should already know the user’s likes and dislikes

Location-based relevance means sending your users notifications when they’re able to take action on a specific purchase because they’re geographically near the actual store.

In the case of, let’s say the Target app, it’s indescribably helpful to design notifications to ping the user when they’re close to a Target store and using info culled from their in-app shopping lists. If there’s a sale on detergent, and the app knows that detergent just happens to be on the user’s shopping list for the week, a notification should be pushed to user when they’re near an actual Target.

LAST-CHANCE CONFIRMATION MESSAGES

There’s nothing more annoying than accidentally deleting an app, which usually destroys all of the information and data inside of it that you’ve worked hard to accumulate over time. Whether it’s your social-media or cloud-storage apps, not having vital data around anymore all because of an accidental tap on your smartphone is frustrating and hard to take.

That’s exactly why notifications that act as confirmation messages should make completely clear what’s being deleted before it’s actually deleted. These popup boxes should have the following characteristics:

• be big enough to fill the screen width wise so that users can’t easily overlook them;
• ask a short question of the user that forces them to make a decision;
• use simple and to-the-point language to communicate what action is being considered;
• use a bolded headline to catch the user’s attention;
• feature call to action buttons that are clearly marked and have a distinct color.

NUMERICAL VALUES

When we quantify something, it usually gets easier for us to process and handle the task because it allows us to analyze how much personal investment of time we have to put into it. Numbers also help us to prioritize whether or not we want to take on a certain task at the moment. Measurable things are therefore helpful to usability because they allow us to make better decisions.

Notifications that contain numbers allow us to manage our workflows more efficiently

Notifications that contain numbers allow us to manage our workflows more efficiently. When we see a badge, an alert or just an icon that updates us that we have one notification to deal with, we’re likelier to deal with it right at that moment because it implies little work. Looking at one update will take us a conceivably shorter period of time than five updates.

At the same time, an alert that communicates that we have several notifications will be something that we’re likelier to put off until we think we can free up more time to adequately handle that load of work.

Google’s notifications system routinely uses numbers to update you on how many alerts you have to deal with at a given time, thereby quantifying how much work you’ll likely have to do if you check said alerts. This gives users more control over their time management.

USABILITY SHOULD BE JOB ONE

It’s too easy for designers to get caught up in designing notifications for the sake of designing notifications. It seems like almost every single app out there is replete with alerts and notification features.

The biggest job for designers is deciding what notification should ultimately find its way to the end user since not all info is obviously going to be essential to the user. When the notification has a direct impact on the user’s UX, then it has to be pushed to the user, otherwise it probably doesn’t need to be shown.

Web technologies that (thankfully) died

Hard as it is to believe, it’s been over 20 years since the World Wide Web has become a mainstream part of our collective culture. It has played a major part in changing how we communicate and how we work. There aren’t many aspects of our lives that haven’t been changed by the web and its seemingly limitless collection of information.

As for designers, we’re certainly thankful for the role the web has played in our lives. It has provided us with a means to make a good living, after all.

But, the web can be a very trend-obsessed place, especially when it comes to technology. It has always been difficult to keep up with all the latest must-have bells and whistles that clients are asking for (even if they weren’t so great). The past is littered with examples of gimmicky “features” that we implemented and limited technologies we’ve had to work around.

Here are a few of those items that were once all the rage. In hindsight, they turned out to be clunky technologies that were once a necessary part of our job. While you might still find a few examples of them in the wild, they are rapidly becoming extinct.

PROPRIETARY CODE AND FORMATS

Back in the 1990’s, as use of the web was rapidly growing, companies were aiming to create websites that were more entertaining and consumer-friendly. There were a plethora of new browser plugins and companion software that allowed for this. What stood out, though, was that a lack of standards meant most of this technology was closed and proprietary.

MICROSOFT LOOKS TO WIN THE BROWSER WARS

When Microsoft Internet Explorer launched back in August of 1995, its main competitor was the upstart Netscape Navigator. The software giant from Washington State was looking to put Netscape out of business and dominate the market share for browsers.

Among their many ideas was to create proprietary, non-standard HTML that would work only in IE. That led to sites that could look radically different in other browsers. As it turned out, many designers weren’t keen on using code that rendered their site useless (or just plain ugly) for a significant chunk of users.

MULTIMEDIA CHOICES

Both video and audio formats used to be a complete mess. Well before HTML5 standards allowed browsers to handle multimedia on their own, there were a bevy of proprietary formats and software needed to watch or listen to anything.

Setting up a site with any of this content meant you had to choose between competing formats. Plugins for QuickTime, RealAudio/RealVideo, and Windows Media Player were among the most-used. And, of course, they were in no way compatible with each other. So whichever formats you posted to a site, the end user had to have compatible software installed to access the content. What’s worse, using the RealAudio/RealVideo platform meant you’d have to install a server-side software package to enable multiple, simultaneous streams. This made live events quite costly.

Much of this also came at a time when broadband connections weren’t so common. While software companies boasted about their product’s ability to work well with very little bandwidth, the quality of streaming media was generally poor. Videos were tiny and pixelated, while audio (especially live streaming audio) sounded on par with a cheap AM radio.

Interesting side note: My first ever online purchase was for the “premium” version of the RealPlayer. It promised the use of high-end codecs that improved the quality of streaming content. That said, I didn’t notice any improvement. Maybe that 56k modem had something to do with it…

FLASH

I know, Flash is still used a bit for video. But there was a time when Flash was the go-to platform for interactive media and animation. Just about any site that wanted animation, games, audio or video players would use the format.

Flash, in general, had a couple of fatal flaws:

1. Flash content was expensive and time-consuming to create

If you wanted to create original Flash content, you needed to buy an expensive software package (first from the original maker, Macromedia, then Adobe). It was several hundred dollars and had regular upgrades that weren’t so cheap, either.

The software itself was quite powerful. But it also featured a fairly steep learning curve. You needed a good bit of patience to create content because it could be a very long and drawn-out process. Simple animations that may have run in a user’s browser for 10 seconds may have taken a couple of hours to create.

Many a designer said a nasty word or two under their breath whenever a client requested some Flash content.

2. Flash was often relied upon too heavily

Remember the Flash intro? How about sites that were built entirely in Flash? Don’t get me wrong, there were some marvellously creative implementations of the format. But, in the wrong hands, it became a completely user-unfriendly way to create a website.

It almost became a way to dictate to users exactly what you wanted them to do, rather than letting them decide for themselves. Looking back, fatal flaw #1 probably led to #2. Designers knew they could charge a good bit of money for Flash development and so they sold it… often.

Flash eventually took on a new life as the preferred video platform for YouTube. However, Apple’s famous stance of not allowing Flash to run on iOS devices made that comeback rather short-lived. The Flash software’s legacy still lives on in the form ofAdobe Animate CC.

LARGE STATIC SITES

Back in the day, a content management system (CMS) was something often custom built for a large corporation. That meant a lot of websites were built using good old-fashioned HTML. And, it could get awfully difficult to maintain.

Thanks to open source CMS like WordPress, Joomla! and Drupal, we can take a lot of things for granted. Humor me as I take you through a couple of mundane things we do each day that used to be a true pain with a static website.

POSTING A NEWS ARTICLE

On a static site you would create a new HTML document using the proper template and add your content. Then, you had to manually add a link to the article in an index page or other listing. If you wanted this article to appear in a sidebar, you might have had to open up a server-side include file and add a link there as well. And don’t forget to upload these changes to the server.

With a CMS, you just add the new content.

CREATING A PHOTO GALLERY

These were so much fun! Let’s say you needed to create a gallery with 100 photos. You would crop and optimize the photos with an image editor (full sized and thumbnail versions), setup an HTML layout (most likely using a table) for the gallery page. Then, you had to either implement a rudimentary script to link thumbnails to full size photos, or create new pages for each photo.

Of course, a good CMS plugin can do all of these things for you while you’re in the next room drinking coffee. Automation is a beautiful thing!

LEST WE FORGET

While the web technologies of yesteryear were often cumbersome, they were also very important precursors to what we have today. If not for the pain points caused by so many proprietary media formats, we may not have the goodness that is HTML5 or other W3C standards in general. The backlash against Flash certainly helped shepherd in the widespread use of minimal design. And the lack of automation from static sites led to the development and democratization of the open source CMS.

Even though the old tech died out (or is really close to it), at least we can say that its existence made things better for us all. The progress we enjoy simply wouldn’t have been possible without them.

MasterCard unveils its first rebrand in 20 years

MasterCard’s logo is almost universally recognized because it’s remained unchanged for 20 years. The interlocking twin circles (one red and the other yellow) with the wordmark “MasterCard” prominently displayed on top has greeted its credit card holders around the world for decades. You might even say that this logo was ubiquitous in financial and consumer circles.

Now, MasterCard has unveiled its new logo, which was created to make it easier for the company to brand itself consistently across all of its interests, including digital and the web. Interestingly, the redesign isn’t much of a stark departure from what’s worked for the company, namely the intersecting circles. Subtle changes have been added to the logo, but these subtle changes have created a huge impact on the company’s product line, as it’s now easier than ever for people to identify the brand planet-wide.

In the old design, the logo featured interlocking circles that created a venn diagram where the circles overlapped. Here, the red and yellow circles looked like teeth on a zipper as there were bars of red and yellow in the middle. The MasterCard wordmark was imposed on top of the circles, with uppercase and lowercase text in addition to a drop shadow that fell on the circles.

The new logo design espouses smart minimalism by taking all of the old design’s elements and simplifying it that much further to create a logo that has fewer elements for its partner banks (which issue its cards) to use in confusing cross-branding.

Instead of the red-and-yellow comb effect in the center of the circles, we know see the true result of red and yellow mixing, which is the color orange. The wordmark “MasterCard” has been entirely kicked out of the circles and now appears underneath them.

The wordmark also features a new typeface, FF Mark. The most notable change is that every letter in the new wordmark is now lowercase while also sporting circular curves that the old wordmark couldn’t accommodate. It’s also gone from white to black.

The design company that worked on this update, Pentagram, was thankful that it already had much to work with before they began the redesign. The old logo already featured one of the simplest and easiest geometric shapes with which to work, not to mention two of the three primary colors. As a result, Pentagram didn’t really perform a complete overhaul, but, rather, a simple design tweak that updated the logo to today’s branding needs.

The new logo is anything but excessively clever or instantly eye-catching. Instead, it’s a safe and effective transition from a tested design to one that’s complementary to an evolving brand identity.