Case Study „Filter In Webshops“: Das Beispiel mobile.de

In dieser Reihe schauen wir uns Interfaces von Webshops genauer an. Wir erstellen dabei keine systematischen Usability-Analysen, sondern liefern subjektive Berichte von Nutzererlebnissen unter besonderer Berücksichtigung von Design-Aspekten. Die Aufgabe diesmal: Suche ein beliebiges Produkt in einem Webshop oder Online-Portal Deiner Wahl.

  • Gewünschtes Produkt: Kleinwagen, 75 PS, Diesel, Budget: </= 10.000 EUR
  • Anbieter: www.mobile.de
  • Testende Person und Autorin: Claudia Delang

Die Startseite: Direkter Einstieg in die Suche

Ich möchte mir endlich ein eigenes Auto zuzulegen. Dafür sehe ich mich beim Fahrzeugportal mobile.de um.

Dort empfängt mich eine aufgeräumte Startseite. Der Blick wandert zuerst zum Logo und der Suchmaske, in der mir durch vier Piktogramme vermittelt wird, dass ich hier sowohl PKWs, Zweiräder und Wohnmobile als auch LKWs suchen kann. PKW ist vorausgewählt und ich kann direkt in die Suche einsteigen. Eine weitere Einstiegsmöglichkeit bietet der großzügige Bildbereich, der außerdem Emotionalität ins Spiel bringt. "Mit von der Landpartie? Autos mit viel Platz für den Wochenend-Ausflug. Jetzt finden!" führt z. B. direkt in die Suchergebnisliste für Kombi und Van/Kleinbus.

Im unteren Seitenbereich befinden sich wechselnde interne Werbe-Banner, die sich beim Neuladen der Seite austauschen. Es gibt z. B. ein Banner zum Thema "Inserate bei mobile.de sind kostenlos", Teaser zur "Mobile Zahl der Woche", "News der Woche" und "Fahrzeugbewertung nach Schwacke". Die Teaser sind schön gestaltet, abwechslungsreich und informativ. Den Abschluss der Seite bildet ein langer, aber übersichtlicher Footer.

Startseite mit wechselnden Bild- und Teaser-Motiven

+ Übersichtlicher Seitenaufbau
+ Gut gestaltete Suchmaske
+ Emotionales Bildkonzept, um verschiedene Suchtypen anzuteasern (Motorrad, Familienkutsche, Oldtimer)
+ Abwechslungsreiches Teaser-Konzept

- Seite links im Browser ausgerichtet, auf breiten Bildschirmen entsteht dadurch ein großer ungenutzer Weißraum rechts
- Wenig individuelles Screen-Design

Schritt 1: Festlegen der Suchkriterien

Ich habe die Wahl zwischen Gebraucht- und Neuwagen und wähle Gebrauchtwagen. Bei der Markenauswahl gibt es ziemlich viele Marken, die in alphabetischer Reihenfolge aufgelistet werden. Da ich nicht auf eine Marke festgelegt bin, aber auch nicht alles haben will, möchte ich mehr als eine Marke auswählen. Das Dropdown ermöglicht aber nur eine Einzelauswahl (leider klappt es auch mit der Strg-Taste nicht, mehrere auszuwählen), deshalb bleibt mir nur die Auswahl "beliebig". Das Feld "Modell" ist in diesem Fall direkt ausgegraut. Als Preis gebe ich "bis 10.001 EUR" an. Warum der Wert nicht rund ist, verstehe ich nicht so ganz. Vermutlich geht es technisch nur kleiner als 10.001 EUR und nicht kleiner/gleich 10.000 EUR. Bei Erstzulassung wähle ich 2008. Zu alt soll es ja nicht sein und zu viele Kilometer sollen auch nicht drauf sein - ich wähle "max. 30.000 km" und Kraftstoff "Diesel". Jetzt noch die Wiesbadener PLZ und den Umkreis wählen (100 km sind voreingestellt) und dann kann's auch schon losgehen.

Schritt 2: Suchergebnisse sichten

Ein Klick auf den Button "Treffer anzeigen" und die Suchergebnisse sind binnen kürzester Zeit geladen: 86 Treffer. Gut. Die Ergebnisse werden in einer Tabelle untereinander aufgelistet mit Bild, Kurzbeschreibung (Typenbezeichnung, Standort, HU-Angabe, PS, Farbe, Getriebe und Zusatzangaben) und drei weiteren Spalten mit Erstzulassung/Baujahr, Kilometerstand und Preis. Die Liste zeigt die ersten 20 von 86 Ergebnissen. Über eine Paging-Funktion kann ich direkt zu den Seiten eins bis fünf springen oder die Seite, auf die ich wechseln möchte, in ein Eingabefeld eingeben. Ich persönlich bin ja eher ein Freund des dynamischen Nachladens der Suchergebnisse, so dass ich mich komplett durch alle Ergebnisse scrollen kann. Ein Kompromiss wäre es, die Anzahl der Suchergebnisse, die ich auf einer Seite angezeigt bekomme, auswählen zu können. Dann könnte ich die höchste Anzahl einstellen und wäre vermutlich auch zufrieden.

