Principles of interactive map design

I like maps. A lot. That's why I built a company around interactive map design, and I am pumping out new maps every week. I think maps are a fascinating way to show data, and you can really affect people emotionally with them.

But how should you design your maps? And what about the interface that's built around them?

Well, that's what I'm here for. My extensive experience should be able to help you sort out some issues. And leave your tips and tricks in the comment box, too!

Obviously this will be a general approach, with lots of room for exceptions. But I hope it gives you a jump-start in your map building.

Some initial notes

Let's get this out of the way: average users are not very competent at the internet. Or, at least, you should assume that. Don't do the opposite and assume your users will know how to use an online map. Many will not be familiar with them, and maybe not even realize you can scroll to zoom in (most of the time).

Anything highly interactive like a map is difficult for users. You need to consider how your grandmother (no offense to techie grandmas!) might react if she landed on the map. Where would she look, what would she click and be interested in?

Get your friends to test your map at certain points during your design process. More than anything, make sure you have thought deeply about what you are really trying to communicate with your map. Is it more for beauty or for function? Its design should reflect its purpose.

Map base layers

Now I wish that I could talk at great length about this, but this post is more about interactive map design, not purely graphic map design. Creating beautiful base layers and styling custom maps in tools like Mapbox Studio belongs to the realm of map designers and graphic artists. However there are some good resources out there to point you to:

https://gis.stackexchange.com/questions/3083/what-makes-a-map-beautiful
http://www.esri.com/news/arcuser/0112/make-maps-people-want-to-look-at.html
https://www.gislounge.com/ten-things-to-consider-when-making-a-map/

I personally dislike maps that put a heavy emphasis on streets or where there are tons of names intersecting. If a map can show what I'm looking for, and little to nothing else, that's ideal. It should be something that's art, with information that you're trying to get across.

Making art is asking a lot of programmers, I know -- that's why my maps usually just use Mapbox default styles. If you're not sure, then just plug and play with Mapbox. Or get your hands dirty in Studio. (If you're a Mapbox styling expert, I'd love to meet you, too!)

Non-map interface design

The interface around your map is as important as the map itself. Usually, complicated maps have a few filters or search functions. There are a few design considerations to keep in mind.

1. Reduce panels to the absolute minimum size possible while looking good. This means cutting out extra text, having non-essential "Advanced" options slide open on click, and making sure your divs aren't extending past where your content ends. Give your users tons of space to enjoy the map and understand it!
2. Modals are useful, but only use them when required. They break the flow your user has with the map, unless they are done in a very elegant and tidy way (small, with less background shadowing).
3. Don't be too innovative -- users will already be trying to interact with your map, and your filters or panels should never be a hindrance. Spend time asking users how to make them more intuitive, and watch your friends use the site and see what they do wrong. Make a simple search box or drop-down menu, not the latest fancy thing.
4. Explore how different panel opacity and colours and slight box-shadows can make your panels feel integrated with your map. I like a slight margin with a 1px shadow and a semi-transparent white background, usually!
5. Mobile devices need to have space. Add slide-in panels and leave the map as open as possible, with little or no permanent panels on it.

A few more considerations in overall interface design:

• If your map is not full screen, one of the most important considerations is whether or not you want to allow zoom scrolling inside the map. Could your users get "stuck" trying to scroll past your map? If your mobile users need to scroll, make sure to make the map smaller than screen height!
• On a more technical map for specialists, most of these tips are less important, but it's still good to make things understandable at a glance

Map markers and popups

This is the largest section in this post -- major design area. Before we start, I noticed just a few days ago (Feb 12) that Google just updated their default Google Maps API marker last Monday. I like the new one.

Nice, right? I think it is much more modern and clean and friendly.

Defaults aren't terrible when it comes to using your markers. Here's what a few different basic markers look like:

There are a huge number of sites online where you can find marker icons. These used to be mainly PNGs, since a lot of us had trouble using SVGs back in the day. Now, SVG markers are very easy to create and add using any mapping API, so that has opened up a huge world of icons to us.

Even more, every mapping library allows you to insert an HTML div for a marker (if you do it right -- ask me), meaning that you could also use things like FontAwesome or Glyphicons for markers. So you definitely aren't short on options.

https://www.flaticon.com/
https://thenounproject.com
https://mapicons.mapsmarker.com/ (try to avoid using, kind of old)

When it comes to popups, customization varies greatly -- some are very small (labels), and others are huge (real estate listings). As a rule, almost all the default popup styles in mapping APIs look OK-ish:

You can restyle these -- with varying degrees of difficulty, of course.

1. A general principle is to keep popups very concise, only have one on the screen at a time, and have a slight shadow to "lift" them off the map. A little triangle pointing to where the popup anchors is standard as well. Try to be as neat and tidy as possible, and remove any margins and padding that you don't really need. Feel free to use images and header fonts in the popup too.

2. If there are multiple types of markers, either a legend should make it instantly clear what's what, or the markers should have some kind of identifying icon embedded into them.

3. Clustering markers is a great idea. You can custom style the clusters, which goes a long way if you have that design integrated with your marker styles. But then, people seem to enjoy busy maps, so try without clustering, too.

A few more notes

• Try playing with animating your markers using CSS. Use keyframe animation, and make their opacity shimmer a little, or highlight ones you want the user to click.
• Attention to small details like border-radius, the colour of shadows, and font relationships with the map are all very important in popups
• Default are just fine if you're focused on functionality! No one cares if your map is a little ugly. Everyone is used to seeing and using the defaults, and they are often the best choice.

Whatever you do, don't go overboard in hyper-designing everything. I know I've said that attention to small details is important, but the main point is to actually achieve a wonderful simplicity in design, not to overcomplicated your thinking. If you're in doubt, back off and come back later, or just go back to the default and call it a day.

Shape colours

A few notes about polygon and polyline styling:

• Smaller strokes and a light semi-transparency do great with polygons; hover effects should change opacity. For a unique hover effect, get opacity to fade in using setTimeouts!
• If you are drawing polylines (like driving routes), try animating them! Extend the polyline by a coordinate every 10 ms
• If you have popups, ensure they appear where the user clicks, not at the center of the polygon/polyline

With polylines and polygons, don't be afraid of crazy colours and having fun with the look. People seem to love the busy look of a data-heavy map, and lots of colours can be very engaging.

Conclusion

I've tried to introduce you to some of the most simple, straightforward principles that I've developed in my time working with many different mapping projects. There's no doubt that maps are complicated, but they are also very engaging and draw people in immediately.

If you're ever lost as to what to do, check out some of the major mapping companies online. How do they design their maps? Google Maps has a simple but optionally complex interface with their map (dropdowns, slide-in divs). Mapbox keeps things simple and static around the map. Check out what others are doing and replicate that functionality rather than reinventing the wheel.

Most of all -- make YOUR map, not anyone else's! And let me know when you do, 'cause I'd love to see it.