Mit der UX-Brille analysiert: Fehlerseiten von 3 Banken

Wer eine Website hat, braucht eine gescheite 404-Fehlerseite. Sie steht nie im Rampenlicht, gehört jedoch zu den wichtigsten Seiten einer Website. Und doch führt sie häufig ein Schattendasein, auch bei großen Unternehmen. Die gute Nachricht? Der Aufwand, eine effektive Fehlerseite aufzubauen, ist, im Gegensatz zu Produktseiten, Blogartikel oder Landingpages, überschaubar.

In diesem Blogartikel zeige ich dir 3 Netzfunde von Banken und analysiere sie im Hinblick auf ihre Nutzerfreundlichkeit, kurz UX*. So viel vorab: Ich finde keine der 404-Seiten ideal und denke, sie könnten alle optimiert werden. Daher mache ich anschließend einen Verbesserungsvorschlag, um zu zeigen, wie die Seite möglichst nutzerfreundlich gestaltet werden könnte.

Ich habe bewusst Banken ausgesucht. Da sie unser Geld verwalten, halte ich es für besonders wichtig, dass ihre Fehlermeldungen hieb- und stichfest sind. Das Thema betrifft allerdings viele Unternehmen. Achte beim Surfen darauf, denn die nächste 404-Seite kommt bestimmt.

UX steht für User Experience

Was ist eine 404-Seite und warum ist sie wichtig?

Die 404-Fehlerseite einer Website wird dann angezeigt, wenn jemand eine technisch gültige URL im Browser aufruft, die nicht gefunden wird. 404-Fehler können aus verschiedenen Gründen auftreten:

• falsche Weiterleitungen
• Webseite existiert nicht mehr
• Tippfehler in der URL

Warum ist die 404-Seite überhaupt wichtig? Weil sie Besuchern in einer Sackgasse Orientierung und Optionen anbietet. Sie ist gewissermaßen wie Google Maps für jemanden, der sich mit dem Auto in einer fremden Stadt verfahren hat. Nur, dass der Nutzer in der Regel nichts dafür kann, dass die Fehlerseite angezeigt wird. Mit der 404-Seite kannst du für Klarheit sorgen und deine Besucher schnell und gezielt zu deinem Angebot zurückführen.

Die Anatomie einer guten Fehlermeldung

Das Wichtigste beim Gestalten einer Fehlermeldung? Halte sie kurz und schlicht. Der Nutzer ist ohnehin schon irritiert, weil er nicht auf Anhieb das gefunden hat, wonach er suchte. Mach es nicht noch schlimmer, indem du ihn mit einer komplizierten 404-Seite erschlägst. Ein Nutzer sollte keine Millisekunde länger als nötig auf dieser Seite bleiben müssen, sie dient gewissermaßen als Durchgangsstation. Dazu muss die Seite so minimalistisch gestaltet sein, dass sie für User mit einem Blick zu verstehen ist.

Der Leitsatz bei der Gestaltung einer 404-Fehlerseite? Komm auf den Punkt.

Die gelungene Fehlermeldung sagt, was geschehen ist, wie das Problem behoben werden kann und was als Nächstes zu tun ist. Sie setzt sich im Wesentlichen aus diesen 3 Elementen zusammen:

1. Überschrift:
   Sag, was geschehen ist.
2. Haupttext:
   Sag, wie das Problem gelöst werden kann.
3. Nächster Schritt:
   Das kann ein Button oder Text sein, der zur Startseite verlinkt ist. Dazu noch höchstens 2 oder 3 weitere hilfreiche Seiten verlinken. Bei größeren Websites kann zudem eine Suchfunktion sinnvoll sein.

Mehr nicht. Diese Fehlerseite darf ganz ohne Bildmaterial, Navigation und Footer sein. Auch „404“ muss nicht draufstehen.

Hier nehme ich nun 3 Fehlerseiten unter die UX-Lupe. Im darauffolgenden Abschnitt findest du einen Verbesserungsvorschlag, der für alle 3 Beispiele gilt.

Fehlerseite der ING-DiBa

Kritische UX-Analyse im Detail

1. Überschrift:
   „Oooooha!“, das ist unnötig dramatisch. Noch wichtiger? Es sagt nicht, was geschehen ist.
2. Haupttext:
   • „Autsch! Vertippt?“, das ist eine Schuldzuweisung an den Nutzer – ein absolutes No-Go bei Fehlermeldungen.
   • „Die Seite können wir nicht finden“ – sagt, was geschehen ist. ✔️
3. Nächster Schritt:
   Es werden nächste Schritte angeboten, 2 Optionen sind verlinkt. ✔️

Fehlerseite der Commerzbank

Kritische UX-Analyse im Detail

Insgesamt ist diese Seite sehr minimalistisch gehalten. Mehr braucht es nicht unbedingt.

