Design-Checkliste für benutzerfreundliche Websites

Sie betreiben eine Website und wollen wissen, ob Besucher sie ohne Frustration nutzen können. Ob jemand bleibt, kauft oder sich informiert, entscheidet die Benutzerfreundlichkeit. Ist sie schlecht, verlässt er die Seite frustriert.

Zwei bewährte Grundlagen helfen beim Prüfen: die zehn Usability-Heuristiken von Jakob Nielsen und die WCAG-Richtlinien zur Barrierefreiheit. Die Heuristiken sind Faustregeln für gutes Interaktionsdesign. Die WCAG legen konkrete technische Anforderungen fest, damit Menschen mit Behinderungen die Seite nutzen können. Eine Checkliste mit konkreten Prüfpunkten deckt beide ab.

Status und Feedback sichtbar machen

Besucher müssen jederzeit wissen, was die Website gerade tut. Wenn jemand ein Formular abschickt, ein Produkt in den Warenkorb legt oder eine Suche startet, braucht er eine sichtbare Rückmeldung. Prüfen Sie: Zeigt die Seite nach einer Aktion eine Bestätigung, einen Ladebalken oder eine Fehlermeldung? Warten Nutzer länger als zwei Sekunden, brauchen sie einen Hinweis, dass der Vorgang läuft. Ohne dieses Feedback fragen sich Besucher, ob ihre Eingabe angekommen ist, und klicken doppelt oder verlassen die Seite.

Verständliche Begriffe verwenden

Die Website sollte Begriffe verwenden, die der Besucher kennt, nicht die interne Fachsprache Ihres Unternehmens. Ein Onlineshop für Gartenbedarf schreibt "Pflanzkübel", nicht "Containerlösung für Außenbereiche". Prüfen Sie jeden Menüpunkt, jede Schaltfläche und jede Fehlermeldung auf Verständlichkeit. Wenn ein Formularfeld "Absenderkennung" heißt, der Nutzer aber nur seine E-Mail-Adresse eintragen soll, entsteht Verwirrung. Formulieren Sie so, wie Ihre Zielgruppe spricht, und vermeiden Sie Fachjargon, der nur Eingeweihten etwas sagt.

Rückgängig machen und Abbrechen

Besucher machen Fehler und wollen sie rückgängig machen können. Jede Website braucht einen sichtbaren "Zurück"-Weg, eine Abbrechen-Option und die Möglichkeit, Eingaben zu korrigieren, bevor sie abgeschickt werden. Prüfen Sie, ob der Zurück-Button des Browsers funktioniert, ohne dass Eingaben verloren gehen. Ein Warenkorb sollte Artikel entfernen lassen, ohne dass der Nutzer mehrere Bestätigungsdialoge durchklicken muss. Je weniger Zwangsschritte eine Seite einbaut, desto eher fühlen sich Besucher sicher und kehren zurück.

Konsistenz prüfen

Gleiche Elemente müssen überall gleich funktionieren. Wenn eine Schaltfläche auf der Startseite "Jetzt kaufen" heißt, darf sie im Produktbereich nicht "In den Warenkorb" heißen. Links sollten erkennbar sein, indem sie sich farblich vom Text abheben und unterstrichen sind. Auch die Position der Navigation sollte auf allen Unterseiten gleich bleiben. Prüfen Sie, ob Symbole überall dieselbe Bedeutung haben und ob sich das Layout beim Seitenwechsel nicht plötzlich grundlegend ändert. Inkonsistenz zwingt Besucher, sich ständig neu zu orientieren.

Fehler vermeiden und erklären

Die beste Fehlermeldung ist die, die gar nicht erst erscheint. Verhindern Sie Fehler, indem Sie Eingabefelder klar beschriften, Pflichtfelder markieren und Eingaben automatisch auf offensichtliche Fehler prüfen. Ein Datumsfeld kann beispielsweise ein Kalender-Widget anbieten, statt ein freies Textfeld zu verwenden. Wenn doch etwas schiefgeht, muss die Meldung verständlich sein: Sie nennt das betroffene Feld, erklärt das Problem in einfacher Sprache und zeigt, wie der Nutzer es behebt. "Ein technischer Fehlercode" hilft niemandem, "Das Passwort muss mindestens acht Zeichen enthalten" dagegen schon.

