App Dissection

← App Dissection
Google Search

Google Search

Posted 5 years ago · 16 details

Google Search for iOS is one of those apps that doesn’t get much use on my phone, but has some really beautiful polish that designers out there will appreciate.

Google designers, like Noah Levin (who has been the sole designer on Google Search for iOS during the last three years), have been a huge inspiration in my own work in recent months. At the end of the day, this app represents a wonderful level of teamwork and collaboration between Google’s designers and world-class engineers who have built a simple, powerful and delightful app for us to use.

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.

Launching

Launching the Google app makes it immediately clear what level of polish and interactivity we can expect from the interface. Quick transitions, snappy – yet bouncy – animations and clear movement all add up to create a wonderful first app experience.

Searching

You’ll have to pardon my recording software here for the black screen-flash. In real life, the animation when tapping into the search bar is smooth and seamless, responsive to your touch.

I love how Google embraces this sense of movement to help users feel a relative place, or position, within the app. Even when canceling the search, the original app interface slides effortlessly back into view.

Voice search

Here’s another example of the smooth interface change when tapping on the ‘voice search’ icon. We get a nice teaser of the soon-to-be-standard Material design pattern as well with the radiating circle on button-tap. If you have a keen eye, you’ll also notice the way the search bar is lifted slightly off the background when tapped, creating a sense of depth and responsiveness.

Google Now introduction

In this video, I’m signed out of the app – near the bottom we’re shown a teaser for Google Now. Tapping on the teaser brings up a beautiful splash view, guiding users to watch the introductory video. I love the way the background (colorful and playful – so Google) starts to scroll in the background, bringing life to what could easily have been a boring, lifeless view.

Pulling in cards

I grabbed this video after first signing into the app – notice the delay here for the Google Now cards loading in. While I’m sure there’s quite a lot of data-fetching magic happening in the background, the staggered movement at the bottom of the screen helps to draw the users eyes and help guide them to explore the app.

Scrolling to Now

I can’t get enough of this one – scrolling down into the Google Now view creates this beautiful transition with so much subtle movement (but not in a distracting way) and helps the users know that they’re in a separate segment of the app. Brent Couchman took the time to dig up all the possible illustrations that Google uses (hint: they change them out based on the time of day and user location!)

In the evening

Here’s the same illustration recorded in the evening:

In reverse

As it should be, scrolling back up provides the same seamless transition and experience for users.

Setting a reminder

This is good. Really good.

First thing: I love the animation on the pointer finger when the app is setting your reminder. Such a small touch, but feels so much better than a stock loading indicator.

Second: It’s worth paying close attention to the way Google makes the reminders interface with the rest of the app, especially Google Now. They consistently guide users with motion and transitions so that users have a sense of place within the content, and have extra context about the type of content they’ve just created (a new Google Now card).

Card information

This animation isn’t quite as smooth as we might have expected, but it’s a nice touch nonetheless. Tapping the information icon on a card flips it around, revealing the back and some additional text. One thing to note here is that the back of the card is a dark grey – for some reason this feels quite natural, and works with a user’s mental model of front vs. back.

Dismissing a card

And of course, dismissing a card is so damn fun. I really appreciate how responsive and reactive the other elements within the app are once a card has been dismissed. Everything is clearly interrelated and provides a wonderful sense of cohesiveness.

Refreshing the cards

These are the dark corners of your app – the little-used, often-overlooked interactions that 99% of users will never see or experience. But Google’s designers tackled them anyways – here, refreshing the cards provides a smooth transition and loading-in effect. The consistency across the app is so enjoyable, especially when you see the same design care placed into these lesser-known features.

Opening/dismissing the browser

Opening a browser link from a Google Now card pulls in a tab – I love the way it bounces lightly off the left side of the screen. At the risk of sounding like a broken record, it’s worth noting again here the attention placed on creating spatial-awareness in the app. It’s clear that the browser is simply a “layer” of the app – not a whole new view on its own.

This is especially useful once you dismiss the browser tab. It quickly falls off the bottom of the screen, returning you to the previous view.

Opening/dismissing continued

You can also swipe a browser tab to the right and have it hold onto the right edge of the screen. This allows you to scroll back through your other Google Now cards and still keep your place:

Scrolling images

As you scroll through the image search, the background fades to black and the navigation slides away. I love the emphasis here on the content, and adding the black background does a wonderful job of creating an immersive lightroom effect. Scrolling back up, of course, reverses the animation and reveals the search bar once more.

Pull back to home

Pull to refresh? Nah – pull to return. That’s the Google way, in this view at least. Pulling down on the screen creates a slick pull-to-refresh-style animation that drops you back at the app’s main view.