1. Überschrift und Haupttext:
   Sagen, was geschehen ist. Die Einleitung mit „Oops“ könnte indes sachlicher sein. Bei einer Bank in Deutschland bietet sich das deutsche Wort „Ups“ an.
2. Nächster Schritt:
   • Die Startseite ist verlinkt, visuell mit einem gelben Icon davor und durch Fettschrift hervorgehoben. ✔️
   • Es könnten noch 2 oder 3 Links ergänzt werden oder auch eine Suchfunktion.

Fehlerseite der Deutschen Bank

Kritische UX-Analyse im Detail

Generell gilt auf einer 404-Seite: Ein User soll schnellstmöglich wieder auf die Website zurück und sich nicht lange auf der Seite aufhalten. Diese Seite ist überladen, sie ist allgemein statt spezifisch und es ist entschieden zu viel Information. Der User muss sich durch den Text durcharbeiten. Oder er klickt eben oben rechts.

1. Überschrift:
   Sagt, was geschehen ist, allerdings umständlich und unnötig lang formuliert. Immerhin, kein „Ups“. (✔️)
2. Haupttext:
   Sagt, wie das Problem gelöst werden kann. Allerdings zu ausführlich und umständlich.
3. Nächster Schritt:
   Links bzw. Buttons? Fehlanzeige. Statt deutlich sichtbar zur Startseite zu verlinken, wird nur auf den Kundenservice verwiesen und das Ganze auch noch mit „hier“ statt eines sinnvollen Linktexts. Für User bedeutet das: Sie müssen sich auf die Suche machen, anstatt einfach einen Link oder einen Button zu klicken.
4. Am Schluss ist noch der Tipp, ggf. die Bookmarks zu aktualisieren. Auch wenn das Wort im Duden steht, heißt es Lesezeichen. Viel wichtiger? Auch wenn der Text gut gemeint klingt, impliziert er, dass der Nutzer den Fehler beheben muss. Dabei hat die Bank etwas versäumt. Beim Speichern muss der Link funktioniert haben und hat sich demnach seither geändert. Was fehlt, ist die korrekte 301-Redirect (permanente Weiterleitung) in der .htaccess-Datei. Also ein To-do für die Bank. Denn dann würde die Weiterleitung im Hintergrund ablaufen und der User bekäme vermutlich gar nicht mit, dass sich die URL geändert hat.

Transparenz-Hinweis zur Verwendung der Screenshots

Die gezeigten Screenshots stammen von öffentlich zugänglichen Webseiten und dienen ausschließlich der kritischen Auseinandersetzung mit Aspekten der Nutzerführung in digitalen Produkten wie Websites oder Apps.

Sie sind Teil meiner unabhängigen Analyse und werden nicht zu kommerziellen Zwecken verwendet. Ich nutze sie nicht zu Werbezwecken, sondern um Schwächen in der Nutzererfahrung aufzuzeigen und konkrete, lösungsorientierte Ansätze für eine Web-Optimierung vorzuschlagen. Alle Marken- und Bildrechte liegen bei den jeweiligen Unternehmen.

Die Analyse und Bewertungen spiegeln meine persönliche, fachliche Einschätzung wider.

Verbesserungsvorschlag

1. Überschrift:
   Sag, was geschehen ist und komm sofort auf den Punkt. Zum Beispiel: „Diese Seite gibt es leider nicht. Oder nicht mehr.“
2. Haupttext:
   Sag, wie das Problem gelöst werden kann. Zum Beispiel: „Hier gibt es was zu entdecken.“
3. Nächster Schritt:
   Das kann ein Button oder Text sein, der zur Startseite verlinkt ist. Im folgenden Beispiel sind 3 Seiten verlinkt: Startseite, Blog und eine Produktseite.
4. Bildmaterial, Menü und Footer können ausgeblendet werden. Das macht die Seite sehr viel klarer und es dem User leichter, mit einem Blick das Wesentliche zu erfassen.
5. Bei größeren Websites könnte zudem eventuell eine Suche integriert werden.

Mehr braucht es nicht. Denn zack, so führst du den Nutzer ohne Umwege direkt wieder zu deiner funktionierenden Website. Die Fehlerseite hat ihren Zweck erfüllt und bleibt bis zum nächsten Mal im Hintergrund, aber jederzeit startklar.

Du verwendest WordPress für deine Website?

Du hast eine Website, die mit WordPress aufgesetzt ist und möchtest die 404-Seite finden und gestalten? Im folgenden Blogartikel habe ich das beschrieben, und zwar im Abschnitt „Praxis: 404-Seite deiner WordPress-Website anpassen“.

Die 404-Seite deiner Website mit UX Writing vereinfachen

Hast du Fragen zum Inhalt? Möchtest du etwas ergänzen? Teile deine Gedanken gerne unten in den Kommentaren.

Bilder: Screenshots aus dem Netz, Pexels