Google Maps & Label Readability - 41 Latitude - Herkulano's Posterous

5/13/2018 Google Maps & Label Readability - 41 Latitude - Herkulano's Posterous - slidepdf.com

http://slidepdf.com/reader/full/google-maps-label-readability-41-latitude-herkulanos-posterous 1/17

8/8/141Latitude - Google Maps & Label Readability - herkulano's posterous

Pahttp://herkulano.posterous.com/41latitude-google-maps-label-readability

SlideshowLogin

Get your own

Viewed 647 times

herkulano's posterous

« Back to posts

Share it your way on

Posterous -Create your

own site, blogor group for

free »

December 5, 2010 41Latitude - Google Maps & Label Readability

2nd December 2010

Google Maps & Label Readability

Why Do Google Maps’s City Labels Seem Much More “Readable” Than Those of Its

Competitors?

For months, I’ve been trying to figure out why Google Maps’s city labels seem so much more

readable than the labels on other mapping sites.

To me, Google’s labels seem to “pop” much more than the other sites’ labels. Major cities

also seem to stand out much more. [1] And whenever you’re quickly scanning the maps, the

label you’re searching for seems to stand out just a little sooner on Google’s maps.

Take a look for yourself:

http://herkulano.posterous.com/

http://posterous.com/

http://www.41latitude.com/post/2072504768/google-maps-label-readability


http://herkulano.posterous.com/41latitude-google-maps-label-readability

http://herkulano.posterous.com/41latitude-google-maps-label-readability

http://posterous.com/faq




http://posterous.com/login?jumpto=http://herkulano.posterous.com/41latitude-google-maps-label-readability

http://herkulano.posterous.com/#!/slideshow






(Above — click image to enlarge) The exact same area on Google Maps and Bing Maps.

Notice how the city labels on the sample from Google seem easier to read. They also seem

less cluttered.

(Above — click image to enlarge) The same area on Google Maps and Yahoo! Maps. Notice

how, once again, the labels on Google’s sample seem easier to read.

This post will investigate the reasons behind the superior “readability” of Google Maps’s city

labels.

Label Densities?

At first I assumed Google Maps was more “readable” on account of its city label densities—

i.e., that perhaps Google’s maps had fewer labels, making them more readable. I’ve since

found that this isn’t the case. In fact, Google Maps’s label density is not all that different from

http://quehtw.bay.livefilestore.com/y1pvVRU-wiH7Q1Ip-ImVGLNeHug45-gjctPuTjQI29Wn0H4tHe3agdGJTu3zYElRIsz21YgVlLCAYmsZoAHZqS0TyZEZOZeQloa/Google%20vs.%20Yahoo%20-%20NE%20US.gif?psid=1

http://quehtw.bay.livefilestore.com/y1piuTLY7lAaq9H4rHMqpg9avsEQLx0JYKIAwLI3aY7FHK2KERrbXORbgKpmpaKk5dMbsmiVsdClgXTHeo8FK8oqFJrH1XJ0wOV/Google%20vs.%20Bing%20-%20NE%20US.gif?psid=1





the other sites:

(Above — click image to enlarge) If you count all the city “dots” that appear entirely within the

image above, you’ll find that Google displays 86 city labels.

(Above — click image to enlarge) Over the exact same area, Bing shows 91 city labels—

only five more than Google.

http://public.bay.livefilestore.com/y1pI5kRvvcaQYpcGct3_XoEW1OHkKzqOl_mn0nXUjRproki8lV-Wz1pllPw4PkZ4LXPBCeSF5qJqFzmt0HJmpr-4w/91.png?psid=1

http://quehtw.bay.livefilestore.com/y1pNkt0qLBKKw3u2ghhbjiBPRRyjjRnBNCeYiq-dzKXe0YJ4OGr1-9DQR0hXbyQDj1WAH8KxYVresQDDrlOf-sgBMoWA36m6k_R/86.png?psid=1





(Above — click image to enlarge) Yahoo!, meanwhile, shows 83 city labels—only three fewer

than Google.

As you can see from the samples above, there’s not really an appreciable difference betweenthe number of city labels on any of these sites. If Google’s superior label readability isn’t on

account of it having fewer labels than the other sites, then what other reasons can account

for it?

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

I’ve found that there are three unique effects that Google applies to the text of its city labels,

and that these three effects seem to greatly enhance their readability…

1. White Outlines (That Completely Obscure All Background Data)

I can see you thinking it now: “Wait”, you say, “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 maps’ background details

(roads, rivers, etc.) behind them.

(Above) Google’s label for New York City. Notice

how you can’t see any roads or any other map details behind the “N”, the “e”, or any of the

other letters.

Contrast this with Yahoo!’s approach:

(Above) Yahoo!’s label for New York City. Like

Google, Yahoo! also outlines the text of its labels in white—but Yahoo!’s outlines are much

