Un guide complet sur la conception des notifications

Les messages périphériques dans les produits numériques, appelés collectivement notifications, ne doivent jamais nuire à l'expérience utilisateur. Au lieu de cela, ils doivent contribuer à une expérience qui aide les gens à atteindre un objectif. Aborder la conception des notifications tôt dans le processus de conception du produit produira de meilleurs résultats.

Imaginez un groupe d'architectes concevant une maison à trois étages, travaillant sur les plans pendant des mois. C 'est impressionnant! C'est beau! Mais juste au moment où ils sont sur le point de terminer le diagramme, l'un d'eux s'exclame : « Attendez ! Comment les gens vont-ils du premier au troisième étage ? « Ils ont oublié l'escalier !

De même, les concepteurs de produits ont tendance à penser aux améliorations UX petites mais critiques en dernier. Comme c'est le cas avec les états vides, les concepteurs ont tendance à laisser la conception des notifications (alertes, messages d'erreur, confirmations, annonces et accusés de réception) jusqu'à la toute fin. Le problème peut soudainement apparaître lorsqu'un développeur demande : « Comment gérons-nous les erreurs ? "Parce que c'est une réflexion après coup, cette approche de clouage produit souvent des "frankendesigns" bâclés, ce qui nuit à l'UX.

Pour éviter un tel scénario, il est préférable d'utiliser une approche intégrée de la conception des notifications afin d' améliorer l'expérience utilisateur . Même si les concepteurs n'ont peut-être pas toutes les informations à portée de main, la conception d'un cadre de notifications complet pendant le cycle de vie de la conception du produit aidera à préparer le produit pour les cas d'utilisation imprévus.

Lorsque vous vous lancez dans la conception de notifications, le principe de conception essentiel à garder à l'esprit est qu'elles doivent aider (et non empêcher) les personnes à effectuer des tâches . Il est impératif de tester tôt les prototypes de produits et de cartographier les cas d'utilisation où la messagerie périphérique serait utile pour faciliter les interactions . Cependant, la meilleure façon de communiquer avec les utilisateurs variera et dépendra de plusieurs facteurs clés :

• Le type d'informations communiquées
• L'urgence de l'information - si elle doit être vue immédiatement
• Si une action de l'utilisateur est requise à la suite des informations

Outre le style et le comportement des notifications, leur ton doit être établi par la copie UX. Tous les textes des notifications doivent être clairs, concis et utiles. Un système de notification bien conçu est également conçu avec l'accessibilité à l'esprit et a la flexibilité de s'adapter à différentes langues.

La terminologie utilisée pour les notifications a tendance à être similaire, mais varie légèrement d'une équipe à l'autre et d'un projet à l'autre. Il incombe au concepteur de déterminer la terminologie de l'infrastructure de notification - ce qu'on appelle quoi - ainsi que de synchroniser tout le monde sur la justification de leur utilisation : le quoi, où et comment .

Meilleure convivialité grâce à une meilleure conception des notifications

Les notifications remplissent une fonction essentielle dans la convivialité du produit. La « visibilité de l'état du système » est numéro un sur la liste des « 10 heuristiques d'utilisabilité pour la conception d'interface utilisateur » du groupe Nielsen Norman. La règle stipule que « le système doit toujours tenir les utilisateurs informés de ce qui se passe, par le biais d'un retour d'information approprié dans un délai raisonnable. ”

Un système de notification fait tellement partie de l'expérience utilisateur d'un produit numérique que sans lui, le produit aurait l'impression que quelque chose a été omis. S'il n'y a pas de "visibilité de l'état du système" et de retour d'information, cela revient à conduire une voiture sans tableau de bord.

Le tableau de bord d'une voiture est plein de jauges, d'icônes et de voyants conçus pour fournir une visibilité sur le système d'exploitation de la voiture et assurer un fonctionnement sûr et fiable. Lorsque nous conduisons, un groupe d'affichages et de notifications sur la température du moteur, l'état de la batterie, la pression d'huile, les feux, les freins, les airbags, etc. nous tient informés. Lorsque nous voulons faire un virage, il y a une lumière clignotante pour le clignotant, ainsi qu'un clic, tous deux nous fournissant un retour. Nous avons également une jauge de réservoir de carburant qui indique quand le réservoir de carburant est bas.

