Alternatively titled: How could something seemingly so simple be so complicated?
In the first of what will be many entries on the subject of design and user interface, I thought it would be fitting to pay respects to the Trulia logo and discuss the burgeoning world of map markers.
An engaging, distinctive, and functional marker design is fundamental to differentiating any product in the mapping/mashup space. Obviously, the Trulia marker takes its cues from Google Maps location marker, the beauty of which lies in its ability to precisely indicate a location on the map whilst also providing a large target for users to click. Other outfits take a relatively literal approach—Zillow, Propsmart, use markers in the likeness of a house. Housingmaps, powered by Google Maps and Craigslist, is a mashup of the purest kind—no visual rebranding here. Redfin use a more generic red circle (which pulses with an animated yellow circle when clicked). Yahoo’s new beta flash based map features vividly colors speech bubbles that are by turns labeled with either a letter or number which correspond to a legend to the left (example).
Overall it seems as though the trend is to use fairly generic markers, though in a clearly defined space (such as real estate) that trend is less apparent. Common to all (except Zillow) is the drop shadow—the png compression format allowing for true transparency and helping to give the map a 3-D quality that would make Edward Tufte proud.
At times thought of affectionately as an alien antennae or giant green table-tennis paddle, the Trulia marker is the most prominent and important visual element on our site. It needs to be striking and bold, yet not be overwhelming when displayed 50 times on the page. It features a subtle dark green stroke to help offset it from the map, a white circle as a clickable target, and also a slight graduation of color to enhance the 3-D effect. It also features a bright orange rollover and highlight state. In principle, we’ve though of the marker as indicating “a thing on the map” rather than specifying a type of landmark. Descriptively symbolic markers (such as markers shaped like a house), while immediately intuitive, lead to a narrowly defined usage. Designing different markers for different landmarks (be they homes, gas stations, ATMs, schools, or restaurants) can be both tedious and create a chaotic patchwork on the map.
Google recently introduced a “you are here” green arrow, to create strong visual contrast between the surrounding landmarks. This approach, though not necessarily the greatest looking, is extremely intuitive. To see it in action, here’s a guide to the closest taquerias to the Trulia offices.
Expect to see a lot more innovation in this area, as the increasing number of mashups and map-based products fuel the need for differentiation among competitors. Balanced against this is the need for some interaction standards so that users don’t have to re-learn map interaction a hundred times over.
Popularity: 5% [?]
`
July 12th, 2006 at 7:20 pm
BlueRoof has little houses, but they have different color rooftops indicating different search criteria. What do you think about that?
July 12th, 2006 at 7:47 pm
Thanks for your comment Greg. I hadn’t seen the BlueRoof markers before—very nicely designed. They are intuitive, friendly, and descriptive. I like the use of different colored roofs for different search criteria, and actually this approach is not that different from ours. We use a green marker for For Sale properties, orange markers as the highlight state, and red markers for Sold properties (visible on our properties details page). Lord knows what the next color will be… but I’d say the smart money’s on blue.
July 14th, 2006 at 11:14 am
Rental site http://www.mynewplace.com has an interesting twist on the marker. If you hover over the blue marker for a second or two, it grows in size, presumably to draw your attention to the fact that you can click on it.
July 27th, 2006 at 8:32 am
I still think it looks like a parking meter…
Nice post though - you’ve obviously put some thought into the design, which I appreciate. Personally, I still like the house symbols - I find them immediately more recognizable. Shackyack.com has a nice implementation that varies the greyscale colors based on the relative price of the property.
July 28th, 2006 at 10:26 am
Thanks for your comments Joel. I’m glad you enjoyed the post. Shackyack has a gorgeous looking interface and the map markers are indeed very intuitive. I should add it to the carmen miranda-esque halo of map markers. By the way, good call on the parking meter too - I hadn’t thought of that one!
August 15th, 2006 at 6:41 pm
Good topic and nice work. For our (Real Tech LLC) John L. Scott, Coldwell Banker Bain and Coldwell Banker Seal real estate map solutions, we chose more traditional 3D looking icons to identify property data types.
The 32-bit icons support 3 digit numbering and yet are small enough to stack pretty well where multiple property listings are in close proximity to one another.
Designing for a specific set of data for a specific market, allows us the freedom of visually descriptive images that can be readily identifiable to users. The consumer market solutions like Yahoo, Google, Local.Live do face the design challenges of displaying many different data types on one map tile.
I think we’ll see many different flavors of map UI and icons as interactive map solutions pop up in different industries. It’s exciting to watch.
http://www.johnlscott.com
http://www.cbbain.com
http://www.cbseal.com
October 23rd, 2006 at 11:32 am
Nice post, a site called CityCribs.com has used there logo in the marker.
It seems that sites are trying to customize to there markers to compliment there design formats. I wonder what the next generation of mapping will bring.
http://www.citycribs.com
December 12th, 2006 at 12:35 am
Does anyone know who designed mynewplace.com website or ziprealty.com website?
March 23rd, 2007 at 3:32 pm
A real estate company can put the logo in the trulia results?
How can I do it?
Thanks.