Verbesserung des 404-Seitendesigns

Wenn ein Besucher Ihre standardmäßige 404-Fehlerseite sieht, besteht die Gefahr, dass er nicht lange aufhört, um zu sehen, was Ihre Website sonst noch bietet. Eine benutzerdefinierte 404-Seite, die einladend und hilfreich ist, wird Ihre Besucher dazu ermutigen, weiter auf Ihre Website zu blicken, anstatt sich anderswo abzulenken.

Vorschaubild von der Tuts + 404-Seite.


Unser Ziel: Die Standard-404-Seite verbessern!


Was ist los mit einer einfachen 404-Seite?

Die einfache Antwort lautet viel. Eine 404-Seite, auf der nur "Seite nicht gefunden" angezeigt wird, ist für den Besucher überhaupt nicht hilfreich - das Hinzufügen eines Links mit der Aufschrift "Zur Startseite zurückkehren" hilft auch nicht wirklich.

Das Fehlen einer anständigen 404-Seite schwächt die Benutzererfahrung. Benutzer, die versuchen, eine Seite auf Ihrer Website zu finden, deren URL jedoch falsch angezeigt wird oder durch einen defekten Link dorthin gesendet werden, sind verpflichtet, zur Startseite zurückzukehren und es erneut zu versuchen. Wenn sie immer noch nicht finden, wonach sie gesucht haben, kann es sein, dass sie frustriert werden und Ihre Website verlassen. In einer idealen Welt wären Benutzer nicht mit Fehlern konfrontiert, aber die 404-Seite gibt uns zumindest die Möglichkeit, uns zu entschuldigen und Benutzern zu helfen, das zu finden, wonach sie gesucht haben. Ein zufriedener Benutzer kehrt wahrscheinlich in der Zukunft zurück.

Noch schlimmer als eine schlechte 404-Seite ist das völlige Fehlen einer. Der Benutzer hat dann überhaupt keine Ahnung, was los ist, und es wird nicht einmal ein Link zur Startseite geben. Das Fehlen einer 404-Seite lässt Ihre Website unprofessionell erscheinen und Besucher nur dazu auffordern, die Website zu verlassen.

Dies ist ein Beispiel für eine schlechte 404-Seite. Die einzige Einlösungsfunktion ist der Link zur Startseite, und das sieht auch nicht besonders gut aus. Wenn Ihre 404-Seite so aussieht, muss sie verbessert werden!


Raum für Verbesserung

Wir können viel tun, um unsere 404-Seite von oben zu verbessern.

Der Schlüsselfaktor für eine 404-Fehlerseite besteht darin, sie für den Benutzer einfach und verständlich zu machen. Machen Sie deutlich, dass die von Ihnen gesuchte Seite nicht existiert (es hilft, eine leicht verständliche Sprache zu verwenden, die frei von Jargon ist). Versuchen Sie zu erklären, warum es nicht existiert. Wurde die Seite verschoben? Geben Sie das freundliche und einladende Problem an.

Entschuldigung, mein Partner. Die von Ihnen aufgerufene Seite befindet sich nicht in unserer Datenbank. Sie haben möglicherweise einen schlechten externen Link verfolgt oder eine URL falsch eingegeben. - Eine 404-Seite von List Apart

Lassen Sie die 404-Erfahrung nicht wie eine große, schlechte Prüfung erscheinen. Machen Sie eine freundliche, positive Erfahrung!


Tipp 1: Beibehaltung der Designkonsistenz

Es ist wichtig, dass das Design auf Ihrer 404-Seite dem Rest Ihrer Website entspricht. Dazu gehören Ihr Logo, die Navigation, das Farbschema usw. Wenn Sie eine 404-Seite haben, die in keiner Beziehung zum Rest Ihrer Website steht, kann der Benutzer das Gefühl haben, dass er sich verschoben hat fühle mich wie ein Drama. Der Benutzer fühlt sich weiterhin in die Site eingebunden.

Diejenigen von Ihnen, die mit Twitter Bootstrap gespielt haben, werden ihr bekanntes Branding erkennen, sogar auf der 404-Seite.


Tipp 2: Machen Sie es so nützlich wie möglich

