Wie viele Vorschläge sollte die Autovervollständigung zeigen?

Baymard empfiehlt auf dem Desktop höchstens 10, auf dem Smartphone 4 bis 8. In den Tests führten zu viele Vorschläge dazu, dass Nutzer sie ignorierten oder lange lasen. Die Liste sollte keinen eigenen Scrollbalken haben.

Wo auf der Seite sollte das Suchfeld stehen?

Jakob Nielsen empfiehlt den oberen Rand der Seite, meist die rechte obere Ecke, und sagt, dass links fast genauso gut funktioniert. Auf der Startseite sollte die Suche kein Link sein, sondern ein Feld, in das man tippen kann.

Wie finden Nutzer ein Produkt, wenn sie Umlaute ausschreiben?

Suchbegriff und Produktname werden in dieselbe Form gebracht: nach deutscher Regel kleingeschrieben, ä, ö, ü und ß werden zu einfachen Buchstaben, und im Suchbegriff werden „ae“, „oe“, „ue“ und „ss“ zusammengezogen. So findet „muetze“ das Produkt „Mütze“.

Was braucht eine barrierefreie Autovervollständigung?

Folgen Sie dem Combobox-Muster des W3C. Das Feld braucht role="combobox", aria-expanded, das sagt, ob die Liste offen ist, und aria-activedescendant, das den gewählten Vorschlag meldet. Pfeiltasten, Enter und Escape müssen funktionieren.

Website-Suche und Autovervollständigung (UX)

Kurz gesagt

Wer weiß, was er sucht, irrt nicht durchs Menü, sondern tippt das Wort, das er im Kopf hat, ins Suchfeld. Die Autovervollständigung ergänzt dieses Wort schon beim Tippen und führt auf kurzem Weg zum richtigen Ergebnis.

Dieses Muster besteht aus vier Teilen: dem Platz des Felds, der Vorschlagsliste, der Toleranz für Tippfehler und dem Bildschirm, der erscheint, wenn es kein Ergebnis gibt. Alle vier müssen mit Tastatur und Screenreader funktionieren. Ich beschreibe sie der Reihe nach; in der Mitte der Seite gibt es ein Beispiel zum Selbstausprobieren.

Wo das Suchfeld stehen sollte und wie groß es sein sollte

Auf der Startseite sollte die Suche kein Link sein, sondern ein Feld, in das man tippen kann. Das schrieb Jakob Nielsen 2001 in „Search: Visible and Simple“. Als er auf seiner eigenen Website useit.com den Link durch ein Feld ersetzte, stieg die Nutzung der Suche um 91 Prozent.

Laut Nielsen gehört das Feld oben auf die Seite, meist in die rechte obere Ecke. Er fügt hinzu, dass links fast genauso gut funktioniert. Dort erwarten Besucher das Feld. Setzen Sie es woandershin, müssen sie es erst suchen.

Eine genaue Zeichenzahl nennt Nielsen nicht. Das Feld sollte breit genug für eine typische Suche sein. Ist es zu schmal, rutscht der Anfang einer langen Suche nach links aus dem Bild, und das Feld wird schwerer zu benutzen.

Auf dem Smartphone ist das eigentliche Problem der Platz, in dem sich die Liste öffnet. Baymard zeigt, dass Sticky Header, Chat-Blasen und App-Werbung der Vorschlagsliste keinen Raum lassen. In einem Beispiel waren nur 2 Vorschläge zu sehen, und auch die halb verdeckt; die Nutzerin tippte ihre Suche vollständig selbst. Den Rest der Shop-Seite beschreibe ich im Ratgeber zu E-Commerce-UX.

Vorschläge: Suchvorschlag und Produktvorschlag

Laut der Messung von Baymard aus dem Jahr 2022 haben 80 Prozent der E-Commerce-Websites eine Autovervollständigung. Bei der ersten Messung 2014 waren es 72 Prozent. Alles richtig machen aber nur 19 Prozent.

Es gibt zwei Arten von Vorschlägen. Ein Suchvorschlag ergänzt das Eingegebene: Wer „pull“ tippt, bekommt „pullover“ vorgeschlagen und landet auf der Ergebnisseite. Ein Produktvorschlag zeigt direkt ein Produkt oder eine Kategorie und öffnet beim Anklicken diese Seite.

