Die 404-Seite deiner Website mit UX Writing vereinfachen

Auch Fehlerseiten können Eindruck machen. Und wer seine User mag, hat ’ne gute 404-Seite. Denn es ist nur eine Frage der Zeit, bis Besucher sie unbeabsichtigt zu sehen bekommen. Benutzerfreundlich muss sie sein und klar angeben, was ein Website-Besucher als Nächstes tun kann.

Die „Seite nicht gefunden“-Meldung dürfte den meisten Internet-Nutzern bekannt sein. Die Ursache ist meistens ein einfacher Fehler: eine falsch eingegebene URL oder eine Seite, die umbenannt wurde, ohne die Weiterleitung korrekt einzurichten. Je nachdem, wie gut oder schlecht die 404-Seite gestaltet ist, kann das für den Besucher durchaus nervig sein und dazu führen, dass er die Website verlässt – und möglicherweise nicht wiederkommt. Wer hier schlampt, vergrault also womöglich potenzielle Kunden.

Es mag komisch klingen, aber jede Fehlermeldung ist auch eine Gelegenheit, um mit deinem Business zu punkten. Wie bei jedem digitalen Produkt gilt es auch hier, sich gedanklich die UX*-Brille aufzusetzen und die Seite im Sinne des Benutzers zu gestalten. Mit der 404-Seite kannst du für Klarheit sorgen und deine Besucher schnell und gezielt zu deinem Angebot zurückführen. Wie, das erfährst du in diesem Blogartikel.

*UX steht für User Experience,
auf Deutsch Nutzererfahrung oder Nutzererlebnis

Was ist User Experience, kurz UX? Für wen ist sie relevant?

Welche Arten von Fehlermeldungen gibt es?

Die beste Fehlermeldung ist natürlich die, die erst gar nicht erscheint. Doch Fehler passieren. Und Fehlermeldungen sind das Erste, was User sehen, wenn sie ein Problem mit deiner Website haben. Die 2 häufigsten Situationen, in denen es auf einer Website oder im Online-Shop zu einer Fehlermeldung kommt, sind diese zwei.

1. Fehlermeldungen in Formularen

Sie treten auf, wenn Informationen in ein Formularfeld eingegeben werden, die nicht so formatiert sind, wie das System diese benötigt. Beispiele können sein:

• Kontakt (überall da, wo ein Nutzer nach seiner E-Mail-Adresse gefragt wird, z. B. Newsletter-Anmeldung)
• Bestell-Formular im Online-Shop
• Überweisungsformular der Online-Bank, z. B. das Feld Verwendungszweck

2. Systemfehler

Sie treten auf, wenn ein Problem mit der gesamten Anwendung vorliegt oder unverschuldet Benutzerdaten fehlen. Ein typisches Beispiel ist, wenn eine URL nicht erreichbar ist. Zum Beispiel:

• 404-Meldung (nicht gefunden, das Gesuchte ist entfernt, verschoben oder umbenannt)
• 401-Meldung (Zugriff verweigert, z. B. weil eine Seite passwortgeschützt ist)
• 307-Meldung (temporäre Umleitung)
• 503-Meldung (vorübergehend nicht verfügbar, das kann z. B. ein überlasteter Server oder Wartung sein)

Es gibt übrigens auch eine Meldung für Seiten, die korrekt funktionieren. Das ist die 200-Meldung und spielt sich im Hintergrund ab.

Der rote Faden in diesem Blogartikel ist die 404-Fehlermeldung. Fehlermeldungen in Formularen sind in der Regel komplexer, weil es viele verschiedene Arten von Feldern und Eingabemöglichkeiten gibt. Gut zu wissen? Egal für welchen Zweck, gelungene Fehlermeldungen haben einen systematischen Aufbau. Mehr dazu im Abschnitt unten: Anatomie einer hilfreichen 404-Seite.

Das Problem mit schlecht formulierten Fehlermeldungen

„Ups. Es ist ein Fehler aufgetreten.“ Mehr stand da nicht. Kein Grund, kein Hinweis, keine Lösung. Nur dieses eine nichtssagende Text-Fitzelchen.

Ich starrte auf den Bildschirm. Hatte ich etwas Falsches geklickt? War die Website down? Sollte ich die Seite neu laden oder es später noch einmal versuchen? Und wenn ja – wie viel später? In fünf Minuten? Morgen? Langsam machte sich Frust breit. Ich hatte gerade 10 Minuten damit verbracht, ein wichtiges Formular mit vielen Zahlen auszufüllen. Jetzt war unklar, ob meine Daten weg waren oder noch irgendwo im System steckten.