Eingaben merken und vorausfüllen

Besucher sollten nicht aus dem Gedächtnis wissen müssen, was sie vor zwei Seiten eingegeben haben. Formulare sollten bereits bekannte Daten wie Name oder Adresse vorausfüllen, wenn der Nutzer zurückkehrt. Pflichtfelder, Auswahlmöglichkeiten und Formatvorgaben müssen sichtbar sein, bevor jemand etwas eintippt. Prüfen Sie, ob Ihre Website Kontext liefert: Zeigt ein Warenkorb die bereits ausgewählten Artikel, bevor der Nutzer zur Kasse geht? Je weniger sich ein Besucher merken muss, desto reibungsloser läuft seine Aufgabe.

Effizienz für geübte Nutzer

Wiederkehrende Besucher arbeiten schneller als Neulinge. Bieten Sie ihnen Abkürzungen an, ohne die Seite für Anfänger zu verkomplizieren. Das kann eine Suchfunktion sein, die direkt zu Produkten springt, oder Tastaturkürzel für häufige Aktionen. Auch eine Merkliste oder gespeicherte Zahlungsdaten sparen Zeit. Prüfen Sie, ob Ihre Website Stammkunden erkennt und ihnen persönliche Empfehlungen oder einen schnellen Bestellprozess anbietet. Gelegenheitsbesucher ignorieren diese Zusätze einfach, während sie Stammkunden den Alltag erleichtern.

Überladene Seiten vermeiden

Eine überladene Seite lenkt vom Wesentlichen ab. Jedes Element, das nicht zur aktuellen Aufgabe beiträgt, kostet Aufmerksamkeit. Prüfen Sie, ob Banner, Pop-ups, Animationen und unnötige Texte die eigentliche Information überlagern. Weißraum gibt dem Inhalt Luft. Reduzieren Sie die Anzahl der Schriftarten, Farben und Stile auf ein Minimum, das zur Marke passt. Wenn ein Besucher nicht sofort erkennt, worum es auf der Seite geht und was er als Nächstes tun soll, ist das Design zu komplex.

Hilfe anbieten

Auch die beste Website lässt Nutzer manchmal ratlos zurück. Bieten Sie Hilfe an, wo sie gebraucht wird, ohne sie aufzudrängen. Ein FAQ-Bereich, eine Kontaktmöglichkeit oder eine Suchfunktion, die auch nach Formulierungen sucht, die Nutzer verwenden, sind gute Lösungen. Kontextbezogene Hilfe ist am wertvollsten: direkt neben einem schwierigen Formularfeld ein kleines Fragezeichen, das die Erklärung aufklappt. Prüfen Sie, ob Ihre Hilfetexte tatsächlich das Problem lösen oder nur allgemeine Beschreibungen Ihrer Firma enthalten.

Barrierefreiheit nach WCAG prüfen

Die Web Content Accessibility Guidelines (WCAG) legen fest, wie Inhalte für Menschen mit Seh-, Hör-, Motorik- oder kognitiven Einschränkungen nutzbar werden. In Deutschland gilt das Barrierefreiheitsstärkungsgesetz (BFSG), das auf WCAG verweist. Für die meisten Websites ist Konformität mit Level AA das Ziel, das auch die Anforderungen von Level A einschließt. Die wichtigste Regel: Alle nicht-textlichen Inhalte wie Bilder, Grafiken und Icons brauchen einen Alternativtext, den Screenreader vorlesen können. Prüfen Sie außerdem, ob sich die Seite per Tastatur bedienen lässt, ob Kontraste ausreichend sind und ob Videos Untertitel haben. Eine offizielle deutsche Übersetzung der WCAG existiert von Aktion Mensch, aber bei rechtlichen Fragen zählt der englische Originaltext. Für die praktische Prüfung helfen interaktive Checklisten wie caat.report oder wcag-report.com, die Sie durch die einzelnen Kriterien führen.