Kate Moran empfiehlt in ihrem Artikel bei NN/g, reichhaltige Vorschläge, also Links zu Produkten und Kategorien, sparsam einzusetzen. Auf dem Smartphone sollten nur einfache Textvorschläge erscheinen. Eine auf eine Kategorie beschränkte Suche, etwa „pullover in Damen“, sollte sich vom Suchbegriff abheben. Baymard sieht das genauso. Kursivschrift, eine andere Farbe oder ein Einzug funktionieren; in den Tests war keine Variante den anderen überlegen.

Wie viele Vorschläge

Baymards Grenze liegt auf dem Desktop bei höchstens 10 Vorschlägen, auf dem Smartphone bei 4 bis 8. In den Tests führten zu viele Vorschläge zu Entscheidungslähmung: Die Nutzer ignorierten die Vorschläge oder brauchten sehr lange, um sie zu lesen. Die Liste sollte sich in ihrer eigenen Höhe öffnen und keinen eigenen Scrollbalken haben.

Morans Regel ist einfacher: Jeder Suchbegriff, den Sie vorschlagen, sollte wirklich gute Ergebnisse liefern. Ein Vorschlag ohne Ergebnis führt Nutzer mit Ihrem eigenen Vorschlag in eine Sackgasse. Im Test von NN/g erschienen Vorschläge 136-mal, und in 31 Fällen, also 23 Prozent, wählten die Nutzer einen davon.

Die Liste schlicht und gut antippbar halten

Baymard empfiehlt, auf dem Desktop das visuelle Rauschen zu verringern. Viel Weißraum, Trennlinien, abwechselnde Zeilenfarben und Zusatzinhalte stellen die eigentlichen Vorschläge in den Schatten. Trendsuchen sind ein Beispiel dafür. Den Seitenhintergrund abzudunkeln, solange die Liste offen ist, verringert die Ablenkung durch Werbung und Karussells.

Auf dem Smartphone verlangt Baymard eine ausreichend große Schrift und Tippfläche sowie Abstand zwischen den Zeilen. Kleine Schrift und dichte Zeilen führen zu Fehltipps. Statt durchgehender Großbuchstaben sollten die Vorschläge in normaler Schreibweise erscheinen. Wie groß eine Tippfläche sein sollte, beschreibe ich im Muster Tippbereich.

Welcher Teil fett sein sollte

Hier sagen zwei Quellen Verschiedenes. Baymard empfiehlt, nicht den eingegebenen, sondern den ergänzten Teil hervorzuheben. Moran unterscheidet zwei Fälle. Hängen die Vorschläge nur etwas an das Eingegebene an, heben Sie den ergänzten Teil hervor. Kommt das eingegebene Wort auch mitten im Vorschlag vor, heben Sie den eingegebenen Teil hervor.

Im Beispiel unten steckt „pullover“ auch mitten in Produktnamen wie „Rollkragenpullover“. Deshalb habe ich Morans zweite Regel angewandt und den passenden Teil fett gesetzt. So sieht man auf den ersten Blick, an welcher Stelle des Produktnamens das Wort steckt.

Toleranz für Tippfehler, Umlaute und ß

Denken Sie in einem deutschsprachigen Shop vor dem Tippfehler an die Tastatur. Wer am Smartphone schnell tippt oder eine Tastatur ohne Umlaute nutzt, schreibt „muetze“ oder „mutze“ statt „Mütze“ und „fussball“ statt „Fußball“. Zählt die Suche das nicht als dasselbe Wort, meldet sie „kein Ergebnis“, obwohl das Produkt vorrätig ist.

Auch die Groß- und Kleinschreibung hängt von der Sprache ab. Laut MDN wandelt toLocaleLowerCase() nach den Regeln der jeweiligen Sprache um; die Dokumentation zeigt das am türkischen „İ“, das mit englischer Regel einen zusätzlichen Punkt behält. Für eine Suche heißt das: Legen Sie fest, nach welcher Sprache Sie umwandeln.