Wie bereits erwähnt, muss eine 404-Seite für den Benutzer äußerst nützlich sein. Es gibt viele Möglichkeiten, dies zu erreichen, aber einige der besten Funktionen, die ein 404 haben kann, sind:

  • Ein Suchformular
    Wenn Sie ein Suchformular auf Ihrer 404-Seite haben, wird sichergestellt, dass der Benutzer dazu neigt, weiter zu suchen, wonach er gesucht hat, und bleibt somit auf Ihrer Website.
  • Ein Link zurück zur Homepage
    Dies ist der Schlüssel zu einer 404-Seite. Wenn Sie jedoch das Design und die Navigation Ihrer Website beibehalten haben, ist dies kein Problem, da in Ihrer Navigation bereits ein Link vorhanden sein sollte.
  • Zeigt eine Liste der beliebtesten Seiten an
    Spielen Sie die Quoten. Möglicherweise hat der Benutzer nach einer Ihrer beliebtesten Seiten gesucht. In diesem Fall ist es nützlich, eine Liste davon als Referenz zu sehen.
  • Ein Link zu Ihrer Sitemap
    Die Bereitstellung eines Links zu Ihrer Sitemap (vorausgesetzt es ist auch nützlich und leicht verständlich) kann hilfreich sein. Auf diese Weise kann ein Benutzer alles auf Ihrer Website durchsuchen und hoffentlich finden, wonach er gesucht hat. Ein Suchformular verarbeitet dies viel besser, aber ein Sitemap-Link ist immer noch ein gutes Backup. Alternativ kann Ihre 404-Seite einen Teil Ihrer Sitemap enthalten. Wenn Sie sich dafür entscheiden, denken Sie daran, das Thema und das Design der Website beizubehalten.
  • Habe problemspezifische Fehlerseiten
    Wenn ein Benutzer beispielsweise aufgrund einer fehlgeschlagenen Suche nach Benutzernamen oder falscher Formulardateneingabe auf Ihre Seite gelangt, müssen Sie diesen Fehlerbildschirm ähnlich hilfreich machen. Bieten Sie einfache Möglichkeiten, erneut zu suchen oder verwandte Seiten anzuzeigen.
  • Einen defekten Link melden
    Eine einfache Möglichkeit für einen Benutzer, einen defekten Link zu melden, ist auch nützlich - vor allem für Sie! Dies kann in Form einer Schaltfläche sein, die Ihnen die URL des fehlerhaften Links sendet, oder ein einfaches E-Mail-Formular.

Fehlerhafte Links bei NYT melden

Tipp 3: Seien Sie freundlich und verständlich

Gehen Sie nicht davon aus, dass Ihre Benutzer wissen, was ein "404-Fehler" ist. Sie müssen das Problem auf einfache, freundliche und verständliche Weise erklären. Auf diese Weise wird ein Benutzer nicht durch Ihre Fachsprache verwirrt. Es ist besser etwas zu sagen wie "Oops! Wir konnten die gesuchte Seite nicht finden.", Als einfach die Fakten anzugeben, wie "404-Fehler: Seite nicht gefunden"..

Als Benutzer was würdest du lieber sehen?

Die 404-Seite von Apartmenthomeliving ist ziemlich lustig und lässig. Das Beste daran ist, dass das Seitendesign (auch wenn es im Bild nicht sichtbar ist) konsistent mit dem Branding der Website ist, und es gibt viele Links, die die Besucher dazu bringen, sich zu verstecken.


Tipp 4: Ein minimalistisches Design funktioniert auch…

Ein minimalistisches, grundlegendes 404-Fehlerseiten-Design kann immer noch effektiv sein.

Wenn Sie eine umfangreiche Website wie Google mit vielen, vielen möglichen verwandten Seiten haben, ist eine 404-Seite mit Dingen wie Sitemap-Links, beliebte Seitenlisten oder einem Suchformular nicht besonders praktisch und hilft höchstwahrscheinlich nicht der Benutzer trotzdem viel.

Googles 404-Seite ist sehr minimalistisch, funktioniert aber gut. Es gibt immer noch einen Link zurück zur Startseite (das Google-Logo) und ist freundlich und verständlich verfasst. Die schöne Zeichnung hilft auch und schafft eine entspannte, ruhige Atmosphäre.

Obwohl dies scheinbar gegen alles bisher Gesagte gerichtet ist, wenn es für eine fortgeschrittene 404-Seite einfach zu unpraktisch ist, ist eine einfache, freundliche Seite genauso gut.


Tipp 5: Halten Sie es lässig

Eine gute 404-Seite kann auch gelegentlich und sogar lustig sein.

