[Design nuances] Redesigning the search results header Hrush
Our last Design Nuances post focused on changes and improvements to our hotel search results. This time around, we’re going to talk about a small change to all of our search results.
We decided some time back that the header area on our search results was taking up too much vertical space, pushing the actual search results lower down on the page than we liked. The page headers are where we display search parameters as well as allow people to modify their searches by filling up the search form again. Our original page headers looked like this:
There’s three lines of text there, which is the primary reason it takes up so much vertical space. In addition, the first line is extremely large for no good reason.
With reducing the amount of vertical space as our only goal, we redesigned the search headers:
We went from having three lines to a single line. The new design also achieves a stronger association between the “Modify your search” link and your original search parameters.
The vertical space consumed has been reduced by over 100 pixels. When combined with some other minor changes we made a few months back, the total space reduction is over 200 pixels. The new design first made its way into our newly released train search. As of last Friday, our air and hotel searches sport the new design as well.
We’re quite happy with this little design tweak to the page headers, we love improving all the little things because they add up to a big difference.
Well do you think it looks like the "modify search" link has more importance and visible than the "Mumbai to Goa" info? I thik it should have been
Mumbai to Goa | thursday blah blah blah | Modify your Search
Your previous design had that clarity coz of multiple lines and text size heirarchy.
Hrush.. Sorry lot of typos in my previous post.
Well dont you think it looks like the "modify search" link has more importance and visibility than the "Mumbai to Goa" info? I think it should have been
Mumbai to Goa | thursday blah blah blah | Modify your Search
Your previous design had that clarity coz of multiple lines and text size heirarchy.
What you say?
We had the hierarchy in the previous design, but what we observed was that the "modify search" feature experienced very heavy usage and that the search parameters would usually be scrolled out of view as most users are very well aware of what they just searched for.
Its true that users know what they searched for but its equally important for the system status to be clearly visible to the user (1st point of Web UI heuristics), ie in this case the search parameter. Thats the way the machine makes the user comfortable and confident of using the system. The knowledge that he hasnt done any mistake. One of reasons we call cleartrip as user friendly. The heavy usage of modify search link is not a good enough reason to make the current search parameter not important.
I understand your need to make the vertical space lesser which is a good thing ofcourse but again that is not a good reason to lose the hierarchy. You can still make the modify search link visible to the user by not making it look like its the label for the current search parameter. Its like you telling the user to modify the search even before telling him what the results shown are for…
Do i make sense?
Umesh–we’ll take that under consideration, let’s see how things play out when being used.
You’ll be happy to know that some of the feedback you left us on the hotel search results has already made it into production.
Thats fine Hrush. Just giving you feedback coz i’m a fan of your service and i want it to be the best. Just to tell you your current re design is not unusable or non functional. People will be able to use it anyways… Just that we are trying to improve the experience by making it easy to understand, learn and use. I’m sure i dont have to tell you this, you are some one who has understood that better than anyone else. The only people whom i can draw paralell from you are the 37 signal guys.
Yes i noticed the changes on hotel search and your comment there and i have replied to that too. Did you see that?
Btw do you have a feed for the comments on this blog so that i can keep track of them?
Umesh–here you go, this URL will let you track comments with your newsreader:
http://blog.cleartrip.com/journal/atom-comments.xml
Hrush – It’s great to have all the info in one line. But I think the previous design had its merits too. In the new design, the search parameters dont stand out. And therefore I am at a lack of confidence of my search. I don’t know if I searched for a one way trip or return trip. I have to deduce it from the dates.
Zishaan–that’s a good point, we’ll see what we can do.