Designing web map pop-ups

Web maps can communicate a wealth of information through their cartographic design. They can deliver even more when combined with well-designed pop-ups that appear when users touch the map.  Poorly designed pop-ups, however, can quickly confuse and frustrate your audience.

The importance of design

When designing a web map, it is important to pay as much attention to the pop-up as you do to the cartography and the other aspects of your map.  When someone clicks on your web map they should be rewarded with a bundle of useful information about where they clicked.  Pop-ups are the vehicle for delivering thoughts/ideas (text), numbers, charts, and images to complement the map’s cartography.

While the default pop-up settings aren’t necessarily optimal, it doesn’t take very long to design and configure a good pop-up; however, some planning and forethought are necessary.  The guidance and tips below will help you design great pop-ups that enhance your map and inform your audience.

Planning for your Audience and Message

The first two things to think about when designing a web map (and associated pop-ups) are the audience for your map and your intended message to that audience.  In other words what are you trying to communicate and to whom you want to communicate that message.  While you may decide you are designing for a general audience, being conscious of that fact will still guide the design process in a good direction.

Know the data

To design a good pop-up, you also need to understand the data.  Make sure you know what the fields in your layer are describing.   Also, confirm your understanding of the values in string fields (what is a “Regional” {OFFICE TYPE} compared to a “Satellite?”) and the units for numerical fields (is that {AREA} field reporting square meters or square miles?).

What to include

When designing a pop-up first determine the most important piece of information for the audience to see when they click on the map.  It might be a number, a name or address, a project description, or a list of items.  Whatever it is, put that information at the top of the pop-up and make it obvious so that the audience’s attention is directed to it.

Also think about context.  What is going to let the audience know if the place they clicked on is typical, above average, or below average?  Information often needs a benchmark for comparison like a national/state average, the previous years’ results, or acceptable/normal values.

For example, $5M in funding may not mean much unless you also report this represents a 100% increase from last year’s budget of $2.5M and that the national average is $2M.  Consider including a ranking, percentile, or relationship to some other yardstick or baseline.  This information should consider and respect your perception of the audience’s understanding of the issue.

Determine if any numeric information is best displayed as raw values or in a chart, and if you have any images or hyperlinks to other sources on the web that can enhance your pop-up.

For more details read the full Designing Web map pop-ups document posted on the Esri Storytelling with Maps website.

Contributed by Owen Evans, Solution Engineer on Esri’s Federal Team in Vienna, Virginia.

This entry was posted in ArcGIS Online, Mapping and tagged , , . Bookmark the permalink.

Leave a Reply