The goal is to design a page that allows the user to easily find dealerships near his/her location.

My initial idea was to map the geographical locations on a map of the country.

The country map is very small and only a couple (20) dispersed locations will be shown on the map. A vertical listing of the dealers will also be shown to the left of the map.

Anyone know the exact name of this pattern? (mostly used with google maps)

Some good examples of websites using this pattern would be very useful as well.

I have already searched multiple UX pattern libraries, no luck so far.

  • 3
    Perhaps it is my crude and unrefined veiw of the world, but your question appears to be asking how to best map out where to buy drugs. – Myrddin Emrys Feb 16 '12 at 17:14
  • 2
    Myrddin, where do you think the term user experience is coming from? :) – Vitaly Mijiritsky Feb 16 '12 at 19:22

As far as the exact name of the pattern, could it be Point Location, Store Locator or Map Navigator?

  • "Store Locator" looks like the best match. Maybe the name for a more general pattern would be map & index--analogous to physical street maps, which usually have the map and then, either on the side/bottom/back, an index of the street names or points of interest. Except whereas physical maps list the coordinates next to each item, here you simply click on the listed locations to pan to it. – Lèse majesté Feb 21 '12 at 5:24
  • The interaction required for store locator seems similar to the one I need. It's a pitty this pattern has such a context specific name. People are not always looking for a store. – Dennis Gommé Feb 22 '12 at 8:52

I don't know of any specific name to this pattern besides a 'map' - it's not too common to see maps on the internet that don't do something similar to what you're describing (the only exceptions being 'find us' and 'our location' maps for business sites).

As for examples of this being used effectively, might I suggest looking at how Google Maps handles things? It provides both a list and map view simultaneously, auto-zooms a map when pins might be widely dispersed. Might I also suggest looking at examples from the paper / non-online world? Bus maps sometimes do interesting things with colour and size, and road maps show us a lot of ways to make signs and pins legible even on busy, densely illustrated backgrounds. All these should help get you on your way.

That being said, don't be a slave to patterns. Yes, it's good to invoke conventions from other websites, and helps make users feel they know how your application is going to act. But if your design just doesn't support the kinds of interaction and workflow your research has shown users to need, even a familiar design will create a suboptimal experience. Don't be afraid to at least experiment and put new ideas in front of users - doing usability testing first, of course!

  • Google maps is probably the best example out there. However security measures prevent us from using Google maps (not my call). I am looking for a similar example without making calls to external services. A easy drawn map, pushpins, callouts and a horizontal list with the locations. – Dennis Gommé Feb 22 '12 at 8:55
  • I'm not saying you should use the Google Maps service. I'm saying you should look at its interface and see which elements are suitable for your own project. That doesn't mean outright copying, and certainly not replicating assets. – Jimmy Breck-McKye Feb 22 '12 at 12:59

For example

Satellite view Just add your dealers list as a menu.

Map view

How to

Not the answer you're looking for? Browse other questions tagged or ask your own question.