Google Maps - Designing the Modern Atlas

8/3/2019 Google Maps - Designing the Modern Atlas

1/11

Home Contributors About Core77 Advertising Contact Us Ne

Coroflot Design Job o' the day

Apple Inc. is seeking a

CAD Sculptor/3D Modeler

Google Maps: Designing the ModernAtlas

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 theirlife. With Google Maps, this is certainly the desired outcome. Geographicnavigation and search should be smooth, efficient, and ultimatelystraightforward. 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 itsrelatively simple beginnings as a simple pannable and zoomable road mapof the United States and United Kingdom. Today we display business andtransit networks, three dimensional cities, natural terrain, and much more. It

is a map that serves pedestrians, motorists, tourists and locals alike. Soonit was not only used it as a "clean" map for wayfinding and browsing butalso as a base for overlays, search results, directions, and personal

pagina 1 van 11Google Maps: Designing the Modern Atlas - Core77

16/01/2012http://www.core77.com/blog/case_study/google_maps_designing_the_modern_atlas_...


2/11

customizationwith sources from all over the web. In the same vein asGoogle's mission, we are organizing the world's information in a geographiccontext.

The work and evolution behind this ambitious undertaking is a combinationof design vision, product strategy, engineering prowess, and ethnographic

and usability research. Our User Experience team comprises a small groupof designers, researchers and prototypers in offices around the globe. Theresearch and experience gained in these diverse locations give us insightsinto 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 alocal business connect more meaningfully with their customers to helpingyou find your gate at the airport on time, is harmonized by our commongoal to deliver a more complete picture of the Earth. From its roadways andcities to weather patterns and natural wonders, our team is attempting tocapture 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 betweensketchbooks and whiteboards, Photoshop and Fireworks, visualizing userscenarios and creating new design concepts quickly and in high-fidelity. Wecomplement this process by hacking rendering specs and tweakingJavascript to produce interactive demos. Occasionally, we will even turn toprograms like Apple Keynote and Adobe After Effects to quicklydemonstrate interactive transitions and animations. These lightweightmodels give us the ability to test and experiment with highly interactivedesigns without demanding the resources of a full engineering team. As the

design process continues, these prototypes (and static design mocks) arecrucial in our early "cafe" usability studies where we often walk a userthrough a single-outcome user "journey" (e.g. getting directions or finding ahotel).

A snapshot of Google Maps' design evolution 2009 (top) - 2011 (bottom). click for more

information.




3/11

Synthesizing all of this information in an approachable and aestheticallypleasing way carried obvious challenges. As the product grew and evolved,the map varied widely from one country to another, and the universalfamiliarity and usability that made Google Maps a success was beingundermined by complexity and "feature creep." To better understand whichof these variances were useful, we audited the map styles, colors, and

iconography of maps all over the world with the help of local users. Weexamined the leading online and offline mapping providers in each country,in addition to researching local physical signage and wayfinding. Thisundertaking provided us with a look at mapping as a local exercisewithcultural, 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 littleconsistency between this collection of maps and no real indication of acommon "correct" palette for color and style rendering. By unifying andsimplifying our own Google color palette down from hundreds to a smallhandful of colors, we were able to produce an experience that providedfamiliarity and uniformity as you browse the world.




4/11

A sampling of our color palette studies and refinement.

To complement our new simplified color scheme, we created localvariations to support familiar regional systems where needed (for example,the UK and Japan have more classifications of roadways than most of theworld). 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 addressfundamental differences in tasks as basic as navigation and drivingdirections. We have found that, generally speaking, people navigateprimarily by street names in Western countries and by landmarks andpoints of interest in the East. This is due to a combination of factorsincluding a lack of road names (e.g. in India where locals rely onlandmarks) or just a more complex street addressing system (e.g. in Japanwhere street numbers are assigned by date of construction, notsequentially). 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 theworld based on the international set of pictographs created by the AIGA.




5/11

A small sampling of our extensive icon system.

Within several regional systems, there are some notable exceptions to thisinternational system. In Japan for instance, schoolchildren are taught a setof unique icons for everyday things like post offices and hospitals. Toensure familiarity in that country, replacements were created specific toJapanese users. While we employ standardized icons for many modes oftransportation (e.g. buses, trams, trains), subways lack an internationalsign. As subways are often used by both tourists and locals, the localbranding systems for subway stations worked besthelping guide usersboth on maps and as they navigate outside in the real world. Additionally, acustom 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 feelrelevant and familiar to locals while being approachable and usable for

touristsallowing Google Maps to be internationally legible andapproachable.




6/11

The default map style wasn't the only thing we redesigned. At the sametime, we reworked our other views of the world. Our old "hybrid" satellitedesign felt too hard to parse, that the overlaid element were not legiblewhile obscuring the photographic imagery. Drawing inspiration from nature,we wanted to make the roads feel like the veins on a leaf: clearly visible ifyou 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 focuson what was important for the user and create a highly legible end result.Street names and transit network layout mattered, but road hierarches andshields less so, and the new design reflected that.

Transit layer design from 2009 (left) and 2010 (right). click for more information.




7/11

