UX Best Practices: 10 belegte Regeln als Checkliste

Viele UX Best Practices sind keine Geschmacksfrage mehr, sondern beantwortet. Ob ein Formular einspaltig sein soll, ob der Absende-Knopf grau werden darf oder ob ein Shop endlos nachlädt: Dazu gibt es Studien mit Hunderten Testpersonen und Designsysteme, die seit Jahren im Einsatz sind. Trotzdem sehe ich in Audits immer wieder dieselben Fehler, und Teams diskutieren sie in jedem Projekt neu.

Diese Checkliste fasst zehn UX Best Practices zusammen, die so gut belegt sind, dass Sie sie nicht erst selbst testen müssen. Jede Regel habe ich an der Erstquelle nachgelesen: bei der Nielsen Norman Group, beim Baymard Institute und im GOV.UK Design System der britischen Regierung. Die Links führen direkt dorthin. Stand: November 2026.

Das Wichtigste in Kürze

• UX Best Practices sind Regeln, die in Studien oder großen Designsystemen belegt sind. Sie ersparen Tests für Grundsatzfragen, nicht für Ihre Inhalte.
• Formulare: eine Spalte, Pflicht- und optionale Felder beide kennzeichnen, Absende-Knopf nie deaktivieren, Geburtsdatum als drei Textfelder.
• Navigation: auf dem Desktop sichtbare Hauptnavigation statt Hamburger-Menü; auf dem Smartphone darf der Breadcrumb auf die Elternseite schrumpfen.
• Akkordeons erkennen Nutzer am besten an einem Chevron, nicht an einem Pfeil nach rechts.
• Produktlisten: „Mehr laden“ statt endlosem Scrollen, gesetzte Filter sichtbar über der Liste.
• Hilfe erscheint dort, wo sie gebraucht wird, nicht als Folienserie beim ersten Start.

Was sind UX Best Practices?

UX Best Practices sind Gestaltungsregeln, deren Nutzen über viele Websites und Testpersonen hinweg belegt ist. Sie beruhen auf Nutzertests, großen Vergleichsstudien oder den Erfahrungen öffentlicher Designsysteme. Wer sie befolgt, vermeidet bekannte Fehler, bevor sie Nutzer und Umsatz kosten.

Wichtig ist die Abgrenzung: Eine Best Practice beantwortet eine Grundsatzfrage, etwa ob ein Formular ein- oder zweispaltig sein soll. Ob Ihre Beschriftungen verständlich sind oder Ihr Angebot überzeugt, beantwortet sie nicht. Dafür bleiben Tests mit Ihren eigenen Nutzern nötig, zum Beispiel ein A/B-Test.

Den Anstoß für die Auswahl gab eine Übersicht mit UX-Fragen, „die man nicht mehr testen muss“, die im November 2026 unter UX-Fachleuten geteilt wurde. Eine Übersicht ist allerdings keine Quelle. Ich habe deshalb jede Aussage an der Originalquelle geprüft und dabei auch die Grenzen notiert, die dort genannt werden.

Die Checkliste: 10 UX Best Practices auf einen Blick

Gehen Sie die Liste mit Ihrer Website durch. Jede Regel lässt sich mit Ja oder Nein beantworten; die Begründungen folgen weiter unten.

1. Formulare einspaltig: Felder stehen untereinander; nur kurze, zusammengehörige Felder wie Postleitzahl und Ort teilen sich eine Zeile.
2. Pflicht und optional kennzeichnen: Pflichtfelder tragen ein Sternchen, optionale Felder den Zusatz „optional“.
3. Absende-Knopf aktiv lassen: Der Knopf bleibt klickbar und erklärt nach dem Klick, was noch fehlt.
4. Geburtsdatum ohne Kalender: Tag, Monat und Jahr stehen in drei Textfeldern.
5. Hauptnavigation sichtbar: Auf dem Desktop stehen die wichtigsten Menüpunkte offen da, nicht hinter einem Hamburger-Symbol.
6. Breadcrumb mobil kürzen: Auf dem Smartphone darf der Pfad auf die Elternseite schrumpfen, mit deren Namen.
7. Akkordeon mit Chevron: Ein Chevron zeigt an, dass sich Inhalt auf derselben Seite öffnet.
8. „Mehr laden“ statt endlos scrollen: Produktlisten laden einen Block und bieten dann einen Knopf zum Nachladen.
9. Gesetzte Filter sichtbar: Aktive Filter stehen über der Liste und lassen sich einzeln entfernen.
10. Hilfe im Kontext: Hinweise erscheinen an der Stelle, an der Nutzer sie brauchen, statt als Einführung vorab.

