What Google Maps can teach you about user interface design

An article examines “Google Maps and Label Readability”. From this article, we can derive the following rules for the design of graphical user interfaces in general (the following numbers and “visual tricks” refer to section in the article). Google Maps manages to be more readable than the competition without showing less information (as measured by a count of labels). It does so via the following means.

1. Google Maps shows a wider white non-transparent outline around its black text. Conclusion: Avoid transparency for content, though it sometimes works for UI controls that should not obscure the content. For example, a button to leave the full-screen mode of a web browser.
2. Google Maps uses more font sizes to rank the importance of locations. Conclusion: Clearly structure your content. Use different font sizes, ample spacing, etc.
3. Google Maps uses lighter labels for less important locations. Conclusion: Apply lighter tones (gray instead of black etc.) to less important UI elements. iTunes has done this for its most recent version and it reduces the subjective clutter, because UI elements don’t distract from the content as much.

Visual tricks: Google Maps shows less labels around metropolitan areas and avoids clusters of cities. Conclusion: Transform reality if it makes your abstraction easier to understand. An example are maps of subways that are a distorted version of reality and much easier to read because of it. You can see it in historic version of the London Tube, just compare 1933 with 1932.

[Source: Daring Fireball]