When we started developing our new property search interface, the design of the graphical marker used on the map stood out as a critical piece of the search experience. Not only do map markers provide geographic context, they are also an interactive link to deeper sets of information. In this sense, digital map markers serve dual roles: they convey information about a broad set of properties and they serve as a gateway for users who wish to access more in-depth information.

What Makes a Good Map Marker?

Map markers are information graphics and so should be created according to principles of Information Design. Specifically, the design of a map marker should focus on:

1. Pin-pointing a property’s exact location on the map
2. Maximizing data density while eliminating “Chartjunk”
3. Presenting an easily-clickable target for the user

This balance between conveying information and enabling interactivity straddles a fine line. When our search plots 500 map markers on a single map, it is important that the information we have chosen to convey is communicated clearly and directly relevant to the search being performed, but not so complicated that browsing through the results becomes unwieldy.

Comparing Commercial Real Estate Markers

As you can see below, Commercial IQ’s set of map markers was designed to both pinpoint a property’s exact location and communicate extra property-type specific information via an icon on the map marker’s “handle”. This icon allows searchers to quickly distinguish a key difference - property type - between hundreds of different properties on a map without having to perform any additional interaction. Even if a user is only searching one property type, having the property type icon on the map marker reinforces the direction of the user’s search and increases user confidence within the interface.

Commercial IQ’s Map Markers

Commercial IQ’s Map Search

Of course, our map marker is far from perfect. For example, there isn’t any visual cue when the user moves their mouse over the marker beyond the cursor changing shape, and despite our best efforts the meaning of the property type icons is not immediately clear to everyone. That said, we think it hold up pretty well against the designs of our competitors. In the spirit of fun, we’ve taken the time to review the markers on some other commercial real estate search sites. Let us know what you think!

LoopNet

LoopNet’s Map Search

LoopNet is the largest commercial real estate listing site on the web. Their map marker, which looks like an improved version of Microsoft’s Live Maps marker, is attractively designed and does a good job of pinpointing a listing’s exact location. It also has a good hover state, reinforcing when the user may click and when they may not. The numbering on the markers is however, in our opinion, a unnecessary waste of user brain-power, as there is no inherent value in knowning which property is #1 in the list, which is #2, and so forth. The numbers are a presentation abstraction, and therefore don’t belong in an information user interface. Why not use that space to convey other, meaningful information about the properties displayed?

CoStar

CoStar’s Map Search

CoStar is another large commercial real estate listing service. Their map marker also has strengths and weaknesses. We applaud them for taking advantage of the marker body and using it to convey additional information about their listings, in this case property type via a simple and intuitive letter on the marker. Our biggest complaint about the marker is it shape. The circular design does a poor job at conveying the primary information a map marker needs to communicate - the exact location of the marked property. This is especially apparant when a user is zoomed farther out, as in the screenshot above. Why not add a tip or point to the marker, to better show the property’s location? For example, if a circle covers an intersection, how are we supposed to know which corner that property occupies?

Building Search

Building Search’s Map Search

Building Search aims for the site selection and procurement market. Their map marker shape is the default Google Maps shape, which does an excellent job at pinpointing a property’s location, though we sometimes find it difficult to click consistently due to its narrow profile. In addition, they go the extra distance and differentiate property type via color. Like with CoStar, we applaud this attempt at providing users another level of detail on the map beyond location, though we find differentiation by color alone to be a confusing. Some of the colors are very similar, and when we use the map we find our eyes constantly jumping back and forth between the map and the color key next to it. Why not simplify this representation with a letter or icon that are more inherently tied to the information being communicated?

Xceligent

Xceligent’s Map Search

Xceligent provides research technology to local markets. Their map marker does an great job at pin-pointing (literally) the exact location of a property. Like with LoopNet’s marker, however, we take issue with the use of numbers on the marker handle, since the numbers have no inherent connection to the property they represent. They are a presentation abstraction, not a piece of information inherently tied to the property the represent itself.

Conclusion

For such a small and ubiquitous internet device, map markers are deceptively difficult to get right. This difficulty isn’t just confined to the Commercial Real Estate Industry either: browse around this blog post written by Trulia (a leading residential real estate site) back in 2006. Ultimately, the successful design of a graphical map marker depends on maximizing communicated information while maintaining usability and clarity of presentation.