Bild zeigt das Formular von Kobler & Partner auf einem Tablet.

Natural Language Form – ein intuitiver Ansatz, Informationen zu filtern

29.05.15

Kann Filtern Spass machen? Selbstverständlich. Wir schufen ein Formular, dass schlicht einen natürlichen Satz darstellt, der aussagt, wonach gesucht wird.

Filtern: eine einfache Frage - ein angenehmens Erlebnis

Wohin möchten Sie gehen? Die vielen Reiseangebote von Kobler & Partner zu durchsuchen ist schnell, einfach und natürlich. In einem klaren Satz können Sie definieren, was für Reisen Sie suchen:

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

Dabei können die fett markierten Ausdrücke Ihren Wünschen entsprechend gewählt werden, sodass der Satz beipielsweise K&P bietet Erlebnisse in Asien, die einen Monat dauern, und im Juli beginnen lauten mag - die darunter aufgelisteten Reiseangebote entsprechen demnach genau diesem Beschrieb.

Unser Reisefilter sieht aus wie eine Serie von Dropdowns. Um ein optimales Erlebnis zu bieten, mussten wir jedoch eine präzisere Lösung finden. Die meisten Browser bieten nur limitierte Möglichkeiten, Select- und Option-Elemente, die für ein Dropdown-Formular verwendet werden, zu stylen. Wir behielten zwar das Select-Element bei, da Drupal, das CMS der Website, dies verlangt, änderten jedoch das Rendering der Seite, sodass wir das Select-Element unseren Bedürfnissen entsprechend erweitern konnten. Mit HTML und CSS schufen wir unser eigenes Formular-Element, womit die Benutzer interagieren, während wir den Wert des Formulars in einem versteckten Input mittels JavaScript handhaben. Die Darstellung auf mobilen Geräten war ein wenig schwieriger; doch wir wollten sicherstellen, dass unser Formular komplett responsiv ist und eine grosse Bandbreite von Geräten abgedeckt werden kann.

Laden der Filter

Unsere erste Herausforderung bestand darin, die Daten für die vier Filter zu erhalten: Kategorie, Ort, Dauer und Startdatum der Reise. Sie stammten von verschiedenen Orten und mussten lokalisiert werden. Kategorie und Ort sind Taxonomiebegriffe, die entprechend aus der Taxonomie geladen und lokalisiert werden. Dauer und Startdatum müssen manuell generiert werden. Eine Herausforderung stellte das Startdatum dar, denn die Optionen, die wir anbieten, beziehen sich auf den laufenden Monat. So stehen im Juni beispielsweise „ab Juli oder später“, „ab August oder später“, und so weiter zur Wahl. Wir stellten sicher, dass die Monatsbegriffe jeden Monat automatisch wechseln. In Bezug auf alle Filter gingen wir noch einen Schritt weiter: Für jeden Parameter wird eine Kontrolle ausgeführt, um zu garantieren, dass stets mindestens ein Reiseangebot der Suche entspricht. Dies für verschiedenste Filterkombinationen zu bieten wird schnell kompliziert, doch zumindest auf der obersten Ebene können wir vermeiden, dass eine Suche keine Resultate ergibt.

Filtern in zwei Sprachen

Angesichts der Tatsache, dass die Website von Kobler & Partner zweisprachig ist, mussten wir die Seite in verschiedenen Sprachen laden können. Dies betrifft beispielsweise die Monatsnamen im Datumsfilter, die automatisch generiert werden. Dank der Drupal Translation API konnten wir die Monate direkt in der ausgewählten Sprache laden. Der Einsatz von Platzhaltern schuf die nötige Flexibilität, um eine korrekte Übersetzung zu bieten. Wir verwenden Platzhalter einerseits in den einzelnen Filtern, um beispielsweise die Monatsnamen frei im Filter plazieren zu können, doch unser Übersetzungspuzzle geht noch einen Schritt weiter: Die Filter selbst fungieren als Platzhalter im Satz, sodass wir in beiden Sprachen einen grammatisch korrekten Satz bilden konnten.

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

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

Reibungs- und müheloses Filtern

Nun da die Filter vorhanden sind, bleibt nur noch eines: das Filtern. Ein Blick auf die Reiseangebotsseite von Kobler & Partner zeigt, dass es keinen sichtbaren Submit-Button gibt. Wir beschlossen, diesen direkt für den Benutzer zu klicken, sodass wir den Inhalt der Seite aktualisieren können noch während der Benutzer filtert. Sie können beispielsweise zuerst den Ort Ihrer Reise und in einem zweiten Schritt die Dauer der Reise bestimmen - die zutreffenden Angebote werden schrittweise reduziert, zuerst, um alle Reisen an Ihrem gewünschten Ort anzuzeigen und schliesslich, um davon nur diejenigen mit der gewünschten Länge zu zeigen. Testen Sie den Filter doch gleich selbst!