Google Search

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.

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.

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.

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.

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.

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!)

Here’s the same illustration recorded in the evening:

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

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).

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.

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.

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 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.

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:

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 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.