Redesigning the Lock Screen

I hate smartphone lock screens. Not the concept itself, but the many implementations. Everything I’ve seen is too minimal or too complex. This is prime real estate we are talking about. Surely we can do better. Since it’s been on my mind a lot lately I thought it would be fun to redesign the lock screen starting with first principles. Note: I’m a researcher at Nokia by day. This blog and the opinions on it have nothing to do with my work at Nokia. All ideas are my own and do not reflect anything Nokia is working on. This post also does not reflect a desire on my part to actually build a new lock screen for any OS. This is purely a design exercise to explore the space and see if we can do better.


android image from xda-developers.com. (i know it’s a modified rom, but it illustrates the point)

At the beginning

What really is a lock screen for after all? It’s original purpose was to protect the phone from unwanted input, either by accidentally pressing buttons or an intruder reading your email. While this is still the primary purpose; the lock screen, by virtue of being the easiest place to access on a phone, is where we put lots of extra information like the time or recent calls. In recent years phones, especially Android phones, have created an explosion of new widgets and dashboards on the lock screen. It’s getting out of hand and still doesn’t use the available space as well as it could. We need to start over from first principles.

Fundamentally a lock screen dashboard is about presenting status at a glance. This is the status of anything on the phone, from wifi and signal to time to location to incoming messages. Here’s a list of ‘status’ items I just thought up:

I’d also like to mention the following which aren’t statuses but which are commonly found on lock screens. I’ll talk about what to do with them later.

Status at a Glance

So we have a long list of statuses. How should we present them? We can’t list them all, there wouldn’t be room. Should they be interactive? Animated?

First of all, I’d like to go back to our original definition of the lock screen: “status at a glance”. The 'at a glance' part is very important. The user’s only required interaction should be pressing the power button to toggle the screen. Too many lock screen widgets want you to interact with them. Anything which allows interaction violates the ‘at a glance’ principle, plus we get back to the purpose of the lock screen: to prevent accidental input. Anything which accepts input on the lock screen could be accidentally pressed.

Let’s break down the problem into chunks. The obvious solution is to list all of the items vertically. This would be too long for the screen, especially if you have a lot of social media notifications. We could scroll but that requires interaction and means you can’t see everything at a glance. Let’s start by removing unneeded things. The alarms are only present if you have an alarm. Most of the time we won’t have an alarm so we can hide it. The same applies to the stopwatch and music interface.

Next let’s focus on only the current items. This is about current status after all. That means the alarms should show you only the next upcoming alarm. The same with the calendar and todo items. These all have an inherent order and timeliness. By only showing what’s next we can help the user focus on what is important as well as reclaim a lot of screen space.

Notifications

Now, about those Facebook and Twitter notifications. I hate them, but some people like to have them. Let’s keep the noise down by only showing direct replies or posts from your most personal group. In Facebook this could be family or friends, or simply the 10 people with the most interaction between the two of you. Google + has circles to indicate importance. I’m not sure about Twitter. Followers only? The user could tweak these settings, of course, but good defaults are important.

Next, let’s collapse those notifications into a single line by platform. All Facebook notifications into a single line. All tweets in a different line, etc. The line shows the first notification and a count of total unread messages. This system works well for email and SMS messages as well. To keep it current let’s always show the most recent notification by default. Then if you view the screen, turn it off and more come in while you are away but before you actually log in to dismiss notifications, then you will still see new information when you turn on the phone again.

This presents a dilemma though. If you’ve got three new @replies on Twitter we have the information to show them all, but we don’t want to take up the screen space. There is a temptation to show the messages as some sort of scrolling list or carousel, but this would violate our ‘at a glance’ principle. What to do? What if we modify our rule slightly. It’s okay to allow interaction while locked as long the interaction is read only. The user can’t dismiss notifications or reply to messages as those would change fundamental state. We only allow simple navigations where the cost of accidental interaction is low. Accidentally swiping through a list of tweets in my pocket is not a big problem. Butt-dialing is.

So, with our new modified rule we can collapse the tweets into a single list item scrollable horizontally like a carousel control. This system works with anything that has multiple ‘current’ items: email, alarms, todos, calendar, etc. To preserve our principle of only allowing read-only interaction let’s reset the current item to the most recent whenever something new comes in, or after a timeout of 10 minutes.

Weather

