Hipmunk listens to bloggers. I reward them with more free advice.

Hipmunk listens to bloggers. I reward them with more free advice.

You may have read my previous article on Hipmunk, in which I audited the website’s surprisingly well-executed UX. Because the site was built from the ground up with user experience in mind, I struggled to come up with meaningful improvements, and nothing I came up with would have required a site redesign. Nonetheless, after much scouring of the site, I did come up with a number of modest usability issues, each of which I addressed with a proposed solution. As you can see from the comments, Alex Ohanian of Hipmunk actually responded to the article and forwarded it to his team members. Clearly he wasn’t just blowing smoke because they have implemented a number of my recommendations. If that isn’t the definition of “on the ball”, I don’t know what is.

Let’s go over a list of the improvements they have implemented:

Hotel filter buttons are now color coded

The price filter buttons were originally not color-coded, even though various price levels were. Obviously, this isn’t a show-stopper, but every little morsel of cognitive load imposed upon the user – such as having to mentally associate a button with a function – makes a new user that much more likely to quit mid-process. My solution involved a look that simulates plastic buttons with LEDs underneath, with the button illuminating upon pressing. Hipmunk adopted a simpler and, frankly, better solution of colored dots that match the ones that appear on the map. It communicates exactly what it needs to while keeping the layout from getting too messy.

Heatmaps fixed

I pointed this faux pas out in my last article and after showing it to Hipmunk, they fixed the problem fast! Here’s what it looked like:

The new UX is much cleaner. Rather than sitting on the map, the heatmap buttons sit right above it on the same line as the filter buttons.

 Recent searches now saved on front page

Perhaps one of the most important changes I proposed was a way to save searches for if and when a user leaves the site or goes back to the home page. In the original design, the user’s searches were saved in a tab format, but only if the user stayed on the search result pages or the “new search” tab which had a nearly identical UX to the home page. If the user left this arbitrarily defined realm (for instance, to download the iPhone app), his searches would vanish and he’d have to manually re-enter all of them. I therefore proposed that tabs either remain present across the site or recent searches appear to the left of the main search box on the home page. As it turns out the opted for the latter solution, though I must say theirs is a bit more elegant than the one I threw together.

Here is my original proposal:

Here’s the solution they implemented:

Hotel clusters improved

In the first article, I noted that clusters of hotels too close to represent as separate dots would appear out of the blue when you zoomed out and disappear when you zoomed in, replaced a few hundredths of a second later by several dots. The problem was it didn’t really illustrate what was happening particularly well. I can’t really illustrate the solution because it is handled with a more fluid animation. There is no division of bubbles like cells in a zygote, but it does make it slightly more clear what happens when you zoom in and out by loading the consolidated dot prior to the zoom, making it extra large, then sizing it down to normal size as the map zooms out.

New issues

In the midst of all these improvements, they made some changes that weren’t necessarily for the better, or added features that were unfinished.

The hotel ratings are now green circles.

Clearly what happened here is that Hipmunk switched from Yelp to TripAdvisor. That’s a fine enough idea since the latter actually specializes in travel while Yelp reviews banks, plumbers, and strip joints. There are two problems with the new green circle design. First, the fact that they are circles is confusing. Stars are a universal idiom for conveying quality level. Circles are not. Also, these circles are particularly hard to read because container circles are quite thick compared with the small-ish inner fill circles. As a result, a four-circle rating isn’t immediately discernible from a four-and-a-half. It’s very hard to read these circles at a glance.

The second problem is the color. Green is an unusual color for a rating scale to begin with, but it’s particularly problematic here. The shade of green used is almost identical to the shade used to signify a cheap hotel. Almost, but not identical. It’s close enough to violate Stephen Few’s admonition against using a single color to represent multiple things and different enough to violate the universal design rule that you can match or contrast but never conflict. I’m more concerned about the first violation. Kudos on creating a mental map between green and cheap with the color-coded buttons, but why ruin it with these green circles? They distract from the principal color coding scheme.

Below is my proposed design change. The filled circles are gold, an idiomatic rating icon color, and the empty circles and halves are a faint shade of grey, just visible enough to let the user know what the maximum rating is.

Now you can highlight a desired area. That’s neat but…

Hipmunk now gives you the ability to cordon off a specific region of a city and it will only include the hotels within that rectangular area. The problem with this is that chances are if they are staying in a hotel, it’s not their home town and they may not be as well acquainted with it. How will they know what is a practical distance and what isn’t? If a city has particularly bad traffic, a smaller range will likely be desirable. Unless the user researches traffic statistics in a city and then more specifically which roads are the worst, they won’t know what to pick. At least in major cities, the site should let the user select between neighborhoods.

Neighborhoods are a good navigational rule of thumb as they tend to form organically by ease of access and tend to perpetuate themselves similarly. The default should be a two or three neighborhood radius which the user can increase by clicking on additional neighborhoods. This will also help to acquaint them with the cultural layout of the city they are visiting.

Old issues

A few things mentioned in the original article still haven’t been addressed. I’ll go over them briefly here:

  • There is still a dazzling mouse-hover effect on the hotel map. If a user is like me, they tend to let the cursor follow their eye. This means that while they look at hotels they will inadvertently cause a series of information pop-ups to flash at them like a strobe. The best practice for any hover menu or dialogue is to put in a short delay on activation and a fade onset (Netflix takes this ten times too far with their current homepage). For instant feedback, the individual hotel dots can light up slightly.
  • The mouse icon should turn to a pointer when you mouse over a hotel. An open hand suggests to the user scrolling and panning. A pointing finger is the standard idiom for a button or link. That instant feedback I mentioned above? The pointing finger can be part of your instant feedback.
  • Multi-city flights should be visually separated. When a user is looking at a multiple-city itinerary, there is no intuitive way to know whether to read the input boxes vertically or horizontally. Already, this UX is a reversal of the idiom established by the home page where attributes of a flight are arranged in a single column. In this dialogue, flights are rows, attributes of flights are columns. Because the main unit of information depicted here is a single flight which contains three attributes (origin, destination, and date), the flight (row) should be separated at a greater distance from its neighbor above or below while the attributes should be closer together. Instead, the opposite is true. This problem can be solved either by adjusting the distances between the various rows and columns or by separating the flight with blue boxes or lines as depicted in the previous article.
  • A user should be able to forward a flight. Sometimes people are lazy. Sometimes the one shopping for the flight isn’t the one who makes the final purchase decision. The site should allow a person who has found a flight to forward it on via e-mail, Twitter, Facebook, or G+ to a recipient. Any step you can take to increase the likelihood of a purchase is a good step.

All in all, though, Hipmunk is clearly on top of things. The fact that they responded to recommendations in a blog article is testament to their savvy. Meanwhile, Netflix hasn’t touched my ideas and, in fact, continue to degrade their UI. Best of luck to you, Hipmunk. Keep it up.

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>