I thought it would be interesting to compare the cartographic styles of Google Maps, Bing Maps, and Yahoo! Maps. As you can see from the images below, there are significant differences between the three:

The samples above are good approximations of each map’s overall styling. We’ll use these samples to compare the styles and evaluate the advantages and disadvantages of each, especially with regard to legibility.

Let’s start by looking at each map’s depiction of the road network...

Road Colors

Google Maps uses a gradient of a single color (yellow) for its roads. In contrast, Bing Maps uses two colors (green and brown), and Yahoo! Maps uses four (green, red, orange, and yellow). In the case of Google, using only one color for all of the map’s roads makes the map more legible than the other two maps.

Bing Maps uses green to differentiate its toll roads from its regular roads (which are brown). However, most people actually don’t realize this. When I surveyed a dozen or so people unfamiliar with Bing Maps, only two correctly guessed the meaning of Bing’s green highways — i.e., that they were toll roads. Of course, without a map key, many users may never realize why some of the roads are green.

The sample from Yahoo! Maps is unique in that a strip of white is added to the center of each freeway. This is a puzzling decision because it makes the city labels, which are outlined in white, difficult to read when they are placed above freeways. Adding to the legibility issues, Yahoo!’s freeways are also very dark. New York’s city label, for instance, is nearly illegible because the freeways underneath it are too dark.

Road Widths

Yahoo!’s roads are noticeably wider than Bing’s or Google’s. Nothing seems to be gained by this, and if anything, it makes Yahoo!’s map more difficult to read.

To differentiate between different road types (i.e., Interstate highways, U.S. Highways, state highways, etc.), all three of the maps use a variety of road widths. Even though Google only uses one color for its roads, it’s clear from the road widths which road types are which. In this regard, it seems unnecessary for Yahoo! to have used different coloring, in addition to using different widths, in order to differentiate its road types.

Shields

In my opinion, Google’s shields are the best-looking. Yahoo!’s shields are also nice-looking, but they’re so small that the shields’ numbering is almost illegible. I do, however, like that Yahoo!’s shields most closely approximate the appearance of real shields — that is, if you ignore the font used for route numbering. Google’s are also pretty close. Meanwhile, Bing’s shields look cartoony. I wonder why Bing chose to outline their Interstate shields in black.

Number of Shields

Google’s map sample has twelve shields, either wholly or partially, on it — eight of which are Interstate shields. In contrast, Bing’s map has only two shields, both of which are Interstate shields.

On the map from Yahoo!, there is only one Interstate shield — a strange move given that Interstate highways are the highest-profile highways on the map. In fact, of the nine roads labeled on the Yahoo! map sample, five are minor highways (i.e. state highways).

Google’s map sample not only has the most shields, but it also labels more high-profile, cross-country highways than the other two samples. Google’s sample is also the only one that labels both Interstate 80 and Interstate 95 — two of the most important U.S. Interstate highways.

Number of Cities

One thing that stands out to me right way about the map from Bing is how many cities are on it — there are no less than 96 cities, either wholly or partially, on the map. In contrast, the map sample from Google Maps has only 48 cities — 50% less than the sample from Bing. Meanwhile, Yahoo!’s map sample has 65 cities.

In my opinion, the map from Bing has too many cities on it — but I also don’t think that this harms the overall legibility of the map.

Types of Cities

You would think that with Google having the least number of cities on the map, some important ones might be missing. Yet, this is not the case.

Take a look at the chart below, which lists the 15 most populated cities located within the map area of the three samples:

Of the 15 most populated cities, you’ll find that Google shows 14 of the 15 largest cities within the map area. In contrast, Yahoo! shows only 10 of the 15 largest cities and also omits the view area’s second largest city, Newark.

(Jersey City, the only city omitted from each of three samples, is located between New York City and Newark. Given its close proximity to these two larger cities, Jersey City is the only city on the list that could not reasonably be expected to appear on the map given space constraints.)

City Dots / City Point Icons

Unlike Google and Bing, Yahoo! uses only one kind of city “dot”, making it much harder to determine which cities are the larger ones. In the case of Google and Bing, it seems better to use a mixture of both different text sizes and different city dots as indicators of city size / importance.

Google uses only circles for its city dots, making it clear — from both the size and coloring of the dots — which dots signify bigger cities. Bing, on the other hand, uses a mixture of circles and squares for its city dots. Google’s use of only one shape for city dots — circles, as opposed to both circles and squares — makes it much easier for users to determine Google’s city dot hierarchy.

Rivers & Water Bodies

Bing shows many more rivers and bodies of water than the other two. At this scale, I’m not sure it’s necessary to show this many bodies of water and, in many cases, the rivers and creeks shown on Bing Maps too closely resemble minor roads.

Borders

With their yellow coloring, Bing’s borders too closely resemble roads. (Google’s borders are well-differentiated, looking like nothing else on the map.)

Overall Legibility

Of the three maps, Google’s is the easiest to read and understand.

I wouldn’t be surprised if Google Maps’s overall legibility is one of the factors, among many, that contributed to Google Maps becoming the market-share leader in online maps. Clearly, design matters.

However, there’s also a lot to like about Bing Maps, and many of the things that I like about Google Maps are also present on Bing Maps. It’s Yahoo! Maps that has issues.

CONCLUSION

Yahoo! Maps: Style Over Substance

When I think about what’s wrong with Yahoo! Maps, I’m reminded of a presentation a few years ago by Cameron Moll. On one of his slides, he wrote “Good Designers Decorate, Great Designers Communicate”:

Herein lies the problem with Yahoo! Maps: there’s too much decorating and not enough communicating. For example, it seems that making the freeways attractive was a far greater priority than simply making New York City’s city label legible. Or look at the city “dots” used on Yahoo! Maps: the focus was clearly on making pretty-looking city “dots”, instead of making city “dots” that actually communicate information, such as city population. Even the typefaces used on Yahoo! Maps seem to have been an aesthetic-driven decision; notice how similar the fonts on Yahoo!’s map look to those appearing on iPod packaging.