App Dissection

← App Dissection
Android 5.0

Android 5.0

Posted 5 years ago · 23 details

I missed some of the awkward “coming-of-age” years on the Android platform with Honeycomb (3.0), Ice Cream Sandwich (4.0) and Jelly Bean (4.1 – 4.3). My first true experience with Android was earlier this year on KitKat 4.4. The OS was nice, and not too jarring of a change from iOS 7 (at the time), but several quirks in the software made it impossible for me to fully abandon the Apple ecosystem.

This month’s release of Android 5.0 Lollipop, however, feels like it could be the tipping point. There are a lot of really amazing features that Android brings to the table now, and has in many way surpassed my expectations of what a mobile OS should be. I’ve been a long-time believer in iOS and Apple, but damn if Lollipop isn’t making the switch to Android oh-so tempting. This videos in this post were recorded on a Nexus 5, which might differ in some ways from other Motorola/Samsung devices, but ideally things will be fairly consistent for all Lollipop users!

As I was writing this Design Details it became clear that there was too much content for one post. I’ve decided to break the feature into two parts; part one is focused on the high-level design details of the OS as a whole, while part two will look deeper into some of the stock Android applications.

Also, a huge shoutout to Dan Farrelly and Tom Redman for proofing and improving this post – thank you!

The email newsletter

Get updates about new posts, new projects, or other meaningful updates to this site delivered to your inbox. Alternatively, you can follow me on Twitter.

Lock screen

I have to address up front how challenging it was to record the videos for this post. I scoured the Play store for good mirroring apps, I Googled my way down a dozen rabbit holes and eventually had to resort to Twitter to find the right answer – shoutout to Jeremy Le Van for the help! The solution: I had to download the Android SDK and platform tools in order to record the videos via command line prompts. I’m a bit shocked that we still haven’t seen a better solution here for screen recording on Android – devs, I would have paid $5-10 for an easy-to-use solution here. Wink wink.

These quirks aside, I’ve totally fallen for Lollipop’s aesthetic. Material Design has found its away across more apps and OS-level tools, making the entire experience consistent and comfortable. This lock screen (aside from the pesky debugging notification) is really slick – I love the slowly glowing ring around the lock icon.

From a usability perspective, I still feel like Apple wins the first-user-experience battle. Slide to unlock is more clear, and iOS’s gesture hints (right-facing arrow + animation on the text) provides users with more context about what to do.

Here’s what happens if you tap the lock icon.

Lock screen interactions

Circles everywhere. If you’re not familiar with Material Design, or Android in general, this post will surprise you with how versatile the circle can be in a software world dominated by rounded rectangles. The shapes provide an interesting contrast and a breath of fresh air to software design.

The Material Design spec provides some more information about this design decision in Responsive Interaction:

<blockquote>“Responsive interaction builds trust with the user and engages them. When a user interacts with an app and beautiful yet perfectly logical things happen, the user feels satisfied—even delighted. The interaction is thoughtful and purposeful, not random, and can be gently whimsical but never distracting. It encourages deeper exploration of an app.”</blockquote>

In this video, you can quickly access the camera or phone by swiping the bottom icons inwards (again, the usability here is questionable). I do, however, like the way the interface adjusts to your actions by fading out the other two calls-to-action along the bottom bar.

Notification settings

One thing I really want to highlight in this post is how powerful the notifications are on Android. This video highlights just one minor example (with more later in this post), but tapping + holding on a notification from the lock screen will unveil the settings for that parent application. Tapping the information icon will open the settings for that specific app, providing a faster way to manage your notifications.

Android navigation

The soft keys along the bottom of the screen – back, home and multi-tasking – are one of Androids biggest differentiators from iOS. Where iOS apps are adopting the swipe-to-go-back interaction, Android relies more heavily on the ‘back’ soft key that persists along the bottom of the screen. As a long-time iOS user, it’s hard for me to remember that this functionality even exists. But when I do remember, it’s a wonderful way to navigate through applications and it provides a beautifully-consistent navigation pattern across the entire system. This lack of consistency is a glaring usability issue on iOS.

This video just highlights some of the slick animations that accompany soft key taps. Pressing and holding the ‘home’ icon brings up the Google Now button – flicking your finger up will take you to Google Now.

Google Now

If you swipe right on the home screen, Google Now starts to fade into view. Notice the menu icon slide into place in the search bar once you reach the halfway point. That icon, when pressed from the Google Now view, brings up your user settings and Google Now preferences.

It’s worth mentioning that Lollipop still has a few small consistency issues that are lingering, but will no doubt be cleaned up in future releases. For example, here’s the slideout menus in the Play Store versus Google Now:

<img src="https://brianlovin.s3.amazonaws.com/lollipop-3.png" width="100%">
Voice search

Circles all around! I had to rewatch this video several times to pick up all the subtle movements and animations that happen when you activate voice search. Things move quickly, so pay close attention!

This video perfectly captures the intense attention to detail across Lollipop. Elements respond gracefully to your touch, movements are quick and snappy with the perfect amount of easing, and a brilliant use of color breathes life into the OS.

Multitasking

Lollipop’s multitasking is slick. It feels snappy and responsive, and creating a sense of depth adds character to the OS. I don’t have a preference either way on the iOS or Android multitasking menus – they both feel great and work well within their respective ecosystems.

Multitasking

Lollipop’s multitasking is slick. It feels snappy and responsive, and creating a sense of depth adds character to the OS. I don’t have a preference either way on the iOS or Android multitasking menus – they both feel great and work well within their respective ecosystems.

