{"id":10186,"date":"2023-07-17T10:30:00","date_gmt":"2023-07-17T08:30:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=10186"},"modified":"2023-07-17T10:30:02","modified_gmt":"2023-07-17T08:30:02","slug":"reussir-design-page-erreur-404","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/reussir-design-page-erreur-404\/","title":{"rendered":"Erreur 404 : 28 exemples de pages originales"},"content":{"rendered":"

Je suis certaine qu\u2019il vous est d\u00e9j\u00e0 arriv\u00e9 de naviguer sur Internet et de tomber sur une page \u00ab\u2009erreur 404\u2009\u00bb. H\u00e9 oui\u2009! La page n\u2019existe pas ou plus, et c\u2019est l\u2019une des erreurs les plus fr\u00e9quentes sur Internet.<\/p>\n

Que les internautes y arrivent via un lien ext\u00e9rieur menant vers une page qui a chang\u00e9 de nom, ou par un lien bris\u00e9 \u00e0 l\u2019int\u00e9rieur de votre site, vous devez \u00e0 la fois leur indiquer o\u00f9 ils sont, conserver leur attention et les orienter vers une autre page.<\/p>\n

Alors si cela devait arriver \u00e0 un internaute sur votre site, pourquoi ne pas rendre cette page plus attractive\u2009? Vous pouvez en profiter pour leur faire passer un message, valoriser une image, faire de l\u2019humour, voire m\u00eame garder contact avec eux. Apr\u00e8s tout, vous n\u2019avez rien \u00e0 perdre, mais plut\u00f4t tout \u00e0 y gagner\u2009!<\/p>\n

Je vous laisse \u00e0 pr\u00e9sent profiter de cette s\u00e9lection d\u2019astuces et pages \u00ab\u2009erreur 404\u2009\u00bb les plus originales. N\u2019h\u00e9sitez pas \u00e0 vous rendre directement sur les pages 404, car certaines d\u2019entre elles sont anim\u00e9es et interactives.<\/p>\n

\u00c0 lire aussi : Web design : quand utiliser une illustration\u2009?<\/a><\/p><\/blockquote>\n

1. Une erreur 404 qui a votre style<\/h2>\n

Vous ne pouvez pas savoir par quel biais un internaute parviendra sur votre page d\u2019erreur. S\u2019il ne vous conna\u00eet pas, il doit tout de suite pouvoir vous identifier. Raison pour laquelle il est d\u2019autant plus important que cette page reprenne le m\u00eame code graphique que les autres.<\/p>\n

\"Page<\/a>
Source : Brightscout<\/figcaption><\/figure>\n

Votre logo, ou votre en-t\u00eate habituel devront \u00eatre pr\u00e9sents. Les textes utiliseront la m\u00eame typographie.<\/p>\n

Plus encore : votre branding<\/a>, l\u2019attitude que vous voulez d\u00e9gager via votre site, devra \u00e9galement transpara\u00eetre sur la mani\u00e8re dont vous pr\u00e9senterez votre erreur 404. Votre identit\u00e9 doit \u00eatre partout, et l\u00e0 aussi.<\/p>\n

2. Une erreur 404 qui se rend utile<\/h2>\n

Vous pouvez utiliser la logique et vous dire qu\u2019il suffit \u00e0 l\u2019internaute de cliquer sur votre logo pour revenir \u00e0 la page d\u2019accueil, ou de faire un clic arri\u00e8re. Soyez cependant certain d\u2019une chose : tout le monde ne le fera pas.<\/p>\n

\"Page<\/a>
Source : Spotify<\/a><\/figcaption><\/figure>\n

Or, vous n\u2019avez certainement pas envie que de potentiels clients quittent votre site en restant sur ce sentiment d\u2019erreur.<\/p>\n

C\u2019est pourquoi il pourra \u00eatre tr\u00e8s utile d\u2019int\u00e9grer un petit moteur de recherche ou quelques liens vers d\u2019autres pages de votre site en bas de page. Vous continuez \u00e0 proposer des choses, vous transformez une erreur en de nouvelles propositions\u2026 et c\u2019est ainsi que vous restez dans la partie\u2009!<\/p>\n

3. Une erreur 404 qui joue sur les \u00e9motions<\/h2>\n

Que ce soit l\u2019humour ou la compassion, ajoutez, via l\u2019image ou le texte, un peu d\u2019\u00e9motions \u00e0 votre page<\/a> d\u2019erreur. Toujours en restant dans votre style, bien s\u00fbr.<\/p>\n

En utilisant la photo d\u2019un chat grognon, d\u2019un membre du personnel qui se confond en plates excuses ou de votre mascotte qui cherche son chemin, vous cr\u00e9erez un lien avec l\u2019internaute.<\/p>\n

\"Page<\/a>
Source : Pixar<\/a><\/figcaption><\/figure>\n

Vous lui redonnerez surtout le sourire, afin qu\u2019il ne reste pas sur la mauvaise impression laiss\u00e9e par ce cul-de-sac. Et il repartira dans sa qu\u00eate, via votre site, avec beaucoup plus d\u2019allant.<\/p>\n

4. Une erreur 404 qui fait agir l\u2019internaute<\/h2>\n

Vous savez que vous pouvez donner envie aux gens d\u2019arriver sur une page d\u2019erreur\u2009? Si vous y incluez une animation interactive, par exemple.<\/p>\n

\"Page<\/a>
Source : Kualo<\/a><\/figcaption><\/figure>\n

Il suffit d\u2019une petite histoire qui se d\u00e9voile en trois clics, ou d\u2019une abeille qui suit la souris, pour transformer l\u2019impasse en une aventure.<\/p>\n

Et un internaute qui interagit avec votre page sera toujours dans un meilleur \u00e9tat d\u2019esprit par rapport \u00e0 ce que vous pouvez lui proposer d\u2019autre\u2009!<\/p>\n

5. Une erreur 404 avec un message clair<\/h2>\n

En g\u00e9n\u00e9ral, l\u2019internaute n\u2019est pas franchement ravi de se retrouver face \u00e0 une page d\u2019erreur 404. \u00c9vitez donc les messages alambiqu\u00e9s et obscurs qui risquent de pousser son agacement jusqu\u2019\u00e0 quitter le site.<\/p>\n

\"erreurs<\/a>
Une partie de ping-pong en attendant\u2009?<\/a><\/figcaption><\/figure>\n

Gardez toujours \u00e0 l\u2019esprit que la page d\u2019erreur 404 a pour but d\u2019aider les utilisateurs \u00e0 retrouver leur chemin. Votre message doit uniquement contenir les informations leur permettant d\u2019atteindre cet objectif. Ne vous encombrez donc pas de d\u00e9tails inutiles et trop techniques. Ne soyez pas trop exp\u00e9ditif pour autant. N\u2019imaginez surtout pas que vos visiteurs peuvent se sortir seul de cette situation en cliquant sur votre logo pour revenir \u00e0 l\u2019accueil du site. Si certains le font, ils ne seront pas majoritaires.<\/p>\n

La clart\u00e9 est donc votre principale alli\u00e9e :<\/p>\n