Tuesday, July 17, 2012

Animated Maps: The Way Forward?

I didn't make it to Google IO this year but have got a lot out of watching the Google maps talk videos.  One announcement they made was a new type of map element; 'symbols'. These enable developers to animate Google maps more.  Ed Parsons has bigged up the possibilities and I agree with him that animated maps have great potential and that there should be more use of animated maps.  At the moment they are nowhere near as common as simple map mashups.  I've been researching map animations recently so today I'll share some thoughts.

The potential of animation in Maps:   Any graphic or text needs to perform a number of functions:
  1. Catch the eye of the user
  2. Lead the eye around the graphic intuitively 
  3. Communicate effectively
  4. Produce a memorable and/or emotional response if possible

We can argue about how good this list is but I think its generally true (I've paraphrased it  from a book on graphic design 'White Space is not your Enemy').  

Movement always catches the eye (think blinking cursor) so map animations always do well at [1].  They can also be extremely effective at communicating effectively [3], the gap minder animation below is geographical information although strictly it isn't a map.  IMHO its very effective at communicating the story of how most countries have developed considerably in the 20th century and its also easy to pick out individual countries from the animation.

I also like this animation of the spread of post offices in the US (although its probably better watched at a higher resolution than I have here)

Downsides to Animation in Maps. However, there are a number of problems with animations.  

- Going, Going, Gone:  Unlike a static graphic, the information is only visible for a fixed amount of time so the user has to see the information, make sense of it and remember it before the animation moves on.  With a well designed graphic, such as Edward Tufte's diagram showing the development of storm clouds, all the information is available for review and elements are constantly visible.

one of the nice aspects of the post office map above is that it keeps the dots on screen after they've appeared which mitigates this problem somewhat.
- Pat Head, Rub Belly:  The kids game of trying to pat your head and rub your belly at the same time illustrates another problem known as split attention - we find it difficult to do or follow multiple things happening at once.  An example is the map based animation at 55 seconds in this clip showing rainfall and taxi location at once.

Solutions:  There are a few solutions to these problems:

- Simplify Icons/other symbology:  Animated maps need to be simplified as much as possible, an easy examples include making icons plain shapes such as rather than a more meaningful bike shaped icon.  The background map on which the data is being animated can also be simplified e.g. removing colored roads.  The post office map above is a good example of both of these things.
- Play Slowly:  In complex parts, slow down the speed the animation is playing at.  This needs to be done with clear signalling otherwise they could miss that it was happening. 
- Annotate:  If something interesting is happening on a screen full of changing data (the split attention problem) a labelled arrow drawing the user's eye to the correct location on screen can be very helpful.

Conclusion:  Map animations can be very powerful but they need to be implemented carefully with a user centered focus.  See this post for more detail and Mark Harrower's discussion