This style, at the same time clean and colloquial, has helped to distinguishGoogle Maps from traditional competitors since its launch seven years ago.It serves a dual purpose, both as a canvas for overlaid information (searchresults, 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 styleneeded to evolve in order to fit the enormous amount of extra informationwe wanted to present.

We learned that what made the map feel "Googley" wasn't any singleaspect or even a combination of specific design features. It wasn't any ofthe obvious things: the colors, the iconic pin and info-window, or thetypography. The intangible quality arose from something morefundamental: 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," anapproachability and familiarity. We are striving to present the primaryinformation in a clear and straightforward manner, with more detail andcontext dynamically surfaced when and where you want it.

This "straightforward" philosophy extends beyond the map itselfGoogleMaps is no longer simply a road map. We have worked (and driven) aroundthe world to create a "map" that is a collection of zoom levels, imagery,angles, and on-the-ground panoramas all wrapped into one. Through thesevaried snapshots of our world, we are attempting to sew together a moreseamless picture of the Earthfrom its natural beauty to the surprising(and often absurd) details that make it our unique home. As our workprogresses, new technologies give us the opportunity to get away from thelimitations and complexity of standard cartography to provide a much moreapproachable and easy-to-understand map, loaded with data andinformation.

All of these small details add up to make a product thatjust works, whiledelivering, literally, a world of data and information. With Google Maps weare attempting to make finding your way around the world effortless andenjoyable. With this we hope to also enable some of the magic that comes

with exploring everything from an exotic destination to your own town. Wewant to open up the world to everyone, whether it's for navigation, localrecommendations, browsing, or even just feeling the excitement that comesfrom getting to know your world just a little bit better.

Willem Van Lanckeris a User Experience and Visual Designer for Google Maps and a

regular contributor on Core77.

Jonah Jonesis the Lead User Experience Designer for Google Maps.

1,649 2Vind ik leuk More: Case Study | UX Comments (10)




8/11

Comments

Paul January 9, 2012 6:36 AM

"With Google Maps we are attempting to make finding your way around theworld effortless and enjoyable."

Which is great. And it's a lovely product. But in the UK at least unless youinclude Ordnance Survey mapping as a layer then you will always only beabout finding the way around the 'built' world. No footpaths. No bridleways.No contour lines. You have a great product. But it is still vastly vastlyinferior to OS mapping.

Adam January 9, 2012 6:58 PM

If I'm honest, I think they are taking a step backward. Everything is palerand thinner. How does that help me see anything? I want vibrant and boldin 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 tosee a USGS topographic map layer added. I enjoy the terrain layer, but it is

[?

THIS WALLET

SEAMS

MINIMALIST

INNOVATION GETS

TIRED, PART 1:

THE NON-

PNEUMATIC TIRE

YELP INC.IS SEEKING A UI

DESIGNER IN SAN

FRANCISCO,

CALIFORNIA

CASE STUDY:

MINIMEAND THE FUTURE

OF INTEGRATED

HEALTH CARE, BY

ERGONOMIDESIGN

THE JOYS OF

EARTHQUAKE-

FREE

ARCHITECTURE

YOU MIGHT LIKE:




9/11

much less useful when used in sparsely-built areas, such as the westernUS.

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 internetconnection and there's really no point in them including O/S and USGSunless people can actually use that information in the field. You may aswell 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 becauseunimportant, irrelevant details don't compete with what the user is lookingfor.

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 muchprominence, and the display of the (much more important) rail network isalmost invisible by default!

The map's display of the transit network should reflect how people getaround, and most people do not drive in Tokyo, they take the train.

[Even turning on the "show transit" option does not do a particularly goodjob of it: the overemphasis of highways is removed, and the subwaysindicated, 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 itremembered any of the destinations I'd used before it would be a lot easierto 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




10/11

It's interesting to see the differences in design by the leading Mapcompanies. I always like to compare the design of Google versus NokiaMaps, Bing Maps and others.

Nikhil January 12, 2012 12:56 AM

Interesting read. The combination of cartography, UX, and technology, allmashed up into a lovely product. I use Google Maps daily, without givingsecond thought for the intricate thinking that goes behind creating thisproduct. I myself love pouring over any kind of maps, and am sure it musthave been really fascinating to go through the localized maps from acrossthe globe. Keep up the 'Goog' work!!

Name:

Email:

URL:

Comment:

PREVIEW POST

Assistant Professor, Graphic DesignCalifornia College of the Arts : San Francisco, CA

Art DirectorBigCommerce : Austin, TX

Visual/Experience Designer, Y! Custom BrandedExperiencesYahoo! : Sunnyvale, CA

Senior User Experience Designer, Yahoo! CIO organizationYahoo! : Sunnyvale, CA

Senior Designer - DigitalEdelman : San Francisco, CA

Senior User Experience DesignerQuidsi Inc. : Jersey City, NJ

Most Recent Design Jobs atCoroflot.com - Where Design NeverSleeps

+ View all Design Jobs+ Post a Job

Most Recent Design Firm Updates atDesigndirectory.com - Where DesignFirms Get Seen

+ TANDEM+ Karten Design

+ Formation Design Group+ Creative CG+ Empoise+ Identidad Diseo+ WORRELL DESIGN INC.+ Design Religion Ltd+ Indeed Innovation GmbH+ FLIP



Google Maps - Designing the Modern Atlas

Documents

Transcript of Google Maps - Designing the Modern Atlas