Core77
It is often the case in interaction design that the best solutions simply get out of the way, allowing the user to achieve their goal and get on with their life. With Google Maps, this is certainly the desired outcome. Geographic navigation and search should be smooth, efficient, and ultimately straightforward. When this is successful and the product works as it should, the nuances and details behind these experiences can often go unnoticed, written off as algorithmically derived and invisible.
Since its launch in 2004, Google Maps has come a long way from its relatively simple beginnings as a simple pannable and zoomable road map of the United States and United Kingdom. Today we display business and transit networks, three dimensional cities, natural terrain, and much more. It is a map that serves pedestrians, motorists, tourists and locals alike. Soon it was not only used it as a "clean" map for wayfinding and browsing but also as a base for overlays, search results, directions, and personal customization—with sources from all over the web. In the same vein as Google's mission, we are organizing the world's information in a geographic context.
The work and evolution behind this ambitious undertaking is a combination of design vision, product strategy, engineering prowess, and ethnographic and usability research. Our User Experience team comprises a small group of designers, researchers and prototypers in offices around the globe. The research and experience gained in these diverse locations give us insights into real-world usage and help us better serve the needs of our users.
The breadth of our collective work, whether it's anything from helping a local business connect more meaningfully with their customers to helping you find your gate at the airport on time, is harmonized by our common goal to deliver a more complete picture of the Earth. From its roadways and cities to weather patterns and natural wonders, our team is attempting to capture the complexity and variance of these multiple systems in a product that just about anyone can use.
To accomplish this vision, we work in our studios flipping between sketchbooks and whiteboards, Photoshop and Fireworks, visualizing user scenarios and creating new design concepts quickly and in high-fidelity. We complement this process by hacking rendering specs and tweaking Javascript to produce interactive demos. Occasionally, we will even turn to programs like Apple Keynote and Adobe After Effects to quickly demonstrate interactive transitions and animations. These lightweight models give us the ability to test and experiment with highly interactive designs without demanding the resources of a full engineering team. As the design process continues, these prototypes (and static design mocks) are crucial in our early "cafe" usability studies where we often walk a user through a single-outcome user "journey" (e.g. getting directions or finding a hotel).
A snapshot of Google Maps' design evolution 2009 (top) - 2011 (bottom). click for more information.Synthesizing all of this information in an approachable and aesthetically pleasing way carried obvious challenges. As the product grew and evolved, the map varied widely from one country to another, and the universal familiarity and usability that made Google Maps a success was being undermined by complexity and "feature creep." To better understand which of these variances were useful, we audited the map styles, colors, and iconography of maps all over the world with the help of local users. We examined the leading online and offline mapping providers in each country, in addition to researching local physical signage and wayfinding. This undertaking provided us with a look at mapping as a local exercise—with cultural, ethnic, and region-specific quirks and nuances.
Our global cartography audit in progress.With this research in mind, we came to the realization that there was little consistency between this collection of maps and no real indication of a common "correct" palette for color and style rendering. By unifying and simplifying our own Google color palette down from hundreds to a small handful of colors, we were able to produce an experience that provided familiarity and uniformity as you browse the world.
A sampling of our color palette studies and refinement.To complement our new simplified color scheme, we created local variations to support familiar regional systems where needed (for example, the UK and Japan have more classifications of roadways than most of the world). In recent months we have introduced a few more regional changes to our color palette adding 3D building shadows to indicate local time-of-day.
Clockwise (from bottom left): Localized coloration in the roadways of Tokyo, London, & Paris. Late-afternoon shadows cast across San Francisco's Pioneer Park (Google MapsGL only).As Google Maps has broadened in scope, we have also had to address fundamental differences in tasks as basic as navigation and driving directions. We have found that, generally speaking, people navigate primarily by street names in Western countries and by landmarks and points of interest in the East. This is due to a combination of factors including a lack of road names (e.g. in India where locals rely on landmarks) or just a more complex street addressing system (e.g. in Japan where street numbers are assigned by date of construction, not sequentially). To accommodate these varied approaches, a system of "point of interest" icons was created for wayfinding and general browsing. These icons are familiar and understandable to people throughout the world based on the international set of pictographs created by the AIGA.
A small sampling of our extensive icon system.Within several regional systems, there are some notable exceptions to this international system. In Japan for instance, schoolchildren are taught a set of unique icons for everyday things like post offices and hospitals. To ensure familiarity in that country, replacements were created specific to Japanese users. While we employ standardized icons for many modes of transportation (e.g. buses, trams, trains), subways lack an international sign. As subways are often used by both tourists and locals, the local branding systems for subway stations worked best—helping guide users both on maps and as they navigate outside in the real world. Additionally, a custom body of regional road shields has been maintained, ensuring consistency and familiarity with real-world roadside markers.
Some examples of localized public transit icons and road shields.This combination of global and local icons helps to make the map feel relevant and familiar to locals while being approachable and usable for tourists—allowing Google Maps to be internationally legible and approachable.
The default map style wasn't the only thing we redesigned. At the same time, we reworked our other views of the world. Our old "hybrid" satellite design felt too hard to parse, that the overlaid element were not legible while obscuring the photographic imagery. Drawing inspiration from nature, we wanted to make the roads feel like the veins on a leaf: clearly visible if you are looking for them, yet intrinsically part of the overall design; adding detail without adding clutter.
Left to right: Hybrid map design from 2009, 2010, and inspiration; click for more information.Our transit layer went through a similar shift in visual design: rather than multiple layers of information competing with each other for prominence, we stripped back and minimized the visual elements on the map to focus on what was important for the user and create a highly legible end result. Street names and transit network layout mattered, but road hierarches and shields less so, and the new design reflected that.
Transit layer design from 2009 (left) and 2010 (right). click for more information. This style, at the same time clean and colloquial, has helped to distinguish Google Maps from traditional competitors since its launch seven years ago. It serves a dual purpose, both as a canvas for overlaid information (search results, directions, labels etc.), as well as a rich body of information itself (road vectors, coastlines, parks, etc.).
As Google Maps grew in complexity and coverage, the trademark style needed to evolve in order to fit the enormous amount of extra information we wanted to present.
We learned that what made the map feel "Googley" wasn't any single aspect or even a combination of specific design features. It wasn't any of the obvious things: the colors, the iconic pin and info-window, or the typography. The intangible quality arose from something more fundamental: a general feeling of friendliness, clarity, and simple focus.
Even as our interface and maps evolved to a more refined and subtle system over the past year, the map still retains this "Googley-ness," an approachability and familiarity. We are striving to present the primary information in a clear and straightforward manner, with more detail and context dynamically surfaced when and where you want it.
This "straightforward" philosophy extends beyond the map itself—Google Maps is no longer simply a road map. We have worked (and driven) around the world to create a "map" that is a collection of zoom levels, imagery, angles, and on-the-ground panoramas all wrapped into one. Through these varied snapshots of our world, we are attempting to sew together a more seamless picture of the Earth—from its natural beauty to the surprising (and often absurd) details that make it our unique home. As our work progresses, new technologies give us the opportunity to get away from the limitations and complexity of standard cartography to provide a much more approachable and easy-to-understand map, loaded with data and information.
All of these small details add up to make a product that just works, while delivering, literally, a world of data and information. With Google Maps we are attempting to make finding your way around the world effortless and enjoyable. With this we hope to also enable some of the magic that comes with exploring everything from an exotic destination to your own town. We want to open up the world to everyone, whether it's for navigation, local recommendations, browsing, or even just feeling the excitement that comes from getting to know your world just a little bit better.
Willem Van Lancker is a User Experience and Visual Designer for Google Maps and a regular contributor on Core77. Jonah Jones is the Lead User Experience Designer for Google Maps.
Willem Van Lancker is a product designer (UX) at Google with a passion for ethnography, maps, data visualization, and producing delightful user experiences.
Willem came to Google from IDEO where he worked as a communication designer focusing on understanding business systems and organizations through visual communication. Previous to IDEO, Willem worked for Apple, where he designed user interfaces for products including iPhone and iPad, and adidas, where he created new brand identities for various major league sports teams respectively.
Willem is a graduate of the Rhode Island School of Design (RISD) with a degree in Graphic Design. While at RISD, Willem teamed with a small group of Brown and RISD students to create A Better World by Design, a now-annual three-day conference encouraging social and environmental impact within educational policy. He also served as a researcher and core member for RISD’s Strategic Plan, charting a new course for RISD’s academic programs and student life initiatives focused on how students of different disciplines can innovate through collaboration.
When he is not working on new innovations for Google, Willem can be found writing, sailing, playing squash (both the sport and the gourd), following English (and American) football, and occasionally regretting the decision to eat that bacon-wrapped hotdog from a food-cart in the Mission District.
Create a Core77 Account
Already have an account? Sign In
By creating a Core77 account you confirm that you accept the Terms of Use
Please enter your email and we will send an email to reset your password.
Webinar
Google Maps: Designing the Modern Atlas
http://www.mapasycapas.com/lo-que-intentamos-es-organizar-la-informacion-del-mundo-en-un-contexto-geografico/
the UK has 99% coverage on all networks.
The map's display of the transit network should reflect how people get around, and most people do not drive in Tokyo, they take the train.
[Even turning on the "show transit" option does not do a particularly good job of it: the overemphasis of highways is removed, and the subways indicated, but much of the rail network is still almost invisible.]
What they've done is make unimportant details paler to bring out the important ones. As a result the maps are much clearer because unimportant, irrelevant details don't compete with what the user is looking for.
Which is great. And it's a lovely product. But in the UK at least unless you include Ordnance Survey mapping as a layer then you will always only be about finding the way around the 'built' world. No footpaths. No bridleways. No contour lines. You have a great product. But it is still vastly vastly inferior to OS mapping.