Im Beispiel gibt es deshalb zwei Schritte. Zuerst schreibe ich Suchbegriff und Produktname nach deutscher Regel klein und mache aus ä, ö, ü und ß einfache Buchstaben. Passt das nicht, mache ich im Suchbegriff zusätzlich aus „ae“, „oe“, „ue“ und „ss“ einen Buchstaben. So findet „muetze“ die „Mütze“, und „fussball“ findet die „Fußballschuhe“.

Für echte Tippfehler braucht es mehr. Laut Baymard gibt es Nutzer, die einen Produktnamen nur gehört haben und nicht wissen, wie er geschrieben wird. Deshalb muss die Suche auch phonetische Fehler tolerieren. Ebenso muss sie verschiedene und regionale Bezeichnungen für dasselbe Produkt kennen. Laut Baymard erfüllen 56 Prozent der Websites die Suchbedürfnisse der Nutzer nicht ausreichend.

Live-Beispiel: barrierefreie Autovervollständigung

Das Feld unten durchsucht einen fiktiven Shopkatalog, den ich für diese Seite geschrieben habe. Die erste Zeile ist immer die Suche nach dem eingegebenen Wort, sie steht kursiv und nennt die Zahl der Produkte. Die Zeilen darunter sind Produktvorschläge, rechts steht jeweils die Kategorie.

Barrierefreie Autovervollständigung

Beispiel: die Liste, die sich bei „pull“ im Suchfeld öffnet

Pullover, Strick, CremeDamen
KaschmirpulloverHerren
KinderpulloverKinder
RollkragenpulloverHerren
WollpulloverDamen

Weil JavaScript ausgeschaltet ist, bleibt das Beispiel fest. Mit JavaScript können Sie selbst ins Feld tippen.

Das Suchfeld eines fiktiven Modegeschäfts. Tippen Sie „pullover“, „muetze“ oder „fussball“: Umlaute, ß und Groß- und Kleinschreibung werden toleriert. Navigieren Sie mit den Pfeiltasten, wählen Sie mit Enter, schließen Sie mit Esc. Ein Tippfehler wie „pulover“ zeigt den Bildschirm ohne Ergebnis.

Gehen Sie mit der Pfeiltaste auf ein Produkt, wird sein Name ins Feld kopiert. Baymard empfiehlt das, weil Nutzer dem vorgeschlagenen Begriff noch Details hinzufügen und dann suchen können. Mit Esc kommt das zurück, was Sie selbst getippt haben.

Die Seite ohne Ergebnis

Laut Baymard bietet fast die Hälfte der Websites nach einer erfolglosen Suche keinen wirksamen Ausweg. Eine schlecht gebaute Seite ohne Ergebnis macht es Besuchern leicht, die Website zu verlassen. Auch sie ist ein leerer Zustand und folgt denselben Grundsätzen.

Die drei Grundsätze von Kathryn Whitenton für NN/g sind kurz: Sagen Sie klar, dass es kein Ergebnis gibt, bieten Sie Ausgangspunkte zum Weitermachen an, und machen Sie sich nicht über die Nutzer lustig. Baymard ergänzt eine Warnung: Nur Suchtipps hinzuschreiben reicht nicht, Nutzer lesen solche Tipps selten.

Die Auswege, die Baymard empfiehlt:

Breitere Kategorien zum Suchbegriff, am besten mit Link auf eine gefilterte Produktliste.
Vereinfachte Fassungen des Suchbegriffs mit einer Vorschau der ersten 3 bis 5 Produkte je Fassung. Liefert nur eine Alternative Ergebnisse, wird sie mit einem Hinweis automatisch angewandt.
Vorschläge auf Grundlage des bisherigen Surfverhaltens.
Telefon, Live-Chat und Links zur Hilfe.
Bestseller und beliebte Kategorien.

Tippen Sie im Beispiel „pulover“, erscheint unter „Meinten Sie:“ das Wort „pullover“ und daneben beliebte Suchen. Eine Seite ohne Ergebnis entsteht manchmal nicht durch die Schreibweise, sondern durch einen aktiven Filter. Die Liste, die bei aktiven Filtern null Ergebnisse zeigt, beschreibe ich im Muster Filter und Sortierung.

Bedienung mit der Tastatur

Funktioniert die Vorschlagsliste mit der Maus, aber nicht mit der Tastatur, ist sie nur halb fertig. Der Leitfaden für ARIA-Autorenpraktiken (APG) des W3C legt für die Komponente aus Textfeld und Ausklappliste diese Tasten fest:

Pfeil nach unten: Im Feld bewegt sie den Fokus in die Liste. In der Liste geht sie zum nächsten Vorschlag. Beim letzten Vorschlag geht sie zurück ins Feld oder tut nichts.
Pfeil nach oben: Geht zum vorigen Vorschlag.
Enter: Übernimmt den ausgewählten Vorschlag und schließt die Liste. Ist kein Vorschlag ausgewählt, wird das Eingegebene gesucht.
Escape: Schließt die offene Liste, der Fokus kehrt ins Suchfeld zurück. Ist die Liste geschlossen, kann sie das Feld leeren; das ist optional.
Alt + Pfeil nach unten: Öffnet die geschlossene Liste, ohne den Fokus zu bewegen. Optional.

Auch Baymard empfiehlt auf dem Desktop, mit den Pfeiltasten zu navigieren, mit Enter auszuwählen und die Liste vom Ende wieder an den Anfang springen zu lassen. Der Vorschlag unter dem Mauszeiger sollte eine Hintergrundfarbe bekommen. Im Beispiel habe ich dieselbe Farbe auch der mit der Tastatur gewählten Zeile gegeben. Links in der Zeile steht zusätzlich ein dunkler Strich, weil nicht alle ein Zeichen unterscheiden können, das nur auf Farbe beruht.

Ein Detail zu Esc: Laut APG schließt Esc die offene Liste. Das Feld bei bereits geschlossener Liste zu leeren, ist optional. Im Beispiel habe ich beides umgesetzt, so verlieren Nutzer ihre Eingabe nicht mit einem einzigen Tastendruck.

Barrierefreie Combobox

Die APG nennt diese Komponente Combobox: ein Eingabefeld mit einem zugehörigen Popup. Das Popup kann eine Liste, ein Raster, ein Baum oder ein Dialog sein. Bei Suchvorschlägen ist es fast immer eine Liste.

Die APG nennt vier Arten der Autovervollständigung. Die Art im Beispiel ist die „Liste mit manueller Auswahl“: Die Vorschläge werden nach dem Eingegebenen gefiltert, wählt der Nutzer aber keinen aus, bleibt der Wert sein eingegebener Text. Für die Suche halte ich das für die sicherste Art, weil Enter immer das Eingegebene sucht.

Was nötig ist, damit der Screenreader die Komponente richtig ansagt:

Im Suchfeld role="combobox" und aria-autocomplete="list".
Bei geschlossener Liste aria-expanded="false", bei offener "true". aria-controls verweist auf die Liste.
Der Fokus bleibt im Feld. Der gewählte Vorschlag wird mit aria-activedescendant gemeldet und trägt aria-selected="true".
Die Liste trägt role="listbox", jede Zeile role="option".

Meine eigene Ergänzung: Melden Sie mit einer Statusmeldung, wie viele Vorschläge es gibt. Im Beispiel steht der Satz „4 Produkte passen“ in einem aria-live-Bereich. Damit Nutzer nicht bei jedem Buchstaben eine Ansage hören, wird er kurz nach dem Ende des Tippens aktualisiert. Die WCAG-Seite der Statusmeldungen beschreibe ich im Ratgeber zur WCAG.

Meine Notiz

In Audits teste ich das Suchfeld immer auf dieselbe Weise: Ich nehme einen Produktnamen aus der Produktliste und schreibe die Umlaute aus. Shops, in denen „schluessel“ kein Ergebnis bringt, sind nicht selten. Die Korrektur ist klein, wirkt sich aber direkt auf den Umsatz aus.

Mein zweiter Test ist die Seite ohne Ergebnis. Ich tippe absichtlich ein falsches Wort und sehe nach, was mir die Seite vorschlägt. Sehe ich eine leere Seite mit „0 Ergebnisse“, gehe ich davon aus, dass Besucher dort aussteigen.

Zuletzt lasse ich die Maus los und drücke den Pfeil nach unten. Reagiert die Liste nicht oder führt Enter an eine unpassende Stelle, notiere ich das als Befund mit hoher Priorität. Für diese Prüfungen auf Ihrer eigenen Website können Sie die UX-Audit-Checkliste nutzen.