Stell dir vor, die Fehlermeldung hätte stattdessen gesagt: „Deine Verbindung wurde unerwartet unterbrochen. Deine Eingaben sind gespeichert. Versuch es in ein paar Minuten noch einmal.“ Dann hätte ich gewusst, was los ist und dass ich nicht umsonst getippt hatte. Ich bin sicher, auch du hast so was schon mal erlebt.

Schlecht geschriebene Fehlermeldungen nerven Benutzer in der Regel. Wenn’s dicke kommt, dann bemüht die Person den Kundenservice, was zu höheren Kosten für das Business führt. Der Ärger kann aber auch langfristig zum Anbieterwechsel führen, mit entsprechenden Folgen für deine Einnahmen.

Mit der UX-Brille analysiert: Fehlerseiten von 3 Banken

Die Anatomie einer hilfreichen 404-Seite

Die gelungene Fehlermeldung sagt, was passiert ist und wie das Problem behoben werden kann und was als Nächstes zu tun ist.

Sie setzt sich im Wesentlichen aus diesen 3 Elementen zusammen: eine Headline, einen Haupttext und eine sinnvolle Verlinkung. Bildmaterial ist optional. Weiter unten findest du ein Bild von meiner 404-Seite, den Text kannst du gerne für deine 404-Seite übernehmen.

Headline

Sag, was passiert ist. Und zwar kurz und knackig.

Der folgende Vergleich hinkt ein wenig, veranschaulicht das Thema aber gut. Nehmen wir eine rote Ampel im Straßenverkehr. Du fährst ungebremst darauf zu. Dein Beifahrer sagt: „Fahr nicht über die rote Ampel.“ Damit ist alles gesagt. Genau so sollte die Überschrift einer Fehlermeldung sein. Die Botschaft ist:

• kurz,
• präzise und vor allem
• ohne Hype oder Bling-Bling.

Etwas Längeres wäre unpassend, denn es erhöht die kognitive Beanspruchung. Sprich, so nicht: „Oooha, schau mal. Wir fahren auf eine Ampel zu, die wechselt gerade die Farbe. Jetzt ist sie rot. Achtung! Du musst bremsen. Wir dürfen da nicht drüberfahren.“ Du verstehst, was ich meine.

Haupttext

Sag, wie das Problem gelöst werden kann.

Zum Haupttext gehört in erster Linie ein Anhaltspunkt für die Lösung des Problems. Gebe dem Nutzer möglichst konkrete Anweisungen. Unter Umständen kannst du eine kurze Erklärung und/oder eventuelle Konsequenzen der Entscheidung nennen. Halte diesen Teil straff, leite ohne Schnickschnack über zu Teil 3.

Sinnvolle Verlinkung

Biete nächste Schritte an. Das kann ein Button sein oder Text, der verlinkt ist.

Zur Startseite zu verlinken, ist immer eine gute Idee. Auf meiner 404-Seite habe ich 2 weitere Seiten verlinkt: den Blog und eine Angebotsseite. Das kann aber auch ein Button sein, der zu einer bestimmten Seite führt. Ergänzend kann ein Suchfeld hinzugefügt werden.

Was hier definitiv nicht hingehört? Etwa das Anmeldeformular für den Newsletter. Die Fehlerseite ist ein schlechter Zeitpunkt, um für sich zu werben. Es ist ja gerade etwas schiefgelaufen.

Optional: Bildmaterial und Menü

Bei der 404-Seite gilt das Prinzip, dem User mit möglichst wenig Text zu helfen, was Brauchbares zu finden. Das bedeutet, die Seite kann auch ganz ohne Bildmaterial sein.

Zudem kann es sinnvoll sein, alles außer der eigentlichen Fehlermeldung auszublenden (bspw. das Menü). Damit schafft man alles Ablenkende aus dem Weg und kann gezielt die Aufmerksamkeit des Nutzers auf einen Button oder Link führen.

Zur Veranschaulichung: meine 404-Fehlerseite

Hier ist ein Screenshot von meiner derzeitigen 404-Seite. Ich habe die Bereiche durchnummeriert und kommentiert, 1 bis 3 sind die wesentlichen Elemente. Die Seite hat kein Menü.

Wie schreibst du eine effektive Fehlermeldung? 3 Tipps zum Stil

Oft versuchen Unternehmen bei Fehlermeldungen einen eher informellen Ton anzuschlagen, um den potenziellen Stress ihrer Nutzer zu mildern, weil doch etwas schiefgelaufen ist. Vielleicht ist das von großen Tech-Marken wie Google und Netflix abgepinnt, die durchaus mal skurrile Texte benutzen, um Nutzern zu sagen, dass etwas nicht geklappt hat.

