Why Do Google Maps’s City Labels Seem So Readable?(41latitude.com)
41latitude.com
Why Do Google Maps’s City Labels Seem So Readable?
http://www.41latitude.com/post/2072504768/google-maps-label-readability
106 comments
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).
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.
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.
> 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.
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.
There's a lot of subtlety in Chrome, too.
For instance (in 9.0.597):
* Mouse over a tab, and move your cursor back and forth. The whole tab is highlighted, but there's extra brightness around the cursor.
* Similarly, look carefully at the buttons on the main bar, or at bookmarks, when mousing over. There's a subtle brightening over a fraction of a second, instead of an instant-on hover effect. Don't believe it? Compare it to mousing over the "+" new tab button, which is instantly highlighted to its full degree.
* Tabs, when re-arranged, slide to their new positions instead of snapping.
* URLs lose http://, and everything after the first "/" is very slightly grayed instead of black.
* Every corner is curved. Every dark edge is under-highlighted, so tabs seem to "float above" the rest of the UI. Those back / reload buttons seem to be recessed black icons instead of buttons - until you mouse over them.
* "Active" chrome elements - active tab, browser + extensions, and bookmarks - have a light -> dark -> light transition through all of them. Inactive tabs are noticeably closer to a solid, darker gray, though they to have a slight gradient. It helps unify the active tab with the applicable chrome seamlessly. You'll also notice Firefox 4 has adopted similar visual cues for tabs.
All of which adds more visual cues to what things do, and easier hierarchical organization at a glance, while maintaining extremely minimal clutter.
There are also a couple things I dislike. Like how utterly massive the bookmarks-in-folders on the bookmarks bar are. Almost twice what other browsers have / via the menu. Glitches in Web Inspector. Excessively-useful hidden preferences. But overall, there's a frightening amount of polish in Chrome.
For instance (in 9.0.597):
* Mouse over a tab, and move your cursor back and forth. The whole tab is highlighted, but there's extra brightness around the cursor.
* Similarly, look carefully at the buttons on the main bar, or at bookmarks, when mousing over. There's a subtle brightening over a fraction of a second, instead of an instant-on hover effect. Don't believe it? Compare it to mousing over the "+" new tab button, which is instantly highlighted to its full degree.
* Tabs, when re-arranged, slide to their new positions instead of snapping.
* URLs lose http://, and everything after the first "/" is very slightly grayed instead of black.
* Every corner is curved. Every dark edge is under-highlighted, so tabs seem to "float above" the rest of the UI. Those back / reload buttons seem to be recessed black icons instead of buttons - until you mouse over them.
* "Active" chrome elements - active tab, browser + extensions, and bookmarks - have a light -> dark -> light transition through all of them. Inactive tabs are noticeably closer to a solid, darker gray, though they to have a slight gradient. It helps unify the active tab with the applicable chrome seamlessly. You'll also notice Firefox 4 has adopted similar visual cues for tabs.
All of which adds more visual cues to what things do, and easier hierarchical organization at a glance, while maintaining extremely minimal clutter.
There are also a couple things I dislike. Like how utterly massive the bookmarks-in-folders on the bookmarks bar are. Almost twice what other browsers have / via the menu. Glitches in Web Inspector. Excessively-useful hidden preferences. But overall, there's a frightening amount of polish in Chrome.
The day that minimalism got equated with beauty was the day we realized we had too much clutter in our lives, so minimalism = beauty is simply a reactionary concept. Minimalism in of itself could not be considered beauty if you looked at what is considered beautiful art, architecture, clothing, etc, in general.
Take a course on art history. Especially global art history. This is not a new concept, new style, trend, focus, what-have-you, though it has gained new momentum.
Edit: See: Suprematism (http://en.wikipedia.org/wiki/Suprematism), De Stijl (though they liked bold colors) (http://en.wikipedia.org/wiki/De_Stijl), arguably Bauhaus (http://en.wikipedia.org/wiki/Bauhaus), "International Style" ( http://en.wikipedia.org/wiki/International_style_(architectu... ), all of which came before the increased business in art of the 40s-60s, which came before "Minimalism" proper in ~1965. And this is primarily in America & Europe - other areas have had their blends as well.
All of which was pretty heavily influenced by the traditional Japanese aesthetic, which has a pretty strong focus on Minimalism-like attributes.
Minimalism as a positive thing isn't just reactionary. It also serves to bring subtle details into focus, and to emphasize the craft (ie, crafter's experience / quality) as a whole rather than individual details.
Edit: See: Suprematism (http://en.wikipedia.org/wiki/Suprematism), De Stijl (though they liked bold colors) (http://en.wikipedia.org/wiki/De_Stijl), arguably Bauhaus (http://en.wikipedia.org/wiki/Bauhaus), "International Style" ( http://en.wikipedia.org/wiki/International_style_(architectu... ), all of which came before the increased business in art of the 40s-60s, which came before "Minimalism" proper in ~1965. And this is primarily in America & Europe - other areas have had their blends as well.
All of which was pretty heavily influenced by the traditional Japanese aesthetic, which has a pretty strong focus on Minimalism-like attributes.
Minimalism as a positive thing isn't just reactionary. It also serves to bring subtle details into focus, and to emphasize the craft (ie, crafter's experience / quality) as a whole rather than individual details.
I agree wholeheartedly, I've been using Chrome for a few months now and every time I have to open Firefox to do something it's a little painful.
[deleted]
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).
What OS and theme/toolbar/etc is this? It looks great.
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)
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)
The deb conflict could be solved rather neatly by using dpkg diversions: http://www.debian.org/doc/debian-policy/ap-pkg-diversions.ht...
I would consider using dev chromium so you have the option to hide the system title bar and push the [x] [_] [[]] down inline with the tabs. Otherwise great links!
Gaaah, so many wasted vertical pixels! http://imgur.com/DwTik.png
I adore both the usability and appearance of Chrome (icons, tabs, etc) -- Chrome is beautiful in this beholder's eyes.
>But Chrome is not a beautiful app.
What would you consider a beautiful app? Chrome is the prettiest piece of desktop software I use, but I don't have a whole lot to compare it to.
What would you consider a beautiful app? Chrome is the prettiest piece of desktop software I use, but I don't have a whole lot to compare it to.
Subjective opionion but - http://www.6wunderkinder.com/wunderlist/ - Their task management app is pretty 'beautiful' imo.
Most people would rather use their software than admire it.
Yes, and I severy dislike software where the 'UI bling' gets in the way of usability, or where the application author disregards my user preferences (like system colors and fonts) and tries to force his taste on me. So-called 'skinned' apps often have this problem. What's wrong with native controls? That's what I expect and am used to.
But Chrome is not a beautiful app.
That's an important distinction to make. Beautiful is not the same thing as UI. Many many people see something pretty and think that it therefore has great UI.
However UI is more than the colours (though that's important), it's things like discoverability, predicatability, etc.
That's an important distinction to make. Beautiful is not the same thing as UI. Many many people see something pretty and think that it therefore has great UI.
However UI is more than the colours (though that's important), it's things like discoverability, predicatability, etc.
My girlfriend admits Chrome is faster and generally better, but still uses Firefox because it's friendlier and designed more to her tastes.
like Android
Huh? Works for me.
Consistent? Perhaps not. Bad design? Hardly, and it's getting better with each release.
Huh? Works for me.
Consistent? Perhaps not. Bad design? Hardly, and it's getting better with each release.
I 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.)
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.)
I've been using vanilla Android for almost a year now. The more I use it the more I dislike it. By far my number one complaint is bugs. Some of them are so apparent and easily reproducible is simply inexcusable that they're still there (all reported btw). I haven't rooted my Nexus One, so I don't have that to blame either.
It gets tiring to click the same message-contact shortcut and sometimes to be taken to the right place and sometimes to the list of users, or trying to attach an image and not be sure if the gallery application will crash or not (and having to manually close it), or after N text messages sent and getting a lovely "Message could not be sent" error not knowing if it's the messaging app misbehaving or my carrier (almost always a force close of the messaging application fixes the issue), or the scrolling in the browser acting up while locking and unlocking the screen miraculously fixes it... There's also the focus on fancy features like navigation while neglecting the basics like the phone part. I had more control / features on the phone side with my ancient Sony Ericsson dumb phone than on my "superphone"
The potential is there though...
It gets tiring to click the same message-contact shortcut and sometimes to be taken to the right place and sometimes to the list of users, or trying to attach an image and not be sure if the gallery application will crash or not (and having to manually close it), or after N text messages sent and getting a lovely "Message could not be sent" error not knowing if it's the messaging app misbehaving or my carrier (almost always a force close of the messaging application fixes the issue), or the scrolling in the browser acting up while locking and unlocking the screen miraculously fixes it... There's also the focus on fancy features like navigation while neglecting the basics like the phone part. I had more control / features on the phone side with my ancient Sony Ericsson dumb phone than on my "superphone"
The potential is there though...
I couldn't find your bug report or patch anywhere. Do you think people can magically fix bugs you experience without you even telling them what the bug is?
(I personally have never seen any of these issues. The main problem I have with Android is the culture of low-quality ad-supported apps, and sadly, that's something a bug report isn't going to fix.)
(I personally have never seen any of these issues. The main problem I have with Android is the culture of low-quality ad-supported apps, and sadly, that's something a bug report isn't going to fix.)
Did you really search?!
One of the issues I mentioned is on the first page of bug reports: http://code.google.com/p/android/issues/detail?id=6296&c...
Here's the contact shortcut one: http://code.google.com/p/android/issues/detail?id=10663&...
For the gallery crashing since I don't know exactly what causes it I can't point to a specific bug report, but there are over 100 unsolved issues with the gallery application.
I don't have time to search for the other bug reports, but they're there.
One of the issues I mentioned is on the first page of bug reports: http://code.google.com/p/android/issues/detail?id=6296&c...
Here's the contact shortcut one: http://code.google.com/p/android/issues/detail?id=10663&...
For the gallery crashing since I don't know exactly what causes it I can't point to a specific bug report, but there are over 100 unsolved issues with the gallery application.
I don't have time to search for the other bug reports, but they're there.
They should "magically" fix bugs so I never experience them.
I think you're just talking about the applications in a stock Nexus One, not the operating system itself (i.e. the UI, the services it provides, etc). If the apps are lousy it's one thing, but the system behaves quite predictably more often than not.
And yes, the stock apps could do with a bit improvement, but you can always install another alternative app from the market. That's what it is for, isn't it?
And yes, the stock apps could do with a bit improvement, but you can always install another alternative app from the market. That's what it is for, isn't it?
In my experience that's a distinction iphone owners don't need to make.
Being an iPhone owner I disagree (though original iPhone so I don't know about newer models). Mine crashed, not applications, the phone itself, on a regular basis.
I never ever had a crash of the OS (starting with 3.x, now still 4.0) so far on my iPhone 3GS.
I 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.
I 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.
Related:
They're trying (sort of): http://code.google.com/closure/library/
Here's a talk once about their process: http://www.youtube.com/watch?v=697KX4Ciiws#t=02m40s
and a blog post: http://googleblog.blogspot.com/2008/04/what-makes-design-goo...
P.S. Anyone know an easy Maps API trick for setting zoom level to display each of the U.S. states (which vary dramatically in size)?
They're trying (sort of): http://code.google.com/closure/library/
Here's a talk once about their process: http://www.youtube.com/watch?v=697KX4Ciiws#t=02m40s
and a blog post: http://googleblog.blogspot.com/2008/04/what-makes-design-goo...
P.S. Anyone know an easy Maps API trick for setting zoom level to display each of the U.S. states (which vary dramatically in size)?
I'm not familiar with the Maps API, but the site does it for you:
http://maps.google.com/maps?f=q&source=s_q&hl=en&... (from searching Texas)
http://maps.google.com/maps?f=q&source=s_q&hl=en&... (from searching Texas)
Doh! On second thought, actually think I tried that, but was unhappy with the results.
Try using the fitBounds method to set the map to a LatLngBounds object.
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.
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
I find the subject fascinating, but the author really deserves the credit. Work he had done to visualize the concepts were really well-done.
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
http://www.41latitude.com/post/557224600/map-comparison http://www.41latitude.com/post/1130407638/map-comparison-2
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.
Better to explain with a picture: http://imgur.com/sy06x
Notice how the google's 'i' is perfect. No grey hinting.
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.
Very good article, and the visual aides helped a lot.
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?
It's just you (based on my study with n=1). I.e. I think Google Maps look way better.
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.
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.
It'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.
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)
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.
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.
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.
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.
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.
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
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.
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).
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.
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.
Anyone else wonder how the author made the white outlines on the Yahoo Maps text? Seems super tedious to do this by hand.
Probably the most highly used piece of software to come out of Australia. Just in front of Samba and Rsync :-)
Yesterday I heard someone saying "Google is not a designer's company. Its just engineer's company".
Any chance of a screenshot (guessing copypasta won't work because there are images)? The site is down.
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.
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.
Anyone know the actual people involved in these map design decisions at Google?
I can make some introductions, but why do you want to know?
Arg, that term "pop"
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.
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.
You're assuming they didn't arrive at these settings for borders, weight, classes of label via A/B testing of various alternatives. Google has enough resources available that for something like this it could easily substitute brute-force testing for "best-practice" design (and there's a number of arguments why that might be the better choice, including the fact that design practice seems to evolve over time.)
They would still have to think of these ideas in order to test them. Talking about 'brute-force design' implies that there is no thought involved.
>They would still have to think of these ideas in order to test them.
Text has background, envelope, whitespace (leading, kerning, etc.), font, outline, fill (and probably other general properties too). It's not A/B testing but I could see engineers iterating over variations - should the envelope follow the curves of the text or be a box or blob, etc.. All spacing, be it kerning or border-width can be iterated over, colours too - indeed thinking of this makes me want to write an Inkscape plugin to help in font choice.
You can level your objection again but I don't think one would call thinking what shape an outline could be "design" per se. Indeed if you're just presenting alternatives to a user and looking for the one with the best feedback I think you arguably have done away with a design stage.
Text has background, envelope, whitespace (leading, kerning, etc.), font, outline, fill (and probably other general properties too). It's not A/B testing but I could see engineers iterating over variations - should the envelope follow the curves of the text or be a box or blob, etc.. All spacing, be it kerning or border-width can be iterated over, colours too - indeed thinking of this makes me want to write an Inkscape plugin to help in font choice.
You can level your objection again but I don't think one would call thinking what shape an outline could be "design" per se. Indeed if you're just presenting alternatives to a user and looking for the one with the best feedback I think you arguably have done away with a design stage.
Although A/B testing is very likely, how would you measure success/failure? "Person took x sec to see 'New York'" ? How do you measure that?
Well, if you're in a lab, you do a test where you say "I'm going to show you a map. Click on New York as soon as you can." etc. If you want to be more sophisticated, you add in eye tracking and see how much "scanning" people do before finding the target. I'm sure Google has both techniques available in-house.
And I'm sure if you were a little more clever you could find ways to do a similar test on normal google maps users without them knowing it.
And I'm sure if you were a little more clever you could find ways to do a similar test on normal google maps users without them knowing it.
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...
That's not what that phrase means.... http://en.wikipedia.org/wiki/Exception_that_proves_the_rule
I find that link pretty interesting but I still don't understand why you say that. I'm saying Google caring about design on Google Maps is the exception that proves the rule (the rule being that they don't care much about design).
Can you help me understand why it's wrong?
Can you help me understand why it's wrong?
There isn't a rule that "Google don't care about design" if there is an exception. Exceptions to rules disprove rules. However, an explicit exception to an unwritten rule suggests the existence of that rule - for example, a sign saying "Parking allowed between 9am and 5pm" would imply that there is a rule that parking is not allowed at any other time.
Search?
Try Boutiques.com. It's a pretty slick Google property. Feedburner's interface is also really nice, but it was there when Goog bought them.
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.
You can get to Extensions via the crescent wrench, too. It's Wrench->Tools->Extensions.
Not at all obvious, but it's there.
Not at all obvious, but it's there.
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.
The micro-scale graphical design is good. It's a pity, however, that big geographical and data quality blunders are present on Google Maps.
Examples : world projection (Mercator, useless), lack of metadata (dates of the images ?), choice of labels at medium scale (especially with the 'Relief' maps).
Such discrepancy between good graphical precision, esthetics and geographical imprecision, lack of quality information are misleading a large part of the public.
Examples : world projection (Mercator, useless), lack of metadata (dates of the images ?), choice of labels at medium scale (especially with the 'Relief' maps).
Such discrepancy between good graphical precision, esthetics and geographical imprecision, lack of quality information are misleading a large part of the public.
Uh ... I'm really not a cartographer, but don't you think that you're exaggerating a bit when calling Google Maps "useless" just because if their choice of map projection?
I know I've used it, to find, research and understand the layout of, Actual Locations on Earth, more than once. I never even stopped to think about the projection.
It would be interesting to hear what you feel would be different in the end-user experience if the projection was changed.
I know I've used it, to find, research and understand the layout of, Actual Locations on Earth, more than once. I never even stopped to think about the projection.
It would be interesting to hear what you feel would be different in the end-user experience if the projection was changed.
Google Maps is not useless, far from it. The projection method chosen (Mercator) is useless for the small scales, and misleading. Except if you are a (XVII° century) marine navigator.
De-zoom and look at the apparent continent sizes, it's just horrible. Half of emerged lands in antarctica ? Groenland the size of Africa ? Think about children exposed to those maps before a good atlas is showed to them.
I co-wrote a paper about this topic, but it's in french : http://mappemonde.mgm.fr/num20/internet/int08401.html
A technical choice (summary : it's easier to have perpendicular parallels and meridians) has prevailed upon a geographical choice. It's not very complicated to link the projection to the scale of the view, all serious geographical internet portals are doing so (IGN, Ordnance Survey, etc.)
De-zoom and look at the apparent continent sizes, it's just horrible. Half of emerged lands in antarctica ? Groenland the size of Africa ? Think about children exposed to those maps before a good atlas is showed to them.
I co-wrote a paper about this topic, but it's in french : http://mappemonde.mgm.fr/num20/internet/int08401.html
A technical choice (summary : it's easier to have perpendicular parallels and meridians) has prevailed upon a geographical choice. It's not very complicated to link the projection to the scale of the view, all serious geographical internet portals are doing so (IGN, Ordnance Survey, etc.)
An example of the contamination of bad world maps projection :
http://aworldoftweets.frogdesign.com/
http://aworldoftweets.frogdesign.com/
I'd say that this design is quite engineer-driven. It seems, their design is 'just' applied knowledge about perception.
"Applied knowledge about perception"
This is so general that it practically means nothing
This is so general that it practically means nothing
What I meant was a scientific approach to design rather than just designing what looks good.
But than again every good interface designer should take that approach.
The question what role aethstetics should play in design is very interesting.
A lossy audio compression algorithm relies on quirks of human hearing. Those who designed it used their precise understanding of how human hearing works. How would you go about designing a lossy audio compression algorithm without being allowed to learn anything about human hearing?
I believe it would be very much impossible. Humans have no intuitive understanding of the details of human hearing and there are an huge amount of possible ways of reducing the size of an audio file (like throwing away every second bit). There is no possible way you can A/B test all the possible ways and humans have no intuitive understanding of the details of hearing. You can’t intuitively decrease the search space. Aethstetics don’t help you, an understanding of how humans actually work is necessary.
Not everything is like lossy audio compression but I believe there are parallels. Aethstetics do sometimes help you decrease the search space and A/B tests get you the rest of the way but my suspicion is that a true understanding of how humans actually work would always be preferable.
A lossy audio compression algorithm relies on quirks of human hearing. Those who designed it used their precise understanding of how human hearing works. How would you go about designing a lossy audio compression algorithm without being allowed to learn anything about human hearing?
I believe it would be very much impossible. Humans have no intuitive understanding of the details of human hearing and there are an huge amount of possible ways of reducing the size of an audio file (like throwing away every second bit). There is no possible way you can A/B test all the possible ways and humans have no intuitive understanding of the details of hearing. You can’t intuitively decrease the search space. Aethstetics don’t help you, an understanding of how humans actually work is necessary.
Not everything is like lossy audio compression but I believe there are parallels. Aethstetics do sometimes help you decrease the search space and A/B tests get you the rest of the way but my suspicion is that a true understanding of how humans actually work would always be preferable.
I'd argue that all design is "applied knowledge about perception"
The quotes around 'just' might indicate sarcasm here, in which case the comment is a criticism of a forced dichotomy between engineer- and design-driven.
The blank space around major cities is the most surprising idea to me.
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.
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.
I think the parent was suggesting the intuition may have come from applying the other more obvious algorithm.
My 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.
Agreed, I wasn't trying to say it was hard. Mostly pointing out how two features could be the same simple mechanism.
I wonder if it's really a genuine idea or simply the unintended consequence of an algorithm.
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.
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.
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.
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.
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.
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.