Why iOS notifications are ruining my marriage (and UX solutions)

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.

The horror as it went down

The horror as it went down

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:

The initial sketch

The initial sketch

And then Photoshop. Here’s the first outcome:

The problem with iOS notifications

There are two main types of notifications:

1. Alerts (popup) notifications
2. Banner notifications

regular iOS notifications

regular iOS 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.

Regular Alerts popups in iOS7

Regular Alerts popups in iOS7

A simple solution to the regular Alerts popups

If we would have had just a simple “quick reply” field…

Quick reply suggestion to iOS alert popup

Quick reply suggestion to iOS alert popup

A similar solution already exists in Android apps and jailbroken iOS apps. So let’s move on to the real problem.

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.

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.
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.

Let’s see it again:

A new kind of banner notification

A new kind of banner notification

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 in:

So now you can either slide it down to open the chat service (and maybe it should even  -from a certain point on the screen – automatically slide down):

Or slide it up to get rid of it and get back to your task:

 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.
I’m fed up with all the communication overflow I have from my devices. Lets face it – there are too many of them these days.

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”.

* Update: Following this post feature requests were made for jailbreaks and this has started to be developed by Bryce Dougherty (@bd452)! Link to Reddit thread. Updates will be written here as well and also on our newsletter.

 

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

Long hold – Show me message
Swipe right – Launch app

Swipe left off the screen - Snooze/”don’t show again until next message”

** Update 14 Apr 2014: Check out the updated design of the zen notification concept! (view this on your iPhone). Tweet this

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.

simple solution - to add actionable buttons at the bottom of the app screen in order to avoid banner frustration

simple solution – to add actionable buttons at the bottom of the app screen in order to avoid banner frustration

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 torebound 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 future posts, and be sure to stay in touch via Dribbble orTwitter.

p.s. I’m uploading these shots also to my dribbble account so you’re welcome to connect with me there as well.

Published on 20 Mar 2014

