Innies and Outies - Map Sidebars

This morning MapQuest launched their US support of OpenStreetMap at open.mapquest.com. In playing with the interface, I noticed how MapQuest added a tab at some point for showing and hiding the sidebar of search results and other associated design choices and differences.

MapQuest uses an "Outie" tab (highlighted in the screenshot below). The design choice was clearly to make it very explicit for users to show and hide the sidebar as it protrudes into the map interface. The pan and zoom controls are on the right-hand side, so when you toggle the sidebar, the controls stay in the same location. Another interesting aspect is how the map resizes. In MapQuest, the same geographic center and extents remain in the screen center - so as the sidebar closes the map shifts to the left and expands slightly.

Search Results | Mapquest-2.jpg  Search Results | Mapquest-1.jpg


Curious about how this varies, I checked in Google Maps. They chose to be much more subtle about their sidebar toggle. It is an "innie" that is subtly hidden within the header. Closing the sidebar turns the selection to an "outie", but still remains out of the way in the header. A particularly interesting decision is that the map remains in the same location - so the zoom pan controls move but new areas of the map are exposed. So while the user doesn't have a context shift (points on the map remain in the same area of the screen) the map now needs to be recentered so that the focus area can be kept in the center.

Zoo, Washington, DC - Google Maps-2.jpg Zoo, Washington, DC - Google Maps-1-1.jpg  


Lastly, looking at Bing maps it's a bit of a hybrid between the two. The sidebar tab is in the header like Google, but hiding the sidebar re-centers the map like MapQuest. The controls in Bing are in the header, so they don't need to shift when the sidebar is toggled. What's perhaps a little confusing is there is also an "X" close button next to the sidebar tab that clears the search results. It's not really clear why you would want to clear results - and instead there should be an option to go back to the "table of contents" or similar concept that shows simple links for directions and more.

Bing Maps.jpg


Much like the emergence of Pan-Zoom bars have become the defacto standard in web mapping interfaces - the sidebar has also become nearly ubiquitous. So it's interesting to see the slight variations as interaction designers experiment with what users will find easy to understand.

About this article

written on
posted in MapsCartography Back to Top

About the Author

Andrew Turner is an advocate of open standards and open data. He is actively involved in many organizations developing and supporting open standards, including OpenStreetMap, Open Geospatial Consortium, Open Web Foundation, OSGeo, and the World Wide Web Consortium. He co-founded CrisisCommons, a community of volunteers that, in coordination with government agencies and disaster response groups, build technology tools to help people in need during and after a crisis such as an earthquake, tsunami, tornado, hurricane, flood, or wildfire.