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.


27 Responses to Design Details of Google Maps for iOS

  1. Pingback: I’m glad Apple canned Google’s map app, and more glad that Google’s map app is back | keep pushing the limits

  2. Pingback: Behold, the Subtle Greatness of Google Maps for iPhone - Plugged Into The Matrix

  3. Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 « 移动科技网

  4. Pingback: Behold, the Subtle Greatness of Google Maps for iPhone : HotNews Indian News | India Newspaper | India Latest News | News From India | India News Daily | Current India News

  5. Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 | 互联网的那点事

  6. Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 - 阅趣-阅读的乐趣

  7. Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 « 人人都是产品经理

  8. Pingback: 设计师眼中的iOS版谷歌地图细节 | 博客 - 伯乐在线

  9. Pingback: Behold, the Subtle Greatness of Google Maps for iPhone | GeoSurf

  10. Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 - 品谷

  11. Pingback: Behold, the Subtle Greatness of Google Maps for iPhone | Welcome to My World!

  12. Pingback: 設計師眼中的iOS版谷歌地圖細節:簡潔貼心 -台灣遊戲Blog - 台灣遊戲,網頁遊戲資訊博客,提供最新網頁遊戲報導和免費遊戲資料

  13. Pingback: Building great customer service, dealing with old people and more | Bootstrappist

  14. Pingback: Googles neue Maps-App: Acht Infos die ihr kennen solltet | Fazli Kabashi

  15. Pingback: Behold, the Subtle Greatness of Google Maps for iPhone | Garret's Geeks

  16. Pingback: Google Maps for iOS design details | Apple News Gator

  17. Pingback: User Interface | Pearltrees

  18. Pingback: Technable | Making you Technically Able

  19. Pingback: Technable | Making you Technically Able

  20. Pingback: iOS版Google地图的设计细节 | 世上的光

  21. Pingback: UI : Le nouveau Google Map | JFLAROUCHE

  22. Pingback: Googles neue Maps-App: Acht Infos die ihr kennen solltet | News headlines

  23. Pingback: The Emerging Web Aesthetic | Browser

  24. Pingback: iOS版Google地图的设计细节 | 科技推

  25. Pingback: iOS版Google地图的设计细节 | 雷锋网

  26. Pingback: Googles neue Maps-App: Acht Infos die ihr kennen solltet | iPhone-Ticker

  27. Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 – 马开东博客

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>