GOOGLE MAPS & LABEL READABILITY, PART 3
Connecting the Dots Regarding Google Maps’s Superior Label Readability
Back in December, I wrote:
I’ve been trying to figure out why Google Maps’s city labels are more readable than the labels on other mapping sites.
Google’s labels seem to “pop” more than the other sites’ labels. Major cities also seem to stand out more. And whenever you’re quickly scanning the maps, the label you’re searching for seems to stand out just a little sooner.
While my December investigation uncovered the reasons behind Google Maps’s superior label readability, it did little to explain why Google Maps’s cities actually seem to pop from the maps. Different label classes, bright white outlines, and label decluttering all account for the superior readability—but they fail to explain why Google’s cities seem to stand out just a little sooner.
I’ve long suspected something else was at work, but I haven’t been able to put my finger on it… until now.
Do you recognize the dots above?1 They’re the dots that pinpoint the locations of Google Maps’s cities. And as you’ll see, they’re the reason why Google’s cities seem to stand out just a little sooner…
I’m going to show you two sets of maps, both showing the Minneapolis area. As you look at each image, note what your eyes are first drawn to.
The first two images are Google Maps and Yahoo! Maps, respectively. And the second two are Google Maps and Bing Maps, respectively.
As you looked at the Google samples, chances are that the city dots were among the first things your eyes were drawn to. (Notice that this isn’t the case on Yahoo! or Bing.) And if you’re anything like me, your eyes kept returning to them.
Google’s city labels stand out because they’re directly adjacent to these eye-catching dots.
But why are these dots so eye-catching, especially in comparison to Yahoo!’s and Bing’s?
Perhaps one reason is because they look three-dimensional.2 And if you were to compare the dots from all the images above, you’d find that Google’s are the only ones that look like this:
Even more interesting, though, is that Google’s dots are also the only three-dimensional-looking objects on its own maps. In other words, they’re among the most eye-catching things on the maps, and they literally pop from them.
Metadata in Maps
I want to show you something interesting.
First, take a look at how the Atlanta area appears on Google (left), Bing (center), and Yahoo! (right):
Now look at how the same area looks with all of the roads and text removed:
Even with all the text removed, we can still tell exactly where Atlanta is located on Google (left)—but not on Bing or Yahoo (center and right). This isn’t an accident…
One of the design differences between Google, Bing, and Yahoo! Maps is that Google uses more city dots than the other two sites3:
Maybe this is why we were able to identify which dot belonged to Atlanta on the map without labels. Let’s take a closer look at how the dots are distributed on each of the Atlanta examples…
(Above) Fifty-two dots appear on Google’s Atlanta sample, and only one of them is Google’s strongest and most eye-catching dot—i.e., the one given to Atlanta. This makes Atlanta’s dot the most noticeable one on the map and also draws a considerable amount of attention to Atlanta’s text label. Meanwhile, nine cities (out of the fifty-two) are awarded Google’s second strongest dot, allowing these cities to stand out more than all the others on the map (besides Atlanta).
It’s interesting: only one of the map’s cities is awarded Google’s strongest, most eye-catching dot—and this city is far more noticeable as a result. In stark contrast, Bing awards its strongest dot to nearly a third of the cities on its map:
(Above) Bing uses only two dot varieties (compared to Google’s four), and its cities stand out far less from each other as a result. Nearly a third of the dots on Bing’s sample use Bing’s strongest dot, while the remaining two-thirds use Bing’s weaker dot. Among other things, this means that Atlanta’s dot looks no different than the dots of seventeen other cities.
But there’s another, even more significant drawback: using two dots (instead of four) means that Bing’s dots, taken together, convey less information than Google’s…
(Above) Four dot varieties vs. two dot varieties — The information resolution of Google’s dots is higher than Bing’s because Google uses more dots. More dot varieties = more information about a city’s size, relative to other cities…
(Above) The information resolution of Google’s dots versus Bing’s. By virtue of their greater variety, Google’s dots communicate more information (in this case, population information).
Speaking of low information resolution, let’s take a look at Yahoo’s dots…
(Above) A funny-looking chart, eh? That’s because all of the eighty-six dots in Yahoo!’s Atlanta example look exactly the same. In other words, the map’s largest city (Atlanta) receives the same kind of dot as the map’s smallest city. And if it wasn’t for Atlanta’s larger text label, none of the cities on Yahoo!’s map would stand out from each other…
(Above) Four dot varieties vs. one dot variety — If Atlanta’s text label wasn’t larger than all of the other city labels, there would be no visual hierarchy to the cities on Yahoo!’s map. And because Yahoo!’s dots look no different from one another, they (unlike Google’s or Bing’s) convey no additional information to the user.
It’s amazing how much better the cities are organized on Google’s map compared to on Yahoo!’s… and that’s really the key here: by using a greater variety of dots, Google is better organizing its maps’ cities, while simultaneously making them easier to find.
* * *
I want to show you the effect of Google’s dot varieties combined with their striking, three-dimensional appearance. (It’s really quite extraordinary.) To do this, I’m going to use Rochester, Minnesota (home of the Mayo Clinic) as an example.
(Above) Notice how Rochester and the nearby city of La Crosse stand out prominently on Google’s map. The effect is almost like that of gravity… the dark, three-dimensional dots pull your eyes toward these cities—so much so, that it’s hard not to notice them.
Now look at the exact same area on Bing Maps:
(Above) At first glance, Rochester and La Crosse blend in with the map’s other cities (with the exception of St. Paul). There’s very little that’s drawing your eyes toward them, and users looking for their labels will spend more time scanning the map.
But look at what happens when we transplant Google’s dots onto Bing’s map:
(Above) Replacing Bing’s dots with Google’s makes Rochester and La Crosse stand out more. See how much better Google’s dots are at drawing the eyes?
Now on to Yahoo!:
(Above) Rochester (a city of 100,000) doesn’t stand out from the other cities on Yahoo!’s map. See what I mean about being able to find cities just a little sooner on Google’s maps?
Google Maps’s superior readability isn’t solely on account of effects applied to text, such as different label classes or thick, white outlines. It’s also the result of other effects, like Google’s use of eye-catching city dots and its use of a greater variety of them. Your opinions may vary, but I’m convinced (for the reasons I’ve outlined above) that cities do, in fact, seem to stand out just a little sooner on Google’s maps.
1 In cartographic parlance, “townspots” or “points”.
2 Perhaps another reason why Google’s dots are so successful at drawing the eye is because they exploit two of Jacques Bertin’s “Retinal Properties”, specifically “Size” and “Value”. In contrast, Bing’s dots only use one such property, “Texture”, while Yahoo!’s (on account of their lack of diversity) fail to exploit any.
Interestingly, even very good print maps (like National Geographic’s) typically only use one of these retinal properties (primarily, “Size”):
3 There is an exception here: both Bing and Yahoo! use a special dot to denote capital cities. I’m omitting them here because, in the grand scheme of things, only a very small number of cities receive these dots. (Only one U.S. city, for instance, is awarded this kind of dot).