
Why Do Google Maps’s City Labels Seem So Readable? - ugh
http://www.41latitude.com/post/2072504768/google-maps-label-readability
======
zmmmmm
It's really interesting that Google seems to be at times able to pull off
wonderful UI design bordering on genius (Chrome, Google Maps) and at other
times just barely able to be at par (most of Android with select exceptions).
I guess this just reflects different teams within Google, but it's a shame
they can't apply their best UI talent across all their products (and
particularly, the products that most need it, like Android).

~~~
boucher
Google does an above average, and often good job, at actual usability
challenges. But they are pretty universally bad at making things that people
would consider beautiful.

Chrome gets usability issues right. Things like their tab closing behavior,
the almost total lack of dialogues, one click bookmarking, etc. are all really
great. But Chrome is not a beautiful app. Its toolbar icons are fairly
childish, its tabs just a bit off.

I'd say that trend holds through most of their products.

~~~
zmmmmm
> But Chrome is not a beautiful app

I guess it's totally subjective and therefore fairly meaningless, but I think
Chrome is the most visually appealing of any browser right now. This is
partly, I guess, because its primary virtue is minimalism, but the parts that
are there are beautiful, I think.

~~~
drivebyacct2
Couldn't agree more. The tabs and buttons fit perfectly into my operating
system (<http://i.imgur.com/DO5SQ.png> reusing this image from a few threads
back). I don't even use the "Use GTK+ Theme" option (though I do use system
titlebar because it looks hot).

~~~
allenp
What OS and theme/toolbar/etc is this? It looks great.

~~~
drivebyacct2
This is stock Ubuntu 10.10 Ambiance theme:

Unstable Docky from PPA (The stable version is basically identical). Docky is
pure butter. It is a few features down from AWN but it's MUCH more consistent
(had problems with clicks registering in AWN in weird places) and is gorgeous.
It really takes advantage of the SVG icons from Faenza.

* ppa:docky-core/ppa

The toolbar at the top is standard gnome-panel with Cardapio replacing the
standard GNOME Main Menu. Cardapio is easily my favorite main menu of any OS.
I have the ability to change the identifier for it, search the menu, see
everything grouped nicely, AND resize the menu itself. Awesome stuff.

* ppa:cardapio-team/unstable

* screenshot of Cardapio: <http://i.min.us/i9sRs.png>

I'm using Faenza icons:

* <http://tiheum.deviantart.com/art/Faenza-Icons-173323228>

* ppa:tiheum/equinox

Note, there is a conflict caused by Faenza's author overwriting PNGs in
/usr/share/dockmanager which is used by the Docky DEB. I used DPKG and
--force-overwrite to get them to install properly. A bit of a pain when there
are updates, but really it's only one command and it's well worth it.