In der Liste gibt es offensichtlich verschiedene Varianten, ein Inserat hervorzuheben: "Seite-1-Inserate" mit orangefarbenem Rahmen, "Top-Inserate" mit grauer Hinterlegung und Inserate, die hellorange hinterlegt sind. Bei manchen bekommt man bei Mouseover zusätzlich eine Langbeschreibung angezeigt (mal untereinander, mal raumfüllend). Für den Nutzer ist der Unterschied nicht so richtig ersichtlich. Zusätzlich zu den Ergebnissen erhalte ich Cross-Selling-Angebote wie Verweise auf günstige Neuwagen bei mobile.de und die Suche entsprechender Angebote bei Ebay, die unterhalb der Ergebnisse aufgelistet werden.

Die Ergebnisse selbst entsprechen jedoch noch nicht meinen Vorstellungen. Die ersten Angebote sind alles kleine dreirädrige Piaggios mit Ladefläche. Nicht gerade das, was ich suche. Da muss ich die Suche wohl einzugrenzen.

Ergebnisliste

Mouseover-Efekt bei Top-Inseraten

Mouseover-Efekt bei Seite-1-Inseraten

Schritt 3: Suche anpassen

Zwischen Headline und Ergebnisliste werden meine bisherigen Auswahlkriterien angezeigt. Über Dropdowns kann ich diese direkt anpassen oder löschen. Das gefällt mir gut. Die dargestellten Suchergebnisse passen sich entsprechend dynamisch an. Bei der Umkreissuche entdecke ich noch den Link "andere". Ich frage mich, was das Plus vor "andere" bedeutet. Kann ich hier weitere Orte hinzufügen? Auf Klick öffnet sich ein Popup, in dem ich die PLZ ändere. Leider ist meine alte Eingabe jetzt weg. Das Plus war in diesem Fall irreführend.


Anzeige der ausgewählten Filter und Sortieren-Funktion

Spezifizieren der Suchkriterien
Ein Blick in die linke Spalte zeigt eine ganze Reihe weiterer Filterkriterien. Der obere Abschnitt "Suche anpassen" enthält die von mir ausgewählten Kriterien, allerdings stehen mir hier zusätzliche Eingrenzungsmöglichkeiten zur Verfügung. Statt einer Eingabe bzw. Auswahl kann ich mittels Von-bis-Filter den Preis, das Baujahr und den Kilometerstand genauer einschränken. Außerdem kann ich spezielle Kriterien wie "beschädigte Fahrzeuge" oder "Angebot für Gewerbe" ein- oder ausschließen.

Gut finde ich, dass der Button "Treffer anzeigen" nun auch direkt die Anzahl der Ergebnisse angibt, die man angezeigt bekommt, wenn man den Button betätigt. So erspare ich mir schon im Vorfeld die Enttäuschung, wenn nur wenige Ergebnisse oder gar die Aussage "Leider keine Treffer" erscheinen, und kann direkt durch eine Veränderung meiner Filterkriterien reagieren. Die Auswahl passt so weit.

Maske zu Eingrenzen der Suchoptionen

Hinzufügen weiterer Filter
Unterhalb des Blocks "Suche anpassen" werden eine ganze Reihe möglicher Eingrenzungsoptionen (Inseratsoptionen, Marke, Fahrzeugart, Leistung, Getriebe, Anzahl der Türen, Ausstattung, Farbe, Schadstoffklasse, Anbieter) angeboten. Schön ist, dass hinter jeder Option die Anzahl der Treffer steht, sodass man auch hier schon im Vorfeld den Effekt der Filterung erahnen kann. Hmm, ein Klick auf "Piaggo" entfernt die Marke aber nicht, sondern beschränkt die Ergebnisse genau darauf. Also Kommando zurück. Ich klicke mal testweise auf den Link "Auswahl erweitern", auch wenn ich sie eigentlich eingrenzen will. Es öffnet sich ein Popup, in dem ich drei Marken auswählen kann, jeweils mit Modell und Modellvariante. Auf drei will ich mich jetzt noch nicht festlegen, deshalb schränke ich lieber auf den Filter "Kleinwagen" ein. Automatisch passen sich daraufhin die Filterkategorien in der Spalte an. Nachdem ich bei Leistung noch nach 45 bis 55 KW gefiltert habe und nur 4/5-Türer anzeigen lasse, bleiben noch 7 Treffer übrig.

