Pourquoi utiliser des illustrations graphiques sur les pages d'erreur?
Ces jours-ci, vous le voyez de plus en plus. Vous cliquez sur un lien mort sur un site Web et avant de le savoir, vous regardez une page magnifiquement illustrée avec le code 404 écrit quelque part. Voici de tels exemples:
Maintenant, ne vous méprenez pas, ce sont d'excellentes illustrations, mais elles semblent n'avoir rien à voir avec le contenu.
Y a-t-il des avantages à utiliser des illustrations pour les écrans d'erreur? Cela minimise-t-il le stress pour l'utilisateur?
Donald Norman (l'un des fondateurs du Nielsen Norman Group) parle de Visceral Design :
C'est une référence au concept de "l'instinct intestinal". C'est un niveau subconscient de réaction à certaines expériences ... La réaction viscérale est celle déclenchée par le scan sensoriel initial de l'expérience. C'est immédiat et souvent hors de notre contrôle.
Ainsi, en ajoutant de l'humour à la page 404, vous pouvez exploiter cette réaction instinctive pour convertir une situation frustrante en surprise ou en plaisir pour l'utilisateur.
Une bonne page 404 offrirait ce plaisir associé à:
- une explication simple/utile de l'erreur (le nombre "404" seul ne signifie pas grand-chose pour les personnes en dehors du développement web)
- un moyen de garder l'utilisateur engagé: un appel à l'action clair pour revenir au site normal et/ou un champ de recherche
En utilisant un élément inattendu, il devient plus facile de créer un moment de surprise et d'exploiter cette réaction intestinale.
Je pense que c'est fait pour plusieurs raisons.
1. Accueillir l'utilisateur
L'erreur 404 ne se produit jamais dans une situation où tout va bien. Il en va de même pour les erreurs de connectivité, panne de serveur, etc.
Vous verriez les sites Web de marketing, de forum, sociaux et commerciaux faire le plus. Les logiciels ou sites Web de niveau entreprise ne le font jamais. La raison en est que ces sites Web tentent d'attirer l'utilisateur à chaque étape du processus. Je ne peux pas vous dire à quel point la page d'erreur Amazon m'a donné envie d'y revenir (voir capture d'écran ci-dessous)
De telles conceptions aident à garder les utilisateurs engagés même pendant une éventuelle "déconnexion"
2. Pour maintenir la continuité
Une page d'erreur est le signe d'une perte de connexion, d'une URL mal placée ou d'un problème. En raison de son existence, cela signifie un manque de continuité dans le flux de navigation sur le Web.
Une conception attrayante maintient non seulement le thème et la convivialité de la page au même niveau que le reste du site Web, mais la rend également transparente. le Please Try Again, Go to Homepage, Go to Previous Page les boutons semblent moins envahissants et ressemblent plus à des guides si un personnage drôle ou un doggo mignon est assis à côté de lui
Je pense également que l'émergence d'États vides plus créatifs et en comprenant qu'ils sont importants ont ajouté à cette tendance
(En tant que bénévole en tant que support utilisateur sur un site de passe-temps :) Lorsque les utilisateurs rencontrent des erreurs, ils ne pensent pas toujours à nous informer du numéro d'erreur spécifique qu'ils ont rencontré, mais ils sont beaucoup plus susceptibles de mentionner l'étrange dinosaure ou autre illustration sur la page. Cela ne fait que gagner un peu de temps en évitant de demander à l'utilisateur quel message d'erreur il a vu et en attendant une réponse, donc je ne suis pas sûr que cela soit suffisant pour motiver un choix de conception, mais c'est un avantage mineur d'images uniques pour chaque page d'erreur .
La page d'erreur 404 typique que nous voyons de nos jours est le résultat de l'accent (et certains pourraient même dire une correction excessive) sur l'expérience utilisateur de la navigation et des interactions sur le site Web.
Pour ceux d'entre nous qui peuvent se rappeler à quoi ressemblent ces pages, l'affichage et le contenu par défaut reflètent quelque chose qui convient mieux aux développeurs qui doivent diagnostiquer ou déboguer le problème.
De nos jours, ce que la plupart d'entre nous voyons est une combinaison de:
- Conception de la communication visuelle
- Design d'interaction
- Conception de la photocopie
Cela se traduit par un certain nombre d'expériences différentes, qui visent à:
- Renforcer l'image de marque et l'image de l'organisation (ce qui a plus d'effet marketing)
- Réduisez le stress de voir une erreur et de ne pas pouvoir accéder à une page
- Communiquer clairement les choix alternatifs disponibles et fournir les liens pour les actions possibles
- Créez un sentiment de confiance et d'assurance en fermant la boucle sur un parcours utilisateur particulier qui ne devrait pas se produire souvent (mais d'une manière ou d'une autre).
C'est donc vraiment la combinaison du visuel, du texte et des interactions qui fonctionnent ensemble pour atteindre le résultat souhaité/souhaité pour l'utilisateur, plutôt que l'utilisation spécifique de l'image (qui n'est qu'un aspect de la conception entière). Certains designers/équipes les combinent mieux que d'autres, tandis que d'autres exemples ne sont pas idéaux et l'image peut créer l'effet inverse.
J'arrive personnellement à la conclusion après avoir vu vos images d'exemple que la principale raison pour laquelle les pages d'erreur sont accompagnées d'illustrations est de montrer que cette erreur appartient à la page elle-même, car chaque illustration a le même style graphique que la page à laquelle il appartient. Cela rassure un peu l'utilisateur car:
- Ce n'est pas une erreur de sa connexion
- Ce n'est pas une erreur de navigateur
- Ce n'est pas une erreur de l'utilisateur
Ces illustrations ne montrent qu'une erreur interne de la page sur laquelle l'utilisateur navigue.
Il y a plusieurs raisons à cela:
- Les pages d'erreur sont rares. L'ajout d'illustrations en fait un peu plus.
- Trébucher sur une page d'erreur n'est pas amusant pour un utilisateur. L'ajout d'illustrations et d'une touche d'humour (son acolyte commun) est une tentative d'équilibrer les mauvaises vibrations.
- C'est actuellement une tendance et les modèles de logiciels réussis ont tendance à se propager.
Je pense que l'idée d'exagérer pour la page 404 est devenue obsolète, la plupart des gens sont maintenant devenus assez matures pour reconnaître qu'ils doivent réessayer au moment où ils remarquent le numéro 404. Pour moi, c'est agréable de mettre une image ou une illustration explicative, mais ne pas aller trop loin pour investir davantage dans la création de telles illustrations créatives, car le séjour dans cette page ne durera pas plus de 2 secondes.
Je suggère donc de faire une illustration simple avec GRAND bouton de message clair comme: Essayez à nouveau, rentrez chez vous, rafraîchissez-vous à nouvea, sera plus significatif et donne l'espoir que cela ne pas être répété à nouveau.
Parce que je pense le gros travail d'illustration donne parfois le message opposé pour l'utilisateur que vous avez atteint au bout du chemin, et vous avez peu de chances d'obtenir votre demande, et cela leur permettra de s'éloigner de votre application ou une page Web.
Le résumé sur [~ # ~] mdn [~ # ~] décrit l'erreur 404 comme;
Le serveur ne trouve pas la ressource demandée. Dans le navigateur, cela signifie que l'URL n'est pas reconnue. Dans une API, cela peut également signifier que le point de terminaison est valide mais que la ressource elle-même n'existe pas. Les serveurs peuvent également envoyer cette réponse au lieu de 403 pour masquer l'existence d'une ressource à un client non autorisé.
Puisque nous avons affaire à des navigateurs, cela signifie que le URL is not recognized par le serveur cible ou le serveur cache l'existence d'une ressource à un unauthorized client. Quoi qu'il en soit, ce n'est pas une situation souhaitable car cela donne à l'utilisateur essayant d'atteindre une source obsolète ou quelque chose s'est produit.
Dans un monde de développement Web et/ou logiciel, il est pratiquement inévitable de créer et de maintenir quelque chose d'incassable en tant qu'expérience. Parce que les choses évoluent en fonction des besoins des utilisateurs, donc les produits finissent par arriver. Pour clarifier les choses, que les entreprises recherchent la croissance afin de saisir plus d'argent ou que les produits évoluent avec la personnalisation des besoins des utilisateurs via la technologie, il y a toujours une marge d'amélioration.
Même si j'étais perfectionniste avant de commencer à travailler en tant que développeur, il n'est pas possible de commander la réaction d'un serveur ou la connexion Internet au moins. Il convient de prendre en considération toutes les améliorations et corrections de bogues à couvrir dans la documentation pour obtenir une UX et un développement plus fluides dans l'interface utilisateur, tandis que le backend, la base de données et la partie système doivent fournir ces détails d'une manière différente, en quelque sorte disciplinés comme ci-dessus. .
Comme l'évolution de la démocratie n'était pas en forme parfaite, la nécessité de cette page d'erreur redirigée n'était pas non plus l'idée des personnes UX-Origin et ne représente pas le point de vue le plus clair en apparence. C'est plus clair d'après le texte ci-dessous avec le lien fourni ci-dessus,
De nombreux sites Web personnalisent l'apparence d'une page 404 pour être plus utiles à l'utilisateur et fournir des conseils sur ce qu'il faut faire ensuite. Les serveurs Apache peuvent être configurés à l'aide d'un fichier .htaccess et d'un extrait de code comme dans l'exemple suivant.
Il a été commencé avec des développeurs ou des sociétés de gestion de serveurs pour gérer l'insatisfaction de leurs clients, mais l'utilisation d'une page d'erreur générale à la place de toutes les autres erreurs rendrait plus attrayant les développeurs et les entreprises créant des valeurs dans ce sens. Donc, plutôt que uniquement pour 404, il est utilisé comme page d'erreur pour tous les types de codes d'état HTTP .
Eh bien, je ne connais aucune recherche sur ce sujet, mais je suis également du côté de l'utiliser, au lieu d'une page blanche à chaque fois que c'est inévitable. Il vaut mieux plutôt que la page soit alimentée avec les informations selon le besoin de l'utilisateur comme le réacheminement, la réorientation, pourquoi c'est arrivé si possible, revenir en arrière ou vice versa plutôt que visualisations fantaisistes.
Une phrase: Augmentez l'attention (parce que l'utilisateur est dans un état d'erreur et que l'application ne fonctionne pas sur cette page - en plus de l'illustration de texte, augmentez l'attention) et aimez la frustration.