Das Erstellen einer 404-Seite, die lustig und einprägsam ist, kann einen großen Einfluss darauf haben, dass Ihre Besucher auf der Website bleiben. Wenn Sie eine besonders lustige oder amüsante 404-Seite haben, die den Leuten in den Sinn kommt, können sie ihren Freunden davon erzählen, damit die Leute absichtlich danach suchen! Das war sicherlich bei Githubs 404-Seite der Fall:


Sehen Sie sich die innovative Verwendung der Parallaxenbewegung auf der 404-Seite von Github an

Github achtet darauf, die nützlichen Aspekte einer 404-Seite beizubehalten, auch wenn sie die Stimmung mit Humor aufhellen.

Die 404-Seite von Blizzard Entertainment ist definitiv amüsant, hält aber die Links für Hilfsbereitschaft und (in gewisser Hinsicht) dasselbe Site-Design.

Schauen Sie sich dieses Video auf nosh.com an, das zeigt, dass es viel Platz für Humor gibt (und für die Postproduktion!).

BuySellAds verwenden einen ähnlichen (wenn auch weniger arbeitsintensiven) humorvollen Videoansatz für ihre Seite.


Suchergebnisse und 404 Seiten

Ihre brandneue, gut durchdachte und nützliche benutzerdefinierte 404-Seite sieht zwar großartig aus und funktioniert perfekt, aber es ist genau das, was Sie nicht in Ihren Suchergebnissen erscheinen lassen möchten. Es gibt zwei Möglichkeiten, um sicherzustellen, dass Ihre 404-Seite nicht in den Suchergebnissen angezeigt wird:

  • Stellen Sie sicher, dass Ihr Webserver einen tatsächlichen, korrekten 404-HTTP-Statuscode zurückgibt, wenn eine fehlende Seite angefordert wird, sodass die Suchmaschine dies ignoriert.
  • Fügen Sie Ihre 404-Seite Ihrem hinzu robots.txt Datei.

Die zweite dieser beiden Methoden kann auch verwendet werden, um Suchmaschinen daran zu hindern, Seiten zu finden, die ihnen nicht angezeigt werden sollen - beispielsweise Ihre 404-Seite, Ihre PHP-Back-End-Dateien (z. B. Login-Funktionen) und mehr. Fügen Sie einfach ihre URL zum hinzu robots.txt Datei und laden Sie sie auf Ihren Server:

 Nicht zulassen: /404.html

Verwendung Ihrer 404-Seite

Es ist sehr gut, eine schöne neue 404-Seite zu haben, die für Ihre Zuschauer hilfreich ist, aber es ist natürlich sehr wichtig, sicherzustellen, dass sie tatsächlich verwendet wird. Um sicherzustellen, dass Ihr Server Benutzer zu Ihrer 404-Seite umleitet (anstatt nur die Standardeinstellung zu verwenden), müssen Sie Ihre .htaccess-Datei einrichten.

Das Konfigurieren Ihrer .htaccess-Datei für die benutzerdefinierte 404-Richtung ist extrem einfach. Suchen Sie zunächst die .htaccess -Datei auf Ihrem Server (diese sollte bereits vorhanden sein, aber wenn Sie nicht einfach eine neue Datei mit diesem Namen erstellen können), öffnen Sie sie. Fügen Sie die folgende Codezeile hinzu:

Fehlerdokument 404 / 404.php

Stellen Sie sicher, dass der Pfad und die Dateierweiterung mit Ihrer 404-Datei übereinstimmen. Wenn Ihre Datei 404-error.html heißen sollte und sich in einem "error" -Verzeichnis befände, würden Sie das Snippet wie folgt ändern:

Fehlerdokument 404 /error/404-error.html

Browser werden nun im Falle eines 404-Fehlers auf Ihre 404-Seite geleitet. So einfach ist das!


Fazit

Daher wissen wir jetzt, dass es nicht die standardmäßige, langweilige und nicht hilfreiche Standard-404-Seite des Browsers ist, sondern dass es in unserem Interesse ist, Zeit zu verbringen, um unsere eigenen 404-Seiten zu erstellen. Wenn dies ordnungsgemäß durchgeführt wird, tragen sie dazu bei, die Besucher auf der Website zu halten und letztendlich die Absprungraten zu reduzieren.


Weitere Ressourcen

  • So erstellen Sie eine einfache 404-Fehlerseite für WordPress-Themes auf Wptuts+
  • 30 der coolsten 404-Seiten des Internets auf Creative Bloq