justinobeirne.com

Justin O’Beirne of San Francisco, California: essays and contact information.

Google Maps & Label Readability
Why are Google Maps’s city labels more readable than those of other maps?
2010

Clutter is not an attribute of information, clutter is a failure of design... fix the design rather than stripping all the detail out of the map.
EDWARD TUFTE

For months, I’ve been trying to figure out why Google Maps’s city labels seem much more readable than those of other mapping sites.

For instance, here’s the exact same area on Google Maps and Bing Maps. Notice how Google’s city labels seem easier to read and less cluttered than Bing’s:

And here’s the exact same area on Google Maps and Yahoo! Maps. Notice once again how Google’s city labels seem much easier to read:

Whenever you’re scanning Google Maps, the label you’re searching for seems to stand out just a little sooner than on Yahoo! or Bing.

But why?

 

*   *   *

 

LABEL DENSITIES

At first I assumed Google Maps was more readable because it had fewer city labels than the other sites. But this actually isn’t the case.

For instance, if you count all of the city dot icons appearing entirely within the image below, you’ll find that Google displays 86 city labels:

Bing, meanwhile, labels 91 city here—just five more than Google:

And Yahoo! actually labels fewer cities than both Bing and Google (just 83):

So there’s not much of a difference between the number of city labels on any of these sites.

If Google’s superior readability isn’t on account of fewer labels, then what else explains it?

 

3 UNIQUE EFFECTS THAT GOOGLE APPLIES TO THE TEXT OF ITS CITY LABELS

I’ve found that there are at least three unique effects that Google applies to the text of its city labels to greatly enhance their readability:
 

1. Thick, White Outlines (that Completely Obscure all Background Data)

I can see you thinking it now: “Wait, doesn’t Yahoo! Maps also have white outlines around the text of its city labels?” It certainly does—but there’s a key difference: the white outlines of Google’s city labels are thicker, and you can’t see the map’s background details (e.g., roads, rivers, etc.) behind them.

For instance, look here at Google’s “New York” label. Notice how you can’t see any roads or other details behind the “N”, the “e”, or any of the other letters:

 

Now look at Yahoo!’s “New York” label:

Yahoo!’s outlines are much thinner, causing the text to be interrupted by dark road lines and water details. This forces readers to give a second look to many labels—and instead of reading these labels, you’re often deciphering them.

But look what happens if we enlarge Yahoo!’s outlines to resemble Google’s:

It’s a world of difference, isn’t it? Look at how much more readable the map becomes with the enlarged outlines (especially around New York).

 

2. A Greater Number / Diversity of Label Classes

In addition to the thicker outlines, Google also uses more city label classes than the other sites. For instance, Google uses four different city label classes on the map below:

In contrast to Google, Bing uses only three city label classes:

And Yahoo! also uses only three:

Google’s use of an additional label class allows smaller cities to fade into the background, while promoting larger cities to the foreground. This causes larger cities (which are often used as reference points) to stand out much more, making everything easier to find.

 

3. Different Label Colors (i.e., Smaller Labels are Grey, Larger Labels are Black)

While the primary difference between each site’s city label classes is their text size, Google also uses color to further differentiate its label classes. This allows larger cities to stand out because the smaller cities (with their lighter labels) almost disappear into background.

Notice how much lighter this fourth label class is, compared to the other city label classes:

The effect of these lighter labels may not seem that drastic—but look what happens when we make Bing look a little more like Google by giving it a fourth class of lighter and smaller city labels:

The result is nothing short of astonishing: the map instantly becomes less cluttered, and all without removing any of its detail. In fact, by adding a fourth class of city labels, we’ve arguably added even more detail to the map.

And zooming in, the changes are even more dramatic:

As you can see, Google’s use of a fourth label class, combined with the effect of lighter text, is a better way of organizing information. And it’s clear that this is part of the reason why Google’s map looks much less cluttered than the others.

Thicker outlines. More label classes. Lighter text. If all that wasn’t enough, Google seems to use a couple more tricks...

 

OTHER VISUAL TRICKS
 

VISUAL TRICK #1: Label Decluttering Outside of Metro Areas

For several months now, I’ve noticed that Google labels more cities on its map of Iowa than on its map of Illinois, and while this doesn’t happen on every zoom-level, it happens on quite a few.

For instance, here on Google’s seventh zoom-level, 68 Iowa cities are shown, while only 41 Illinois cities are shown:

This struck me as odd given that Illinois is both larger than Iowa (in terms of land area) and has many more cities than Iowa:

In trying to make sense of this, I noticed that Iowa is uniformly covered with cities, while Illinois is not: central Illinois is uniformly covered with cities, but the areas immediately outside Chicago and St. Louis are relatively devoid of cities.

And when I looked at metros in other states, I noticed that they also had relatively fewer cities around them. In other words, nearly every major U.S. metro area has a ring of white space immediately around it on Google Maps.

A few examples:

ATLANTA

 

MINNEAPOLIS / ST. PAUL

 

ST. LOUIS

Interesting, isn’t it?

These white space rings outside of major cities are even more apparent when you remove everything else from the map using Google Maps API 3:

 

ST. LOUIS

 

ATLANTA

 

DALLAS / FORT WORTH

By removing cities immediately outside of major metro areas, Google is making these metro areas stand out even more. This, in turn, makes it easier to browse the map because major cities are often used as reference points.

Moreover, the removal of cities immediately outside of large metro areas also makes the map look less cluttered.

 

VISUAL TRICK #2: Absence of City Clusters

Speaking of clutter, Google also seems to deliberately avoid clustering cities too closely together. For instance, take a closer look at Google’s overall city distribution, compared to Bing’s:

Bing clusters cities together, especially close to Washington, Baltimore, Philadelphia, and throughout Connecticut. Google, meanwhile, leaves more space between cities, giving them room to breathe—and making the map easier to read overall.

 

CONCLUSION

From the use of additional label classes to label decluttering outside of major cities, Google has clearly put significant thought into how it displays the labels on its map. Little touches like these are among the many reasons why Google has quickly become the web’s most popular mapping site.


© 2010  Justin O’Beirne  ·  Contact

All rights reserved. Unauthorized use and/or duplication of this material without express and written permission is strictly prohibited. Up to 250 words and/or 3 images may be used without permission, provided that full and clear credit is given to “Justin O’Beirne” with appropriate and specific direction to the original content.

Copyrighted materials are reproduced either with permission of their owners or under fair use. Trademarks are the property of their respective owners. No endorsement is implied.




HOME