iOS Lock Screen

Mar 16, 2012

Ever since the release of iOS 5.1, there's been something bugging me. The lock screen. Don't get me wrong, I will follow Apple's decisions to the ends of the universe. However, for some reason, the new fast camera access just didn't sit right with me. So I decided to do something about it.

21 comments:

  1. Hey Brye, awesome post! Really enjoy these types of interface concepts, I will be saving your site as a bookmark from now on. A couple of comments:

    I read elsewhere too regarding someone saying that the new camera icon placement on the lock screen disturbed the balance, but I do not see how this is the case. You commented on it being cluttered, but this seems odd considering there were only two elements before the addition (the time and the slider) and now there are three (the time, the slider, and the camera icon). The image space has not changed, but the slider has been shortened to allow for the camera icon on the right. On the contrary, I actually view this as a visually positive change, as asymmetry can be refreshing in some instances where symmetry is strong.

    In response to the camera activation, I do believe that dragging up is a valuable solution in this case. I am thinking about the instances where you might accidentally unlock your phone (assuming all you have to do is slide the unlock and not put in a PIN) by gripping the side of your phone and not realize it. I have done this many times, and have found out when I look at my phone that I am actually in an app. Having to activate the phone by dragging the finger in a different direction lessens the likelihood of this happening, and this especially matters when we are talking about the Camera app and taking accidental photos or videos when you really just don't want to. And to help users with understanding this action, there is a bounce animation when someone will want to tap on the camera icon (I did this the first time too and was puzzled why nothing happened. I even tapped on it twice, thinking about how when I tapped on the Home button twice), hinting that someone will happen because I am bouncing up and down and revealing a sliver of the Camera App. As with any learnt behavior, I feel most users will begin to learn it and not be hindered by the first time they tried to figure it out. And I welcome this slide up, considering I absolutely hated to double-tap the Home button to have access to it. And another useful feature that you may not be aware of is that after you are done taking pictures while in the Camera App [coming from the lock screen] if you swipe down from the top of the screen you may return to the lock screen.

    Commenting on your final execution, I do not find the Press and Hold [to reveal] in iOS standards. And if we are breaking down the step process, it is a two-step process to both reveal and activate (press and hold to reveal slider, slide finger to activate). One major thing that worries me is that the initial lock screen with the two icons (lock and camera) is left too bare, and is visually deficient. Much like the initial reaction of the Camera icon and sliding up, how will one know what to do just by look at the initial lock screen with just those two icons? What will happen when a user will tap on the lock screen or the camera? And if I must comment on the visual balance of the rounded slider, I would say that it is a tad taller than it should be.

    On a side note, under your Prototyping section, 'implementation' is misspelled. I wanted to let you know, as I think those are images.

    Thanks again for this, Brye. I think you have a really nice thought process and the execution is up there as well. Looking forward to reading more about your ideas on how to make things better. :)

    ReplyDelete
    Replies
    1. Brye, I want to clarify since I fear some people may think differently about what you are describing when you say 'press and hold.' I take this as only if you are to reveal the ''slide the unlock' dialogue when you press and hold, but if you want to otherwise unlock your phone or activate the camera you don't have to necessarily 'press and hold,' you may just swipe your finger either left or right. Some users may take that as 'Oh, I have to pause my finger over the icon and THEN slide, but I don't think this is the case." Correct me if I'm wrong, thanks.

      Delete
    2. Matt,

      Very good points, better formulated than my own :)

      Highlighting the “pull down to lock back” behavior is good too, indeed. It makes even more sense with the notification pane being called with the same gesture from unlocked state: users are getting used to it, and it can also make an easy disambiguation as to whether you're accessing the camera in “locked” mode or not, since you can drag only the first centimeter and get the answer immediately.

      Delete
    3. Matt, the action of of the slider popping up on finger press is instantaneous. Sorry about the confusing wording. I wanted to establish that you don't have to tap the icon and release to get the slider, but simply put your finger on the icon (slider pops up), and slide. sorry my wording was confusing!

      Delete
  2. Here's another way to look at the asymmetry. The real difference is that the unlock slider shows all of itself - the starting point, and the path. The camera button is actually quite similar, but it only shows the button, not the (vertical) path it takes.

    I don't care at all for press and hold to get to functionality; the functionality should just be there. (I rarely use press and hold even for Siri)

    The best combination of symmetry and function, IMO, would be to slide in one direction for unlock, and to slide in the other direction for the camera. However, I think symmetry isn't meaningful on some levels. Unlocking is a global access action. The camera is a single-access action. Having the latter be vertical, in the end, is more apeealing to me than any of the symmetrical options.

    ReplyDelete
  3. Love it, except the "press and hold" part. What are you thinking? People dont want to wait a split second to open their phone/camera.

    Just have the Slide Camera Ball for camera and Unlock Ball to unlock, no press and hold.

    But damn, you know how to do this graphic design. Maybe they will hire you!

    ReplyDelete
    Replies
    1. Thank you very much! To clear it up, you don't have to hold, the slider comes up instantly. Sorry about the wording!

      Delete
  4. This concept is similar to how my old Xperia X8 works, except that when you slide the other way, it toggles silent mode. http://cl.ly/102B3P3N1v0A2X3y3w2d

    ReplyDelete
  5. Have you considered using an open lock icon? In my opinion that makes more sense because you want to 'unlock' your iphone.

    Further more, nice concept :)

    ReplyDelete
  6. I'm totally on board with this.

    Another thought: the volume button. Click and hold + for ~1-2s and the camera is activated.

    ReplyDelete
  7. Nope. Really, no. I'm afraid you haven't observed newbies enough.

    It would work for people who have already had an iOS device for some time, but you're throwing away a huge lot of the population. Why do you think the “slide to unlock” has an animated light showing how you're supposed to slide? It's a very important part of making it instinctive, or at least understandable.

    With your “hold to get explanations” (i.e. to get the “slide to unlock” animated instruction), people would be stuck with trying to tap on that “lock” icon, expecting it to be a button. You're proposing what is, IMHO, a bad tradeoff between usability and prettiness (symmetry). Even worse is to replace the arrow with a lock. It says “button”, not “slider”.

    Perhaps you could stay at the second line of your “prototype” part, targeting only users with enough experience to wonder what is this half-dimmed camera icon, but how would you expect them to hold long enough to see the light animated the other way around?

    The current implementation, is quite a good tradeoff, IMHO. The previous one, in iOS 5.0, which made this icon appear at the same place as a button, on double-click along with music controls, did indeed highlight asymmetry upon appearance, and was anyway probably overlooked by the majority of iOS users. This one was very quickly functional: upon discovering it after the update, I started by tapping on it (I guess most other users did, rather than instantly thinking of it as a knob, right?); the “jumpy” animation made what I was supposed to do immediately clear, without changing text nor forcing me to hold to get to learn the control. *This* is good UI design :)

    ReplyDelete
    Replies
    1. Matti,

      Excellent points, I had the same concerns with how new users will interpret seeing just the icons. I think the way Brye approached this was from a iOS user standpoint, but really user interface designers design for anyone and everyone, and account for all paths taken from beginner to expert users.

      Delete
    2. …and it seems I both can't edit my post and made the mistake of publishing it instead of previewing only (this CAPTCHA under “preview” probably meant publishing upon validation — bad UI ;) ).

      So, please add to my post above that it's still really nice to get such concepts, and that I'm glad you shared yours. It is just forgetting that all iOS users are not veterans, and you need to take that into account: interface design is not only about prettiness. You definitely have a skill for graphic design, as all these pictures show. You simply need to add some more “global” thinking, i.e. your users have very different habits and abilities.

      I'm afraid most users aren't as at ease with iOS controls as you are — and those who are not users yet even less—, but your proposal would probably be interesting for someone who has seen the current lock screen evolve over the years :)

      Delete
    3. Agreed. I think Brye has talent and a real eye for these kinds of concepts. I am definitely keeping my eye on his blog site for new ideas.

      Delete
  8. I like your solution and thought the same thing when I upgraded to 5.1.

    Ice Cream Sandwich (Android 4.0) also has a really nice solution:
    http://www.android.com/about/ice-cream-sandwich/

    See 'New lock screen actions'

    ReplyDelete
  9. If the phone is held in landscape, the lock screen camera shortcut *is* the horizontal swipe-to-unlock gesture, and is ready to shoot! I agree that it doesn't look as nice as something more symmetrical, but I really like the feel of it when held in a camera orientation.

    ReplyDelete
  10. one quick note, the rounded settings toggle switch was introduced with iOS 5.0 not 4.0

    ReplyDelete
  11. I want more, from Brye and from Apple:

    I want to be able to UNLOCK TO PHOTO and UNLOCK TO VIDEO directly, with one action.

    (Unlocking to camera saves time, true, but then the great photo opportunity goes by while I fiddle with the slider to switch the camera to the right mode ...)

    How about letting me unlock to the camera as it is by swiping with one finger, two fingers for photo, and three fingers for video?

    The beauty of that is that it maintains what people have learnt, and adds something useful and direct. The flaw is that the feature is hidden and will not be 'discovered': Users must be pointed to it, either by the UI ("did you know ...?" ... memories of the paper clip in Office come to mind), or some other way (iPhone commerical?)

    An alternative would be to let people swipe up like today for default camera, and down for video (no direct access to photo) (or down with two fingers for photo).

    Who else agrees that often it takes too much time to get the desired mode in Camera?

    Rainer

    ReplyDelete
    Replies
    1. Rainer,

      I would have to say that the probability of someone wanting to shoot a photo as compared to shoot a short video clip of something is much greater than your personal experiences would lead you to believe. There is also a great danger in providing direct access to the video recorder in that it could accidentally record without you knowing it, creating both a headache for yourself since it could eat up the storage on your phone (imagine not knowing it was recording in your pocket for, say, an hour) and not to mention it could also eat up your battery very quickly. It is also worth mentioning that if you have last used the video recorder in the Camera app, lock your phone, and swipe up for the Camera, it will load the video recorder. That helps.

      Remember that the lock screen is meant to be just that, it is a lock screen. I do not see Apple populating this 'stage' of usability with multi-touch gestures in order to do more things than you need to without even arriving at the Home Screen. And yes, hidden features, without explanation, especially on a broad scale as to account for all types of users of the iPhone, will not fare well.

      I agree with you in that it could be faster, and yes my phone does stutter when loading apps. But I believe this is not a software issue, it is a hardware limitation and this will indefinitely improve with time and technological advancements. The accessibility of both the Camera and Video Recorder are the same, for both you are to swipe up from the Lock Screen. Depending on what you want to do at that point, depends on what you last used.

      Delete
  12. Interesting idea, but you're contradicting yourself by forcing a counterintuitive motion to the lock screen by swiping to the left to access the camera and forcing users to press/hold to see activate (thereby negating the use of the quick access button). Also, semantically, the slider looks different from the other (preferences) sliders because there's an inherent difference in function.

    ReplyDelete
  13. What is the difference from LockSliderz, except different sliderknob?

    ReplyDelete