Thoughts on UI For Webmaps

Webmap design is a lot different from static map design. Yet, writing a book about webmap design is difficult since the tech is changing so rapidly. (There is a book, called Web Cartography, that is worth having but I still don’t think it goes into everything we want to know.) Indeed, there are a lot of unknowns surrounding the idea of what good UI for webmaps even is.

Some people are using google analytics types of software to analyze how people are using their webmaps (e.g., maptiks) but I don’t see a lot of A/B testing out there, which is probably the ideal way to harness the power of webmap analytics results.

Certainly we can still make some guesses at what works. For example, we can guess that tools and functions that have been on webmaps for at least a certain amount of time, say 5 years, are well ingrained into the public’s knowledge base and probably don’t need a lot of explanation on your map. Zooming in/out, panning, and even the ubiquitous (and not often needed) measure tool are all pretty familiar concepts to most webmap users so they need only be indicated with the usual plus/minus/ruler buttons. Brand-new tools for navigating the map, such as oblique tilts, probably will slow your user down until web GL is more common. These tools may require user education, perhaps in the form of a pop-up info box on first use.

Let’s talk about disclaimers. These could really benefit from testing. Typically, an organization will require a long-winded disclaimer to be presented to the web user before they have even seen the webmap. I’d really like to know how many users leave the site without clicking “agree.” Furthermore, I’d really like to see if clicking “agree” really does hold the organization free from liability in court, or if not having a disclaimer could allow prosecution of the organization for some users’ misuse of the data. My guess is that a reasonable judge would allow neither of these but I’m no lawyer.

What if we A/B tested disclaimers specifically? One site shows the user the disclaimer on the page, and the user has to click “agree” before the webmap will load. Another site shows the disclaimer on top of the webmap such that a faded view of the webmap is visible so that the user gets a glimpse of the webmap. Lots of guesswork here, but the hypothesis would be that the B test would result in more users.

Now let’s take a look at the freshymap. I believe that their use of these three small buttons on the top of the map make it easier for first-time users to pay attention to the main attraction–the map–before they get bogged down in the details–the layers. This one small button can be discovered at some later date, when the user is already familiar with the site.


Contrast that with this Puget Sound Watershed Characterization Project map (that’s a mouthful). Once you get past the disclaimer, which by the way happens to mention a two volume rules guide!, and then figure out how to actually get into the webmap (I’ll let you brave souls go figure that out yourselves), you find yourself on a webmap.

I think you’ll see right away that there are a remarkable amount of superfluous details on what is, essentially, trying to be a cataloging of their data holdings. In other words, it is trying to be all things to all people. We don’t need share, print and find location buttons at the very top of the page. We also don’t need the words “interactive map” at the top of the visual hierarchy (aka top-left) because we already get that it is an interactive map. In fact, that’s something that goes under the category of “user is used to this–we’ve had interactive maps for more than 5 years now,” and there is simply no need to explicitly use up good page real estate in telling them what they already know. The layer transparency slider also being at top-left? Nope, probably not needed, or at least not there.


It’s not a bad webmap at all. It’s actually very interesting once you really take the time to explore it. I do like the basemap switcher on the right (not shown on the above screenshot), which seems much easier to deal with since it has little pictures rather than words (though Timoney states that basemaps switchers are used very little of the time, in one rare case of actual user testing.) I’d just like to see more testing of these things. In a way, it’s a grand place to be in because there’s a lot of room for people to really be creative and come up with some amazing new ways to present webmaps to users that have a lot of potential to really shake things up.

Even the little things can be improved, like the titles we use on webmap legends. For example, I spotted the title, “Explore & Compare” on a legend title today and thought that they were a good choice of words, a call to action for the user, if you will. Again, only some testing would prove if my instincts are correct on that.

Amazonia map hat tip @stamen

Amazonia map hat tip @stamen

Until we get some more expert guidance on this, the best we can do is to keep our eyes peeled for the ways in which people are making webmaps easier to use and try to incorporate the best UI features in our own designs. We can also push back against our bosses or our fellow scientists when they ask for everything but the kitchen sink in one single webmap. Perhaps a series of webmaps for each intended purpose could be proposed instead. Good luck with that.



Comments are closed.