Google Maps - Designing The Modern Atlas

Google Maps: Designing the Modern Atlas - Core77
pagina 1 van 11
Home
Contributors
About Core77
Advertising
Contact Us
Newsletter
Coroflot Design Job o' the day
Apple Inc. is seeking a CAD Sculptor/3D Modeler
Google Maps: Designing the Modern Atlas

Posted by Willem Van Lancker | 9 Jan 2012 | Comments (10)
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
http://www.core77.com/blog/case_study/google_maps_designing_the_modern_atlas_... 16/01/2012
pagina 2 van 11
customizationwith 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.
pagina 3 van 11
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 exercisewith 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.
pagina 4 van 11
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-ofday.
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.
pagina 5 van 11
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 besthelping 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 touristsallowing Google Maps to be internationally legible and approachable.
pagina 6 van 11
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.
pagina 7 van 11
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 itselfGoogle 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 Earthfrom 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.
1,649
Vind ik leuk
275
More: Case Study | UX Comments (10)
pagina 8 van 11
YOU MIGHT LIKE:
THIS WALLET SEAMS MINIMALIST
INNOVATION GETS TIRED, PART 1: THE NONPNEUMATIC TIRE
YELP INC. IS SEEKING A UI DESIGNER IN SAN FRANCISCO, CALIFORNIA
CASE STUDY: MINIME AND THE FUTURE OF INTEGRATED HEALTH CARE, BY ERGONOMIDESIGN
THE JOYS OF EARTHQUAKEFREE ARCHITECTURE
[?]
Comments
Paul January 9, 2012 6:36 AM
"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.
Adam January 9, 2012 6:58 PM
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.
Jacob Morgan January 9, 2012 8:25 PM
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
pagina 9 van 11
much less useful when used in sparsely-built areas, such as the western US.
Durand January 10, 2012 11:29 AM
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.
ranndino January 10, 2012 1:50 PM
@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.
Miles Bader January 10, 2012 8:50 PM
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.]
Noumenon January 11, 2012 7:38 AM
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.
mmm January 11, 2012 9:53 AM
@Durand the UK has 99% coverage on all networks.
Claudio Smith January 11, 2012 2:20 PM
pagina 10 van 11
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.
Nikhil January 12, 2012 12:56 AM
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!!
Name: Email: URL: Comment:
PREVIEW
POST
Most Recent Design Jobs at Coroflot.com - Where Design Never Sleeps

Assistant Professor, Graphic Design California College of the Arts : San Francisco, CA Art Director BigCommerce : Austin, TX Visual/Experience Designer, Y! Custom Branded Experiences Yahoo! : Sunnyvale, CA Senior User Experience Designer, Yahoo! CIO organization Yahoo! : Sunnyvale, CA Senior Designer - Digital Edelman : San Francisco, CA Senior User Experience Designer Quidsi Inc. : Jersey City, NJ
Most Recent Design Firm Updates at Designdirectory.com - Where Design Firms Get Seen
+ TANDEM + Karten Design + Formation Design Group + Creative CG + Empoise + Identidad Diseo + WORRELL DESIGN INC. + Design Religion Ltd + Indeed Innovation GmbH + FLIP
+ View all Design Jobs + Post a Job
pagina 11 van 11
2012 Core77, Inc. All rights reserved about | contact us | advertise | mailing list

Google Maps - Designing The Modern Atlas

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Google Maps - Designing The Modern Atlas

Загружено:

Авторское право:

Доступные форматы

Google Maps: Designing the Modern Atlas - Core77

Coroflot Design Job o' the day

Apple Inc. is seeking a CAD Sculptor/3D Modeler