Just another WordPress.com site

Spatial Breadcrumbs


Right Question, Wrong Answer

Over the years we have had many requests for inset maps.  There are plenty of names for them: Inset map, overview map, reference map, context map…  Whatever you like to call it, it’s a mini-map that rides along with the larger main map, with the goal of giving the map user some sort of broader reference to their current view location.  "I am zoomed into Webster" street, but where is Webster Street?  That’s a great question, but often inset maps are the wrong answer.  Check out this Google Maps inset.  The mini-map in the bottom corner shows me, via a highlighted region, the extents of my main map, but all I have learned from it is that Webster Road is in Delta Mills.  Great, but where is Delta Mills?

  (Map source: Google Maps)

The Problem With Inset Maps

The pain of the Inset Map in the interactive environment is finding that sweet-spot zoom level.  In the Google Map above, I would benefit from an inset map that was zoomed out a little farther; I’m just not getting enough context.  Likewise, a world map with a dot on it showing the location of Webster Road is silly.

We at IDV have arrived at the conclusion that the Inset Map as a relatively static context provider is a legacy of static paper maps and not altogether appropriate for the truly interactive experience.  The problem is consistency.  Assigning the Inset Map a zoom level via whatever algorithm cannot accomplish what a static map’s creator could when he/she was crafting an individual map and could choose an inset map extent that offered the right context.

A Better Solution

Ian Clemens had the idea of using the familiar Breadcrumb navigation widget as a replacement for the Inset Map.  For the same reason that websites benefit from the breadcrumb metaphor, interactive maps gain usability by providing the user a spatial path that drills right into their current map view.  What provides better context to an interactive map user who is looking at Webster Road, a small Inset Map with the label "Delta Mills", or a string of hyperlinks reading "World > North America > United States > Michigan > Delta Mills"?  That string of nested location names conjures a picture of flying in from space right to the street level far more effectively than an Inset Map could.

(IDV UI showing breadcrumb for downtown Tokyo)

In his Alertbox, Jakob Nielson outlines some of the reasons the humble breadcrumb is such a hit…

  • Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
  • Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
  • Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
  • Breadcrumbs take up very little space on the page.

Here is a video that shows the IDV spatial breadcrumb in action around Barcelona (we call it "GeoTrails Navigation" at the request of the National Geospatial-Intelligence Agency).  Watch the sequential list of locations in the GeoTrail populate as I zoom around the map (constantly providing a hierarchical spatial reference).  Also, each of those locations is a hyperlink, making "popping up for air" a breeze.


Obligatory Etymology

"Breadcrumbs" comes from the old fairytale, Hansel and Gretel.  They are sent out into the woods in the hopes that they will be lost forever but they leave a trail of bits of bread so they can find their way back home.  Unfortunately woodland animals help themselves to the breadcrumbs and Hansel and Gretel are stranded.  Good in theory.  Anyways (spoiler alert), in the end they live happily ever after.

John Nelson / IDV Solutions / john.nelson@idvsolutions.com



3 responses

  1. Unknown

    HTML clipboardkora – منتدى الدوري البرتغالي

    منتدى الدوري البرتغالي
     منتدى الدوري الإسباني

    منتدى الدوري الإسباني23


    September 11, 2008 at 2:54 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s