ct-blog flight hotel local

[Design Nuances] Hotel search results header redesign

We recently decided to redesign the header for our hotel search results. We haven’t quite been happy with the design of the header since we launched hotel search results on a map.

This is the header we had before the redesign:

We think there’s just a ton of things wrong with this design. The placement and design of the links for the List & Map views leave a lot to be desired–they were positioned in a blind spot and it’s not necessarily obvious that it’s something people can click on. Also, the design was taking up 3 rows of precious screen real estate when it didn’t really need to. Finally, the use of tabs for the sorting links was a bit grating–all of our other products have moved away from tabs for sorting. We prefer to use tabs for alternate views or for segregating and presenting discreet chunks of information, that’s the way we use tabs in our hotel information pages.

We like to be practical about not holding up new features and enhancements forever–it wasn’t perfect, but it worked, so we released the design as it was. There was certainly some cringing every time we looked at it but as Jeffrey Zeldman recently said

Of course, your designer friends will think less of you, and you’ll cringe every time you see the site, but if you don’t have a taste for masochism, you shouldn’t be in design, because the hurt will kill you.

So, in the spirit of Spit and polish, we rolled up our sleeves and got cracking on a redesign for the hotel search results header. The fact that we have some other new features and enhancements coming very soon on hotel search also made it good timing to start working on the redesign.

The first order of business was to use tabs the way we prefer to use them–in this case to present alternative views for the same information. We moved the List/Map view links to the top left of the header and made it more obvious that they are clickable. We moved the pagination information to the top right, into the same row as the List/Map view links and gave the sorting links a newer visual treatment.

Voila–with this redesign we moved to using tabs the way we like to use them, improved the discoverability of the List/Map links and reduced the vertical footprint of the header unit. We’re no longer cringing when we look at this and we hope you like it too.