Comments

  1. Pingback: HUI Weekly #13 - The World Trade Center, What's new in Sass, A peak into SXSW and more | Hacking UI Magazine

  2. Lior

    Sagi, nice iteration on this issue. I’m all to familiar with this annoyance myself. Once suggestion is possible make the UI for pulldowns more intuitive or dictate to swipe, maybe and arrow? Another factor, is a good way to move between the current and previous application my utilizing similar and or opposite actions. Nice work!

    Reply
  3. Pingback: inspiration.whoisleon.com » New concept for iOS banner notifications

  4. Pingback: inspirations.tapthatapp.org

  5. Denis

    Great Article, I’am working with an Android OS, the facebook messenger notifications is great solutions for the notifications problemç!. (I think it’s the same ux for iOS),

    Reply
  6. Pingback: inspiration.whoisleon.com » Taking iOS banner notifications out of the stone age

  7. Pingback: inspirations.tapthatapp.org

  8. Pingback: inspirations.tapthatapp.org

  9. Pingback: inspiration.whoisleon.com » iOS Zen Notification concept – see attachments

  10. FX

    To me, every notification which overlap the application is wrong.

    Next time your wife messages you while you are trying to take a photo of the receipt and you’ll came back to the drawing board :-)

    Reply
  11. Foamy Media

    Just turn the notifications off if its that much of a problem, blackberry did notifications the best with a simple bubble which everyone copied! or the iphone needs a blackberry style LED light!

    Reply
  12. AndiRudd

    Nice read! And Great modifications/fix there. Inspired! #UX
    And btw @sagishrieber I am a developer & UX designer at training what would you advice in regards to UI and UX design?

    Reply
  13. shaded2

    ….or switch to android. This problem has been solved since the first release

    Reply
    1. Caleb

      … But then you’d have to use android… (I actually do have an android phone; not a fun experience overall. Horrible battery life, randomly turns itself off, randomly deletes apps, and extremely slow. We’re talking 2-4 years old and it has worse performance than my old dumb phone)

      Reply
  14. Anon

    You just spent countless time working around a fatal flaw that apple left for you in iOS.

    What’s the flaw?

    The fact that, from the UI, iOS is ultimately a single-tasking operating system.

    The true solution:

    Quite being an apple fanboi, dump apple, and quite buying their rotten products.

    Reply
  15. Zeeshan

    As a develeoper with a wife, i can understand the scenario.

    The solution provided is a great idea.

    Reply
  16. Sam

    Sorry, too much. Best to keep it simple. Your approach is way to complicated.

    Reply
  17. Dani Reuven

    Awesome vision ! a few things to keep in mind:

    1. How the notifications will look on horizontal view ? Right now the top and bottom bars taking a lot of the space (on horizontal view ), if the notification will go under the top menu you’ll have < 40% of the actual screen you are currently on.

    2. As apple consider early devices experience too ( unlike android ), how an ipohne 4 ( with IOS7 ) will keep up with this kind of behaviour ? for example: you in a middle of clip watching or heavy game playing and suddenly you get notified, will the older devices will be able to run this task well & smooth ?

    I think the quick reply solution is the best and take less energy in all aspects ( usability , visually and technically )

    Great work on this revision, very inspiring !
    Thanks, Dani

    Reply
  18. JRK

    The jailbreak app ‘TinyBar’ solves this problem by only occupying the status bar, you still have all of the UI controls available to you when you get a notification – and covering the status bar for 5 seconds is not a problem, unless you are desperate to know your signal strength, current charge or the time in that 5 seconds!

    Great solutions nonetheless !

    Reply
  19. Action Jake

    @shaded2, that was my solution, but it’s just trolling those that really need/love iOS. Generally, people that have both iOS and Android devices agree that notifications are something Andrioid got right. What the iOS community should be pushing is for Apple to *finish* stealing notifications from Android. (There is nothing wrong with that – both OSes learn from each other.) But Apple started to copy the notification panel from Android, they just didn’t completely understand it and missed the mark. Most iOS users that I’ve asked, never use that panel. Just try again, admit for once that Android beat the grand design company at UX for once, and then respond with an even better revision.

    Reply
  20. Alberto Orsini

    The problem with your solution is that the OS would have to know how your specific app is built. It is not as easy as what you propose. What if you were to receive a notification while on the calculator app? What if you were to receive a notification while playing Angry Birds? It is not really a solution as much as an open ended question. I think a true solution would be a soft notification on the status bar, as somebody mentioned, like the BlackBerry bulb, but on the software. Not a physical bulb, ew. And the user explicitly pulls from the top only IF they want to see the notification. While it would eliminate the “comfort” of having your messages delivered to you, I think it would smother the inconvenience of accidentally tapping on something without wanting to. At the end of it all the user should really have the option.

    Reply
  21. OMGElsie

    Why not just change the behaviour of the notification?
    Tapping would dismiss the notification, swipe to respond to the notification (a la lock screen notifications).

    Reply
    1. Sagi Shrieber Post author

      Sounds like a good idea if this was implemented in iOS from the get-go of this feature. But now… well… its too late. People are used to a certain behaviour of the banner notifications.

      Reply
  22. Atif

    How will the “Zen notification” solution scale when you have multiple whatsapp messages?

    What about the case where a user has multiple IM apps (common in China). Too many icons sitting the lower edge of the screen while i am in the middle of another task will quickly become very annoying to see.

    I think you have the right sense of the problems with iOS notifications. But i disagree that this is the best solution to resolve all the forces here.

    Reply
    1. Sagi Shrieber Post author

      Hey Atif, you’re right I haven’t thought it through 100%, I’m still a designer with a full time job + 2 blogs + wife-daughter-and-dog :) But.. My goal was not to give a slick non-flaw solution to Apple. My goal to start a conversation around this subject, and I think I succeeded on that one :) Maybe someone who works at Apple and Android will see this and think about this next time they are working on similar issues.

      Reply
      1. Atif

        Yeah i definitely think that the system can be improved. I think some variant of your first solution can definitely work better though

        What tool are you using for these animations though?

        Reply
        1. Sagi Shrieber Post author

          Hey, thanks. I used Photoshop video timeline and converted each animation to frame by frame, then Save for Web as GIF.

          Reply
  23. M.D. Rose

    Cloning android notifications would be the ultimate solution imo. It’s informative without getting in your way. They are TINY and only use the status bar. They never interrupt what I am doing in an app and they are a flick away. The problem with iOS notifications is they are essentially taking focus away from the app you are using. I can’t stand that on the desktop and even more so on mobile.

    Reply
  24. Pingback: Push-Mitteilungen neu gedacht – zwei nette Ideen - Apfelpage

  25. Pingback: Push Notifications Rethought - Two nice ideas • iDeviceDailys

  26. Steven Lee

    If I think in other perspective, the notifications idea that you suggest is a bit hard to be implement without disturbing other type of users. iOS is also famous for its games as well and there are many users who are in the category of gamers. Imagine while you are playing a game and then a notification slides down, it will ruin the gameplay. Most game developers put unnecessary informations/buttons on a very top so when a notification comes, it won’t affect the playing screen.

    P.S. I love the concept of your Zen Notifications though. It fits with the UI Language of iOS as well. I’m just concern about other users who use their device for gaming.

    Reply
  27. Pingback: Don't Blog Enough? Maybe You Blog Too Much | fifty6

  28. Pingback: Уведомления в iOS – какими они должны быть | Цукерберг Позвонит! - интернет-бизнес, стартапы и маркетинг

  29. pastrunho

    The problem is really annoying for me too and your ideas are pretty good but, like you said, not perfect. The problem with the notifications in the bottom or with zen notifications is that if the keyboard is on it’ll be a big problem. Anyway, your ideas are very interesting and I hope Apple will fix this problem as soon as possible.

    Reply
  30. Morgan

    Yes!!!! Dead on. I really like the little notification hack at the bottom of the screen. If only Apple will listen….

    Reply
  31. Adam Patterson

    I like to call these notifications click jacking, OSX also has issues while I might be typing a confirmation window pops up but I’m not paying attention and hit enter to say… Update OSX and reboot?

    Seems like iOS needs to dedicate about 30% of the top bar to antenna strength and incase you forgot your carrier… your carrier name.

    Like most people have mentioned, Android does it better.

    Reply
  32. banana

    Your implementation, albeit somewhat thought out, is horrendously worse than the current. “Zen notifications” remove the entire purpose of notifications: to NOTIFY you. If you wish to go into a state of “zen”, try the “do not disturb” function. Closing banners is also not as difficult as you state in your article and doesn’t require work and moving the save button to the end of the form is irritating as it is not visible straight away which doesn’t make it obvious that you will be able to save the form at any point (even if this seems inherent).

    Reply
  33. Dave Robertson

    iOS is great, but it feels increasingly basic as time goes on. I understand why Apple isn’t keen to change things, but there are better ways to address these problems. So any articles like this that provoke debate and provide solutions are a good idea.

    Gotta echo a lot of the other comments here though – Android knocks notifications out of the park here and always has. Being able to see you have a text or email without losing any part of the screen, and being able to read/action (e.g. mark as read, delete) from the notification tray is great.

    Reply
  34. Anonymouse

    Yes, your arguments make sense in the case you have presented.

    A couple of arguments against zen notification:
    1. People with a broken lock button can relate to this. I use the accessibility button, and for some reason always prefer to have it on the bottom left. So, the zen notification is going to be hidden underneath the accessibility button.
    2. while playing games say FIFA, the zen notification is going to overlap on top the direction control pad. This can result in a user losing control of the player.

    Reply
  35. Pingback: iOS 8 nou sistem de notificari ce ar revolutiona complet modul in care utilizam iDevice-urile (concept) | iDevice.ro

  36. sloan

    The notification bar is the height it is to make it more readable by a larger portion of people while also providing enough space for a thoughtful message whereas Android uses smaller type that scrolls or simply icons. The swipe zone is actually larger than it looks in iOS, but is misleading with how it is implemented. I think the bigger problem for iOS is that it is a huge pain to adjust your notification settings so you end up with more situations where you find them annoying.

    Reply
  37. Sasha Agapov

    Why not make an option like this available? I’m not sure if covering parts of the actual working screen would help save this issue, since to me it feels like even a worse disaster than mishitting the Save button.

    Anyways, here’s my $0.02:
    http://i.imgur.com/6ZPPvRT.jpg

    Reply
  38. Niclas

    Hey Sagi, really like the passion you put into improving annoying notifications. We definitely need a discussion around this topic. Even though, I don’t think the solutions you came up with are solving the problem. They might be better then current notification but bring in new problems:

    1. Idea: The problem here is context. You are putting the message/notification in context of the current app. For users it might be confusing because it looks like a message from “Homebudget”.

    2. Idea (Zen): It’s working on your screen because there are no elements in the bottom. If there are buttons you will have the same problem with overlapping notifications as before.

    Just my feedback. Keep up with creating great ideas!

    Reply
  39. Drew McDowell

    I think your hand is SLIGHTLY out of proportion with the iPhone. It’s like a bleak view of our mega-phone/phablet future, haha. Very interesting ideas though, I like the concepts, particularly the gesture-only approach to the notification dropdown. Perhaps tapping it (as many users would inevitably try) would cause it to bounce down slightly, encouraging users to pull rather than tap.

    Reply
  40. Cory

    Palm had it right in WebOS… they slide in from the bottom, just as you proposed, and give you just a quick hit of info. But they NEVER got in the way of what you were doing.

    Man, I miss that OS, dangit :-(

    Nice article, BTW. Great stuff.

    Reply
  41. Pingback: Ideas for new iOS notifications | Jonathan Pautsch

  42. Katie Barnes

    Well said and illustrated! Many of my college-level UXD students are addressing this issue as well. Maybe Apple will catch on soon.

    Reply
  43. Rob

    You probably could have spent all the time to write this article with your wife instead.

    Reply
  44. Ash

    Your wife got pissed that you didn’t reply to her text straight away? Whoa.

    The Zen interaction is terrific though!

    Reply
  45. Diana Carrasco

    Wow, thanks for getting you mind to this, I definitely vote for the Zen notification, I am also trying to live more mindfully in the present and I cannot agree more, these constant interruptions are a killer :)

    Amazing article.

    Reply
  46. Paul Peterson

    Nice! Thanks for taking the time to explain and illustrate your ideas, Sagi. I love them. Catchy title for your post, too. :-)

    Reply
  47. Nick

    Why can’t the notification just push all the content down rather than interrupting it and overlapping?

    Reply
  48. Luca

    Sliding to the side instead to the top dismisses banners with a nearly non-existent failure rate.

    Adding a notification element at a completely different location (bottom) feels wrong to me.

    As many mentioned, notifications with the height of the status bar have proven to work great.

    Reply
  49. Ivy

    Great post! Another idea would be: Slide the banner to the right to delay it for an hour (or half an hour or something like that) and swipe it to the left to get rid of it.

    Reply
  50. Mihai

    I can understand your frustration about the notifications , im still puzzled why hasn’t anyone adapted this http://www.youtube.com/watch?v=zplVSI0M93o to iOS . These guys came up with the holy-grail of multitasking back in 2009 and all Apple has made was trying to reinvent the wheel when they could have just made a license deal or simply rip of the concept altogether (they already did it with the card view ) . I really is sad that there is no new hardware for webOS as the operating system itself is still one of the easiest and most intuitive OS ive seen.

    Reply
  51. Pingback: Developer News - What's IN with the Infragistics Community? (4/28-5/5) - Marketing & PR - Infragistics.com Blog

  52. Kurren

    Really a UI solution, of course affecting the User Experience. Still UI, tho.

    Reply
  53. Ulrik

    No matter which solution you choose it will interfere with your app. The key, as mentioned in the article is NOT to have a tap-trigger, but only some sort of swipe that is more difficult to do by accident. So basically you could do with the notification that is there today, but with different interaction, no need to move it.

    Reply
  54. Pingback: Don’t Blog Enough? Maybe You Blog Too Much

Leave a Reply

Your email address will not be published. Required fields are marked *