Sculpter l'expérience des messages d'interface utilisateur

French (Français) translation by Henri Lotin (you can also view the original English article)

Créer des messages d'interface utilisateur efficaces et amicaux est une forme d'art en soi. Bien que les designers passent beaucoup de temps à sculpter la plus grande partie de l'interface utilisateur principale, concevoir des messages peut sembler être une pensée après coup. Le feed-back est effectivement le ciment entre l'utilisateur et l'interface ; sans lui, les utilisateurs peuvent devenir confus.

Types de messages

Avant d'aller plus loin dans n'importe quelle direction, peut-être que nous devrions jeter un œil à des exemples de messages de feed-back UI :

Messages de site web

Le message d'erreur le plus courant que vous rencontrerez est celui de la page introuvable "erreur 404". Cela se produit lorsqu'un utilisateur a accidentellement tapé la mauvaise URL, ou que l'URL précédente n'est plus du tout accessible.

Les messages d'interruptions de service de site web se produisent lorsque le serveur tombe littéralement en panne, parfois de façon inattendue :

Il existe des cas où ce type de message est prévu :

Ces messages sont conçus pour avertir l'utilisateur d'un résultat après qu'il a exécuté une action :

Dans ce cas, Versions informe l'utilisateur que son téléchargement a commencé, et qu'il le retrouvera dans son dossier de téléchargements :

Un message courant en boîte flottante qui rappelle aux utilisateurs de vérifier leur courriel :

Zootool utilise une page entière pour indiquer à l'utilisateur de vérifier ses e-mails avant de lui permettre de continuer :

Et celui-ci remercie les utilisateurs de les avoir vérifié :

Messages de formulaire

Les messages de formulaire sont également rencontrés régulièrement. Les exemples les plus courants sont expérimentés lors de la validation, qui se produit lorsqu'un utilisateur envoie un formulaire qu'un script vérifie pour voir si des erreurs se sont produites :

Il peut y avoir quelques utilisations créatives des messages de formulaires, ils n'apparaîtraient pas nécessairement qu'en cas d'erreurs. Ils pourraient être utilisés comme un guide astucieux qui aiderait l'utilisateur à remplir un formulaire :

Il s'agit d'un exemple d'un message apparaissant après qu'un formulaire a été rempli avec succès :

Messages d'inscription

Les frontières entre le web et les applications natives deviennent de plus en plus floues. Beaucoup d'applications web sont conçues pour se comporter comme une application native. Par exemple, 750words.com possède un ronchonnement - sous la forme d'un message pop-up lorsque vous utilisez un raccourci clavier pour enregistrer une saisie :

Vous pouvez également concevoir des messages pour qu'ils apparaissent dans des zones bien positionnées afin d'inciter les utilisateurs à poser des actions supplémentaires. Twitter.com informe les utilisateurs qu'ils ont des mises à jour disponibles :

Concevoir des messages pour les interfaces mobiles est un autre défi en raison du facteur de petite-surface ; les messages doivent être évidents.

Encore une fois, si bien réglé chronologiquement, un message peut être conçu pour agir comme une astuce :

Ils peuvent également être utilisés comme une forme d'encouragement à l'intention de l'utilisateur pour l'exécution d'une tâche :

Penser dans l'intérêt de l'utilisateur

Nous devons nous mettre à la place de nos utilisateurs. Que voulez-vous qu'ils ressentent quand ils visitent votre site web ou utilisent votre application ? Vous souhaiteriez qu'ils sentent qu'ils peuvent vous faire confiance et ce serait un bonus supplémentaire s'ils pouvaient effectivement se sentir heureux lors de l'utilisation de votre site Internet. S'il n'y a pas assez de réflexion impliquée dans le design de vos messages, cela pourrait causer beaucoup de frustration et de déception.