thinner than Google’s. And unlike Google’s labels, the map’s roads are visible behind

http://public.bay.livefilestore.com/y1pEm9VgPJkJQKZ20ZMgJJjqnojGBn_k5fueqXeV8OzZjB3yarQo1xYgNN6fLCVZ1b-ZjLjL_7O02EthUDmRw3Q9g/83.png?psid=1





Yahoo!’s, making them harder to read.

As you can see, Yahoo!’s decision to allow background map information to remain visible

underneath its city labels harms their overall legibility. Individual letters are broken up by other

dark lines, forcing users to give a second look to many labels. I, myself, find that whenever

I’m looking at Yahoo’s maps, I’m often deciphering labels—instead of simply reading them.

Let’s see what happens to Yahoo’s map if we enlarge the white outlines given to the text of

its city labels:

(Above — click image to enlarge) A world a difference ensues when we enlarge the outlines

of Yahoo! Maps’s city labels. Look at how much more readable the map becomes (especially

around New York City) with the enlarged outlines. Clearly, Google’s on to something here.

2. A Greater Number/Diversity of Label Classes

In addition to the thicker white outlines, Google typically uses more classes of city labels, at a

time, than the other two sites…

http://public.bay.livefilestore.com/y1pZgpXdjQBWW82koQ8szxri9JDKg0uadnj7rQckoL9LjS7ATNfMhvbrjIiEs6Ac0gew6pe6oBrsUpKELQYctkVKw/Yahoo%20outlines.gif?psid=1





(Above — click image to enlarge) Google uses four different types (or classes) of city labels

on the map above.

(Above — click image to enlarge) In contrast to Google, Bing only uses three classes of city

labels on the map above.

http://public.bay.livefilestore.com/y1pRFrs_ZdAjWu_RMm6rUlupSWEFC3wkgkC03ZFYFiBmM-4DJ-IUVmzO8w6GT4-5y3TP6xe9nStRDa8OqcGdueybg/Bing%20Maps%20label%20classes.png?psid=1

http://public.bay.livefilestore.com/y1ppgdeqehZ3M5XPk9LH31-4qIINzyqyoKsLiMm_fqT93HIspmKZqWDCerJGlEvy0gfa-iZMdHhV8N-K9lqHafcyw/Google%20Maps%20label%20classes.png?psid=1





(Above — click image to enlarge) Like Bing, Yahoo! also uses only three classes of city

labels on the map above.

With Google’s use of one additional label class, fewer city labels look alike, creating anexpanded hierarchy of labels. This expanded hierarchy, in turn, allows smaller cities to fade

into the background, while promoting larger cities to the foreground. The larger cities (often

used as reference points) stand out much more, making the map easier to navigate.

3. Different Label Shadings (i.e., Smaller Labels are Lighter, Larger Labels are Darker)

While the primary difference between each site’s city label classes is their size, Google takes

this one step further by also using color to differentiate its city label classes. In that, the

smallest city labels on Google’s maps are significantly lighter in color than the largest ones.

These lighter labels, in turn, enable smaller cities to fade into background, while allowing the

larger cities to stand out.

(Above) Notice the comparatively lighter color given to Google’s “Class 4” labels.

http://public.bay.livefilestore.com/y1prf2h9Z4Vv9iZKJNYmQkS_grVb_voD17z8to1UqHgVTcWEtYkX2-w0iiTLEAryfgBvCk5iYeQVIj9CZYMfOgWyA/Yahoo%20Maps%20label%20classes.png?psid=1





On the surface, the effect of these lighter labels might not seem that drastic—but look what

happens when we make Bing Maps look a little more like Google Maps (we’ll give Bing a

fourth class of labels, with lighter text than the other three classes)…

(Above — click image to enlarge) Here we take two of Google’s techniques—a fourth label

class, with lighter text and smaller fonts—and apply them to Bing’s map. 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. (The fourth label class I created, above, is comprised of all of the map’s

cities with populations fewer than 50,000.)

(Above — click image to enlarge) Zooming-in once, 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,

seems to serve as a far better, and even more visually appealing, way of organizing

information on its maps. It’s clear that part of the reason why Google’s maps are so

“readable” is that the labels of smaller cities are subdued, making the maps seem less

http://public.bay.livefilestore.com/y1pDQkAkzx16LDBlIxPA71Fw_ZWoIZJLhmqbLNm_YKRXitD347SoBG6JRvrvgrWQhkchQ1wZrBpV-peUsBTNtZv5w/Bing%20Zoom%208%20Full.gif?psid=1

http://public.bay.livefilestore.com/y1pZgpXdjQBWW_hYByon40GVe8oiiIltlqh7BGPfabxpOOsm9XUXmV7eSV4tjNKlo5RTgyLCJW-b8sad_b7eoAOhg/Bing%20Zoom%207%20Full.gif?psid=1





cluttered.

Let’s investigate a few more tricks that Google uses to enhance the readability of its maps…

