Hipmunk is a modern travel search engine. But what does that mean in 2013? How do you solve user needs without overwhelming them? How do you consider what people’s goals are and design a user interface to support this? Let’s dive into what Hipmunk does well and not so well!
Like many websites, Hipmunk offers a range of functionality to its visitors. Specifically, Hipmunk is for both flight and hotel search. However, a problem emerges when one tries to balance two of Nielsen’s key heuristics for user interface design: “Flexibility and Efficiency of Use” and “Aesthetic and Minimalist Design”.
The Hipmunk Homepage in June 2013
Surely, it doesn’t make sense to blindly follow Nielsen heuristics. However, deconstruct the user experience here. Page loads. I scan the page, arriving at “Search Flights” and “Search Hotels”. I see two elements with equal visual prominence in the information hierarchy – generally a usability no-no. Where do I look? Admittedly, I’ll start on the left, because as an English reader, I move left to right, and the cursor is active in the “From” field.
However, I had to look right as well to process what was there before I could take action on the left element because the design doesn’t make clear where my attention should be. I could not ignore “Search Hotels” because it was designed to be nearly just as important as “Search Flights”. As much as my eyes move left to right, I also consume the site top-down to some extent. And when I vertically reach the two white boxes, a user may get stuck due to the equal visual treatment.
Indeed, on mobile web, by using HeatData we found that users got stuck at a staggering rate, scrolling past key fields and zooming in on areas that had no functionality.
There could be myriad reasons for this design. Indeed, it’s likely that hotels generate a large percentage of revenue for Hipmunk, so featuring it prominently is important for them. And you can entice someone to book a hotel with you when you make that option clearly available as opposed to tucking it away somewhere. So a product tradeoff is cognitive overload for a user in the hopes of getting X percent more people to also book hotels through Hipmunk.
To be fair, this isn’t how Hipmunk always balanced flight and hotel search. Here is a screenshot from just 5 months ago in January 2013.
When you use Hipmunk on your smartphone, what are the circumstances? Either you’re planning a trip in advance and not using your laptop for some reason…or, more likely, you’re on the go and need to book a room pronto. Hipmunk Mobile optimizes for this latter use case.
Location? Check. Just for tonight? Check. 2 guests? Probably. 1 room? Check. And just like that, you’re one tap instead of five, or more, from searching for hotels. The key is not adding work when the defaults are wrong. Even if Hipmunk is wrong about the dates, and you actually are planning a trip in advance, it’s not adding steps by setting defaults. Consider where in your app or site you can save many users time without costing others time through useful defaults.
Once you have someone committed to signup, purchase, or otherwise complete a funnel, the worst thing is to lose them. One way people get discouraged and choose to abandon funnels is forgetting about the value you’re providing them. Hipmunk successfully transitions users from busy flight selection views to a focused view on the leg that the user has chosen.
Busy Flight Selection View
Focused Flight Selection But Without Disorienting The User / Leaving Flexibility to Correct If Needed
It’s important to balance use cases, leverage defaults, and tighten up conversion funnels if your goal is to engage and retain your users. Hopefully these examples from Hipmunk have given you some ideas to help your web design take flight!
Jason Shah is the creator of HeatData, an analytics tool for tracking and optimizing what people do on mobile websites. He blogs about user experience and personal growth regularly at blog.jasonshah.org and you can follow him @jasonyogeshshah.