Why iOS notifications are ruining my marriage (and some UX solutions)
Will iOS Notifications ever make the leap out of the stone age? And what can we do RIGHT NOW as designers to ease the experience of our users?
A note before we begin: This post was originally posted on my blog — Hacking UI, and one of the tweets about it was — “I cant believe this wasn’t posted on Medium” so that’s why I posted it here (with a few tweaks in article itself). Enjoy!
The other day I was in a taxi on my way to a meeting and Whatsapping with my wife while doing some Homebudget work on my iPhone. Suddenly, a stupid Whatsapp notification banner popped down from the top of my screen. It was just when I was about to hit “Save” on the “add an expense” screen.
I accidentally clicked on the notification banner, which launched Whatsapp and took me out of the “Add Expense” screen. I got pissed off so I forgot about answering my wife at that moment and tried to get back to my expense screen. I reached my destination at that exact moment, and forgot to fill out the expense and answer my wife altogether.
Result: Angry wife and holes in budget.
So as I do whenever I’m angry — I open up Photoshop. Well, actually my “sketch more fucking ideas” sketchbook first:
And then Photoshop. Here’s the first outcome:
The problem with iOS notifications
There are two main types of notifications that we all know well:
1. Alert (popup) notifications
2. Banner notifications
I don’t even want to get started with the “stop everything and watch me” notifications.
Those we are already familiar with (big difference between “familiar with” and “comfortable with”) since the stone age days of the first iPhone, and they haven’t developed since.
The Alert popups as we know them today
They make you stop whatever you were doing, thus detaching you from your current state of mind. And of course you can’t be so impolite as to to not answer a message shown to you in this royal format.
A simple solution to the regular Alerts popups
If we would have had just a simple “quick reply” field…
*Similar solutions already exists in Android apps and jailbroken iOS apps. I’m not the first to think of this.
So, let’s move on to the real problem…
Where the real UX problems appear — Banner notifications:
Why banner notifications are good:
In our mobile, fast paced, ADD, schizophrenic world these notifications are blessed. They allow us to be alerted while having the choice to:
A) Wait it out
B) Slide it up to continue with what we’re doing,
or C) Click and launch the app.
Why banner notifications are a bi^$#:
1. They are very hard to slide up. Sometimes it makes you believe that this action requires special super hero skills to get it right without accidentally clicking on it and launching the chat app.
2. Actionable controls are located on the top bar in most applications ( as recommended for iOS design patterns). This is a major UX flaw.
In a world where we are flooded with chat services, emails and other interactions on our mobile phones (FB messenger, Whatsapp, iMessage, emails, Twitter, Linkedin and more) it makes it impossible to use the top bar without interruptions.
So — here’s my solution:
1. Notification below the top bar. I moved the notifications where they are most likely will interfere less. I also took under consideration the top notifications panel and the bottom quick actions panel so the banner action will not accidentally interfere with those. People asked me: what if you’re playing a game and there is no top bar? Well, they could in that case come straight from the top.
2. Bigger touch space for our fingers. Designed a bigger touch element to slide up or down.
3. Slide it up or down. No clicking.
4. Giving it some soul (only for UI sake) I gave some transparency and shadow to the banner. Plus — the color of the circle on the tab can change maybe by the color of the app’s icon — but it can stay just this green as the new bottom slide bar on the lock screen in iOS7 that indicates you have unread notifications.
Adding the interactions
Lets add basic transitions and interaction options which will make it easy to get rid of the banners faster and also make interacting with them more intuitive.
Sliding ONLY:
You can either slide it down — consciously — half way down the screen to open the chat service.
Or slide it up to get rid of it and get back to your task.
Yay! No accidental tapping!
This could be faster or slower of course, the transition could be tweaked but you get the point.
The extra mile — a new kind of notification
I don’t know about you guys, but i actually am trying to better my life by focusing on living the moment and not being caught up in the crazy multi-interruptive world we live in (btw — big shout out to the amazing zen habits blog by Leo Babauta).
I’m fed up with all the communication overflow I have from my devices. Lets face it — there are too many of them.
I want to live the moment. I want to focus at one thing at a time. I want to live in the present and not let interfaces and OS’s I use take control of my life.
So I came up with a simple concept for a new kind of notification. I call it “Zen Notification”.
The concept is simple:
Don’t stop me from what I’m doing, and don’t give me too much information.
You still know you got a message — but you can finish whatever you’re doing and only then take care of reacting to that message. Also this doesn’t make you feel bad about not answering as much as when you see the actual content of the message.
The interaction with the Zen Notification
But what can we do as UI/UX designers RIGHT NOW?
Apple is not going to change this so soon (if you work at apple and you see this — please… please show this to your team and have a discussion about this).
So what can we do right away in order to reduce banner notification frustration around the world?
Well folks, the answer is simple — just add actionable buttons on the bottom.
Summary:
All of the concepts above were brought up as suggestions. I haven’t locked myself in an office with a full team of UX pros and thought it all through, so of course there are holes in this suggestion, but it’s surely possible to polish these concepts and iterate on them to perfection.
With this post I wanted to create a discussion and some food for thought. So if I managed to do that with you — and if you have any other suggestions or feedback — let me know in the comments and you’re most welcome to rebound my shots of the original concept or the Zen notification concept on dribbble.
Yours truly,
Sagi
I invite you to Sign up for Hacking UI’s weekly newsletter to receive updates on my future posts, and be sure to stay in touch via Dribbble or Twitter.
