Dos and Don’ts of Web Map Design

Share this article:

Related Content:

WorldMap: An Open Source Software Platform New Cartographic Design for Google Maps

The proliferation of easy to use tools and web services has brought web mapping a long way from its origins.  Unlike 5-10 years ago, many government agencies that collect geographic data offer some form of web mapping as part of their Internet based information offerings.  Web mapping has become standard for most real estate listing services, and online mapping services such as Google Maps, Bing Maps, and others are part of the daily usage for many smartphone owners.  A well designed web map goes beyond simply aiming to provide geographic information, by also offering an engaging and informative experience to the user.

Along with the proliferation of web maps comes the good, bad, and ugly of web map design.  Here are some common pointers that developers and designers should be aware of.

1. Don’t Make it an All-in-one Web Map

It’s important to have a tight and focused intent of the web map.  Carefully consider which GIS data layers are truly needed for the map.  There is a tendency to load as many geographic layers as possible into a single web map service.  Only interesting and relevant geographic information should be provided.

2. K.I.S.S.

Simplicity is key, hence the Keep it Simple, Stupid acronym.  Effective web maps are uncluttered and easy to use.  Avoid the urge to pile on too many tools, menus, and buttons.  Think about what the use of the web map is for, and only offer functionality that is applicable.  Don’t offer the user an overwhelming amount of choices in either data layers or tools.

Lots of tools, lots of layers, and no legend makes this web map hard to use.

3. Make it Intuitive

Users should be able to understand and use your web map without any long instructions and manuals.  GIS data should be symbolized in a deductive way (e.g. making vegetative areas green and water areas blue).  Include a legend for data layers that need additional explanation.  Tools should also be simple and easily understandable.

Simple is better. This web map offers a few basic tools that allow the user to immediately become engaged with the map.

4. Symbolization is Key

Make sure the data layers are symbolized and labeled in a non-cluttered way.  Avoid the over use of saturated or bright colors.  Keep background layers neutral and less saturated so as to not compete with the focal layers of the map.  Use scale dependent labeling and layers to optimize the look and feel of the map at different scales.  Avoid cluttering smaller scale views within an unnecessary level of detail.  For example, a view at a county level might only show major roads and highways instead of all the streets.  Colors used should be visually pleasing and the eye should be immediately drawn to the focal point of the map.

5. Streamline

Don’t bloat your web map service and make sure it’s optimized to be served quickly on a variety of devices.  Heavy data such as aerial or satellite imagery should be compressed and tiled.  Users should not be left looking at a screen waiting for the map to load.  With an ever increasing number of users accessing maps through smartphones and tablets, optimizing web maps for mobile devices is critical.

6. Keep it Current

One of the most frustrating things for users is out of date, incomplete, or untrustworthy information.  Make sure your web map is reliable and trustworthy and reflects the current state of the area you have mapped.

7. Documentation

Data currency and source is important.  Users will want to know the the date important layers and imagery were created and who created those data layers.

The best web maps keep the user engaged and focus within the body of the map.  A well designed web map avoids having the user fumbling with side tools, trying to figure out functionality, fiddling their thumbs while the map loads, or feelingfrustrated because the map doesn’t perform as promised or is missing critical information.