OTHER VISUAL TRICKS

Beyond the three effects that Google applies to the text of its city labels, Google also seems

to apply a few interesting visual tricks to its maps, as well…

VISUAL TRICK #1: Label Decluttering Outside of Metro Areas

For several months now, I’ve noticed that Google shows more cities on its maps of Iowa than

on its maps of Illinois, and while this doesn’t happen on every zoom-level, it happens on

quite a few:

(Above - click image to enlarge) On Google Maps’s seventh zoom-level, 68 Iowa cities are

shown, while only 41 Illinois cities are shown.

This struck me as odd considering 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 there are portions of the

maps immediately outside of Chicago and St. Louis that are relatively devoid of cities.

I, then, closely examined other states and noticed that many of them with large metro areas

also had comparatively fewer cities on the maps. Even more interesting, though, I discovered

that pretty much every major U.S. metro area has a ring of white space immediately outside

of it on the maps.

http://goo.gl/maps/X8l7




Paghttp://herkulano.posterous.com/41latitude-google-maps-label-readability

Three 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 off the maps using Google Maps API 3…

St. Louis





Atlanta





Dallas-Ft. Worth





It seems that by removing cities immediately outside of major metro areas, Google is actually

making these metro areas stand out even more on the maps. This, in turn, makes it easier for

many users to navigate the maps, because they’re often using major cities as reference

points when browsing. In any event, the removal of cities immediately outside of large metro

areas also makes the maps appear less cluttered.

VISUAL TRICK #2: Absence of City Clusters

Unlike some of the other sites, Google also seems to avoid clustering cities too closely

together. Revisiting some of the images from earlier in this post, look at the distribution of

cities on Google Maps, compared to Bing:





(Above — click image to enlarge) Look at how Bing clusters cities together, especially in the

cores of the Baltimore, Washington, and Philadelphia metro areas and throughout

Connecticut. In contrast, Google seems to use larger spacings between cities.

The relative lack of city clusters on Google’s maps (especially around major cities) seems to

make them easier to read.

CONCLUSION

It turns out that Google uses a variety of techniques and visual tricks to help make its city

labels much more readable than those of its competitors. From the use of different shadings

to the decluttering of areas outside of major cities, it sure seems like Google has put a lot of

thought into how it displays the labels appearing on its maps. I have no doubt that little

touches like these are among the many reasons why Google remains the web’s most popular

mapping site.

Notes

[1] Bing’s maps are a notable exception here: major cities stand out far more on Bing’s maps

than on any other mapping site.

See this comparison of the New York metropolitan area on Google Maps and on Bing Maps.

Tagged: Google MapsBing MapsYahoo! Mapsmap design

via 41latitude.com

01 responseLike this postComment

Like

http://herkulano.posterous.com/responses/recent?post_id=35427989

http://herkulano.posterous.com/likes/create?like_type=post&post_id=35427989

http://herkulano.posterous.com/responses/recent?post_id=35427989

http://twitter.com/search?q=http%3A%2F%2Fherkulano.posterous.com%2F41latitude-google-maps-label-readability

https://twitter.com/share?original_referer=http%3A%2F%2Fherkulano.posterous.com%2F41latitude-google-maps-label-readability&related=posterous%3APosterous%20is%20the%20place%20to%20post%20everything.&source=tweetbutton&text=41Latitude%20-%20Google%20Maps%20%26%20Label%20Readability&url=http%3A%2F%2Fpost.ly%2F1IK3X


http://www.41latitude.com/tagged/map_design

http://www.41latitude.com/tagged/Yahoo%21_Maps

http://www.41latitude.com/tagged/Bing_Maps

http://www.41latitude.com/tagged/Google_Maps

http://www.bing.com/maps/?v=2&cp=40.71416151322162~-73.95361221006111&lvl=9&dir=0&sty=r

http://maps.google.com/?ie=UTF8&ll=40.720201,-73.916016&spn=1.188596,2.147827&z=9

http://public.bay.livefilestore.com/y1pSZn7AEjjK7PXGJYrUc-fqknIc9SmAFpi7as-OqAV9Tu-gAdcue59vA4FtwX6Mju2oQRmeF70frjjqeBRF5SzWw/Clusters.gif?psid=1





Leave a Comment

Hello there. Don't believe we've met before!

Log in with any of the following to comment:

Register or login to Posterous Log In

6 months ago maijau liked this post.

http://posterous.com/people/1lRbLBk0ztv

http://herkulano.posterous.com/41latitude-google-maps-label-readability#

http://posterous.com/login?flow=newcomment&jumpto=http%3A%2F%2Fherkulano.posterous.com%2F41latitude-google-maps-label-readability%23comment

Google Maps & Label Readability - 41 Latitude - Herkulano's Posterous

Documents

Transcript of Google Maps & Label Readability - 41 Latitude - Herkulano's Posterous