Formulare: vier Regeln, die Abbrüche verhindern

Formulare entscheiden über Anfragen, Bestellungen und Anmeldungen. Wie groß der Hebel ist, zeigt eine Studie aus dem Jahr 2014, auf die sich die Nielsen Norman Group beruft: Formulare, die gängige Usability-Regeln einhielten, wurden in 78 Prozent der Fälle im ersten Versuch fehlerfrei abgeschickt. Bei Formularen, die gegen die Regeln verstießen, waren es nur 42 Prozent.

1. Felder in einer Spalte anordnen

Stellen Sie die Felder eines Formulars untereinander in eine Spalte. Mehrere Spalten unterbrechen laut Nielsen Norman Group die Bewegung des Blicks nach unten; der Weg durch das Formular wird unklar. Eine Ausnahme nennt die Quelle ausdrücklich. Kurze und logisch zusammengehörige Felder dürfen in einer Zeile stehen, im Original Stadt, Bundesstaat und Postleitzahl, bei uns also Postleitzahl und Ort.

Quelle: Nielsen Norman Group, Website Forms Usability: Top 10 Recommendations (öffnet in neuem Tab) (öffnet neues Fenster) (2016).

2. Pflichtfelder und optionale Felder beide kennzeichnen

Markieren Sie Pflichtfelder mit einem Sternchen und schreiben Sie an optionale Felder „optional“. Das Baymard Institute fand in Tests: Kennzeichnet ein Formular nur eine der beiden Arten, rätseln Nutzer bei der anderen. Ein allgemeiner Hinweis wie „Alle Felder sind Pflicht“ wird oft überlesen.

In der Vergleichsstudie von Baymard kennzeichnen nur 14 Prozent der untersuchten Shops beide Arten. Waren nur die optionalen Felder markiert, lief fast jede dritte Testperson (32 Prozent) in eine Fehlermeldung. Baymard bezieht die Regel auf Bestellformulare und längere Kontoformulare; bei einem Newsletter mit zwei Feldern ist sie weniger wichtig. Im Code gehört an Pflichtfelder zusätzlich das Attribut required, damit auch ein Screenreader die Pflicht ansagt.

Quelle: Baymard Institute, Mark Both Required Fields and Optional Fields Explicitly (öffnet in neuem Tab) (öffnet neues Fenster) (Daten von 2021).

3. Den Absende-Knopf nicht deaktivieren

Lassen Sie den Absende-Knopf immer klickbar, auch wenn noch Angaben fehlen. Nach dem Klick zeigt das Formular, welche Felder noch auszufüllen sind. Das GOV.UK Design System begründet das klar: Deaktivierte Knöpfe haben einen schwachen Kontrast und verwirren manche Nutzer. Sie sollen nur dann eingesetzt werden, wenn Forschung zeigt, dass sie die Oberfläche verständlicher machen.

Aus meiner Praxis kommt ein zweites Argument hinzu: Ein grauer Knopf sagt nicht, was fehlt. Nutzer suchen dann selbst nach dem Fehler oder brechen ab. Eine Fehlermeldung am Feld beantwortet die Frage sofort. Der schwache Kontrast berührt zudem die digitale Barrierefreiheit.

Quelle: GOV.UK Design System, Button (öffnet in neuem Tab) (öffnet neues Fenster).

4. Das Geburtsdatum mit drei Textfeldern abfragen

