Big news! Redfin has begun clustering listing search results! We’ve rolled out the feature to Seattle, Portland, the Bay Area, Sacramento and Phoenix so far, and expect to offer it across the site by this Friday.
Clustering fixes a big problem. For years, the result most Redfin.com visitors have seen when first searching the site has been an error message that prompted users to zoom in:
Visitors’ most common reaction to this warning was to leave. And many did just that. The problem is that first-timers often start by searching broadly, on cities like Seattle or Boston that contain thousands of listings, which are difficult to display on a single map.
Most sites create multiple pages of results, forcing the user to flip through pages for listings that in reality may be separated by only a few feet of lawn.
But we prefer to think of Redfin as an application, not a book, where the map shows the entire lay of listings across the land. If we can’t create a work-space that shows all the listings for an area, we don’t show any listings at all.
With today’s upgrade, we still ask users to zoom in on a workable number of properties, but clusters guide that process, creating targets on the map for users to click, sized according to the approximate number of listings in that area:
Redfin dynamically sizes and locates the clusters based on a real-time survey of listings in the area. As a result, we never show an out-of-date view of the listings in an area. To calculate the size of very large clusters quickly, we do however round to the nearest multiple of ten or five.
My God, It’s Full of Stars!
What you’ll notice first when you click on a cluster from a Safari or Chrome browser is that the cluster explodes into more clusters, or a scattering of homes, that slide and re-size across the screen. This looks cool. And we coded it in a cool way, using CSS Transitions, a technology associated with the new language of the web, HTML5.
When you mouse over a cluster, you see the shape of the cluster, the number of houses and condos within the cluster, and their price range. This mouse-over display uses CSS Transforms, also associated with HTML5.
What delicious eye-candy! But it serves a larger purpose, to animate the whole work-space so that it can stream more information to our users. As Redfin engineering vice president Sasha Aickin notes, a 30-second video conveys more information than a picture you stare at for 30 seconds.
We think animation can have a similar effect in a real estate application. So now that we’ve committed to emerging web standards, you’ll see plenty more dynamic features added to Redfin, highlight listing photos and charting pricing trends. The experience, we hope, will blow you away.
(Almost) No Browser Left Behind
But what about the rest of the browsers? Firefox 4.0, now in beta, also supports these animations. And except for Internet Explorer 6.0, all the other browsers still show clusters, but without the mouse-over or animation effects. We worked hard to recognize which browser you prefer, and to support that choice.
We’ve still got more big changes to the website coming this week, but we’re rolling them out bit by bit to make sure the site doesn’t crash.
For now, many thanks to the designers and developers of clusters, Navtej Sadhal, Darren Yeung, Michael Smedberg, Ben Fulton, Dan Fabulich, Andy Taylor and Jane Nemenman, all of whom, undoubtedly, are anxious to hear what you think…