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.
Conclusion
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.
Pingback: I’m glad Apple canned Google’s map app, and more glad that Google’s map app is back | keep pushing the limits
Pingback: Behold, the Subtle Greatness of Google Maps for iPhone - Plugged Into The Matrix
Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 « 移动科技网
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
Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 | 互联网的那点事
Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 - 阅趣-阅读的乐趣
Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 « 人人都是产品经理
Pingback: 设计师眼中的iOS版谷歌地图细节 | 博客 - 伯乐在线
Pingback: Behold, the Subtle Greatness of Google Maps for iPhone | GeoSurf
Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 - 品谷
Pingback: Behold, the Subtle Greatness of Google Maps for iPhone | Welcome to My World!
Pingback: 設計師眼中的iOS版谷歌地圖細節:簡潔貼心 - ::Game2.tw::台灣遊戲Blog - 台灣遊戲,網頁遊戲資訊博客,提供最新網頁遊戲報導和免費遊戲資料
Pingback: Building great customer service, dealing with old people and more | Bootstrappist
Pingback: Googles neue Maps-App: Acht Infos die ihr kennen solltet | Fazli Kabashi
Pingback: Behold, the Subtle Greatness of Google Maps for iPhone | Garret's Geeks
Pingback: Google Maps for iOS design details | Apple News Gator
Pingback: User Interface | Pearltrees
Pingback: Technable | Making you Technically Able
Pingback: Technable | Making you Technically Able
Pingback: iOS版Google地图的设计细节 | 世上的光
Pingback: UI : Le nouveau Google Map | JFLAROUCHE
Pingback: Googles neue Maps-App: Acht Infos die ihr kennen solltet | News headlines
Pingback: The Emerging Web Aesthetic | Browser
Pingback: iOS版Google地图的设计细节 | 科技推
Pingback: iOS版Google地图的设计细节 | 雷锋网
Pingback: Googles neue Maps-App: Acht Infos die ihr kennen solltet | iPhone-Ticker
Pingback: 设计师眼中的iOS版谷歌地图细节:简洁贴心 – 马开东博客