Skip to main content

Maps

Static​

There are five main design principles in map design.

  • legibility
  • visual contrast
  • figure-ground organization
  • hierarchical organization, and
  • balance

Together these principles form a system for seeing and understanding the relative importance of the content in the map and on the page.

What are the qualities of a good map?

  • clear idea of what the map is trying to demonstrate
  • easy to interpret legend or key
  • good use of symbols to demonstrate a clear point
  • good sources/metadata
  • clear features not overcrowded

Styles​

  • do not use underlined text! This is difficult for low-vision users to read and indicates a possible hyperlink
  • italics should be used as little as possible, for water labels and short labels only
  • bolding of fonts is a good way to call out features, but avoid it for continuous, readable text
  • although ALL CAPS labels stand out, they are harder to read and should be used sparingly

Map Objects​

  • avoid overlapping points or annotations, when possible. Try to place them offset from a line
  • there should be visible whitespace between symbols; touching symbols blend together for users with low vision
  • there should be a 2x size difference in levels of information

Colors​

  • use a limited color palette. Limited color palette works the best for all UIs, and map UI is not an exception. It’s much easier to create visual harmony with a limited color palette. You should use between 10 to 12 colors for a full-body color palette, depending on the complexity of your map. Choose colors for individuals with visual impairments such as color-blindness (i.e. don’t use red-green color schemes)
  • try to use the same hue for similar features. For example, features related to transportation (bus stops, railway stations, etc.) should share the same hue. The same hue will help users to decode visual elements without reading text, and this will help you to create a more cohesive UI.
  • always consider accessibility. Many people have limited color vision, so you also need to take this into account when selecting colors to ensure that you have a proper contrast ratio

Text​

  • choose fonts that have a variety of styles, such as bold, extra bold, italic, bold italic light, etc to differentiate between different kinds of features on your map
  • use one version of fonts for the map body and one for the explainer text outside the map

Interactive Maps​

Interactive maps are high risk, high reward. Highly interactive maps can be too difficult for new users, yet they can also allow users to learn and explore at their own pace. It is always important to test designs on multiple people with varying degrees of technical expertise to see how they interact differently with the layout. Interactive map design should reflect what the cartographer is trying to convey (beauty vs. function) and never sacrifice visual hierarchy or great styling for interactivity.

Tips for designing effective interactive maps:

  • simplify the interface
  • panels should be the minimum possible size so they don’t clutter the space
  • don’t innovate to the point where users don’t know what to do
  • use panel opacity and margins to help them blend with your basemap and look cohesive
  • leave space for the maps to be used on mobile devices. This means avoiding permanent panels

Pop-ups and markers​

  • keep pop-ups concise
  • only one pop-up on the screen at a time (generally)
  • cluster markers for better readability
  • use a legend when you have multiple types of markers
  • remove unnecessary padding and margins from popups
  • use a slight shadow to “lift” pop-ups off the map