La plupart des utilisateurs, visitent un site web ou utilisent une application pour remplir un objectif défini. Pour en savoir plus sur une entreprise, pour acheter un produit, pour accomplir une tâche à l'aide d'une application, etc. Par exemple, mettez-vous à la place d'un utilisateur qui essaie d'acheter quelque chose sur un site web. Pouvez-vous imaginer comment l'utilisateur se sentirait si rien ne s'est passé après qu'il a cliqué sur « Ajouter au panier » ? Il doit exister des panneaux de signalisation appropriés indiquant où une action a mal tournée :

Un autre scénario serait celui d'un utilisateur qui essaie d'accomplir une tâche importante sur votre site Internet. Peut-être l'utilisateur pourrait essayer de payer le loyer à travers un site web financier en ligne dont vous êtes responsable. Pouvez-vous imaginer la peur, la frustration et l'inquiétude si le site s'arrête de fonctionner tout d'un coup en plein milieu d'une opération financière ?

Le message d'erreur ci-dessus ne parvient pas à identifier la source de l'erreur : potentiellement frustrant pour l'utilisateur qui tente d'effectuer une transaction.

Bonnes pratiques

Nous allons examiner quelques bonnes pratiques où les feed-back et les messages sont impliqués.

Soyez aussi précis que possible

Ce message de Dealotto est une bonne démonstration de la manière d'être simple et pourtant spécifique :

La barre verte au-dessus, comme un message d'état typique.
L'icône visuel avec le titre approprié, afin de renforcer le message.
Indique à l'utilisateur qu'il y a un certain nombre d'étapes.
Des petits caractères pour communiquer plus d'informations et aussi annoncer la suite de l'action.

Soyez aussi évident que possible

Personne ne va manquer ces erreurs de validation dans ce formulaire d'inscription sur Vimeo :

Représentation forte des couleurs.
Position par rapport au champ de formulaire avec des pointeurs triangulaires.

37signals a créé ce message sur cette ardoise vierge faussement bohème pour donner aux utilisateurs une idée de ce qu'il faut faire quand ils n'ont aucun élément après la recherche :

Toutefois, ne submergez pas vos utilisateurs

Êtes-vous jamais tombés sur une interface qui tente d'obtenir chaque seconde de votre attention ? Il se sert de chaque convention UI disponible, des fenêtres modales, des messages en-ligne, des messages en haut-de-page, pour essayer de vous faire faire quelque chose.

Être trop flagrant ou incessant peut entraîner l'effet inverse ; l'utilisateur abandonne l'interface.

Cette fenêtre modale s'affiche généralement lorsque vous avez essayé de lire un article du Huffington Post pour la première fois. Ça pourrait être source de confusion pour les utilisateurs qui ont peut-être pensé que Twitter était nécessaire pour lire l'article.

Fournir des indications supplémentaires

Lorsque vous affichez un message, que ce soit pour une erreur ou une notification, il sera toujours utile de fournir des conseils supplémentaires ou de l'aide à l'utilisateur. Cela est particulièrement vrai dans le contexte d'erreurs de site, plus d'une fois inévitables, mais nous pouvons rendre l'expérience aussi indolore que possible.

Vimeo propose des guides utiles à d'autres sections, complétés par un lien d'aide en dessous :

De petits icônes d'aide dans votre formulaire peuvent être incroyablement utiles :

Cette info-bulle d'aide va un peu plus loin, en incluant un lien sur lequel l'utilisateur peut cliquer pour obtenir plus d'informations :

Invisionapp fournit un conseil utile tout en affichant l'image de chargement :

L'art de l'anticipation

Créer de bons messages de feed-back n'est qu'essentiellement question d'anticipation. Cela inclut d'anticiper :

Comment l'utilisateur se sentirait.
Ce que ferait l'utilisateur.
Le type d'erreurs qu'il est susceptible de commettre.
Les scénarios dans lesquels vous avez besoin de la patience des utilisateurs.
Les scénarios où vous essayez de sauver une cause potentiellement perdue.