Aber! Das funktioniert für die allermeisten Unternehmen nicht gut. Denn: Ob Bank, Versicherung, Stromanbieter oder Gesundheitswesen – in vielen Fällen interagieren User nur mit dem digitalen Produkt, um etwas zu erledigen. Etwa eine Überweisung zu machen oder den Zählerstand durchzugeben. In der Regel ist das Zeitfenster, in dem das Produkt verwendet wird, sehr viel kleiner als zum Beispiel mit Google oder Netflix. Es ist mehr ein To-do, das jemand erledigen will als Lifestyle. Wenn etwas schiefläuft, dann holt ein „Ups!“ den Menschen nicht da ab, wo er ist. Ein „Ooooops!“ schon gar nicht. Denn ja, so macht das eine große Online-Bank in Deutschland.

Auch eine nicht gut gestaltete und formulierte Fehlermeldung hinterlässt beim Besucher der Website einen Eindruck vom Business. Halt negativ.

Kurz und knackig sollten Fehlermeldungen sein, aber auch freundlich, präzise und lösungsorientiert.

Schreibtipp Nr. 1:

Egal, wie die Markensprache deines Business’ sein mag, bei Fehlermeldungen gilt: kein Schnickschnack und keine Romane. Komm auf den Punkt. Es ist hilfreich, sich jeglichen Text im digitalen Produkt als eine Art Unterhaltung mit dem User vorzustellen. Diesen Sprachstil gilt es, ins Digitale zu übertragen. Das bedeutet auch, dass Sätze nicht ausformuliert werden müssen. Die 404-Seite ist keine Seite, auf der User bleiben sollten. Ein User sollte auf einen Blick die Optionen erkennen und weiterziehen können.

Schreibtipp Nr. 2:

Egal, was passiert ist, gebe nie – wirklich NIE – dem Nutzer die Schuld. Diesen Fehler machen auch große Unternehmen immer noch viel zu oft. Vielleicht ist es, weil es keinen UX Writer im Team gibt und die Texte von anderen nebenbei erstellt werden und sich keiner vertieft damit befasst. Jedenfalls ist die Schuldfrage irrelevant. Dazu kommt, dass die Ursache von 404-Seiten oft ein geänderter Permalink ist, bei dem keine Weiterleitung hinterlegt wurde. Sprich: Da hat jemand im Unternehmen etwas verbummelt. So oder so, mach’s einfach nicht. Es wirkt unsympathisch.

Schreibtipp Nr. 3:

Versuche nicht witzig zu sein und nutze auch keine verniedlichte Sprache. Humor und allzu viel Kreativität sind nur mit größter Vorsicht einzusetzen. Das kann schnell in die Hose gehen und wirkt in der Regel eher peinlich als lustig.

Beispiel einer gelungenen Fehlermeldung

Snocks bietet Socken und Unterwäsche an. Ihre 404-Seite ist minimalistisch gehalten. Mit der Headline „404.“ setzen sie voraus, dass heute jeder weiß, was 404 bedeutet. Zu Recht, denke ich.

Analyse:

Auch wenn ich im Abschnitt zum Schreibstil von Humor abgeraten habe … diese 404-Meldung von Snocks gefällt mir. Denn wer hat sich noch nie gefragt, was die Waschmaschine wohl mit der 2. Socke gemacht hat?!

Auch sonst ist sie gelungen. Alles ist kurz und präzise formuliert, die Headline sagt, was passiert ist, der Haupttext gibt eine kurze Information und der Button bietet eine Lösung an, nämlich eine Seite zu öffnen. Um die Botschaft zu unterstreichen, gibt’s ein Bild von einer Waschmaschine. Nicht im Bild ist das Menü, das oben verlinkt ist, das Suchfeld und die darunter verlinkten Kategorien. Diese Dinge sind allerdings alle optional, ich rate in der Regel davon ab, da sie ablenken.

Praxis: 404-Seite deiner WordPress-Website anpassen

Nach der Theorie folgt nun die Praxis.

Status quo: Wie sieht deine 404-Seite aus?

Triggere im Chrome Browser die 404-Fehlermeldung deiner Website. Gib dazu deinen Domainnamen ein, dann einen Slash (/) und mache DANACH einen Tippfehler. Schreibe zum Beispiel: https://deine-domain.de/bla-blubb. Und Enter drücken.

Nutzt du WordPress? Und du hast noch nichts an der 404-Seite geändert? Dann sieht die 404-Meldung in etwa so aus wie im folgenden Bild. Nur die Schriftart und die Farben dürften bei dir anders sein. Sie werden in der Regel so übernommen, wie du sie im Theme deiner Website gespeichert hast.

Die Meldung besteht aus 3 Teilen:

1. Headline
2. Haupttext
3. Suchfeld

Wie passt du die 404-Seite deiner Website an?