Fragen Sie das Geburtsdatum mit drei einfachen Feldern für Tag, Monat und Jahr ab, nicht mit einem Kalender. Das GOV.UK Design System empfiehlt diese Eingabe für alle Daten, die Nutzer bereits kennen oder ohne Kalender nachschlagen können. Wer sein Geburtsjahr erst über viele Monate zurückblättern muss, braucht unnötig lange.

Einen Kalender empfiehlt GOV.UK nur, wenn Nutzer ein nahes Datum wählen, den Wochentag kennen müssen oder Termine im Verhältnis zueinander sehen wollen, etwa bei einer Terminbuchung. Und auch dann nie als einzige Eingabe, die nur mit JavaScript funktioniert. Zwei Details aus der Dokumentation:

• Die drei Felder bekommen die Werte bday-day, bday-month und bday-year für das Attribut autocomplete. So kann der Browser das Datum automatisch ausfüllen; das verlangt auch die WCAG (Kriterium 1.3.5).
• Monatsnamen wie „März“ oder „Mrz“ sollten akzeptiert werden, nicht nur Zahlen.

Quellen: GOV.UK Design System, Date input (öffnet in neuem Tab) (öffnet neues Fenster) und GOV.UK Design System, Dates (öffnet in neuem Tab) (öffnet neues Fenster).

Navigation: zeigen statt verstecken

5. Die Hauptnavigation auf dem Desktop sichtbar machen

Zeigen Sie auf dem Desktop die wichtigsten Menüpunkte offen in der Kopfzeile oder links an der Seite, statt sie hinter einem Hamburger-Symbol zu verstecken. Die Nielsen Norman Group hat das 2016 mit 179 Testpersonen auf sechs Websites gemessen. Auf dem Desktop nutzten nur 27 Prozent die versteckte Navigation, bei sichtbarer Navigation waren es 48 Prozent. Aufgaben dauerten mit verstecktem Menü mindestens 39 Prozent länger, und die Testpersonen bewerteten sie als schwieriger.

Auf dem Smartphone ist das Hamburger-Menü kein Fehler, weil der Platz fehlt. Auch dort empfiehlt die Nielsen Norman Group jedoch: Bei höchstens vier Hauptpunkten zeigen Sie diese als sichtbare Links.

Quelle: Nielsen Norman Group, Hamburger Menus and Hidden Navigation Hurt UX Metrics (öffnet in neuem Tab) (öffnet neues Fenster) (2016).

6. Breadcrumbs auf dem Smartphone kürzen

Auf dem Smartphone darf die Breadcrumb-Navigation auf einen einzigen Link zur Elternseite schrumpfen. Die Nielsen Norman Group hält das auf manchen Seiten für ausreichend, aber ausdrücklich nur mobil; auf dem Desktop soll immer der volle Pfad stehen. Ein mehrzeiliger Pfad frisst auf kleinen Bildschirmen wertvollen Platz.

Ich ergänze zwei Punkte: Der Link nennt den Namen der Elternseite, etwa „Zurück zu: Ratgeber UX“, und ist nicht nur ein Pfeil. Passt der Pfad dagegen auf eine Zeile, zeigen Sie ihn ganz, denn das Baymard Institute fand in mobilen Tests mit nur einer Ebene Orientierungsprobleme (öffnet in neuem Tab) (öffnet neues Fenster). Die ganze Abwägung mit allen Quellen steht in meinem Ratgeber zur Breadcrumb-Navigation.

Quelle: Nielsen Norman Group, Breadcrumbs: 11 Design Guidelines for Desktop and Mobile (öffnet in neuem Tab) (öffnet neues Fenster) (2018, überprüft 2026).

Akkordeons: das richtige Symbol

7. Akkordeons mit einem Chevron kennzeichnen

