Lock Screen is Your New Home (iOS 10 Analyze & Redesign)

image from Apple (http://www.apple.com/ios/ios10-preview/)

Lots of great stuffs from WWDC this year. Very excited about the direction Apple is going. While I can talk about it all day long, I would like to share my analysis with you on one particular part of iOS — the lock screen.


Lock Screen is Redundant (before iOS 10)

Here’s the UX of unlocking phone for 99% of the time:

  1. Press the home button to wake up the phone 📲 (base on my observation, more people use the home button, rather than the lock button to wake up the phone)
  2. TouchID recognizes your finger and unlocks the phone 🔓
  3. You arrive the home screen! 🌟

Sounds great to unlock the phone with just a tap right? Not so fast… How much time would you spend on the lock screen and read notifications? Probably less than a second. Unless you’re a machine, there’s no way to read in such a short period of time.

TouchID is great as it introduces tighter security & Apple Pay to iOS. It, however, hinders the use of quick glancing notifications, making the lock screen redundant to a certain degree.

Therefore, Apple fixes such loop hole in iOS 10 by offering “Raise to wake” and more functionalities powered by Force Touch (or long press for older devices).


Answers from Apple

“Raise to wake” is such a great feature that you wonder why it doesn’t exist in the first place. When you wanna check your phone (catch up with new notifications), you raise the phone / pick it out of pocket and then bring it towards your view. Without clicking any button, the screen automatically turns on and shows all the notifications to you.

This, enables user to interact with his/her phone without unlocking it. Such flow changes the input (user’s action) of step 1 that I just mentioned AND keeping the same result, which is waking up the phone. As a result, one can finally wake up the phone AND read notifications.

To make the lock screen plays a bigger role, Apple even brings “Rich Notification” to iOS 10. For example, users can reply to message right on the lock screen, without unlocking the phone & entering the app.

image from AppleInsider (http://appleinsider.com/articles/16/06/14/ios-10-rich-notifications-will-come-to-devices-without-3d-touch-apple-tells-developers)

So… the lock screen is now perfect right?


Another Issue Arises — Clustering

While watching the WWDC live, I thought that notifications from the same app will be grouped. That’s pretty straight forward isn’t?

Apple, you got to be joking?! NO GROUPING?!

In reality, that’s not the case. I installed the iOS 10 beta on the first day it came out only to realize grouping doesn’t exist at all (at least in beta 1). Very disappointed… This post on MacRumors also shares the same view.

I created 2 dummy reminders to better illustrate the issue.

No Grouping

Even you’re not an expert in UI/UX design, you know that the screen will become clumsy when, for example, having 10 group chats in 5 different apps (ok this probably won’t happen to you but you get the point 🙂)

Also, there’re a lot of wasted spaces between the cards

Such design will definitely bring chaos to users and wipe out the elegance that iOS is famous for.

Such frustration propels me to take action. After living with iOS 10 for a few days, I decided to put together my ideas and experiences to make a redesign on the lock screen notifications.


Notification reimagined

My Redesign

As you can see from the above mockup, notifications from the same app are now being grouped, thus solving the issue that I pointed out earlier ✅

When I started working on the redesign, Spark surfaced in my mind right away. It’s a great email app that I use everyday (If you’re still searching for the best email app, go no further. Spark is the answer!). Its neat way of presenting various lists (“New”, “Pin”, “Notification”) resembles a lot with what Apple is trying to achieve with the lock screen of iOS 10.

With an afternoon, I designed various UI to show how to make the UX on the lock screen even better. The result is the following:

(Tips: for full resolution, view the above mockups on your laptop) To make it coherent with iOS, I use the same layout as the official website of iOS 10

(Edited on 2017 June: It has been another year with new iOS. Lots of great stuffs and I’ll have a series covering them. This notification grouping issue, however, is still not addressed by Apple. I’m wondering if this’s intentionally ignored to pave way for new features in the upcoming iPhone.)