Techblog: Ein neuer Look für die Cliqz-Schnellsuche

Ab sofort hat die Cliqz-Schnellsuche auf dem Desktop eine neue Benutzeroberfläche (User Interface oder kurz UI). Schon zuvor brachte die bisherige UI Nutzer auf dem schnellsten Weg ans Ziel ihrer Suche: Im Schnitt beantwortet Cliqz über 50% aller Suchanfragen direkt im Browser – ohne den Umweg über eine separate Suchergebnisseite. Warum also etwas ändern?

Unsere Suchoberfläche zeigte zuletzt einige Abnutzungserscheinungen. Mit den Jahren haben wir viele neue Funktionen hinzugefügt, darunter Wetterinformationen direkt im Such-Drop-down, einen Fußball-Liveticker und Direktlinks für Musikstreaming von YouTube oder Spotify. Während wir mit Hochdruck daran arbeiteten, die Neuerungen schnellstmöglich für unsere Nutzer verfügbar zu machen, haben wir manchmal nicht so sehr auf ein einheitliches Design geachtet. So kam es, dass etwa die Abstände zwischen Suchergebnissen oder die Darstellung von Schaltflächen trotz gleicher Funktion nicht konsistent waren.

Außerdem gestaltete es sich immer komplizierter, neue Funktionen zu integrieren oder potenzielle Fehler zu beheben. Das wurde uns mit der beginnenden internationalen Expansion von Cliqz schmerzhaft bewusst, weil aufgrund der länderspezifischen Suchdaten jeweils zugeschnittene UI-Versionen vonnöten waren. Auch wenn es am Ende funktionierte, war es höchste Zeit, eine neue Benutzeroberfläche zu schaffen, die sich einfacher skalieren und pflegen lässt.

Im Januar veröffentlichte Mozilla die deutsche Version seines Programms Firefox Test Pilot, in dessen Rahmen experimentierfreudige Nutzer neue Browser-Funktionen ausprobieren können. Dank unserer engen Beziehung zu Mozilla hatten wir die Möglichkeit, die UI-Neugestaltung im Rahmen des Test-Pilot-Programms voranzutreiben. In einem ersten Schritt lieferte Mozilla zunächst unsere etablierte Suchoberfläche als Experiment an rund 10.000 Test-Pilot-User aus.

Schnell stellten wir fest, dass sich Firefox-Nutzer offensichtlich von Cliqz-Nutzern unterscheiden: Sie haben einfach andere Erwartungen an den Browser. Firefox-User installieren kein neues Produkt (wie den Cliqz-Browser), sondern nutzen lieber die ihnen bekannte Browserumgebung. Sie erwarten daher ein Look & Feel, das sich nahtlos darin einfügt.

Die Rückmeldungen der Test-Pilot-Nutzer legten jedoch nahe, dass sie ein Problem mit dem Look & Feel unserer Suchoberfläche hatten. Beispielsweise bemängelten einige, dass die Nutzung der ergänzenden Suchmaschine (etwa Google) nicht intuitiv sei. Andere kritisierten, dass durch zu viel Weißraum bei der Darstellung der Suchresultate unnötig Platz verschwendet werde. Unsere User sagten uns also, dass wir etwas ändern sollten. Und genau das haben wir getan.

Statt unsere Suche im Alleingang für Firefox zu optimieren, arbeiteten wir eng mit unserem Investor Mozilla zusammen. Ziel war es, ein gemeinsames Produkt zu schaffen. In den Vormonaten hatten wir schon durch die Zusammenarbeit an kleineren Design- und User-Experience-Projekten wertvolle Erfahrungen gesammelt. Doch diesmal standen wir vor einer ungleich größeren Herausforderung: Den Einstiegspunkt für die Suche im Browser zu verändern. Um dieses Projekt – möglichst schnell – abzuschließen, mussten wir noch enger kooperieren. Im Februar flogen daher zwei von uns von München nach Toronto, um dort mit den Design- und User-Experience-Kollegen von Mozilla eine Woche lang intensiv zusammenzuarbeiten.

Glücklicherweise durften wir Mozillas großzügiges Designbüro in Beschlag nehmen, wo wir uns jeden Morgen trafen, um den Tag zu planen und die verschiedenen Aufgaben anzugehen. Erster Punkt auf der Agenda: Durch die Abbildung aller Arten von Cliqz-Suchergebnissen einen Überblick über den Status quo verschaffen. Dazu zählen verschiedene Smart Cliqz, reguläre Websites und Einträge aus dem Browserverlauf, die jeweils unterschiedliche Informationen umfassen. Beispielsweise gibt es für herkömmliche Websites teilweise sehr ausführliche Beschreibungen, während Chronikeinträge überhaupt keine Beschreibung haben. Diese Daten bilden die Grundlage für die Suchresultate. Daher war nicht nur ein Überblick über die verfügbaren Daten vonnöten, sondern auch ein tieferes Verständnis derselben, um eine rundum gelungene Suchoberfläche zu designen.