Great, now we’ve shrunk or completely hidden most information, reclaiming much of our lock screen. Now let’s get into a few corner cases starting with the weather: The weather should always show your current location, unless you are flying to another city in which case you couldn’t get weather data anyway. It should indicate what location that weather is for and how long it has been since it grabbed the data. Further more, if the user has configured additional cities (home city, work city, family city) in the weather app, these should show up here using the same swiping mechanism as messages. Having a graphical view of weather would be nice but not essential. What is essential is a textual description of the weather, the temp, and whether it’s going to rain in the next few hours. We want to show information that is both current and relevant. That, my friends, is status.

Battery and charging are self explanatory. Show the current charge level of the battery both as time to dead and a percentage. Indicate if it is currently charging. If the charger is plugged in and it’s not charging then this counts as an exceptional condition that must be highlighted. The same for a near death charge.

Music and Location

Location is an interesting thing. While we could certainly show your ‘current’ location, constantly polling the GPS sensor drains the battery. Furthermore, knowing your location isn’t actually very useful most of the time. You probably already know where you are. However, if you are on the way to somewhere then you might want to know the ETA (estimated time of arrival) from your current location to your destination at the current speed. In fact, the current speed might also be useful info. If you are in the middle of following a navigational map then this information is already known and could be displayed. iOS does this today and I assume Android does as well. Furthermore, if you have a meeting in the next hour with a location attached to it then that could be used as your destination. Some testing will be required to determine the optimal GPS polling frequency to avoid draining the battery.

A few tweaks

Other possibilities:

  • current volume level. I’m not sure you need it. If you can’t hear something then you know you need to make it louder. perhaps only a ‘mute’ indicator.
  • current accelerometer / compass / gyroscope values. I can’t think of a use for these and they drain the battery so let’s drop them.
  • light sensor: i can’t think of use for this either.

Animation: only animate what is new, say: what is new since the last time you opened the lock screen with a one minute debouncing in case you accidentally toggle the screen a few times.

To preserve spatial memory let’s make status always appear in a prioritized order with time, SMS, alarms at the top. various messages in the middle and

While we only show the soonest item for calendars, a person’s schedule for the day is often the most frequently viewed information. This is the one time I think we should support multiple lines. Rather than making it customizable how many lines to use, let's just make it a scrollable area that takes up all extra space. This is the ‘agenda’ view.

Interaction Allowed?

Now we come to the other interaction bugaboo. It is very handy to take a photo from the lock screen. Often your Kodak moment is fleeting. I have a toddler so I am quite familiar with this situation. Still, taking photos is a significant state change. If we wish to allow it then we should have a more complex gesture to start the action. Something more complex than simply tapping a button. If a left to right swipe is enough to unlock a phone then perhaps a vertical swipe from a particular point. This is what iOS currently does. I think we could do better though. Once you have successfully targeted a button with your finger you can easily drag the point to anywhere on the screen with little though. Let’s make a spot near the top you must drag the photo button to. When you tap the button the target spot becomes visible. Drag to the spot and release to open the camera.

The End Result

I’ve gone quite a few words talking about how the lock screen should work but nothing about how it looks. This was intentional. Steve Jobs said design is how it works, not how it looks. While I agree with him, aesthetics do in fact matter. He didn’t pay all of those visual designers the big bucks for nothing. However, I am not a visual designer. I'm an interaction designer that occasionally messes around with CSS. There is a reason Apple has talented teams of designers that work together to build amazing interfaces. That said, let’s take a quick stab at what such a lock screen would look like. Ignore the black status bar at the top. That's from the real OS that I couldn't get rid of. It's a mockup after all.

Not bad, though we can already see a few needed changes.

The weather looks weird mixed with notifications. I originally thought I'd have multiple cities to swipe through, but that's probably not needed by most people. If I drop that idea then the weather can go in the vacant upper left corner.

Next, the calendar needs some work. Clearly more whitespace and probably some separator lines. The icons are needed for the Twitter and Facebook sections but probably not anywhere else. Do I really need an email icon for the email inbox? A photo of the album for the music player might be nice, though not really necessary.

Outro

Overall, I think it's a good start. While there's a lot more to do on the visuals we've got a good framework. More importantly, we have rules that define what should go in the lockscreen and how to add future components. It is these rules which make it a comprehensive design and ultimately, I hope, something that you'd actually want to run on your phone. What's your take on redesigning the lock screen?

Related Posts

Popular Articles