iOS Notifications

Chart a course.

The first step of the project was to pick a microinteraction that aggravated us. Then we needed to analyze the current state of our chosen microinteraction in order to find some problems or frustrations users might encounter. We were able to pick a couple different methods. I chose to create a flowchart and a user journey of the current system.

User Experience Map

Notification Flowchart

Houston, we have a problem.

From the system analysis, I was able to find a couple points where the current system might cause some frustrations for the user. These problems were then used later in the design process as a check-list to make sure the solution was actually an improvement.

Banner notifications can block important controls or information in an application.

Sorting notifications chronologically can quickly become overwhelming.

Sometimes users will use 3D touch to clear all notifications, but accidentally dismiss some they haven't seen yet.

If a user receives multiple notifications at the same time, it can be annoying to swipe all of them away.

Banner notifications can block important controls or information in an application.

Sorting notifications chronologically can quickly become overwhelming.

Sometimes users will use 3D touch to clear all notifications, but accidentally dismiss some they haven't seen yet.

If a user receives multiple notifications at the same time, it can be annoying to swipe all of them away.

From paper to prototype.

Once we identified the problems of our micro interactions, we were tasked with making some initial concepts through sketching, wireframes, and finally building a prototype to test with real users. For the wire framing portion, I used Sketch. Additionally for the prototyping portion, I used Principle for an interactive prototype of the notification center and Adobe After Effects to demonstrate what the banner notifications would look like.

Build, test, repeat.

I had made the initial concept sketches and made those into wireframes in Sketch. I then made some derivatives of certain concepts which led me to create new ideas in the process. From there I rejected some of the moonshot ideas that weren’t usable enough and went forward with prototyping them in Principle and After Effects. Once the prototypes were built, I then tested them with real users.

Users testing out the prototype and viewing the different types of banner styles.

I tested the design with 5 participants. These participants demonstrated a wide spectrum of comfort with technology. I made sure to test at least one user that was familiar with Android as to keep the data from being skewed only toward iOS users. I showed them three different banner notification style then had the participants go through a cognitive walkthrough with a working prototype on an iPhone. I followed up with an interview asking about specific actions they took during the walkthrough afterwards.

Notification Style A

The intention behind this design was to make a subtle notification that wouldn't block or affect any of the main content of the screen. Testers liked this design, but thought it was too subtle for a normal notification banner style.

Notification Style B

The main idea behind this style was to get the top controls out of the way rather than have the notification banner relocated or covering essential controls. Additionally, if a user opens the quick reply, there is a button on the top of the notification that allows the user to put the notification back in the notification shade. This style was nearly universally liked by the testers.

Notification Style B

The main idea behind this style was to get the top controls out of the way rather than have the notification banner relocated or covering essential controls. This style was nearly universally liked by the testers.

Notification Style C

Style C was more of a moonshot idea. Users would be able to see which notification is trying to get their attention and chose to peek then interact with the notification. Testers appreciated the new approach but thought it was too confusing based on their prior experience with both iOS and Android implementations of notification banners.

Let's change things up a bit.

After testing the design, I gathered some very valuable feedback that I worked back into the design. Almost all of the changes were minor tweaks to elements like icons or the placement of a button.

Left The new banner style for notifications aims to keep essential app controls accessable. The system will shift essential controls down and out of the way while keeping the main content in the same place.

Right In the notification shade, individual notifications can now be grouped by application in order to help users find what they'er looking for quickly. Users can also swipe left on an entire group and clear all notifications for that application.

When "Do Not Disturb" is enabled, this notification style will appear. It's subtle enough that it won't annoy a user when they don't want to be disturbed, but it's noticeable enough for a user to catch if something important needs their attention.

During user testing sessions, some users reported missing notifications sometimes because they walked away from their phone while it was unlocked. To combat this, I lifted the orange dot present on the Watch, which signals to users that there is a notification in their notification shade that hasn't been seen.

This GIF shows an early prototype version of the system. The "Show more" button was moved to the bottom.

A user would be able to group notifications by each application. Notifications would be displayed to the user in a clump of the three most recent notifications. A user can then tap the "Show more" bar at the bottom of the clump. This will expand the window to show all available notifications. Alternatively, a user can swipe down and chose an app to see all notifications individually.

When it comes to deleting notifications, this system adds a bit of granularity. A user can swipe left on the grabber on the top right of a clump to delete all notifications associated with that app, or they can swipe left on a particular notification to delete them one at a time. Additionally, a user can delete an app's worth of notifications by scrolling down and 3D touching on the icon in the group switcher.

Clearing notifications now puts them in a cleared section for 24 hours in case a user accidentally dismissed a banner notification or cleared an entire app group. The user can either chose to restore the notification, which treats it like an unread notification, or delete it forever.

Siri Wrap Up

On the second to last day of this project, I came up with this idea. I would later develop the idea in the CarPlay 2.0 Project. I was trying to tackle the problems of notification overload in this project and had not considered one of the emerging technologies; Personal AI assistants. After a user wakes up, comes out of a movie, or concludes an important meeting Siri would present the user with a prompt at the top of their screen. This prompt would lead them to the Siri Wrap Up, which is a rundown of the most important of your notifications that you've missed. If you've received a couple payments in Venmo, Siri would let you know in a easily digestible manner without bombarding you with multiple notifications.