Kicksend a remarqué que certains de leurs utilisateurs ne vérifiaient pas leurs e-mails. Ils ont analysé leurs données et trouvé qu'ils saisissaient simplement des adresses e-mails erronées à cause d'erreurs courantes de typo. Par conséquent, ils ont conçu un plugin jquery, mailcheck.js pour vérifier les erreurs de frappe courantes lorsque les utilisateurs saisissent leurs adresses e-mail. Avec une vérification si simple, ils ont réduit les échecs de vérification d'e-mail de 50 % :

Fab.com prévoit que certains de leurs utilisateurs pourraient résilier leurs comptes. Ici, ils essaient de sauver une cause perdue en seervant ce message lorsque vous essayez de supprimer un compte :

Parfois, anticiper des scénarios peut être une bouée de sauvetage :

Ou peut aider à récupérer une vente potentiellement perdue :

Tout n'est qu'une question de petits détails. Cet écran de connexion de Gmail prévoit que vous avez peut-être oublié que vous avez changé votre mot de passe :

Plus d'inspiration de la part de Gmail ; Je suis sûr que cela a été utile pour d'innombrables personnes, en anticipant simplement une erreur utilisateur courante comme oublier de joindre des fichiers :

Les indicateurs de progrès sont une forme importante de messagerie de l'interface utilisateur. Foursquare a conçu un message subtil pour informer les utilisateurs qu'ils vont obtenir leur position et ont trouvé des zones intéressantes pour le chargement des données. Cela atteint un double objectif.

Cela vous dit d'être un peu patient pendant le chargement de la page.
Cela vous donne également une indication qu'ils effectuent une action intelligente en arrière-plan en analysant vos données.

TeuxDeux anticipe le fait que la synchronisation est importante pour une liste de tâches et prévient l'utilisateur que la connexion internet est sur le point d'être perdue avec une notification humoristique :

Il y a une tonne d'autres exemples sur la manière d'anticiper et d'ériger des "défenses" pour votre interface utilisateur.

Injection d'humour et d'émotion

Nous avons mentionné plus tôt qu'il est important de penser dans l'intérêt de l'utilisateur. Réduire leur frustration est crucial et nous pouvons même le faire à un niveau plus avancé. Beaucoup d'utilisateurs sont devant un écran pendant de longues heures. En affichant de l'empathie ou en injectant un peu d'humour, cela transforme un scénario frustrant ou banal en une situation potentiellement amusante.

Ce robot cassé vous fait sourire, pas vrai ?

Pour davantage de bons exemples pour les pages 404, vous pouvez consulter cette collection Pinterest. Mis à part les erreurs, même de simples notifications peuvent vous faire sourire pendant une journée :

Beaucoup d'entre nous luttent avec inbox zero, mais peut-être en vaut-il la peine pour Gmail :

Ce message de Buffer utilise un peu de flatterie et d'humour pour obtenir plus d'inscriptions :

Un autre message de notification qui va probablement amener un sourire sur votre visage par le biais d'une rédaction intelligente :

Cet excellent jeu de carte d'Aaron Walter, responsable du design chez Mailchimp est une bonne introduction sur le design émotionnel, pour ceux d'entre vous intéressés pour en apprendre plus.

Conclusion

J'espère que ce récapitulatif sur la sculpture de messages pour votre interface utilisateur a été utile. J'ai inclus des ressources supplémentaires ci-dessous à des fins de lecture et d'exploration. Il n'y a pas de noir ou blanc dans le design de messages, plutôt il faut beaucoup d'empathie, d'expérience et bien sûr, des feed-back des utilisateurs eux-mêmes.

N'ayez pas peur de passer par un certain nombre d'itérations pour obtenir la bonne sensibilité pour vos messages. Demandez des feed-back aux gens, commencez par communiquer le message destiné à l'utilisateur et si cela fonctionne, vous pourriez peut-être verser dans un peu d'humour ou d'émotion pour améliorer l'expérience globale. Essayez toujours d'être utile !

N'hésitez pas à poser des questions dans la zone des commentaires. Vos commentaires sont toujours la bienvenue pour nous aider à écrire des articles encore meilleurs pour vous sur Webdesigntuts+.