Kennzeichnen Sie ein Akkordeon mit einem Chevron, also einer kleinen Pfeilspitze, die nach unten zeigt und sich beim Öffnen dreht. In einer Studie der Nielsen Norman Group mit 136 Testpersonen war der Chevron das einzige gängige Symbol, das besser als gar kein Symbol oder ein Fantasiesymbol anzeigte, dass sich Inhalt auf derselben Seite öffnet. Eindeutig war allerdings keines der Symbole. Ein Pfeil nach rechts schnitt nicht besser ab als ein Fantasiesymbol; er steht auf vielen Websites mal für ein Akkordeon, mal für einen Link auf eine neue Seite. Die Nielsen Norman Group rät deshalb davon ab, ihn für Akkordeons zu verwenden.

Ein zweiter Rat aus derselben Studie: Nutzer tippen sowohl auf die Beschriftung als auch auf das Symbol. Machen Sie deshalb die ganze Zeile klickbar und geben Sie beiden dieselbe Funktion. Im HTML gelingt das mit einem Knopf, der den Zustand mit aria-expanded meldet, oder mit dem Element details.

Quelle: Nielsen Norman Group, Accordion Icons: Which Signifiers Work Best? (öffnet in neuem Tab) (öffnet neues Fenster) (2020).

„Ein Symbol im Akkordeon muss nur eines leisten: zeigen, dass hier mehr Inhalt aufklappt. Der Chevron schafft das am ehesten, ein Pfeil lässt die Frage offen.“

Martin Mutter

Produktlisten und Filter: Überblick behalten

8. „Mehr laden“ statt endlosem Scrollen

Laden Sie in Produktlisten einen ersten Block und bieten Sie dann einen Knopf „Mehr laden“ an, statt endlos nachzuladen oder auf viele Seiten zu verteilen. Das Baymard Institute hat die drei Varianten in Nutzertests verglichen. Mit endlosem Scrollen sahen Nutzer zwar mehr Produkte an, überflogen sie aber nur und erreichten die Fußzeile nicht mehr, weil sie beim Nachladen immer wieder wegrutschte. Klassische Seitenzahlen empfanden sie als langsam und sahen weniger vom Sortiment.

„Mehr laden“ löste in den Tests beide Probleme. Wie viele Produkte vor dem Knopf erscheinen, hängt vom Gerät ab:

• Desktop: 50 bis 150 Produkte, bei Mode und anderen bildstarken Sortimenten eher mehr, bei technischen Produkten eher weniger.
• Smartphone: 15 bis 30 Produkte.
• Suchergebnisse: weniger als in Kategorien; endloses Scrollen hat dort laut Baymard nichts zu suchen.

Eine Bedingung gilt es zu beachten: Kehren Nutzer von einem Produkt zurück, müssen sie an derselben Stelle der Liste landen, mit allen bereits nachgeladenen Produkten. Laut Baymard scheiterten 2016 über 90 Prozent der Shops mit „Mehr laden“ genau daran. Fehlen dafür die technischen Mittel, rät Baymard von „Mehr laden“ ab. Wie Kategorien und Listen mit der Suchmaschinenoptimierung zusammenspielen, beschreibe ich im Beitrag SEO für Online-Shops.

Quellen: Baymard Institute im Smashing Magazine, Infinite Scrolling, Pagination or „Load More“ Buttons? (öffnet in neuem Tab) (öffnet neues Fenster) (2016) und Baymard Institute, The Number of Products to Load by Default (öffnet in neuem Tab) (öffnet neues Fenster) (2020).

9. Gesetzte Filter sichtbar anzeigen

Zeigen Sie alle gesetzten Filter gesammelt über der Produktliste an, jeden mit einer Schaltfläche zum Entfernen und dazu „Alle Filter entfernen“. So sehen Nutzer, warum die Liste so aussieht, wie sie aussieht, und können einzelne Filter lösen, ohne das Filtermenü erneut zu öffnen. Laut Baymard verzichten 28 Prozent der untersuchten Websites ganz auf eine solche Übersicht.

Zwei Details aus der Studie: Eine bloße Zahl wie „Filter (3)“ reicht nicht, Nutzer wollen die Filter selbst sehen. Und auf dem Smartphone funktioniert eine wischbare Zeile, wenn ein Anschnitt am Rand zeigt, dass weitere Filter folgen. Gesetzte Filter gehören übrigens nicht in die Breadcrumb-Navigation; warum, erkläre ich im Breadcrumb-Ratgeber.