Damit wir stets eine visuelle Übersicht zur Hand hatten, druckten wir alle Ergebnistypen aus und hängten die Ausdrucke an die Wand hinter unserem Arbeitsplatz. Auf diese Weise konnten wir schnell und einfach Resultate verschiedenen Kategorien zuordnen und umsortieren. Dies erleichterte es uns, Muster sowie Überschneidungen zu erkennen und als erstes mit der Arbeit an den am häufigsten verwendeten Ergebnistypen zu beginnen.

Wir gingen die Aufgabe von zwei Seiten an: Zum einen von der Datenseite, um ein gemeinsames Verständnis der uns zur Verfügung stehenden Suchergebnisdaten zu erhalten. Zum anderen definierten wir eine Reihe von Designanforderungen. Dazu gehörten eine einheitliche Darstellung, sowohl innerhalb der Suchresultate als auch hinsichtlich der Firefox-Browserumgebung, und einfache Erweiterbarkeit dank eines Grundgerüsts aus wenigen wiederverwendbaren Designelementen.

Um den Designprozess weiter zu verfeinern, werteten wir auch anonymisierte Daten zum Nutzungsverhalten aus, die im Rahmen des Test-Pilot-Experiments gesammelt worden waren. So erfuhren wir beispielsweise, dass zwar die Mehrheit der Suchresultate mit der Maus ausgewählt werden (durch Anklicken des Ergebnisses), aber User in über 10% der Fälle die Tastatur zur Auswahl nutzen. Als Konsequenz musste die neue Suchoberfläche sowohl Maus- als auch Tastatureingaben unterstützen.

Während des gesamten Designprozesses wiederholten wir immer wieder die gleichen Schritte: diskutieren, entwerfen, testen und Feedback einholen. Letzteres gestaltete sich glückerweise recht einfach, weil wir zahlreiche Mozilla-Designer um ihre Meinung fragen konnten, die nicht direkt in unser Projekt involviert waren. Zur Wochenmitte hatten wir Gelegenheit, den aktuellen Entwicklungsstand des neuen Designs per Videokonferenz zugeschalteten Mozilla-Designern aus aller Welt zu präsentieren.

Im Lauf der Woche evaluierten und optimierten wir gemeinsam jedes einzelne Element der UI: die Icon-Platzierung, die Ausrichtung aller Elemente, die Farben, die Schaltflächen und Links sowie die Hervorhebungen. Ergebnis der intensiven Zusammenarbeit war eine Sammlung Designspezifikationen für die neue Suchoberfläche – bereit zur Implementierung durch unser Frontend-Entwicklerteam in München.

Wir haben so früh wie möglich mit echten Daten gearbeitet. Zwar kommt man am Anfang nicht drumherum, Anschauungsmaterial auf Grundlage von Fake-Daten zu erstellen. Aber beim Testen von Designentwürfen geht nichts über echte Daten, insbesondere, wenn man an solch komplexen, datengetriebenen Produkten wie einer Suchmaschine arbeitet. Um schnelle Tests zu erleichtern, haben wir einen funktionsfähigen Prototyp auf Basis des aktuellen Cliqz-Add-ons für Firefox entwickelt. Das ermöglichte uns, neue Designs für beliebige Suchanfragen und Ergebnisse sofort auszuprobieren – alle Beteiligten konnten direkt erleben, wie ihre Entwürfe „zum Leben erwachen“. So stellten wir zum Beispiel fest, dass einige Suchergebnisse zu lange oder überhaupt keine Beschreibungen hatten, wodurch das Design fehlerhaft wirkte. Zugleich war der Live-Prototyp eine großartige Kommunikationshilfe, unsere Entwürfe anderen Stakeholdern zu erklären.

Frühe Versionen der brandneuen UI haben wir unter Laborbedingungen von echten Nutzern testen lassen, um sicherzustellen, dass unsere Designideen auch in der Praxis wie beabsichtigt funktionieren. Im letzten großen Schritt wurde die neue Suchoberfläche (nochmals) an 13.000 Test-Pilot-Nutzer verteilt. Diesmal fielen ihre Reaktionen fast durchweg positiv aus. Wir hatten also offenbar alle vorherigen Probleme im Zusammenhang mit der Suchoberfläche gelöst.

Die neue UI ist ab sofort in Cliqz für Windows und Mac aktiv. Wir freuen uns auf dein Feedback: Teile uns via Support-Formular oder Facebook deine Meinung zum neuen Look der Schnellsuche mit.