Une page 404 – Meilleures pratiques et inspiration de conception
Si vous n’êtes pas déjà familier avec le terme, une page d’erreur 404 est une page qui a pour tâche d’informer l’utilisateur que le lien auquel il a tenté d’accéder est rompu ou n’existe pas. Inutile de dire que l’obtention d’un résultat de page d’erreur 404 est irritante pour tous les utilisateurs qui en font l’expérience.
Pour rendre cet événement un peu plus supportable pour les utilisateurs, de nombreux concepteurs de pages Web ont décidé de personnaliser leur page d’erreur 404 afin qu’elle apparaisse plus "amusante" et unique. Ils le font généralement en incorporant de l’humour, de l’esprit et un design qui contient de l’originalité créative dans leur page.
Si vous envisagez également de concevoir votre propre page 404 de cette manière, l’examen de quelques exemples de pages 404 personnalisées déjà créées peut vous inspirer. Ainsi, nous avons décidé de partager une liste d’exemples de pages d’erreur 404 pleins d’esprit et uniques qui peuvent vous aider lors de votre création.
À quoi devrait ressembler une page d’erreur 404
Tout d’abord, nous mentionnerons certaines caractéristiques que, à notre avis, une page d’erreur 404 personnalisée devrait avoir. Certaines de ces stratégies ont en fait été appliquées par de nombreux sites Web influents.
1 Il doit correspondre au style général de votre site Web
Si vous nous demandez, cela devrait être une évidence. Il existe de nombreux thèmes WordPress spécialement conçus pour s’adapter à l’ambiance d’un certain type d’entreprise ou à la nature des services ou des produits dont le site fait la promotion. Par conséquent, il est tout à fait naturel que vous adaptiez la conception de votre page 404 à la fois au modèle de votre site Web et au thème général de votre site Web. Par exemple, si vous êtes un site Web de restaurant spécialisé dans la gastronomie, il serait bon d’incorporer une image d’un repas de fantaisie, ainsi que son nom dans votre page d’erreur 404. De cette façon, vos visiteurs n’oublieront pas au moins que vous servez de la bonne nourriture, malgré les désagréments qu’ils rencontrent en ce moment. Grâce à de nombreux sites Web de stock gratuits et à de nombreuses ressources avec des illustrations vectoriellesvous pouvez améliorer l’apparence de votre page d’erreur 404 en fonction de vos besoins.
2 Il devrait contenir une forme d’excuse
Avoir une page d’erreur 404 pop-up n’est pas seulement ennuyeux, c’est aussi quelque chose qui n’aurait pas dû se produire en premier lieu. C’est pourquoi c’est toujours une bonne idée d’inclure une sorte d’excuse dans votre page d’erreur, où vous soulignez que vous êtes vraiment désolé pour les ennuis de l’utilisateur d’une manière ou d’une autre.
3 Une page d’erreur 404 doit inclure une barre de recherche
Cela peut aussi être une bonne pratique. Si vous ajoutez une barre de recherche à votre page d’erreur 404, les utilisateurs peuvent rester sur votre site Web afin de continuer à explorer.
4 Pensez à ajouter un lien
Tout comme une barre de recherche, un lien utile peut faire plus de bien que de mal. Il peut s’agir de n’importe quel lien que vous jugez important, comme votre blog, votre page de contact ou même votre page d’accueil. De plus, ajouter un lien dans WordPress est super facile.
5 Allégez-le avec humour
Nous avons déjà mentionné l’humour plus tôt. Que ce soit plein d’esprit, autodestructeur ou tout simplement bizarre, utiliser l’humour dans des situations comme celles-ci peut vraiment contribuer grandement à alléger l’ambiance de votre visiteur. Qui sait, votre approche détendue et comique pourrait même leur donner une impression plus positive de votre marque dans son ensemble.
En bref, si vous avez une bonne idée de ligne pleine d’esprit qui peut aller sur votre page d’erreur 404, n’hésitez pas à l’ajouter, car l’attitude humoristique est bien accueillie par beaucoup. Et même si vos visiteurs ne trouvent pas cela amusant, il est toujours préférable de garder les choses légères plutôt que d’être une machine à ce sujet.
Vous pouvez également définir une redirection vers votre page d’erreur 404. Par exemple, si une erreur se produit, votre page peut simplement être redirigée vers votre page d’accueil. Cependant, ce n’est pas la meilleure solution, car s’il y a un problème avec votre page d’accueil, vous revenez à la case départ.
Mais avant de vous plonger dans les meilleurs exemples que nous avons préparés, prenez le temps de vous rafraîchir la mémoire sur la création d’une page 404 dans WordPress :
Nos sélections d’inspiration de page d’erreur 404
Maintenant que vous savez quels éléments peuvent constituer une bonne page d’erreur 404, nous allons également vous fournir quelques exemples de pages d’erreur 404 qui ont retenu notre attention par leur sens de l’humour et l’impact global de leur conception.
Espérons que l’apparence de cette page d’erreur 404 ne montre pas comment vous réagirez lorsque vous rencontrerez ce problème. Pixar a décidé d’ajouter un personnage appelé Sadness à partir d’une image populaire de 2015 Inside Out, avec un message qui vous conseille de ne pas prendre ce genre de choses trop personnellement. Nous ne pouvions pas être plus d’accord.
Après avoir lancé une nouvelle identité de marque et un nouveau design, Mailchimp a également changé l’apparence de sa page d’erreur. Le site Web spécialisé dans les services de newsletter par e-mail a décidé d’inclure une image non conventionnelle d’un âne dont la tête est enfouie profondément dans un trou, indiquant qu’il a fouillé toutes les crevasses du site et qu’il n’y a tout simplement aucune page à trouver. Eh bien, il est évident que l’âne a vraiment fait de son mieux pour trouver cette page pour vous, donc il n’y a vraiment aucune raison d’être trop frustré à ce sujet.
Ce site Web professionnel basé sur la photographie est spécialisé dans la capture de portraits de nouveau-nés, de mariages et d’autres événements familiaux. Il est donc normal qu’ils aient décidé d’inclure une photo d’un bambin taché faisant une crise de colère dans leur page 404. Même s’il ressort clairement de l’image que l’enfant a fini par manger un gâteau, le texte suggère subtilement que la page que vous cherchiez a également été mangée. Mais comment se mettre en colère contre un enfant qui pleure? C’était juste curieux et a fini par engloutir votre page par accident !
La conception de 404 pages de Blizzard Entertainment a une torsion. Mis à part une fenêtre cassée et un menu déformé (qui fonctionne toujours, soit dit en passant), il y a un message qui blâme l’utilisateur pour l’erreur. Ils étaient un peu audacieux dans leur approche car cela change définitivement des messages d’excuses habituels qui ont tendance à apparaître sur les pages d’erreur. Cependant, il est toujours unique et rafraîchissant, donc il est certain qu’au moins certaines personnes seront amusées par ce tour de table inattendu.
Voir un antagoniste d’Angry Birds complètement vaincu sur l’écran du site officiel de ce jeu simplement parce que la page est introuvable pourrait en fait avoir un effet réconfortant sur une personne qui la consulte. Après tout, ce n’est autre qu’un Bad Piggy qui peut être lié à votre malheur.
Flywheel est une entreprise spécialisée dans l’aide aux développeurs et aux concepteurs pour la création de sites Web WordPress. Leur page 404 est de nature simpliste mais comprend quelques éléments de conception Web attrayants. Il y a un "c’est vraiment nul !" message qui est en fait un jeu de mots intelligent, considérant qu’un numéro zéro est en fait un trou noir animé qui a aspiré ce qui semble être un ordinateur portable avec une page cassée.
Tout bon concepteur UX reconnaît que si vous vous concentrez d’abord sur la résolution des plus gros problèmes d’un utilisateur, vous devez également vous adapter lorsqu’ils sortent du script. C’est pourquoi les humbles gens de carwow ont créé une superbe page 404 présentant un jeu de course automobile lorsque les pages ne se chargent pas comme prévu.
L’humour britannique se caractérise souvent par le fait de ne pas se prendre trop au sérieux. Les propriétaires de l’entreprise eux-mêmes sont britanniques, donc dans cette situation, ils s’en prennent à eux-mêmes. Ils l’ont fait en dessinant deux personnages chics qui sont profondément plongés dans leur conversation à propos d’une page qui ne fonctionne pas. Pendant tout ce temps, ils donnent des conseils à l’utilisateur sur ce qu’il doit faire ensuite en utilisant des phrases britanniques qui semblent carrément comiques dans ce contexte.
Personnellement, nous l’avons perdu lorsqu’ils ont qualifié la page de "Quatre-cent-quatrième message d’erreur" et lorsqu’ils ont commenté que "leur web-majordome corrigera leur erreur en un clin d’œil".
Slack est une plateforme collaborative qui aide les entreprises et les entreprises à travailler ensemble et à aller de l’avant. Mais si vous atterrissez sur leur page 404, considérez-vous vraiment perdu. Leur page d’erreur comporte une jolie animation qui se déplace également si vous faites glisser le pointeur de votre souris sur l’écran. Même s’il est visuellement attrayant, il s’agit d’un exemple de page qui n’a aucune corrélation avec le contenu du site Web, mais qui fait toujours bien son travail.
Inspirez-vous et préparez-vous à expérimenter
Outre les exemples de pages 404 soigneusement créés et utilisés par des marques célèbres, il existe de nombreux autres excellents modèles vers lesquels vous pouvez vous tourner. Conçus par des artistes expérimentés avec une attention portée à chaque détail, ce sont nos favoris.
Conçu par Lena Zaytseva, ce modèle est un excellent exemple de mise en page de page d’erreur 404 interactive et atypique. Minimal, mais efficace, il combine la couleur blanche et jaune avec des textes animés. Les mots avec le nom du site Web sont séparés par "404". Simultanément, votre message principal accompagné du bouton de retour apparaît en bas de la page. Cette solution est idéale pour les sites Web pointus et les niches créatives.
Bien que cette page 404 puisse sembler basique au premier abord, c’est un bon exemple de la façon dont la simplicité peut être efficace. Avec une nuance de couleur bleue dominante et une illustration 3D intelligente, cela montre que les pages 404 originales et non traditionnelles peuvent faire une réelle différence. Si vous voulez que votre présentation en ligne se démarque, cela peut être la bonne solution.
Les pages d’erreur 404 nous donnent surtout l’impression d’être perdus dans l’espace. Basé sur cette métaphore, cet exemple de page 404 est un moyen puissant de rediriger les visiteurs du site Web vers la page d’accueil. De beaux graphismes et des éléments plats sont au centre de ce modèle. Dans un cas, vous voulez une page 404 qui est une petite œuvre d’art et qui peut parfaitement fonctionner pour tout type de site Web créatif, n’hésitez pas à essayer cette mise en page.
Conçue par Caroline Lee, cette mise en page audacieuse de 404 pages convient parfaitement à tous ceux qui préfèrent le style rétro et multicolore. L’ambiance de ce modèle nous rappelle les jeux vidéo pionniers et une bonne vieille ère de la télévision. Le mélange de couleurs vives comme le rose, le jaune, le bleu et le vert et les différentes tailles de formes s’adapteront à n’importe quel studio de design ou de jeu.
S’il y a bien un mot qui peut décrire cette mise en page ce serait jaune! Inspiré de l’esthétique pop art américaine, cet exemple 404 combine deux nuances de jaune, des pois et des rayures emblématiques. SI vous voulez apporter un peu d’art dans ce genre de page, c’est une voie à suivre.
La simplicité parfois tellement à offrir. Ce modèle en est la meilleure preuve. Sur le côté gauche, il y a une illustration d’un guitariste avec une guitare avec une corde cassée. La symbolique forte de cette illustration s’inscrit parfaitement dans le contexte de la page d’erreur 404. De l’autre côté, il y a un simple message avec le bouton Retour.
Regarder les pages d’erreur 404 déjà existantes peut être amusant, mais en créer une peut être une toute autre histoire. Il faut de l’esprit, de la créativité et aussi un peu d’ouverture d’esprit pour travailler. Néanmoins, nous espérons que certaines de nos suggestions vous aideront au moins à prendre une bonne longueur d’avance.