(The only other thing I could add is, I use dockbarx when I remote in because
it doesn't require compositing where Docky does. When I do that, my setup
looks like this: <http://i.min.us/iErSa.png>)

~~~
mgedmin
The deb conflict could be solved rather neatly by using dpkg diversions:
[http://www.debian.org/doc/debian-policy/ap-pkg-
diversions.ht...](http://www.debian.org/doc/debian-policy/ap-pkg-
diversions.html)

------
lionhearted
I'm amazed that a post about such a potentially dry subject - UI/typeface on
maps - is the most fascinating thing I've read today. Extraordinary well done
by the author.

~~~
zazi
I have to agree with your comment. The more I read the more I was drawn into
the article. He had a previous post that was on HN a while ago that I found
pretty well written too - <http://www.41latitude.com/post/557224600/map-
comparison>

------
adambyrtek
The author had to put a considerable effort into preparing the post, and got
to some interesting conclusions. I can wholeheartedly upvote such a well
researched article. The animated images really show the difference and his
alternative variants of Yahoo and Bing demonstrate the point.

~~~
gregable
I came here to say the same thing. Modifying the maps from bing/yahoo to
simulate the effects that google provided must have taken forever. Even doing
something like adding an extra pixel or two of white background to 90ish
cities would take me hours. Very well polished article.

~~~
blahedo
Not to detract from the work he did (it's still not easy, and it's good work),
but a lot of that could be programmatic---select all pixels that are near-
black to extract the text, copy them to a separate layer, enlarge selection by
1.5 pixels, flood fill white, and then paste the original text on top of that.
A certain amount of massaging is necessary, but it probably wouldn't be
"hours" just for that.

Also, apparently Google has an API that lets you extract specific layers, e.g.
just the text (he mentions using this in the article). Makes sense in
retrospect, but it's cool to know anyway.

~~~
chc
Even if that isn't practical, you could just magc wand all the text in
Photoshop and put a stroke around it. It would probably take 15-30 mins.

------
bryanlarsen
A common complaint is that Google is engineer-driven rather than design
driven. Some very impressive counter-evidence in the article -- lots of nice
design hacks.

~~~
iaskwhy
I was thinking more along the lines of exception to the rule. I honestly have
some trouble finding another product by Google which has this attention to
detail (design-wise), maybe Chrome...

~~~
redthrowaway
Chrome on OSX is fantastic, my only beef being that some options are in
unintuitive places. For example, 'Extensions' is under 'Window'. _Why?_
There's a perfectly good crescent wrench just sitting by its lonesome self
over there there in the corner. I've found Chrome to be the only browser that
broke away from the traditional browser format, and pulled it off beautifully.
By contrast, FF 3.6 on OSX is hideous.

~~~
ianferrel
You can get to Extensions via the crescent wrench, too. It's
Wrench->Tools->Extensions.

Not at all obvious, but it's there.

~~~
redthrowaway
Well now I feel like an idiot. I'm going to bullshit and say it wasn't always
like that, because it took me forever to find when I first got my mbp.

------
blahedo
When I saw this I could have sworn I had read it before, but in fact what I
was remembering were earlier posts by the same guy (also comparing Google,
Bing, and Yahoo maps); if you liked this post you might like them too:

<http://www.41latitude.com/post/557224600/map-comparison>
<http://www.41latitude.com/post/1130407638/map-comparison-2>

------
curtis
The blank space around major cities is the most surprising idea to me.

~~~
bdr
This might be implemented with the same feature as the lack of clusters: a
label suppresses other labels around it, with bigger cities suppressing more.
Would be easy to do with a greedy algorithm.

~~~
scott_s
It's not the implementation that surprises me - once I know it's the right
thing to do, I can easily figure out a method how. What's surprising is the
insight that it is the right thing to do.

~~~
bruceboughton
I think the parent was suggesting the intuition may have come from applying
the other more obvious algorithm.

------
jcampbell1
The author forgot to mention that Google renders the text, then places it on
the image. Bing and Yahoo positions then renders, which leads to bad font
aliasing.

Better to explain with a picture: <http://imgur.com/sy06x>

Notice how the google's 'i' is perfect. No grey hinting.

------
cmurphycode
This article made me realize that Google's engineering/metrics based approach
is more suited to some tasks than others. There are far too many possible
views of the map to "design" by hand, but the algorithmic tricks that Google
is so good at can handle it no problem. Even if a traditional usability expert
could design a map of a given location at a given zoom level better (e.g.,
<http://www.kickmap.com/>), they couldn't pull it off at Google Maps scale.

Very good article, and the visual aides helped a lot.

------
peter_l_downs
Am I the only one who thought the Bing maps were more "readable" than the
Google maps? I do agree that the Yahoo maps were by far the worst, but to me
the Bing maps were better designed (other than the color scheme) than the
Google maps. Maybe it's just me?

~~~
willchang
I agree. Until someone runs subjects on a bunch of use scenarios, it's hard to
say which is better, and I happen to prefer Bing. Conjecturally speaking, one-
pixel outlines come at a cost -- if you don't need them, as when the map
colors are low-contrast, you can actually have somewhat bigger text.

~~~
ugh
My hypothesis is that people with poor eyesight or cheap monitors might have
problems with Bing. The low contrast is very beautiful, especially if you have
a great screen, but maybe not optimal in all situations. I would love to see
that tested.

------
mike463
Google has better thought out color contrast too. The other ones are either
too monochromatic, or the map details overwhelm the labels (think 90's web
page color contrast)

------
kadavy
This brings me back to the days of working at a planning & architecture firm
where I edited Illustrator maps with 500,000 objects in them.

The thick white outlines do a good job of ensuring that the letterforms aren't
impeded by other design elements.

The cleared-away areas around cities are a good use of "white space" to
increase the hierarchical dominance of major metropolitan areas.

There are some nice detailed observations here. Bookmarked.

------
buro9
What surprises me most about this is that this is a solved problem.

Labels on maps, proximity to their data point, shades to represents
importance, placing of labels to ensure clarity... all of this has long been
solved in the area of automated report generation, and specifically things
like bubble charts.

All that I see when I look at a Google Maps is all of the solutions to the
problem of producing legible and clear reports applied to a map.

All that I see when I look at Bing and Yahoo mapping are solutions that have
only looked at the domain of mapping and haven't considered whether other
domains have solved these problems.

I don't see "tricks" by Google, I just see a set of solutions from one area
being applied to the same essential problems in another area.

------
roryokane
I found the animated GIFs annoying in that they changed too fast. It was hard
to look at the important points of the map shown quickly enough before the
image automatically changed to the other version. For instance, I wanted to
try viewing Bing’s map on its own and test how long it took to for me find a
certain label on it, but the map always switched to Google’s version too
quickly. I would prefer that the different versions of maps would be different
images that I could open in tabs and switch between at my leisure.

------
pragetruif
It's interesting that Bing actually brought in an outside team (Stamen Design)
to design (version 2 of?) their maps:
<http://content.stamen.com/i_like_bing_maps_and_I_cannot_lie>

------
davidcann
I agree that Goole Maps look the best, but I think this more so highlights the
ineptitude of the other mapping sites. Using contrasting text borders over
complex patterns and decent spacing are common design principles that the
other sites should adopt.

------
cma
I don't think the shading effect is really intentional; it is just an artifact
of all labels being anti-aliased. A small font will be lighter than a large
font in order to indicate/approximate a smaller stroke-width.

------
newyorker
I've gotten so addicted to Google Maps, its very hard for me to use a Garmin
or Nuvi GPS. I appreciate the clean UI of Google Maps, hope they make
standalone GPS device (will save battery drain from your phone).

~~~
aisi
Garmin makes Nuvi. Try looking at some of the competition; TomTom are good for
maps with just the right amount of visual complexity, and clean UIs.

------
terra_t
Halos around your text are quite important if you're trying to draw titles on
television, particularly the old NTSC television. You see them all the time in
video games too.

------
adg
Anyone else wonder how the author made the white outlines on the Yahoo Maps
text? Seems super tedious to do this by hand.

------
kondro
Probably the most highly used piece of software to come out of Australia. Just
in front of Samba and Rsync :-)

------
Garbage
Yesterday I heard someone saying "Google is not a designer's company. Its
_just_ engineer's company".

------
w1ntermute
Any chance of a screenshot (guessing copypasta won't work because there are
images)? The site is down.

------
mkramlich
great article.

several of the qualities he pointed out were already obvious to me. but while
not officially a "designer" i've been creating software/graphical/print
interfaces for almost 30 years in one form or another. i do notice tricks with
fonts and entity positioning.

------
jasonfried
Anyone know the actual people involved in these map design decisions at
Google?

~~~
replytojasonf
I can make some introductions, but why do you want to know?

------
stuaxo
Arg, that term "pop"

------
drivebyacct2
Is it wrong of me to scoff? It's pretty obvious from the screenshots that the
text density and outlines are the most important and easily noticed factors.

