Die grundlegende UX-Checkliste: Prüfen Sie Ihre Website mit den Augen Ihrer Kunden

Ihre Website wurde gerade neu gestaltet. Auf dem großen Monitor im Besprechungsraum sieht sie großartig aus; alle kennen das Angebot und können eine Bestellung im Schlaf abschließen. Doch ein Kunde kommt mit dem Smartphone, weiß nichts über das Unternehmen und verlässt die Seite beim ersten unklaren Punkt. Deshalb reicht es nicht aus zu prüfen, ob eine Website gut aussieht.

Die ursprüngliche Version dieser Checkliste verwendeten wir als umfassende Liste für Websites und Onlineshops. Im Laufe der Zeit kamen Tools und einzelne Regeln hinzu, die nicht universell waren. Diese Version kehrt zu den Grundlagen zurück: Was sollte eine Person tun können, was müssen Sie überprüfen und wie erkennen Sie ein Problem, bevor Sie Geld in Traffic investieren?

Identifizieren Sie zuerst die drei wichtigsten Nutzerreisen

Ein UX-Audit der gesamten Website kann leicht in hundert Kommentaren ausarten. Bevor ich Analytics öffne, wähle ich daher die drei Nutzerreisen, die für das Unternehmen am wichtigsten sind. Typischerweise:

• Ein neuer Besucher versteht das Angebot und sendet eine Anfrage,
• ein Kunde findet ein Produkt, legt es in den Warenkorb und bezahlt,
• ein bestehender Kunde findet Support, ein Dokument oder Kontaktdaten.

Notieren Sie für jede Nutzerreise den Ausgangspunkt, das erwartete Ziel und das größte Hindernis. Dann arbeiten Sie die Checkliste nicht mechanisch ab. Sie prüfen, ob die Website eine konkrete Entscheidung unterstützt.

1. Das Angebot muss für jemanden verständlich sein, der nicht im Meeting war

• Ist auf dem ersten Bildschirm sofort klar, was Sie anbieten und für wen?
• Beschreibt die Hauptüberschrift ein Ergebnis oder Problem statt eines Unternehmensslogans?
• Ist der nächste Schritt sichtbar, ohne dass man ihn im Menü suchen muss?
• Können Besucher einzelne Dienstleistungen oder Optionen unterscheiden?
• Nennen Sie die Bedingungen und Einschränkungen, die die Entscheidung tatsächlich beeinflussen?

Testen Sie dies mit jemandem, der das Unternehmen nicht kennt. Geben Sie der Person einige Sekunden Zeit, schließen Sie die Seite und fragen Sie, was das Unternehmen tut und was sie als Nächstes tun würde. Das ist keine wissenschaftliche Studie, legt aber schnell eine Sprache offen, die nur im Unternehmen verstanden wird.

2. Die Navigation muss ohne Nachdenken und ohne Maus funktionieren

• Entsprechen die Bezeichnungen dem, wonach Besucher suchen?
• Funktionieren Links, Logo und die Rückkehr zum vorherigen Schritt?
• Ist das mobile Menü lesbar und schließbar, ohne wichtige Inhalte zu verdecken?
• Ist bei einer längeren Struktur klar, wo sich die Person befindet?
• Kann jedes wichtige Steuerelement mit der Tabulatortaste erreicht werden?
• Ist der Fokus bei der Tastaturnutzung sichtbar und gerät der Benutzer nicht in einer Schleife fest?

Barrierefreiheit ist kein Sondermodus für wenige Menschen. Ausreichender Kontrast hilft auch bei Sonnenschein auf dem Smartphone, und ein klares Formular hilft Personen, die es eilig haben. Für eine schnelle Prüfung können Sie Easy Checks von W3C verwenden. Das ist eine erste Prüfung, keine Bestätigung der vollständigen WCAG-Konformität.

3. Inhalte müssen sowohl den Blick als auch die Entscheidung führen

• Gibt es eine Hauptüberschrift und eine logische Struktur weiterer Überschriften?
• Sind die Absätze gut lesbar und wichtige Informationen beim Überfliegen leicht zu finden?
• Beschreiben Links und Buttons das Ergebnis ihres Klicks?
• Hängt die Bedeutung ausschließlich von einer Farbe, einem Bild oder einem Hover-Effekt ab?
• Haben informative Bilder aussagekräftige Alternativtexte?
• Lenken Animationen vom Angebot ab, und respektieren sie die Präferenzen der Benutzer für reduzierte Bewegung?

Eine kräftige Farbe allein macht noch keinen Conversion-Button. Zuerst muss klar sein, was nach dem Klick passiert. „Absenden“ ist eine technische Beschreibung. „Einführungsgespräch buchen“ reduziert Unsicherheit.

4. Ein Formular sollte nur abfragen, was das Unternehmen tatsächlich verwendet

• Hat jedes Feld eine sichtbare, programmatisch zugeordnete Beschriftung?
• Ist klar, welche Daten erforderlich sind und warum sie benötigt werden?
• Kann der Benutzer das Formular auf einem Smartphone und mit einer Tastatur ausfüllen?
• Erklärt eine Fehlermeldung sowohl das Problem als auch seine Behebung?
• Bleiben korrekt eingegebene Daten nach einem Fehler erhalten?
• Erhält der Benutzer nach dem Absenden eine klare Bestätigung und Informationen darüber, was als Nächstes passiert?

In seinem Leitfaden für barrierefreie Formulare empfiehlt W3C, nur die Daten abzufragen, die für den Abschluss des Prozesses benötigt werden. Jedes zusätzliche Feld kostet Aufmerksamkeit und erhöht den Aufwand für die Datenverarbeitung. Wenn das Unternehmen die Information nicht verwendet, entfernen Sie sie.

