Lessons for mobile app developers on why Google Maps for iPhone looks so good
Google Maps for iPhone is back, and it’s a model of good design for mobile apps, according to developers, user experience (UX) experts, and visual designers.
As you’ll recall, Apple controversially dropped Google Maps from its new operating system for iPhones and iPads, iOS 6, and replaced it with its own software, Apple Maps, which has been unpopular with many users because of its error-prone data.
This week, Apple began distributing the new Google Maps for iPhone, which has been rebuilt from the ground up.
The app instantly became the most downloaded app on Apple’s iTunes store, receiving a 4.5/5 rating on thousands of ratings.
Here are some of the lessons other travel companies can draw from the app to design their own mobile apps.
This is a subtle touch: If you do a search and then shake your phone you receive this prompt: “You shook your phone! Your feedback and suggestions help us improve Google Maps!” You’re then offered an option to send feedback, or to stop receiving such prompts.
The direction this is going in is a positive one: Take cues from user behavior to anticipate what the user might be thinking.
In this case, a shake of the iPhone mid-search suggests that the user is frustrated in some way, either by a mapping issue (wrong road name) or erroneous place details (shop is closed), or the app is buggy (report a crash).
Clever deployment of usage advice
First time user receive follow-up prompts on how to use the app when they return to the device.
Yes, yes, we know that apps are supposed to be so intuitive to use that they don’t need instruction. But a little bit of prompting never hurt anyone.
Some apps have an intro where they walk you through in a few screen swipes the major features of the app. Other apps, like the new Google Maps for iPhone, realize that users may not pick up all the tricks on the first go, so they prompt the users with a couple of tricks on their return.
Case in point: Google’s new app has created a new icon, a rectangle with three dots in it, that is a mobile-first design creation. Click it, and it’ll take you to layers for traffic, public transit, and satellite data—plus a link to download Google Earth. New users might never notice it to click on the icon.
So on a second return visit to the app, users are prompted with a quick pointer. A fully greyed out screen points to the instruction “Tap here to show satellite imagery and other views.” Note the simplicity of that statement, which doesn’t try to overexplain.
Similar advice pops up after the first destination search a user performs. Again, the key point is that the screen goes fully dark, to catch the user’s attention, and the tip isn’t too complicated.
There’s more than swiping left and right
The first iPhone apps trained users to navigate by swiping left and right. But the device is capable of much more than that, and thankfully Google is one of the travel companies that is helping to expand user expectations of what is possible with a mobile device.
The Maps app adds vertical navigation to the standard iPhone horizontal navigation. For instance, if you want more details on a location, you’ll be swiping up from below.
This may be the creation of a new user expectation. Swipe left/right to move between functions, but swipe up/down to dive deeper for more information on the same function.
Subtle zooming effect
Fonts tend to be small on mobile apps for two reasons: making efficient use of screen real estate and creating a consistent, “art directed” look.
But looking at those tiny fonts can be exhausting.
When a user has clicked on information, that’s a sign the user is focused on a particular subset of information. Why not subtly bump up the font size of that information, whether it’s a menu or a set of details.
Designer Sacha Greif has created the following gif to illustrate how the menu’s elements appear to be getting closer to the user in Google Maps for iPhone. (By the way, Greif edits a useful e-mail newsletter called Sidebar, which delivers the day’s 5 best design links.)