Cela fonctionne de la même manière avec un produit numérique. La visibilité de l'état du système et des commentaires est fondamentale en matière de convivialité, et la convivialité est le fondement d'expériences utilisateur exceptionnelles.

Établir un cadre de notification utile

Pour bien concevoir un cadre de notification, il peut être utile de penser aux notifications en termes de « force du signal ». Quels messages périphériques nécessitent plus ou moins d'attention ? Par exemple, les interactions potentiellement destructrices nécessitent des notifications « plus fortes », et les interactions non destructives nécessitent des notifications « plus silencieuses ».

Envoyer aux gens la bonne quantité de notifications est un acte d'équilibre , et en faire trop est semé d'embûches ; le produit peut recevoir beaucoup de commentaires négatifs ou, au pire, aliéner les gens au point où ils l'abandonneront. Les concepteurs doivent donc examiner attentivement l'UX et n'envoyer que des messages avec un objectif bien défini. C'est également une bonne idée de donner aux utilisateurs la possibilité de désactiver toutes les notifications, ou au moins certaines d'entre elles.

L'approche initiale de la conception des notifications doit être classée en trois niveaux : attention élevée, moyenne et faible, c'est-à- dire des « niveaux de gravité ». Ensuite, les types de notification doivent être définis plus en détail par des attributs spécifiques à ces trois niveaux, qu'il s'agisse d'alertes, d'avertissements, de confirmations, d'erreurs, de messages de réussite ou d'indicateurs d'état.

Une fois les attributs de notification identifiés, il est temps de créer une taxonomie des différentes notifications qui composeront le framework. Ce qui suit n'est en aucun cas une liste exhaustive - les types de notifications différeront en fonction du produit, des cas d'utilisation et d'autres variables. ( Veuillez noter : comme mentionné, différentes équipes utilisent une variété de terminologies. Par exemple, nous appelons une "confirmation" une notification qui nécessite l'approbation de l'utilisateur pour procéder à une interaction destructrice. Certaines équipes peuvent utiliser "confirmation" comme terme pour un message de réussite.)

Haute attention

