The whole story started when Sagi Shrieber, a UI designer, was talking on the phone with his wife about the list of groceries that he has to buy, while having other conversation using whatsapp. Suddenly a notification banner appeared on the screen right at the moment he was trying to edit some shopping list:

Regular alert banners in iOS

Next, Sagi tried to close the banner and accidentally tapped the banner and found himself inside WhatsApp. He was dropped out from the shopping list app, having missed his wife’s requests on the shopping list. So, what did he get in the end: an angry wife, an unintentionally opened WhatsApp and wasted time. When Saggy had arrived home, he tried to sketch a few ideas on how to improve the whole push-notifications system which caused the previously described inconveniences.

sketches of new notification center

Here are some of the sketches that he came up with:

the alternative banner notifications


So what is the problem with push-notifications on iOS?

Let's start from the basics. There are 2 types of notifications:

  • Alerts (popup windows)
  • Banner notifications

standard types of alerts on iOS

Sagi believes that the usual interaction with the notifications on the device looks like: “Drop anything you are doing now or you wouldn’t be able to do anything else”. The situation hasn’t dramatically changed since the first iPhone.

Here is how the popup windows look like now

common iOS alert

No matter what you are doing with your phone at the moment, they are popping up in front of your eyes and you practically don’t get any choice but to interact with the notification immediately either by closing the message or by going to the app which is the source of the alert.

A simple solution for popup window alerts

What if there was a small line for an immediate reply:

alternative alert

A similar solution already can be found on different Android devices as well as Jailbreaked iOS devices. Though there are a few other drawbacks that were outlined by the author.

Banner notifications

What’s good about them: Our interaction with our smart device would be quite confusing without such alerts. If we consider the environment of our device which includes endless conatcs, e-mails, messengers and other means of communicates. Having such notifications helps postpone the certain activities or react immediately to other types of activities which are of more priority for you at the moment by opening the corresponding app.

What’s bad about them: Swiping your finger on the banner does not always work flawlessly. That is why, sometimes when we want to postpone the response to some alert, we are unwillingly starting up the app that we don’t need at the given moment. Also, the elements of this workflow with notifications are usually placed in the upper part of the screen (according to the UI recommendations of Apple. It is also one of the key global trends in mobile UI/UX). And this is not the always the best solution.

So, it turns out that, having a number of e-mail clients, messenger apps, social media apps and other means of communications, complicates our interaction with the mobile device’s banner notifications. The main reason for this is that sometimes we unwillingly open the apps that we really want to ignore.

The Solution:

  • Notifications under the upper line in order not to confuse different windows, control panel in the upper side of the screen and popup messages
  • An increase in the sensory field to make it more convenient to point and swipe the banner with fingers
  • An ability to swipe the alert down without tapping it

The solution would look somehow like this:

the new solution for push-notifications

This is how the whole interaction scheme should look like according to the author.

The Sliding Notification:

alternate swipe option

Swipe the banner with your finger to the bottom if you need to respond to the message.

slide down to open

Swiping the finger up closes the banner and we continue to work with the application that is currently running.

swipe up to close

And one more thing

In order to efficiently concentrate on the current moment, and not to digress to the never-ending stream of notifications, Sagi proposes to remove the unwanted alerts. He believes that instead of having the regular banners, it would be much more convenient to have a new hybrid type of notifications called “Zen notifications”.

zen notifications

The concept is quite simple and looks efficient.

How to use Zen Notifications?

- Hold the bubble - get a preview of the message

- Swipe the bubble right - opens the application

hold alert to instantly reply

- Swipe left to close the notification

swipe alert left to close

So what does all this mean for UI/UX designers and developers?

Well, nothing special really. The thing is that it is most unlikely that Apple will be introducing any changes to the workflow of the notification center. Though this concept caught our eye as it really seems to make sense.

the improved push notifications

The overall concept is quite interesting, though it conflicts with Apple’s HIGs in some parts. We definitely give credit to Sagi Shrieber for taking the time and effort to come up with this design. Feel free to comment what you think about this concept in the section below

by Dmytro Bilkun