Posts Tagged ‘efficiency’

Map panning and zooming methods in Flash (Cartogrammar)

Sunday, July 13th, 2008

Reprinted from Cartogrammar’s blog (original post from June 29):

Following last week’s post on losing context with interactive maps, I wanted to consider the different methods of navigating an interactive map (i.e., panning and zooming) and how they might affect that issue, and while I’m at it look at other aspects of these methods, too.

A great place to start is the 2005 paper by my now co-mappers Mark Harrower and Ben Sheelsey called Designing Better Map Interfaces: A Framework for Panning and Zooming.* (A PDF is available on Professor Harrower’s web site.) In that paper they discuss criteria for evaluating panning and zooming methods, namely functionality and efficiency, and then go on to present and evaluate nine common methods of panning and zooming. With respect to my previous post, it is a lack of what they call “local-global orientation cues” that can lead to the “navigational trauma” of losing context.

Below are small demos of eight of the nine methods listed by Harrower and Sheesley, along with their thoughts and mine on functionality and efficiency as well as a word or two on the prior subject of maintaining context. (For simplicity I’ve left zooming out of most of those demos where it would be accomplished via separate interface widgets.) 

 

 

 Known sometimes as “slippy maps” (from OpenStreetMap?), maps with this kind of panning interaction are the standard these days in the big online mapping services from Google, Yahoo, Microsoft, etc.

Pros: No pesky tools or interface to deal with, and the action is natural and mimics real life manipulation of tangible objects.

Cons: High mouse mileage—you’ve got to move your mouse every bit as far as you want the map to move.

Context: There are no inherent orientation cues, so with this method alone you’d have to mentally keep track of the map’s movements. There is, however, an advantage of methods that directly jump from place to place.

Continue reading at Cartogrammar to see more examples . . .