Suchergebnisse sortieren:
Neben den Filtern gibt es die Möglichkeit, die Ergebnisse nach Preis (Vorauswahl), Kilometern, Erstzulassung, Entfernung und Eingabedatum (neueste zuerst) zu sortieren. Das funktioniert schnell und reibungslos. Ein Pfeil neben dem ausgewählten Sortierkriterium ermöglicht zudem die auf- und absteigende Sortierung. Für meine sieben Ergebnisse ist das aber gar nicht notwendig.

+ Große Auswahl an Filterkriterien und -arten (Von-bis-Filter, Ein- und Ausschlussfilter, Gruppenfilter)
+ Dynamische Anpassung der angebotenen Filterkriterien
+ Anzeige der zu erwartenden Trefferanzahl auf den Bestätigungsbuttons und Trefferangabe hinter jedem Filter
+ Anzeige ausgewählter Filter direkt unterhalb der Headline mit dynamischer Anpassungsmöglichkeit
+ Umfangreiche Sortierfunktion

- Linkbezeichnung bei der Umkreissuche "+ andere" ist irreführend, da der ursprüngliche Ort ersetzt wird
- Linkbezeichnung "Auswahl erweitern" ist missverständlich, wenn es darum geht, Ergebnisse einzuschränken
- Unklares Hervorhebungsverhalten von Inseraten in der Ergebnisliste
- Z. T. unschönes Verhalten beim Einblenden der Zusatzinfos

Schritt 4: Ergebnisse merken, vergleichen, empfehlen

Ich wähle drei Modelle über die Checkboxen aus und kann sie direkt miteinander vergleichen. In einem Popup wird eine übersichtliche Liste generiert, auf der ich nebeneinander jeweils eine Abbildung und sämtliche Daten zu den Autos erhalte. Die Menge der Daten kann ich oben durch Deaktivierung von Checkboxen noch einschränken. Schön sind auch die angebotenen weiterführenden Links wie "Ähnliche Fahrzeuge finden" und "E-Mail an den Verkäufer".

Spannend finde ich außerdem die Merken-Funktion. Diese wird über den Link "Fahrzeug parken" aktiviert. Man hat 50 Parkplätze zu Verfügung. Die gemerkten Fahrzeuge  kann ich ebenfalls vergleichen, sie per Mail weiterempfehlen, Finanzierungsanfragen starten und mir Notizen zu jedem Inserat speichern. Schöne Idee, gut umgesetzt. Der Parkplatz funktioniert offensichtlich auch ohne Anmeldung, sofern die Cookies nicht gelöscht werden.

Der Parkplatz (Merkliste)


Vergleich verschiedener Fahrzeuge

+ "Parkplatz" als Merkzettel
+ Gute Vergleichsoption der Angebote
+ Empfehlen-Funktion
+ Abwechslungsreiches Teaser-Konzept

- Seite links im Browser ausgerichtet, auf breiten Bildschirmen entsteht dadurch ein großer, ungenutzer Weißraum rechts

Mein Fazit

Mobile.de ist eine stimmige, konsequent durchdachte Automobilplattform mit einem umfangreichen Angebot und einem gut funktionierenden Filterkonzept. Viele zusätzliche Informationen rund um das Thema Fahrzeuge und diverse Funktionen lassen darüber hinaus eine gute Service-Orientierung erkennen. Die Nutzerführung ist klar und zielführend, was die Suche zu einem positiven Erlebnis macht. Besonders gut hat mir die Vorabanzeige der Anzahl der Filterergebnisse gefallen. Neben all der Funktionalität vermisse ich jedoch ein individuelles Screen-Design. Dieses kommt nur in den Bannern zum Ausdruck. Auch könnte man im Detail noch mehr auf Formulierungen von Linkbezeichnungen achten. Hier herrschte von Zeit zu Zeit etwas Verwirrung. Aus dem Merkzettel einen "Parkplatz" zu machen, finde ich eine schöne Idee, die zum Gesamtkonzept passt und Sympathie weckt.

Möchten Sie, dass wir Ihre Oberflächen und Online-Software-Systeme in Design und Usability systematisch untersuchen? Dann kontaktieren Sie uns. Oder arbeiten Sie für das oder bei dem Unternehmen, das die untersuchte Website bereitstellt? Dann freuen wir uns sehr über Ihre Rückmeldung per Kommentar zum Artikel oder Anfrage.

Weiterführende Informationen

Case Study Suchfilter: Das Beispiel Zalando.de
Case Study Suchfilter: Das Beispiel DaWanda.com
Case Study Suchfilter: Das Beispiel TED.com

Die Website von //SEIBERT/MEDIA/DESIGN
Design- und Usability-Trends im Suchprozess 1
Design- und Usability-Trends im Suchprozess 2


Mehr über die Creative-Commons-Lizenz erfahren