Multitasking scrolling

Scrolling through the multitasking menu feels so nice – movements are fluid and the physics here have just the right amount of friction. Because Android only shows a portion of each app’s screen at a time, more cards can be stacked at once in the multitasking view (remember that iOS only shows 3 apps at a time!).

Multitasking close

When it comes to closing apps from the multitasking view, you can either swipe-to-close or tap the ‘x’ in the upper-right corner. It’s amazing how even the close icon here incorporates circular animations and movements to maintain consistent interaction design.

Notification center

Lollipop’s notification center is stunning. Seriously – it’s insanely useful, easy to read and quick to navigate. I love some of the animations and transitions here as I open up my settings view. Check out the cog that rolls into place or the way the divider line draws itself out from the center of the screen. I love the way the notification modules stack on top of one another when there’s no more space left on the screen – design details, indeed.

Users

Android provides a way to create multiple users on one device, allowing multiple people to keep their apps and content separate. This isn’t really a privacy thing – switching between accounts isn’t locked down by default – but more of a way to give power back to users. In my mind this feature makes the most sense for tablets which are more likely to be shared among family members.

In terms of the design here, I found it odd that I could tap my user profile to open the user preferences, but couldn’t tap it again to close. You’ll see me try it in the video above. While Material Design brings consistency and life to the OS, the ‘More Settings’ and ‘Done’ buttons are not obvious ways to navigate within this view.

Settings view

If you tap the cog from the notification center it opens up the device settings view. There’s an insane amount of whitespace here, which depending on your preferences is either a good thing or a frustrating waste of screen real estate. But still, the text is clear, the segmentation of controls makes sense and the navigation is easy. It’s interesting that iOS doesn’t have a quick way to access the settings like this from their control center – it really is quite useful and saves users from having to dig folders or pages of apps.

Brightness controls

I love this little detail: when you adjust the brightness of your phone, the settings view fades out of sight to reveal your content underneath. This helps gives users a more accurate understanding of what their content will actually look like once the brightness has been changed.

Settings pulldown

I didn’t get the best recording here, so my apologies if it’s confusing! The key thing I wanted to highlight was that this settings view is really powerful. I can quickly toggle networking services on or off, turn on the flashlight or lock the screen orientation. What is not obvious, however, is that ‘Bluetooth’ and the wifi network name (Wu-Tang Lan, in my case) are separate labels which can open their own respective settings view. This isn’t really clear until you start tapping around.

One other cool thing that Dan pointed out to me was how different apps can secure a place in the settings pulldown. In this case, a screen capture app and a mobile hotspot automatically get added to this settings view. It’s still not quite clear how to customize these icons here, or delete them if I’d rather not have them shown, but I love this flexibility of the OS to accommodate each individual user:

<img src="https://brianlovin.s3.amazonaws.com/lollipop-4.png" width="100%">
Clear all notifications

Clear. All. Notifications. Thank you, Android, for this wonderful little touch. The icon to perform the action is not quite obvious, but the feature itself is so useful. I will be patiently awaiting this feature on iOS!

Toggles

This video captures a simple preferences toggle. The motion and color here are really nice touches. One thing about Lollipop, or Android in general, is that you can long-press on an option to move things in slow motion. I’m not sure what the practical reason for this could be, but it makes for an easy way to showcase everything going on with Material Design in this post!

Camera

Camera app design must be insanely fun, but impossibly challenging. Giving people easy access to controls and configurations without obscuring the view itself can be a tricky balance. I thought I’d share a comparison shot of Lollipop vs. iOS 8 below – of course, Android on the left and iOS on the right:

<img src="https://brianlovin.s3.amazonaws.com/lollipop-2.png" width="100%">

I suppose there’s no right answer to which design is better. Both make it easy to access settings and provide a clear way to snap a photo; that’s the most important thing. But for me iOS has built the interface in such a way that I feel in control while using my camera, but not bogged down in the configuration. That’s really important to casuals like myself.

The video above captures the camera app opening on Lollipop. The icon animations give context to users and helps them to know where more settings can be found. I thought that it could have been a nice touch to have the camera icon in the center of the screen during the loading transition move down to become the actual camera button rather than flying up and out of view.

Camera options

There are some quick options available within the camera app that let you toggle timers, gridlines, HDR images and flash. The icon on the right is to switch between the front and rear camera, which wasn’t immediately obvious. That icon seems like it could be a tricky one to design, and I’m not quite sure this one makes the most sense – in many ways it looks like an ‘exit’ icon: a door with an arrow to close the options panel.

Expanded notifications

I’ll end this post by looking more at Lollipop’s notification design. I have a hunch that I’ve only scratched the surface here on what developers are doing with interactive notifications, so if you know of any other cool ones give me a shout on Twitter!

In this video, I have a few Twitter notifications stacked up. If I tap, it expands the notification giving me a complete at-a-glance view of what I missed in that specific app. The motion here is gorgeous and the way the notifications react to one another feels right.

Notification overload

If you have more notifications than can fit on the lock screen, Lollipop begins to group and stack them to save space and prevent notification overload. A double tap expands everything at once which is a great way to manage information on the lock screen.

That’s it for part one of this Lollipop Design Details! I hope you’ve enjoyed the videos and thoughts here – give a shout on Twitter if I’ve missed anything at all! Part 2 will be coming soon to take a closer look at some of the stock Android apps – if you’d like to be emailed about future posts, sign up for the free newsletter!