Mit dem richtigen Setup kannst du den Text und das Aussehen dieser Seite individuell anpassen. Du nutzt WordPress? Es gibt Themes, bei denen die Bearbeitung der 404-Seite möglich ist, bei anderen nicht. Ich nutze das kostenlose Theme von Astra, da ist das nicht möglich. Die sogenannte Full Site Editing (FSE), die dafür nötig ist, ist nur Teil von Astra Pro. Da ich Astra jedoch in Kombination mit Elementor Pro nutze, kann ich mit dem Theme Builder unter anderem auch eine eigene 404-Seite anlegen.

Schaue hier nach: Dashboard > Design > Vorlagen, um herauszufinden, ob du Zugriff auf die 404-Seite hast und sie bearbeiten kannst. Wenn ja, dann ist sie links in der Seitenleiste unter Vorlagen gelistet.

Um bei allen anderen Themes eine 404-Fehlerseite zu bearbeiten, kannst du beispielsweise das Plugin Smart Custom 404 error page von Peter Raschendorfer benutzen. So gehst du vor:

• Installiere und aktiviere das WordPress-Plugin.
• Erstelle eine neue Seite in WordPress, das wird die 404-Fehlerseite sein.
• Wähle unter Design > 404 Error Page diese neu angelegte Seite aus.
• Ab jetzt wird sie als 404-Fehlerseite angezeigt.

Und jetzt kannst du die Theorie umsetzen und deine Seite gestalten.

Ausgehende 404-Links finden und fixen

Klar, es gibt die Google Search Console, um 404-Fehler und Co. auf deiner Website zu prüfen. Dort solltest du ggf. gelöschte Seiten und Redirects im Blick behalten, um sicherzugehen, dass alles korrekt eingerichtet ist. Allerdings werden dort nur die Seiten angezeigt, die auf deiner Website mal existiert haben und jetzt nicht gefunden werden.

Genauso wichtig ist es, dass ausgehende Links funktionieren. Denn Links ändern sich. Manchmal verlinken wir zu einer externen Seite, die im Laufe der Zeit geändert und nicht korrekt weitergeleitet wird. Das gibt dann beim Klick auf den Link auf deiner Website eine Fehlermeldung à la 404. Nicht schön. Und auch nicht gesund für deine Website, weder für die SEO noch für die User Experience (UX).

Deine Website mit einem WordPress-Plugin wie Broken Link Checker auf kaputte Links zu prüfen? Klingt nützlich … aber! Die meisten solcher Plugins nutzen unverhältnismäßig viel Server-Ressourcen. Das heißt, deine Website lädt langsamer.

So verbesserst du die Ladezeit (+ User Experience) deiner Website

Die bessere Wahl? Es gibt externe Tools, mit denen du fehlerhafte ausgehende Links auf deiner Website aufspüren kannst. So bremst du deine Website nicht aus. Eins davon ist der Dead Link Checker. Du gibst deine Website ein, das Tool geht alles durch und gibt dir eine Liste der kaputten Links samt Textstelle und Fehlerart. Die kannst du dann gezielt und flott abarbeiten.

Mit Screaming Frog kannst du einen umfassenderen Siteaudit machen. Auch mit der kostenlosen Variante brauchst du nur die URL einzugeben und Screaming Frog crawlt die gesamte Website samt ausgehenden Links. Eine super Basis für die Analyse und das Fixen, allerdings auch komplexer. Hier gibt es zudem eine Pro-Version, die kostenpflichtig ist. Es gibt viele weitere kostenpflichtige Tools, die dir mehr Unterstützung bei der Suche, Überwachung und Behebung deiner Probleme bieten, SEMrush ist eins davon.

Fazit: effektive Fehlermeldungen stärken dein Business

Eine 404-Seite ist nicht einfach nur eine langweilige Fehlermeldung. Sie ist eine Gelegenheit, das Vertrauen in dein Business zu stärken, indem du deinen Besuchern ein nerviges Erlebnis mit deiner Website ersparst.

Gestalte eine schlichte und effektive 404-Seite und prüfe deine Website regelmäßig auf 404-Fehler. Indem du externe Links, aber auch gelöschte Seiten und Weiterleitungen aktuell hältst, stellst du sicher, dass deine Inhalte für deine Zielgruppe erreichbar bleiben.

Eine der Aufgaben eines UX Writers ist es, Microcopy zu schreiben, das klar und eindeutig ist. Das sind all die kleinen Textschnipsel in digitalen Produkten wie Websites, die auf den ersten Blick unscheinbar wirken. Buttons und CTAs, das Menü und eben auch Fehlermeldungen gehören dazu. Die Geschichte vom sogenannten 300-Millionen-Button zeigt eindrücklich, wie riesig das Potenzial von Microcopy ist.

Habe ich die wichtigsten Punkte genannt? Möchtest du etwas ergänzen? Teile deine Gedanken gerne unten in den Kommentaren.

Bilder: privat, Screenshots aus dem Netz, Canva