Dec 13 2012/12/13 at 7:10 am

Design Details of Google Maps for iOS

I don’t have a car, so the lack of public transportation in Apple’s Maps app pretty much makes it useless to me. This is why I carefully avoided updating to iOS6 up to now.

This all changed a couple hours ago when Google Maps for iOS came out. Playing around with the app, I was impressed by the design, and I thought it would be interesting to highlight a couple things.

(Note that these remarks apply to the iPhone version)

The Google Style

The “Google Style” of UI design is a sub-style of flat design where everything is white or very light grey, icons don’t have text labels, and typography looks like it’s been through Weight Watchers.

I can’t say I’m a big fan of that style on the web (Google Reader looks awful in my opinion) but it works pretty well on mobile, especially for a maps app.

The white UI gets out of the way and puts the focus back on the content, and unlike on the web you don’t get that empty feeling that makes you think the page’s CSS has stopped loading halfway. And the map itself provides touches of colors that make the whole thing come together.

By the way, for examples of the Google design done right, go check out Haraldur Thorleifsson’s work for various Google projects. So far I haven’t really found actual Google apps with the same level of creativity and polish, although Maps is certainly a big step in the right direction.

Labels Orientation

The Google Maps app lets you rotate the map with a two-finger gesture. One detail I enjoyed was that labels do not rotate along with the map itself. Rather, they stay horizontal to remain readable.

This does cause some problems, like the fact that two labels can “bump” into each other which causes one of them to disappear. But overall, I thought it was a nice touch that helps you keep your bearings while you’re in the process of rotating the map.

The Side Menu

Goole Maps’ side menu (a.k.a. “basement” menu) features a very subtle zooming effect, making it seem like the menu’s elements are getting closer.

With UI transitions, these kind of simple, subtle effects are the most effective at conveying meaning or smoothing out interactions without slowing the user down or becoming distracting.

The Frustration Shake

I’ve always thought that apps should be able to detect’s user frustration and respond accordingly.

Google Maps (kinda) does this by triggering a feedback dialog when you shake your iPhone. Now I doubt that anybody is going to happen on that dialog randomly because it does take a pretty hard shake to trigger it.

But still, I like where they’re going with this. What if UIs became more sensitive to our behavior, instead of us having to explicitly tell them every single thing?

Vertical/Horizontal Transitions

From the start, the iPhone embraced a horizontal navigation concept, where additional screens always come in from the left or right.

That paradigm has become so engrained in designers’ minds that it’s easy to forget that we actually have two dimensions to work with.

In Google Maps, when getting directions your itinerary comes from the bottom up, and so does the additional details view for a particular location.

This is a great use of both axes: keep the left-right axis for switching between screens, and use the top-bottom one for providing additional info within a single screen.


Overall this is a great app not only from a functional point of view, but also because it embraces a very specific style and succeeds in making it work.

After Apple’s heavy-handed realism and Microsoft’s harsh minimalism, it’s nice to see that Google is also beginning to find its voice.

Note: if you like design articles like this one, may I suggest checking out Sidebar? It’s a newsletter of the 5 best design links of the day.

As usual, you can discuss this on Hacker News.

Enjoyed the post? Then you should Follow @SachaGreif or subscribe to the RSS feed.

The Newsletter

Stories & Tips To Make You A Better Designer

One email every Sunday. No spam.