11 ms·
Why Do Google Maps’s City Labels Seem So Readable?
- peter_l_downs 16y agoAm 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?
- asmosoinio 16y agoIt's just you (based on my study with n=1). I.e. I think Google Maps look way better.
- rprasad 16y agoIt's not just you. Google's colors have more saturation, which makes the text labels stand out less, and this is what creates the need for the outline glow to make the text labels stand out again.
- willchang 16y agoI 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 16y agoMy 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.
- bryanlarsen 16y agoA 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 16y agoI 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...
- numbchuckskills 16y agohttp://www.google.com/hotpot http://www.google.com/hotpot is getting very positive ux /design reviews
- wmeredith 16y agoTry Boutiques.com. It's a pretty slick Google property. Feedburner's interface is also really nice, but it was there when Goog bought them.
- redthrowaway 16y agoChrome 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 16y agoYou can get to Extensions via the crescent wrench, too. It's Wrench->Tools->Extensions. Not at all obvious, but it's there.
- redthrowaway 16y ago
- curtis 16y agoThe blank space around major cities is the most surprising idea to me.
- bdr 16y agoThis 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 16y agoIt'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 16y agoI think the parent was suggesting the intuition may have come from applying the other more obvious algorithm.
- bdr 16y agoAgreed, I wasn't trying to say it was hard. Mostly pointing out how two features could be the same simple mechanism.
- kunley 16y agoMy guess is that it may be the practice used since years by designers of printed maps, ang Google has just consulted the right people on the topic.
- Rexxar 16y agoI wonder if it's really a genuine idea or simply the unintended consequence of an algorithm.
- cma 16y agoI 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.
- adambyrtek 16y agoThe 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 16y agoI 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 16y agoNot 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 16y agoEven 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.
- zmmmmm 16y agoIt'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).
- nodata 16y agolike Android Huh? Works for me. Consistent? Perhaps not. Bad design? Hardly, and it's getting better with each release.
- zmmmmm 16y agoI didn't (and wouldn't) say Android is badly designed. It's OK, and I'd even say certain parts are beautiful, but it's quite uneven and some parts do actually border on ugly. It is certainly good enough for me, but for most people I think the bar has been raised to stratospheric levels by Apple and people now have really high expectations of the visual experience they should get from phone OSes.
- asnyder 16y agoI don't know about you, but Android 2.2 is pretty beautiful. I had an iPhone for a while and personally feel the design of Android is significantly more natural to me. Best of all if you don't like how something behaves, you can usually swap it out.
- jrockway 16y agoI find Android a lot easier to use than iOS. What I've noticed when using an iOS device is that I often can't figure out how to do something. Then I research it and discover that it simply can't be done. Easy to learn, but unusable. Android, on the other hand, trades discoverability for usability. I have heard that some Android users don't even know that they can pull down the notification bar. But once you learn to do that, it's a wonderfully usable system. (Same for long-press. What to do something with a thing you see? Press and hold. Works every time, but not something you would necessarily think to do.) I think when people say "Android is unusable" they really mean, "Apple's icons are prettier", which is absolutely true. iOS devices look stunning on billboards and on TV. Android devices? Meh. (I blame the tastelessness of the carriers, though. A big fucking robot eyeball as the background? NASCAR and Sprint logos all over the place? Fuck off and die. AOSP is nice looking, though.) (Want to see the biggest software disaster ever in the history of humanity? The Nook Color with Android. B&N's effort to cripple Android was so half-hearted that they unintentionally created the worst computing device ever made. Examples: you can select text and choose "copy", but they removed "paste" from the long-tap menu on text fields. You can copy, but not paste. They also made their own "buttons" that work like Android's; Back (which is an undiscoverable gesture, not a button), Menu, Home. But sometimes, you also get the normal Android buttons. So you have two menus (that work alike, but have different items), two back buttons (that work differently, sometimes), and so on. WHAT WERE THEY ON WHEN THEY DESIGNED THIS. I'm going to be honest. I've never been so upset by anything ever. Using one of these things made me want to strangle the life out of everyone involved with the project and then go buy an iPad. And oh yeah, the fucking screen flickers like a dying fluorescent light. HOW CAN YOU FAIL SO BADLY. The one good thing is that they do not advertise that they are using Android. But I digress.)
- davidcann 16y agoI 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.
- blahedo 16y agoWhen 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/557224600/map-comparison http://www.41latitude.com/post/1130407638/map-comparison-2 http://www.41latitude.com/post/1130407638/map-comparison-2
- w1ntermute 16y agoAny chance of a screenshot (guessing copypasta won't work because there are images)? The site is down.
- drivebyacct2 16y agoIs 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.
- kondro 16y agoProbably the most highly used piece of software to come out of Australia. Just in front of Samba and Rsync :-)
- terra_t 16y agoHalos 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.
- lionhearted 16y agoI'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 16y agoI 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 http://www.41latitude.com/post/557224600/map-comparison
- dirtyaura 16y agoI find the subject fascinating, but the author really deserves the credit. Work he had done to visualize the concepts were really well-done.
- mike463 16y agoGoogle 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)
- stuaxo 16y agoArg, that term "pop"
- kadavy 16y agoThis 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.
- cmurphycode 16y agoThis 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/ http://www.kickmap.com/), they couldn't pull it off at Google Maps scale. Very good article, and the visual aides helped a lot.
- jcampbell1 16y agoThe 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 http://imgur.com/sy06x Notice how the google's 'i' is perfect. No grey hinting.
- pragetruif 16y agoIt'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 http://content.stamen.com/i_like_bing_maps_and_I_cannot_lie
- newyorker 16y agoI'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 16y agoGarmin 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.
- Garbage 16y agoYesterday I heard someone saying "Google is not a designer's company. Its just engineer's company".
- buro9 16y agoWhat 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 16y agoI 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.
- jasonfried 16y agoAnyone know the actual people involved in these map design decisions at Google?
- replytojasonf 16y agoI can make some introductions, but why do you want to know?
- adg 16y agoAnyone else wonder how the author made the white outlines on the Yahoo Maps text? Seems super tedious to do this by hand.
- mkramlich 16y agogreat 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.