*This article was originally posted on 1/24/2011 on GISUser.com. I’ll be writing a monthly expert column there. Woohoo! The link to all my columns (only 1 so far) is here. In this column I try my best to sound like I know what I’m talking about, re: web map design. There’s a big audience for web map design concepts but I’ll only be able to cover the basics as I’m not completely schooled in this area. Please help the readers by commenting if you’ve got some tried-and-true design ideas!
You know the old stock character of a writer hunched over a typewriter, balls of discarded drafts cluttering up the desk? Web map designers need to do more of that. We need to be editing our web mapping projects with as much fervor as an author. Perhaps then we can design web maps with a perfect balance of simplicity, usability, and knowledge transfer – or at least try to get closer to perfect.
Half of the problem is that lack of effort, the other half is a lack of good designs to emulate. Web maps have so many benefits over the traditional paper map but design principles for them are very new and still evolving. However, enough years have passed for cartographers to now understand what doesn’t work (long load times and trying to recreate GIS software on the Web are just two examples) and what does work (fast, informative, real-time). Speaking just from the aesthetic design point of view, which includes usability, there are some emerging elements of style that are effective and worth trying in your next project. Two of them are covered here.
The first is to steer away from what used to be the staple web map design element: the clickable table of contents holding every conceivable data layer that an organization produces. It’s not just slow and clunky, a lot of users don’t even know how to use it. On small screen mobile devices the table of contents is almost impossible to deal with.
How do you present multiple layers in an intuitive way, then? Take a look at www.govmaps.org. Each type of information gets its own thumbnail map – think highly visual and intuitive – that, when clicked, goes to a web map that contains just the layers pertinent to that subject. Now, if presenting all the layers on one map is something that the users just have to have, then try listing the layers in an integrated drop-down menu like on http://innovista.sc.edu/map/.
Another new style technique is to utilize click and hover capabilities in place of traditional annotation. Annotation that gives the user an instant location awareness (“USA”, “Spain”) is still okay. Annotation that provides details about data points, however, is often better served up upon a mouse click or mouseover in order to keep the original map visually uncluttered and more interactive. For example, the map for this business (yes, it’s pink!) gives you a small picture and name of a few places you might be familiar with that are nearby, but only via a mouseover: http://odopod.com/contact/.
By paying attention to newer and better style techniques such as these and by ruthlessly “throwing away” or editing early drafts, web map designers can vastly improve our work products. Perhaps then we can avoid being admonished in the way of my former boss who would sometimes exclaim, “of all the unmitigated audacities!”