5. Ein Onlineshop muss den gesamten Kaufprozess bewältigen, nicht nur eine schöne Produktseite

Kategorien und Suche

• Entsprechen die Filter der Auswahlweise der Menschen, und lassen sie sich leicht zurücksetzen?
• Ist ein Zustand ohne Ergebnisse hilfreich und bietet er einen anderen Weg an?
• Enthält eine Produktkarte Name, Preis, Verfügbarkeit und ein gut lesbares Bild?
• Bleiben Sortierung und Filterung auf dem Smartphone nutzbar?

Produktdetail

• Werden Optionen, Preis, Mehrwertsteuer, Verfügbarkeit und Lieferung vor dem Hinzufügen zum Warenkorb erklärt?
• Zeigen die Fotos, was der Kunde beurteilen muss?
• Ist der In-den-Warenkorb-Button sichtbar, ohne den Inhalt zu verdecken?
• Bietet ein nicht verfügbares oder eingestelltes Produkt eine Alternative und einen sinnvollen Rückweg?

Warenkorb und Bestellung

• Können Artikel, Option und Menge geändert werden, ohne andere Daten zu verlieren?
• Ist der Endpreis einschließlich Lieferung und Gebühren rechtzeitig bekannt?
• Vermeiden Sie eine Registrierungspflicht ohne geschäftlichen Grund?
• Bringt eine fehlgeschlagene Zahlung die Person in einen verständlichen Zustand zurück?
• Ist die Bestellbestätigung eindeutig und verhindert sie einen versehentlichen erneuten Kauf?

Die Regel „Im Warenkorb darf es keine Navigation geben“ gilt nicht immer. Bei einem einfachen Kauf kann die Verringerung von Ablenkungen helfen. Bei einem komplexen Angebot muss der Kunde jedoch Bedingungen oder Produktdetails finden können. Testen Sie das Verhalten, nicht eine Faustregel.

6. Eine Website muss Smartphone, langsames Netzwerk und Fehler verkraften

• Lädt der Hauptinhalt schnell, ohne große Layout-Verschiebungen?
• Reagiert die Seite ohne spürbare Verzögerung auf Klicks und Eingaben?
• Haben Bilder die richtigen Abmessungen und werden sie nur in der benötigten Qualität geladen?
• Kann ein fehlerhaftes externes Skript eine Bestellung oder ein Formular blockieren?
• Funktionieren wichtige Nutzerreisen in aktuellen gängigen Browsern und auf echten Smartphones?
• Überwachen Sie Verfügbarkeit und Fehler in wichtigen Schritten?

Ein Laborwert ist eine Orientierung, kein Geschäftsergebnis. Beobachten Sie außerdem echte Benutzer und die wichtigste Nutzerreise. Ein Werbepixel darf nicht wichtiger sein als der Kaufen-Button.

7. Überprüfen Sie die Messung mit einem Test, nicht nur durch die Kontrolle, ob Code vorhanden ist

Führen Sie für jede wichtige Nutzerreise eine Testanfrage oder -bestellung durch. Prüfen Sie, ob das Ereignis einmalig mit dem richtigen Namen, Wert, Währung und Transaktionsbezeichner gesendet wird. Überprüfen Sie anschließend, ob das Zielsystem es empfängt und ob es mit der echten Bestellung übereinstimmt.

• Wird ein Kauf allein durch das Öffnen einer Dankeschön-URL gesendet?
• Wird das Ereignis beim Aktualisieren der Seite doppelt erfasst?
• Berücksichtigen Tags den Einwilligungsstatus?
• Enthält die Datenschicht personenbezogene Daten, die dort nicht hingehören?
• Enthält der Container nur Dienste, die das Unternehmen verwendet?
• Gibt es eine verantwortliche Person für die Messung und einen Vermerk der letzten Prüfung?

Zur Implementierung siehe So richten Sie Google Tag Manager korrekt ein; zur Bedeutung von Ereignissen siehe den Google-Analytics-4-Leitfaden. Sitzungsaufzeichnungen oder Heatmaps können blinde Flecken aufdecken, sollten aber gezielt, mit maskierten sensiblen Feldern und gemäß den Einwilligungsregeln eingesetzt werden. Alles „für alle Fälle“ aufzuzeichnen ist kein Forschungsplan.

So verwenden Sie die Checkliste ohne monatlichen Workshop

1. Wählen Sie die wichtigste Nutzerreise aus und durchlaufen Sie sie auf einem Smartphone.
2. Machen Sie dasselbe ausschließlich mit einer Tastatur.
3. Lassen Sie jemanden außerhalb des Unternehmens die Aufgabe erledigen und führen Sie die Person nicht.
4. Notieren Sie, wo die Person zögerte, nicht Ihre vorgeschlagene Lösung.
5. Überprüfen Sie das Problem in Analytics, im Support oder durch weitere Tests.
6. Beheben Sie ein Hindernis und durchlaufen Sie die gesamte Nutzerreise erneut, einschließlich der Messung.

Versuchen Sie nicht, eine Website in einem Durchgang als „UX-fertig“ zu erklären. Das Angebot, die Geräte und die Erwartungen der Menschen verändern sich. Der Zweck der Checkliste besteht darin, regelmäßig die teuersten Reibungspunkte zu finden und zu entscheiden, was zuerst behoben werden sollte.

Wenn Sie die Website in einem breiteren geschäftlichen Kontext prüfen möchten, verwenden Sie zusätzlich die Online-Marketing-Checkliste. Wenn Sie UX, Messung und Akquise priorisieren müssen, beschreiben Sie Ihre wichtigste Nutzerreise über die Kontaktseite.