Construction d'une page d'erreur 404 constructive (avec exemples)

La page d'erreur est une facette commune de la conception Web souvent négligée par la foule en général. Généralement, lorsqu'un utilisateur se trouve sur une page d'erreur, cela constitue un échec de sa part. Quelque chose dans leurs actions a provoqué une erreur sur le site et tout espoir semble perdu.

Au fur et à mesure que les générations avancent, nous voyons la jeunesse d'aujourd'hui beaucoup plus apte à traiter les erreurs technologiques et à tracer la route qui mène à une source unique. Lorsque vous avez affaire à la majorité, il est important de comprendre que l'expérience utilisateur est primordiale. Cela double pour les applications Web new-age et les jeux mobiles distrayants. Lors de la construction de ces pages, gardez toujours à l'esprit l'utilisateur final - et souvenez-vous qu'il existe une grande différence de personne à personne!

Ici, nous allons couvrir quelques idées pour former de superbes pages d'erreur 404. Celles-ci afficheront un bref message à vos visiteurs et des solutions possibles pour trouver leur chemin. Les idées sont assez communes et résonnent bien dans la communauté des concepteurs de sites Web professionnels.

Que peut-on faire avec les erreurs 404?

Lorsque le navigateur renvoie un code d'erreur 404, cela signifie que les demandes de page sont introuvables sur le serveur. En corrélation avec les sites Web, cela signifie qu'un problème de routage dans la logique du système ou le fichier physique n'a pas pu être localisé (page .html, fichier vidéo, images, etc.).

Les difficultés proviennent de l'identification de la source du problème. L'utilisateur at-il suivi un lien brisé provenant d'un autre site Web? Ou est-il possible qu'il y ait des liens cassés dans votre navigation? C'est une tâche difficile à résoudre. Toutes ces options doivent être envisagées et proposées en tant que solutions à l'utilisateur.

En vérité cependant, une fois qu'un utilisateur a atteint la page d'erreur, il ne dispose pas de beaucoup d'options pour le débogage. Ils peuvent revenir à la page précédemment visualisée ou rediriger vers une agrafe, telle que Home ou Sitemap.

Je propose généralement ces liens sur la plupart des 404 pages que je construis. Cela donne à l'utilisateur un choix ouvert et lui permet de garder le contrôle de le trajet. Sinon, il peut être judicieux de proposer un lien ou une adresse électronique pour signaler un bogue. Si vous n'êtes pas au courant de problèmes avec des pages perdues / des liens brisés, comment pouvez-vous éventuellement prendre des précautions pour les résoudre?

Garder la lumière d'humeur

Une autre technique que j'ai découverte est de garder la langue déchiquetée et optimisée. C'est souvent très frustrant d'utiliser le Web et de rencontrer une erreur à laquelle vous ne vous attendiez pas. Pire encore, les utilisateurs d’Internet d’aujourd’hui ont très peu de patience pour les applications boguées ou "URL Not Found!". messages.

Si vous êtes capable graphiquement, j'ai vu 404 pages avec des illustrations ou des arrière-plans alternatifs. Ceux-ci pourraient être créés dans Adobe Illustrator ou Fireworks et exportés au format vectoriel. En comparaison, des images douces et des caractères vectoriels offrent le sentiment de faire un boo-boo, tandis que le texte et les liens de sites Web apparaissent comme si un désastre technologique était survenu aux mains de vos utilisateurs.

L'utilisation d'un contexte ludique et de titres colorés atténuera l'humeur fatiguée souvent associée aux erreurs de sites Web. Lors de la rédaction de votre copie de 404 pages, examinez les détails dans votre langue. Ne faites pas en sorte que l'utilisateur se sente responsable et ne blâme personne, d'ailleurs.

Rapport d'erreur

Lorsqu'un visiteur trouve une telle page d'erreur plusieurs fois, il peut vouloir contribuer à un ticket d'inquiétude. C’est là qu’offrir un courriel de contact ou un petit formulaire sur une page peut faire des merveilles.

En offrant simplement la possibilité de saisir des commentaires et d'envoyer un message à l'administrateur du site, la plupart des utilisateurs se sentiront plus que bénéfiques pour vous aider à localiser une erreur de site. Dans la plupart des configurations de serveurs Web, cela peut être fait avec un simple PHP courrier() appel de fonction et un seul formulaire d’entrée contenant un textarea de commentaires.

Si vous n'aimez pas recevoir des e-mails d'erreur en tant que webmaster ou si vous ne pouvez pas prendre en charge le mailing SMTP, vous pouvez également envisager un système de ticketing interne. En proposant aux utilisateurs de saisir et de signaler le code d'erreur et l'URL d'origine, ces données pourraient être stockées dans une table de base de données et accessibles via un compte d'administrateur.

Si vous utilisez une petite installation et que vous n’avez pas besoin de cette protection, il existe certainement des alternatives. Cependant, en comptant chaque jour dans les millions de pages vues, les courriers électroniques peuvent parfois rapidement s'accumuler rapidement.

Réduire la confusion à tout prix

Le fait de rencontrer une page d'erreur est assez agaçant pour les utilisateurs. Cela signifie que la page qu'ils reçoivent ne doit pas être trop compliquée à comprendre, sinon ils abandonneront tout simplement le site Web pour chercher ailleurs.

En proposant un contenu de page simple et en gras, vous pouvez proposer des solutions immédiates au problème. Les visiteurs qui souhaitent quitter la page peuvent rentrer chez eux ou éventuellement effectuer une recherche sur le site. D'autres peuvent remarquer l'erreur et examiner ce qui aurait pu mal tourner pour tenter de réparer les choses.

Dans les deux cas, une explication claire et concise de ce qui s’est passé et pourquoi ils n’ont pas reçu la page demandée est un absolu doit. Cela devrait également être complété raisonnablement - laissez beaucoup d’espace blanc et «d’espace pour respirer». pour que les utilisateurs sachent ce qu’ils veulent faire.

Après tout, le nom du jeu est une excellente expérience utilisateur. Indépendamment de la conception ou de l'esthétique de votre page, les erreurs 404 importantes résoudront le problème pour les utilisateurs et offriront certaines solutions types en garantie.

404 Galerie de pages

Ci-dessous, j'ai saisi quelques photos de pages d'erreur 404 radicales situées sur le Web. Celles-ci vont de tous les types et offrent un aperçu clair des tendances du design moderne de la nouvelle ère. Espérons que cela guidera également votre inspiration vers des schémas UX plus créatifs et plus agréables.

Carol Rivello

WPBundle

Jamie Huskisson

Deaxon

Homestar Runner

Mixx

Idées d'impact

Trouver des icônes

Duoh

Wufoo

Foursquare

Sauter n'importe où

Groupon

WeFunction

MailChimp