Image showing the natural language form of Kobler & Partner on a tablet.

A natural language form – rethinking the way information is filtered

29.05.15

Can filtering be engaging? Yes it can. We created a natural language form for Kobler & Partner which allows you to simply state what you are looking for.

Filtering: a simple question - a pleasurable experience

Where would you like to go? Filtering the many travel offers of Kobler & Partner is quick, easy and natural. In one simple sentence, you can specify what kind of travel you are looking for:

K&P offers all sorts of travels in every corner of the world, lasting any duration, starting today.

The bold parts can be changed to the user’s liking, so that the sentence may read K&P offers expeditions in Asia, lasting a month, starting in July - and the travel offers shown match exactly this description.

Our travel filtering form looks like a simple series of drop-down forms. However, for it to work with the usability which we want to offer, we had to find a more refined solution. Most browsers limit the extent to which we could style the select and option elements used for our drop-down form. We didn’t completely abolish the select element, since the CMS of the website, Drupal, relies on it, but we could customise the rendering of the page and thus extend the default select element to our bidding. Using HTML and CSS, we created a fully custom form element which users interact with while we maintain the form value in a hidden input using JavaScript. The mobile view proved to be a bit arduous, particularly in landscape mode; so we spent some extra time making sure the entire form was truly responsive and worked across a wide range of device formats.

Loading the filters

For our travel filter to work, we first needed to get the data for the four filters: category, location, duration and starting date. They all came from different places and had to be localised. Category and location are taxonomy terms which are loaded from their given taxonomy and localised. Duration and starting date must be generated manually. When loading the filters, we took the additional step of running a quick check for each parameter to make sure there was at least one travel offer which would match. Once multiple filters are selected, checking for availability is rather complicated, but at least on the top level, we can avoid that you end up with no results.

A further challenge was that for the starting date, our options refer to the current month. In June for instance, you can look for travels starting “in July or later,” “in August or later” and so on – we ensured that these terms change automatically every month. Finally, all strings had to be translated into German to offer a flawless experience in both languages of the website.

A form in two languages

Given that the website of Kobler & Partner is available in German and in English, we had to ensure that we could load the page in different languages. The first task was loading the months in the date filter, which are generated automatically. Thanks to the powerful Drupal translation API, we were able to load them directly in the selected language. The use of place holders gave us the flexibility needed to provide a correct translation. We use placeholders in the filters, for instance to move around the name of the month within it, but our translation puzzle goes even further: The four filters themselves are place holders in the sentence, which allows us to build a well-formed sentence in both languages.

K&P offers all sorts of travels in every corner of the world, lasting any duration, starting today.

K&P bietet Erlebnisse im Bereich Ihrer Wahl, in allen Ecken der Welt, die unterschiedlich lange dauern und heute beginnen.

Effortless filtering

Once the filters are in place, what’s left to do is the actual filtering. Looking at Kobler & Partner’s travel offer page, you may have noticed that there is no submit button. We decided to click it for the users. This way, we can update the content on the page directly as people are filtering. You can for instance first choose the location of your travel and in a second step the duration – the results will be narrowed down before your eyes, first to only show travels at your location and then, out of those, to only show the ones with your desired duration. Why not just give it a go? Don’t worry, you don’t have to be a mountaineer.