Couple weeks ago I was working on a map interface; I tried to find some inspiration on the web and really came up empty handed. There are a ton of excellent pattern and inspiration libraries but I couldn't find much to address the display of content on maps. I'm sure you guys will educate me on the vast number of sites I failed to find ( I hope) But I figured I better start collecting some on my own and this may be of interest to some of you. First one: RoyRobson.com Thanks to @benforgarty for leading me here via the badass portfolio site of the designer Jan Ploch
Stats: Map: Google Maps Content: Store Locations Items: 100's
Lessons: 1. Make choices to provide value to the most people. 2. Provide lists to compliment the map. 3. Small design elements make a big difference.
First thing I like is that they made a choice. They have stores around the world but they chose to focus the initial map display on the area with the most stores, probably the most customers too; hence helping the majority of the folks get what they need quicker. The choice is also successful in communicating to it's core audience that they have a ton of stores and one is bound to be near you. They do have stores in Iran and Uganda but would the experience benefit from showing a map of the world? How would they show pins when the distribution is so unequal? They easily mitigate the problem of Iranians not seeing a their stores on first view by bringing the Shopfinder front and center. It is always best practice to provide a list to supplement the map experience. In this case the availability of the list allowed them to make a choice to focus the map on a certain part of the world.
Also of note: You can quickly zoom in and out with a scroll of the mouse. The pins contrast well on the map and the white outline allows them to be stacked and overlapping and still be clickable. I love the full screen view of the map.
Selecting "Choose country" opens the list and the list stays open. There are enough moving parts in a map interface. Try to reduce rollovers and other moving functions. Simple click to open click to close is refreshing and so nice to use. This interaction model is repeated when interacting with the pins.
Also of note: Get directions takes to Google Maps. I think it's ok to not try to do everything within your map interface. Take it to the level that brings value to your company and the visitor then go ahead and send them to Google (or other map program). They will be familiar with it and probably have data saved like their address eliminating a number of clicks and steps.
Selecting a country refreshes the page bringing you a new map focused on the country you selected. I like the page refresh avoiding the tempting "zoom in/out and move the map in some crazy animation" instinct.
Once there we are given another list that reflects the information on the map.
You can also change the country without going back. Nice.
Over all I think this is a super successful map design. What do you think?
I'll post more as I find them.