Share
Concevoir des messages d'interface utilisateur efficaces et conviviaux est une forme d'art en soi. Alors que les concepteurs consacrent beaucoup de temps à la conception de la plus grande partie de l’interface utilisateur principale, la conception de messages peut sembler être une pensée après coup. Les commentaires sont en réalité le lien entre l'utilisateur et l'interface; sans cela, les utilisateurs peuvent devenir confus.
Avant d'aller plus loin, nous devrions peut-être jeter un coup d'œil aux exemples concrets de messages de retour d'expérience de l'interface utilisateur:
Le message d'erreur le plus courant que vous rencontrerez est le message 404 page non trouvée. Cela se produit lorsqu'un utilisateur a accidentellement saisi la mauvaise URL ou que l'URL précédente n'est plus accessible..
Les messages d'arrêt du site Web se produisent lorsque le serveur est en panne, parfois de manière inattendue:
Il y a des cas où il est programmé:
Ces messages sont conçus pour informer l'utilisateur d'un résultat après avoir effectué une action:
Dans ce cas, Versions indique à l'utilisateur que son téléchargement a commencé et qu'il peut être trouvé dans son dossier de téléchargement:
Un message commun en boîte sur le haut du site, qui rappelle aux utilisateurs de vérifier leur courrier électronique:
Zootool utilise une page entière pour dire à l'utilisateur de vérifier ses emails avant de lui permettre de continuer:
Et celui-ci remercie les utilisateurs d'avoir vérifié:
Les messages de formulaire sont également régulièrement rencontrés. Les exemples les plus courants sont rencontrés lors de la validation, qui survient lorsqu'un utilisateur soumet un formulaire à la suite de quoi un script vérifie si des erreurs se sont produites:
Il peut y avoir une utilisation créative des messages de formulaire, ils ne peuvent pas nécessairement apparaître uniquement pour des erreurs. Ils pourraient être utilisés comme un guide astucieux qui aide l'utilisateur à remplir un formulaire:
Voici un exemple de message apparaissant après qu'un formulaire ait été rempli avec succès:
Les lignes entre les applications Web et natives deviennent de plus en plus floues. De nombreuses applications Web sont conçues pour se comporter comme une application native. Par exemple, 750words.com contient un message contextuel semblable à un grognement lorsque vous utilisez un raccourci clavier pour enregistrer une entrée:
Vous pouvez également concevoir des messages pour qu’ils apparaissent dans des zones bien placées afin d’encourager les utilisateurs à effectuer des actions supplémentaires. Twitter.com informe les utilisateurs qu'ils ont des mises à jour:
La conception de messages pour les interfaces mobiles constitue un autre défi en raison du facteur de forme réduit; les messages doivent être évidents.
Encore une fois, si le moment est bien choisi, un message peut être conçu pour agir comme une astuce:
Il peut également être utilisé comme une forme d'encouragement pour l'utilisateur à effectuer une tâche:
Nous devons nous mettre à la place de nos utilisateurs. Que voulez-vous qu'ils ressentent lorsqu'ils visitent votre site Web ou utilisent votre application? Vous voudriez qu'ils se sentent comme s'ils pouvaient vous faire confiance et que ce serait un bonus supplémentaire s'ils pouvaient se sentir enchantés lors de l'utilisation de votre site Web. Si vous ne réfléchissez pas suffisamment à la conception de vos messages, vous risquez beaucoup de frustration et de déception..
La plupart des utilisateurs visitent un site Web ou utilisent une application pour atteindre un objectif défini. Pour en savoir plus sur une entreprise, acheter un produit, effectuer une tâche à l'aide d'une application, etc. Par exemple, imaginez-vous en tant qu'utilisateur essayant d'acheter quelque chose sur un site Web. Pouvez-vous imaginer ce que ressentirait l'utilisateur si rien ne se passait après avoir cliqué sur «ajouter au panier»? Il doit y avoir des panneaux de signalisation appropriés indiquant les cas où une action a mal tourné:
Un autre scénario serait un utilisateur essayant de terminer une tâche importante sur votre site Web. L'utilisateur pourrait peut-être essayer de payer le loyer par l'intermédiaire d'un site Web financier en ligne dont vous êtes responsable. Pouvez-vous imaginer la peur, la frustration et l'inquiétude si le site Web cesse de fonctionner tout d'un coup au milieu d'une transaction financière?
Le message d'erreur ci-dessus ne permet pas d'identifier la source de l'erreur - ce qui peut être frustrant pour l'utilisateur qui tente de terminer une transaction..
Considérons quelques meilleures pratiques en matière de feedback et de messages..
Ce message de Dealotto est une bonne démonstration de sa simplicité et de sa spécificité:
Personne ne manquera ces erreurs de validation avec ce formulaire d’inscription sur Vimeo:
37signals a créé ce message ardent qui donne aux utilisateurs une idée de ce qu'il faut faire lorsqu'ils n'ont pas d'éléments:
Avez-vous déjà rencontré une interface qui tente de capter votre attention? Il utilise toutes les conventions d'interface utilisateur disponibles, fenêtres modales, messagerie en ligne, messagerie haut de page, pour vous amener à faire quelque chose..
Être trop évident ou incessant peut avoir l'effet inverse. l'utilisateur abandonnant l'interface.
Auparavant, cette fenêtre modale apparaissait lorsque vous tentiez de lire un article de presse sur Huffington Post pour la première fois. Cela pourrait être déroutant pour les utilisateurs qui ont pu penser que Twitter était nécessaire pour lire l'article.
Lors de l'affichage d'un message, qu'il s'agisse d'une erreur ou d'une notification, il sera toujours utile de fournir des conseils supplémentaires ou une aide à l'utilisateur. Cela est particulièrement vrai dans le contexte des erreurs de site, souvent inévitables, mais nous pouvons rendre l'expérience aussi simple que possible..
Vimeo fournit des guides utiles pour d’autres sections, avec un lien d’aide en bas:
De petites icônes d'aide dans votre formulaire peuvent être incroyablement utiles:
Cette info-bulle d'aide va un peu plus loin, avec un lien sur lequel l'utilisateur peut cliquer pour obtenir plus d'informations:
Invisionapp fournit un conseil utile lors de l'affichage de l'image de chargement:
Concevoir de bons messages de retour est une question d’anticipation. Cela comprend anticiper:
Kicksend a remarqué que certains de leurs utilisateurs ne vérifiaient pas leurs emails. Ils ont analysé leurs données et ont découvert qu'ils tapaient simplement les mauvaises adresses électroniques en se servant d'erreurs de frappe courantes. Par conséquent, ils ont conçu un plugin jquery, mailcheck.js, pour vérifier les fautes de frappe courantes lorsque les utilisateurs remplissent leurs adresses e-mail. Avec une vérification aussi simple, ils ont réduit de 50% les rebonds des courriels de vérification:
Fab.com a prévu que certains de leurs utilisateurs annuleraient leurs comptes. Ici, ils essaient de sauver une cause perdue en fournissant ce message lorsque vous essayez d'annuler un compte:
Parfois, anticiper des scénarios peut sauver des vies:
Ou cela peut être une aide pour récupérer une vente potentiellement perdue:
Tout est dans les petits détails. Cet écran de connexion de Gmail prévoit que vous avez peut-être oublié votre mot de passe:
Plus d'inspiration de Gmail; Je suis sûr que cela a été utile pour d'innombrables personnes en anticipant simplement une erreur utilisateur commune telle que l'oubli de joindre des fichiers:
Les indicateurs de progression constituent une forme importante de messagerie de l'interface utilisateur. Foursquare a conçu un message subtil pour informer les utilisateurs qu'ils obtiennent votre position et des lieux intéressants pendant le chargement des données. Ceci réalise un double objectif.
.
TeuxDeux prévoit que la synchronisation est importante pour une liste de tâches et avertit un utilisateur que la connexion Internet est en train de se perdre avec une notification humoristique:
Il existe une multitude d'autres exemples sur la manière d'anticiper et de créer des «défenses» pour votre interface utilisateur..
Nous avons mentionné précédemment qu'il est important de penser au nom de l'utilisateur. Minimiser leur frustration est crucial et nous pouvons même aller plus loin. Beaucoup d'utilisateurs font face à un écran pendant de longues heures. En montrant de l'empathie ou en injectant de l'humour, il transforme un scénario frustrant ou banal en un scénario potentiellement amusant..
Ce robot cassé vous fait sourire, à droite?
Pour d'autres bons exemples pour 404 pages, vous pouvez vous référer à cette collection Pinterest. Outre les erreurs, même des notifications simples peuvent vous faire sourire pendant une longue journée:
Nous sommes nombreux à avoir des problèmes avec la boîte de réception zéro, mais cela vaut peut-être 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 vous apportera probablement un sourire grâce à la rédaction intelligente:
Cet excellent jeu de Aaron Walter, concepteur principal de Mailchimp, est une bonne introduction à la conception émotionnelle pour ceux qui sont intéressés à en apprendre davantage..
J'espère que cette description des messages pour votre interface utilisateur a été utile. J'ai inclus des ressources supplémentaires ci-dessous pour approfondir la lecture et l'exploration. Il n'y a pas de noir ou de blanc dans la conception des messages, il faut plutôt beaucoup d'empathie, d'expérience et bien sûr de retour d'information des utilisateurs eux-mêmes..
N'ayez pas peur de parcourir un certain nombre d'itérations pour bien comprendre vos messages. Demandez aux autres de faire des commentaires, commencez par communiquer le message voulu à l'utilisateur et, si cela fonctionne, laissez-vous éventuellement un peu d'humour ou d'émotion pour améliorer l'expérience globale. Toujours essayer d'être utile!
N'hésitez pas à poser des questions dans la zone de commentaires. Les commentaires sont toujours les bienvenus pour nous aider à écrire des articles encore meilleurs pour vous à Webdesigntuts+.
Accentsconagua