Quelle: Baymard Institute, Display „Applied Filters“ in an Overview (öffnet in neuem Tab) (öffnet neues Fenster) (2020, aktualisiert Mai 2026).

Hilfe: im richtigen Moment statt vorab

10. Kontextbezogene Hilfe statt Einführungsfolien

Erklären Sie Funktionen dort, wo Nutzer sie gerade brauchen, etwa mit einem kurzen Hinweis neben einem Feld oder beim ersten Aufruf einer Funktion. Verzichten Sie auf Folienserien, die beim ersten Start alles auf einmal zeigen. Die Nielsen Norman Group fasst zusammen: Solche Einführungen unterbrechen, verbessern die Bedienung nicht unbedingt und sind schnell vergessen. Viele Nutzer überspringen sie.

Gute Hilfe lässt sich leicht schließen und wieder aufrufen, verlangt nichts auswendig zu lernen und erklärt nicht das Offensichtliche. Die Regel betrifft vor allem Web-Apps, Kundenportale und Software; auf einer klassischen Website gilt sie für Konfiguratoren, Rechner und lange Formulare.

Quelle: Nielsen Norman Group, Onboarding Tutorials vs. Contextual Help (öffnet in neuem Tab) (öffnet neues Fenster) (2023).

Wann Sie von den Regeln abweichen dürfen

Jede der zehn Regeln hat Grenzen, und die Quellen nennen sie selbst. Abweichen sollten Sie nur mit einem guten Grund und am besten mit einem Test:

• Kurze Formulare: Bei zwei oder drei Feldern ist die Kennzeichnung von Pflicht und optional weniger wichtig (Baymard).
• Deaktivierte Knöpfe: Erlaubt, wenn eigene Forschung zeigt, dass sie die Oberfläche verständlicher machen (GOV.UK).
• Hamburger-Menü: Auf dem Smartphone üblich und vertretbar, solange es mehr als vier Hauptpunkte gibt (Nielsen Norman Group).
• „Mehr laden“: Nur sinnvoll, wenn der Zurück-Knopf des Browsers an die alte Stelle der Liste führt (Baymard).
• Außerhalb von Shops: Die Befunde zu Produktlisten stammen aus Onlineshops; bei Blogs oder Nachrichtenseiten können andere Muster besser passen.

„Best Practices ersparen Ihnen Tests für Fragen, die längst beantwortet sind. Die Zeit stecken Sie besser in die Fragen, die nur Ihre Nutzer beantworten können.“

Martin Mutter

UX Best Practices und Conversion Rate

Alle zehn Regeln senken Reibung an Stellen, an denen Nutzer sonst abbrechen: im Formular, in der Navigation, in der Produktliste. Damit sind sie oft der günstigste erste Schritt der Conversion-Optimierung, noch vor dem ersten Test. Wie Sie danach systematisch weitermachen, von der Analyse über Hypothesen bis zum Test, beschreibe ich im Beitrag Conversion Rate Optimization.

Sie möchten wissen, welche der zehn Regeln Ihre Website verletzt und was das kostet? Ich prüfe das in einem UX-Check und auf Wunsch zusammen mit der Barrierefreiheit.

Häufige Fragen zu UX Best Practices

Fazit

Zehn Regeln, drei Quellen, ein Muster: Gute UX zeigt, was möglich ist, sagt, was fehlt, und hilft im richtigen Moment. Formulare stehen in einer Spalte, kennzeichnen Pflicht und optional und lassen den Absende-Knopf aktiv. Die Navigation ist auf dem Desktop sichtbar, Akkordeons tragen einen Chevron, Produktlisten laden auf Knopfdruck nach und zeigen gesetzte Filter. Wenn Sie nur einen Schritt tun: Gehen Sie die Checkliste oben mit Ihrem wichtigsten Formular durch.