Core77
e
Google Maps: Designing the Modern Atlas
By Willem Van Lancker - Jan 09, 2012
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
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.
14 Comments
-
Doing some research and after reading the Google way of how they have refined their cartography skills, have come to the conclusion that the more they get paid and the more they refine their skills in their particular subject, the more they get burried in their own world. Not only are the maps harder to read but going by street name from place name is such a wrong direction. (unless you are familiar with district names). Visitors hate this as I managed a baxkpacker for many years, I also use to draw topographic maps and some cartography in my first career so have something to base these thoughts on. I swear that if most of Googles staff on a big OE ran out of power in their electronic toys, they would rethink most things.!Report as spam
-
Great post Willem! We had the audacity to translate some parts into Spanish
http://www.mapasycapas.com/lo-que-intentamos-es-organizar-la-informacion-del-mundo-en-un-contexto-geografico/!Report as spam -
Great read. I hadn't thought of it before, but after this I realize just how much info is now being presented through one of my favorite tools. Google Maps is becoming an operating system in it's own right.!Report as spam
-
Has anyone seen what Stamen are doing with open source mapping? Some of the monochrome output they are achieving is incredibly attractive and, in my view, often more usable.!Report as spam
-
Interesting read. The combination of cartography, UX, and technology, all mashed up into a lovely product. I use Google Maps daily, without giving second thought for the intricate thinking that goes behind creating this product. I myself love pouring over any kind of maps, and am sure it must have been really fascinating to go through the localized maps from across the globe. Keep up the 'Goog' work!!!Report as spam
-
It's interesting to see the differences in design by the leading Map companies. I always like to compare the design of Google versus Nokia Maps, Bing Maps and others.!Report as spam
-
@Durand
the UK has 99% coverage on all networks.!Report as spam -
Is there a way to make Google Maps remember where I live? If it remembered any of the destinations I'd used before it would be a lot easier to use.!Report as spam
-
I've found one rather big problem with google maps in Japan: in very transit-oriented cities like Tokyo, roads and highways are given far too much prominence, and the display of the (much more important) rail network is almost invisible by default!
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.]!Report as spam -
@Adam
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.!Report as spam -
In all fairness though, most sparsely built areas lack mobile reception, let alone 3g and hsdpa signals. Google maps is designed around an internet connection and there's really no point in them including O/S and USGS unless people can actually use that information in the field. You may as well get a proper O/S map instead of printing out a google maps version.!Report as spam
-
I agree with Paul's comment and extend it to the US as well. I would love to see a USGS topographic map layer added. I enjoy the terrain layer, but it is much less useful when used in sparsely-built areas, such as the western US.!Report as spam
-
If I'm honest, I think they are taking a step backward. Everything is paler and thinner. How does that help me see anything? I want vibrant and bold in my maps, personally. Sure, pale/thin looks nice when you glance at it, but it's harder to find things once you start actually looking at it.!Report as spam
-
"With Google Maps we are attempting to make finding your way around the world effortless and enjoyable."
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.!Report as spam
Continued Reading
-
By Core Jr - Dec 08, 2011
Double Diamond for Sustainable Strategy: Participatory LCA and Design Thinking, by Stephen Clune and Simon Lockrey
Corporate sustainability has become such a catchphrase in recent times that you'd think the business world had single-handedly reversed climate change, fostered world-leading social cohesion, obliterated third world poverty and the impending food crisis! The scary thing is the plethora of product, services or businesses marketed without any context...
-
By Core Jr - Oct 24, 2011
Innovation Self-Efficacy: Fostering Beliefs in Our Ability Through and By Design, by Liz Gerber
We are now face to face with wicked problems. Childhood obesity, climate change, aging population, literacy—the scope, implications and rate of change of today's critical problems make them unlike anything we have faced before. Solutions to these wicked problems have the potential to change the way we live in...
-
By Willem Van Lancker - Sep 16, 2011
Pigskin Loyalty and Geographic Ethnography
While trying to find where to watch my beloved Pats last season after relocating to the West Coast I found the 506, a site that curates interactive Google maps of TV markets for various American sports. I rediscovered the site earlier this week via kottke and took another look.However practical...
-
By Core Jr - Jun 06, 2011
Case Study: Building a Better Bottle with Replenish, by Jason Foster
Five years ago I had an epiphany while I was ironing my shirt. I found myself wondering why it was that my ironing spray had to come in such a big bottle? Why couldn't it come with a concentrate I could dilute myself in one integrated bottle, not two separate...
K
{Welcome
Create a Core77 Account
Already have an account? Sign In
By creating a Core77 account you confirm that you accept the Terms of Use
K
Reset Password
Please enter your email and we will send an email to reset your password.
