Richard Shepherd

Sometimes you need to make bold decisions and really shake up conventions to get results. It can be scary, other people might point at you and laugh, but what’s the point if you’re not going to try something new?!

Here’s a case in point. This is how the old search forms from one of the sites I work on (www.packyourbags.com) used to look:

(NB. The form on the left has the newer design icons, but the form elements themselves are the same as they were on the old site.)

The convention for search forms is to put text above or next to the form field, explaining what the field is for. So we have ‘Destination’ before the destination dropdowns and ‘Duration’ before the number of nights. It makes complete sense. It’s logical. It’s even usable. To an extent…

How the competition fares

But could it be better? I think so. So I went hunting for inspiration and, surprisingly, most other holiday websites follow this convention. In fact, many of the market leaders have awful search forms. Take these examples from Thomas Cook, On The Beach and Direct Line Holidays:

Yuk!

K.I.S.S.

How can we simplify this? How can we make it more usable. How can we encourage our users to search. If you look at any of the search forms in this post so far they do the opposite – they discourage casual browsing because they are, frankly, scary to look at. So many fiddly options. So much text. It’s worth noting that Direct Line do have a more options/less options toggle – which is a nice idea. I’m just not sure they’ve done it the best way possible.

The fundamental question then is: why do we need all the text?

If we’re on a holiday website, and a dropdown’s default value is ’7 nights’, isn’t it obvious that the dropdown is for the duration of the stay? If we’re on a holiday website and the dropdown says ‘Spain’ isn’t it obvious that it’s a dropdown for destination? And so on, and so on.

The ‘A-ha!’ moment

And that’s when it dawned on me. Remove the text. Keep the label tags but hide them with CSS (we still want them there for accessibility). It’s implied what each form field does. It’s obvious.  So I removed all the text apart from the adults, infants, and children bit:

Each form field is still clear, you can still tell what it does. I changed some of the text in the form fields, so ‘+/- 3 days’ became ‘give or take 3 days’ for example. It’s plain English. It’s simple. It does what it says on the tin. And, I’d argue, it’s easier to use and will (we hope!) encourage our users to browse more. We’ll have to wait a few weeks to get some stats which have any meaning, but the feedback so far as been positive.

Other things I changed included:

• Adding padding to each element, so the text can breathe inside it’s little box;
• Justified the width of the controls. Although if the date control was the same width as the destination control it would look odd;
• Added a light yellow (in-keeping with our brands strong yellow) to ‘pop’ the form elements off the page;
• Gave the calendar much bigger and bolder icon; and
• Introduced plain English in the controls to make them simple and obvious.

BTW – The reason I left in adults, kids and babies is because we want a default setting for adults – 2 – and so it needs to say ‘adults’ somewhere else. And as soon as we put an ‘adults’ label above the control we need to do the same for kids and babies just to maintain some consistency. It’s not perfect, but it’s not bad either. I’d welcome suggestions on how to improve this further!

A breakable convention

This is a big step, because it bucks the convention set and adopted by most of the other holiday sites. Conventions often exist for a reason, but I think this one needs to be broken. It may not be rocket science, and there are some much better looking forms out there, but in the context of our market (package h0lidays) we hope this new approach to search forms helps our user find what they want in less time.

Our search form is a work in progress, and there are many other areas on the site which we’re updating. I’ll share those with you, and the design process behind them, very soon.

Compare the old and the new