Kontrast
Dierekt zum Inhalt
VisionConnect Blog / Design

Suche – 5 Gedanken zu Gestaltung und Usability

6. Juli 2017

Nutzer erwarten bei Webseiten mit vielen Inhalten eine gute Suche. 5 Gedanken zu Gestaltung und Usability der Suchmaske und der Ergebnisse.

Webseiten mit vielen Inhalten, wie z.B. von Museen, größeren Unternehmen, Shop-Seiten, usw. haben eines gemeinsam:  sie bieten so viele Inhalte an, dass trotz guter Strukturierung, Nutzer häufig hoffen, mittels der Suche schneller zum Ziel zu kommen. Die Erfahrung zeigt, dass es nicht den Königsweg gibt, um zu Informationen zu gelangen. Einige Nutzer gehen über die Seitenstruktur, andere über die Suche. Dafür muss die Suche ebenso prominent platziert werden, wie das Hauptmenü, einfach und klar im Design und einfach zu nutzen sein. Zudem sollte sie gut aufbereitete Ergebnisse liefern. Single- oder Landing-Pages hingegen benötigen meistens keine Suche, da der Umfang des Inhalts begrenzt ist.

1. Prominente Platzierung

Die Zeiten kleiner, versteckter Sucheingabefelder ist definitiv vorbei und auf den Submit-Button (OK) der Suche wird immer häufiger verzichtet. Sei es, weil der UX/UI-Designer die Komplexität reduzieren will, sei es, dass man davon ausgeht, dass der Nutzer weiß, dass er die dicke Return-Taste  auf dem (virtuellen) Keyboard drücken muss, um den Suchvorgang zu starten. Was bleibt ist ein Lupensymbol und ein Strich oder Eingabefeld, welches  sich bei Klick in ein größeres Suchfeld verwandelt. Das Lupensymbol hat sich als Zeichen für „Suche” durchgesetzt. Es gibt eigentlich kein anderes alternatives Symbol im europäischen Internetraum, welches die Suche sinnvoll repräsentiert und von den meisten Nutzern richtig interpretiert wird.

Beispiel Magazin Bauhaus Movement

Die Suche ist erst dezent in Form eines kleines Icons zu sehen, dann wird sie richtig groß:

Bauhaus Suche
Bauhaus Suche im unteren drittel des Screens (rechts)
Bauhaus Suche
Bauhaus Suche als sehr großes Input-Feld ohne sichtbaren Submit-Button

Beispiel AEG

Auch hier ist das Eingabefeld sehr groß, gut lesbar, prominent, die Suchergebnisseite liebevoll und funktional gestaltet:

AEG Suche
AEG Suche oben rechts, rotes Icon
AEG Suche
AEG Suche, Eingabefeld

Beispiel BUND

Das Eingabefeld auf der bund.net Seite vergrößert sich dezent nach links, wenn man mit der Maus hineinklickt.

BUND Suche
BUND Suche oben rechts, Icon
BUND Suche
BUND Suche oben rechts nach Klick vergrößert

Beispiel Vitra Design Museum

Bei der Website des Vitra Design Museum erscheint nach dem Klick auf das Icon ein fast schon riesiges Eingabefeld.

Vitra Design Museum, Suche
Vitra Design Museum, Suche, Icon oben rechts
Vitra Design Museum Suche
Vitra Design Museum Suche Eingabefeld

2. Sortieren und Filtern von Suchergebnissen

Nicht so schön, weil es dem Nutzer ein genaues Lesen und Verstehen abverlangt, sind eine Vielzahl an Sortier- und Filtermöglichkeiten auf der Suchergebnisseite. Diese heißen dann auch noch „Sortieren nach Inhaltstypen”, „Sortieren nach Erstellungsdatum” oder auch  „Zeige Treffer aus den Bereichen ABC”. Das Problem damit ist, dass man sich als Nutzer damit auseinandersetzen (lesen) und erst einmal verstehen muss, was genau damit gemeint ist. Das aber kostet Zeit und Aufmerksamkeit.

Shops sind dazu übergegangen, einfach Merkmale und Kriterien zum Auswählen anzubieten, die das Suchergebnis haben soll, indem sie oben oder links alle Merkmale und Kriterien zum Anklicken auflisten.

Beispiele Amazon und Zalando

Zalando Filter

Zalando Filter

Amazon Filter
Amazon Filter