• Alertes (attention immédiate requise)
• Erreurs (action immédiate requise)
• Exceptions (anomalies du système, quelque chose n'a pas fonctionné)
• Confirmations (actions potentiellement destructrices nécessitant la confirmation de l'utilisateur pour continuer)

Attention moyenne

• Avertissements (aucune action immédiate requise)
• Remerciements (commentaires sur les actions des utilisateurs)
• Messages de réussite

Faible attention

• Messages d'information (également appelés notifications passives, quelque chose est prêt à être visualisé)
• Badges (généralement sur des icônes, signifiant quelque chose de nouveau depuis la dernière interaction)
• Indicateurs d'état (retour système)

Concevoir une excellente expérience utilisateur de notification

Pour concevoir un produit avec une excellente UX, les concepteurs doivent dresser une liste de tous les cas d'utilisation où les notifications peuvent être utiles. Il est recommandé que ce processus soit effectué en collaboration avec un développeur, car dans la plupart des cas, il peut être impartial et capable d'aider à résoudre les cas extrêmes que le concepteur n'a peut-être pas pris en compte.

Les concepteurs doivent également noter toutes les interactions lors des tests utilisateur où les notifications peuvent apporter une valeur ajoutée pour améliorer l'UX.

Une fois armé de la liste, l'étape suivante consiste à classer les notifications en fonction du niveau d'attention et des attributs souhaités. Encore une fois, parce que les notifications ne doivent pas être intrusives , cela doit être fait avec soin. Certaines des questions à poser au cours de ce processus sont les suivantes :

• Qu'est-ce qui déclencherait la notification ?
• Quel type de feedback est communiqué ?
• Où la notification apparaîtrait-elle et comment ?
• Quelle notification nécessiterait une interaction immédiate ?
• La notification est-elle persistante ou non persistante ?

Ensuite, le code couleur et les icônes doivent être déterminés et intégrés dans un système de conception (ou un guide de style). Lors de ce processus, les concepteurs doivent prendre en compte chaque cas où une notification apparaîtrait et s'assurer qu'ils s'affichent correctement sur tous les arrière-plans.

Le placement des notifications est également essentiel. Au risque d'énoncer une évidence, pour éviter d'obscurcir l'interface, les notifications doivent apparaître en haut ou en bas, ou près des coins de l'interface utilisateur. De plus, si la conception est réactive, les concepteurs doivent tester l'apparence des notifications avec différentes fenêtres. C'est particulièrement important lorsque des messages d'erreur peuvent s'afficher avec des formulaires mobiles réactifs.

Concevoir un cadre de notification n'est pas facile. De nombreux petits détails survenant dans différents scénarios doivent être pris en compte. Au-delà de l'accessibilité et de la lisibilité, il faut garder à l'esprit la future localisation. Un système de notification qui semble parfait en anglais peut s'effondrer complètement lorsqu'il est utilisé sur une plate-forme allemande ou japonaise.

Autres questions à se poser lorsqu'il s'agit de définir le comportement des notifications :

• Si une alerte ou un avertissement est censé être persistant, comment les concepteurs s'assurent-ils que les utilisateurs y ont toujours accès après avoir quitté l'écran initial ?
• Une icône d'alerte avec un badge devrait-elle être incorporée là où une archive des notifications pourrait être vue ?
• Si une notification n'est pas persistante, combien de temps avant qu'elle ne disparaisse, et devrait-il y avoir une option pour la rejeter avant qu'elle ne disparaisse ?

Pour les applications mobiles, non seulement les notifications intégrées à l'application, mais aussi les notifications push (au niveau du système, en dehors de l'application) doivent également être méticuleusement conçues. Ce sont principalement des interruptions, il est donc crucial de regarder la copie de la notification et comment et quand demander la permission de les envoyer. Trop utilisés, ils peuvent décourager les gens d'utiliser l'application. Trop de notifications non essentielles peuvent frustrer les utilisateurs qui peuvent alors désactiver les notifications ou cesser complètement d'utiliser l'application.

Les concepteurs doivent également envisager des notifications exploitables qui permettent aux utilisateurs d'être productifs sans ouvrir d'application. Permettre aux utilisateurs d'accomplir de petites tâches sans entrer dans une application peut être un outil puissant pour améliorer l'expérience utilisateur.

Pour les notifications push mobiles, la meilleure pratique UX consiste à retarder les notifications de toute nature (demander l'accès à l'emplacement d'une personne, envoyer des notifications push, etc.) jusqu'à ce que les personnes aient eu la chance d'explorer un peu l'application.

Meilleures pratiques de notification pour une excellente UX

L'observation des meilleures pratiques suivantes garantira que les utilisateurs percevront les notifications comme apportant de la valeur, et non comme des interruptions, améliorant ainsi l'expérience utilisateur. Avant de concevoir un système de notifications et de les intégrer à un système de conception, tenez compte de ces bonnes pratiques fondamentales :

• Classez les notifications selon les trois niveaux d'attention évoqués précédemment. Ensuite, définissez la taxonomie des différentes formes de notifications au sein de ces trois niveaux.
• Lors de la création d'un guide de style pour le système de notification, spécifiez les longueurs maximales de caractères pour la notification dans toutes les langues dans lesquelles elle sera publiée.
• Portez une attention particulière à l'adaptabilité et à la flexibilité pour s'adapter à différents types de contenu et longueurs de texte.
• Créez un jeu de couleurs cohérent pour les trois niveaux d'attention ainsi qu'une iconographie cohérente.
• Créez des notifications concises et faciles à lire qui fournissent des informations utiles.
• Considérez soigneusement ce qu'il faut envoyer et quand envoyer. Sur mobile, retardez l'envoi de notifications sur les applications fraîchement téléchargées pour éviter d'aliéner les gens. Examinez attentivement le contexte et les cas d'utilisation.
• Préférez l'affichage de moins de notifications, qu'il s'agisse d'alertes ou d'avertissements, ou d'autres mises à jour d'état d'attention élevée à moyenne. Au lieu de cela, mettez-les dans une liste à laquelle les gens peuvent accéder quand ils veulent les voir (signifié par un badge d'icône dans l'interface utilisateur).
• Envisagez un système avec une option pour marquer les notifications "ne plus afficher".
• Les accusés de réception non persistants tels que les "barres de collations" doivent disparaître de l'écran après un minimum de quatre secondes et un maximum de huit secondes, avec une option pour les ignorer plus tôt et "annuler" le cas échéant.
• Pour les notifications à haut niveau d'attention sur mobile, envisagez les retours sonores et haptiques lorsque cela est possible.
• Assurez un bon contraste sur les notifications pour la lisibilité et entre l'arrière-plan sur lequel les notifications apparaissent. Sachez qu'avec des conceptions fluides et réactives, l'arrière-plan peut se déplacer sous la notification.

Meilleures pratiques pour les messages d'erreur

• Les messages d'erreur doivent être simples et directs, de préférence exploitables, rédigés dans un langage facile à lire et rapide à comprendre.
• Évitez les codes obscurs et les abréviations telles que « le succès de la réponse reçue est faux ». ”
• Fournissez des descriptions concises et claires du problème au lieu de « une erreur s'est produite ». ”
• Évitez de blâmer les gens ou de leur dire qu'ils ont fait quelque chose de mal, par exemple en disant qu'il s'agissait d'un « ordre illégal ». ”
• Fournissez des messages d'erreur constructifs en contexte afin que les utilisateurs puissent résoudre le problème.
• Évitez d'indiquer une erreur simplement en rendant le champ rouge. Il ne le rend pas accessible aux personnes handicapées. Il est toujours préférable d'inclure d'autres repères visuels que le daltonien peut voir.
• Utilisez la validation en ligne pour les champs de saisie des formulaires.
• Les messages d'erreur ne doivent pas disparaître tant que les personnes n'ont pas résolu le problème.

Sommaire

Les notifications contribuent à une expérience qui aide les gens à atteindre un objectif et doivent être traitées comme tout autre composant de produit numérique. Cependant, les notifications peuvent couper dans les deux sens. S'ils sont bien gérés, ils peuvent stimuler l'expérience utilisateur et favoriser l'engagement, mais s'ils sont mal exécutés, ils risquent de devenir une gêne. Trouver le bon équilibre est la clé.

Les notifications ne doivent pas être traitées après coup. Pour les faire correctement, les concepteurs doivent aborder les cas d'utilisation tôt, définir les différentes formes au cours du cycle de vie de la conception du produit et les tester de manière approfondie.

Un récapitulatif rapide sur la bonne façon de concevoir des notifications :

• Commencez la conception des notifications tôt, pas après coup.
• Classez les notifications selon les trois niveaux d'attention : élevé, moyen et faible.
• Code couleur, assignez des icônes et déterminez les emplacements.
• Classez-les par type : persistant ou non persistant, pop-up, bannière, dialogue, etc.
• Intégrez-les dans un système de conception.

Comprendre quand et comment utiliser les notifications est essentiel pour fournir une grande convivialité et renforcer la cohérence de la messagerie du produit. En évaluant soigneusement les messages périphériques qui doivent être affichés au bon moment, les concepteurs peuvent augmenter l'efficacité d'un produit et améliorer son UX.

Dites-nous ce que vous en pensez! S'il vous plaît laissez vos pensées, commentaires et commentaires ci-dessous.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Comment travailler à distance quand cela compte le plus
• Comment faire la transition du travail à distance avec facilité
• Meilleures pratiques et erreurs de conception d'applications mobiles
• Le guide ultime de la conception de sites Web de commerce électronique
• Le Chat Crash – Quand un Chatbot échoue