Dieser Ansatz umgeht elegant die umständlichen und nicht gerade selbsterklärenden, wenn auch technisch korrekten Formulierungen, wie „Rubriken-Filter”, „Suchfilter” oder „Nur Treffer aus bestimmten Bereichen” zeigen.

Manchmal findet man übersichtliche Suchergebnisseiten, die versuchen, die technischen Möglichkeiten der Suche möglichst gut gestaltet und benutzerfreundlich anzubieten.

Beispiel BUND

BUND Suchergebnis Filter
BUND Suchergebnis Filter

Hier offenbart sich meiner Meinung nach das Dilemma zwischen dem Nutzer, der keine Lust hat, einen Such-Führerschein zu machen, der nur eine einfache Suche anstoßen will und dem Power-User, der sich mit den Tricks und Kniffen von Suchen auskennt. Für den UX/UI Designer wird es immer eine Gratwanderung sein, so wenig wie möglich, aber so viel wie nötig an Suchtechnik anzubieten.

3. Suggest-Funktion, von Google verwöhnt

In den letzten Jahren hat sich die Suggest-Funktion immer mehr durchgesetzt. Verwöhnt von Google, Bing & Co, ist unsere Erwartungshaltung, wenn wir Suchen nutzen, sehr hoch geworden. Gängige Content Management Systeme (CMS) haben sich aber mittlerweile in dieser Richtung weiterentwickelt und bieten Funktionen wie Auto-Complete, bzw. Suggest-Funktionen an. Und wenn diese nicht direkt als Funktion im CMS zur Verfügung stehen, so gibt es mit ziemlicher Sicherheit eine Extension oder ein Plug-In für diese Funktion. Benötigt man umfangreichere Such- und Sortier-Funktionen bieten sich z.B.  solr oder elasticsearch an.

Beispiel Google und test.de

Google Suggest
Google Suggest
test.de Suggest
test.de Suggest

Bei Google werden vier, bei Bing acht und bei Stiftung Warentest 10 Vorschläge gemacht und ggf. noch die gesamte Trefferzahl genannt. Die Suggest-Funktion selber startet meist beim Eintippen des dritten Buchstabens des Suchwortes. Abhängig von der Menge der zu erwartenden Ergebnisse kann man auch schon nach dem ersten oder zweiten Buchstaben passende Stichworte anbieten.

4. Komfort für die User

Bei Twitter wird die Suggest-Funktion schon nach dem ersten Buchstaben aktiv und als Ergebnis 10 Stichworte genannt. Facebook startet auch schon beim ersten Buchstaben und zeigt ca. acht Vorschläge an. Diese werden gegliedert dargestellt nach Orten, Seiten, Personen und Gruppen. Eine ähnliche Darstellung der Suchvorschläge kenne iOS-Nutzer seit langem durch Spotlight (die interne Suche auf dem Mac). Hier werden schon seit Jahren die Ergebnisse nach Top-Treffern, Mail, Ordner, Filme, Bilder, etc. gegliedert ausgegeben.   

Beispiele Twitter und Avocadostore

Avocadostore Suggest
Avocadostore Suggest mit Produktbildern
Twitter Suggest
Twitter Suggest mit Twitter-Profilbildern

5. Mobil first

Seit 2015 werden in der mobilen Suche von Google Webseiten bevorzugt, die für Mobilgeräte optimiert sind (hier können Sie testen, ob Ihre Seite für mobile Endgeräte optimiert wurde). Nutzer sind schnell frustriert, wenn sie die Website mit den Fingern zoomen oder zusammenziehen müssen. Auf den Seiten aeg.de und bund.net kann man sehen, wie die Suche für mobile Endgeräte optimiert wurde und welchen Stellenwert sie hat. Die Suche selbst ist eines der drei Hauptelemente der responsiven Startseite, neben dem Logo und dem Burger-Menü.  

Weiterführende Informationen

Wer sich tiefer in diese Thematik einarbeiten möchte, dem seien folgende Artikel empfohlen:

Yvonne Scherzer

Seit mehr als 15 Jahren arbeite ich als Webdesignerin bei VisionConnect GmbH. Eine Aufgabe, die sehr vielfältig ist und wirklich Spaß macht. Neben der virtuellen Arbeit tausche ich in meiner Freizeit gerne Monitor gegen Pinsel und Staffelei.
Mehr Beiträge im VisionConnect-Blog

… passend zum Thema.