Advertisement
  1. Web Design
  2. UX

Conseil UX : Tenez compte des états vides

by
Read Time:4 minsLanguages:

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

Les états vides ne sont pas souvent une priorité pour la plupart des designers.

La page d'accueil et le chariot de paiement, par exemple, peuvent être les fonctions prioritaires sur votre liste – mais qu'en est-il des états vides de ces fonctionnalités ? Comment devraient-ils être réglés ?

L'article suivant n'est pas complet, ou un « à faire » par tous les moyens. Au lieu de cela, il décrit trois types courants d'état vide :

  1. première utilisation
  2. suppression par l'utilisateur
  3. erreur

Nous allons regarder un bon exemple de chacun, examiner pourquoi il fonctionne et comment vous pourriez mettre en oeuvre des idées similaires, ou développer à partir d'elles selon votre situation unique.

1. Première utilisation

L'écran suivant provient de l'app BBCNews. C'est un exemple d'un écran où l'utilisateur utilise l'application pour la première fois et a besoin de quelques instructions « pour commencer ».

Cet écran est efficace à deux niveaux :

Il offre des explications claires. Cet état vide explique ce que fait la fonctionnalité en cours et vous propose un bouton qui indique comment démarrer. Dans ce cas, l'utilisateur doit ajouter des sujets pour créer ses propres flux d'actualités personnalisés.

Il fournit un lien pour remplir cette fonctionnalité. Le bouton, qui dirige l'utilisateur vers la page où il peut remplir l'écran approprié, est une fonctionnalité bien pratique. Il évite à l'utilisateur de devoir naviguer à l'accueil en essayant de trouver l'écran par d'autres moyens.

Alors, comment pourriez-vous implémenter quelque chose de semblable vous-même ?

Proposez une séquence d'onboarding. Si l'utilisateur exécute votre application web pour la première fois, vous pourriez envisager un guide pas à pas pour l'aider à se mettre au diapason. Cependant, gardez à l'esprit que cela peut frustrer l'utilisateur intermédiaire ou expert. Ayez égard à ne le montrer seulement qu'une fois et ensuite diffusez l'information dans votre section d'aide.

2. Suppression par l'utilisateur

La page suivante est la liste de souhaits de l'Apple iTunes store. C'est un exemple d'une page où l'utilisateur n'a rien, ou a tout retiré de sa liste.

Qu'est-ce qui rend cette page vide efficace ?

Quelque chose vaut mieux que rien. Cette liste de souhaits n'affiche pas juste rien. Elle donne à l'utilisateur un repère pour lui indiquer qu'il doit ajouter un élément à la liste. L'icone est gros et gras, pourtant subtil. Votre état vide devrait attirer l'attention des utilisateurs – vous n'avez rien ici ! – mais également être indicatif de la vacuité e.g. à l'aide de couleurs adoucies, etc..

Direct et droit au but. Il est tentant de mettre un texte de remplissage dans votre état vide... peut-être une citation de quelqu'un. Cependant, la plupart du temps la meilleure option est d'être direct et précis, comme illustré dans l'exemple ci-dessus « Vous n'avez rien ajouté à votre liste de souhaits ».

Cette page de liste de souhaits aurait pu être améliorée, alors que devrions-nous apprendre d'elle ?

Fournissez un exemple. Vous pouvez aussi penser à ajouter un exemple de ce qui peut ressembler à un état rempli. C'est sans doute plus pertinent sur une interface pour desktop que pour mobiles dans la mesure où vous avez un peu plus d'espace dont vous pouvez vous servir à l'écran.

3. Erreur

La page d'erreur suivante fait partie du navigateur Google Chrome. C'est un exemple d'une situation où l'utilisateur obtient quelque chose autre que son état désiré. Dans ce cas, il est incapable de se connecter à internet.

Cette représentation graphique est devenue familière à des millions, mais qu'est-ce qui la fait fonctionner ?

Elle convient à la situation. Cela fonctionne parce que l'icone est subtil et approprié à la gravité du problème. Il est fréquent d'utiliser une croix ou un « X » et c'est très bien ; C'est un bon moyen pour attirer l'attention de quelqu'un, mais ici, vous voulez juste informer l'utilisateur que quelque chose ne va pas. Vous n'avez pas besoin de crier à ce sujet avec un icone ou message supplémentaire.

Cela offre plus d'informations. Vous ne devriez jamais laisser vos utilisateurs avec l'incertitude de ne savoir trop quoi faire ensuite. Dans ce cas, Chrome a fourni un bouton Plus pour aider à résoudre le problème. Dans la plupart des cas, l'utilisateur sera sans doute au courant qu'il doit activer son wifi, réinitialiser son modem ou appeler son prestataire de services internet, mais cela ajoute de la valeur aux utilisateurs qui ont besoin de plus d'informations.

Que diriez-vous d'appliquer cela vous-même ?

Examiner combien importants sont vos messages d'erreur. A quel point l'erreur est-elle grave ? Si elle est critique à l'utilisateur alors vous devrez vraiment attirer son attention avec des couleurs fortes et une hiérarchie claire. Examinez le langage utilisé et sympathisez avec la position de l'utilisateur. Un icone drôle qui illumine une situation frustrante pourrait faire empirer les choses !

Conclusion

Cet article vous a donné un bon cadre de départ pour savoir quand examiner les états vides. Prenez en compte le type d'état vide pour lesquels vous concevez et les moyens les plus appropriés pour la mise en pages en fonction de la situation de vos utilisateurs et de leurs objectifs.

Quelques bonnes règles de base comprennent :

  • Renseignez du contenu pertinent, qui soit simple et qui aille droit au but
  • Expliquez ce que fait la fonctionnalité en cours et donnez à l'utilisateur un accès facile pour passer à l'action
  • Fournissez des exemples d'états de fin souhaités si possible (c.-à-d. ce à quoi une page remplie ressemble)
  • Assurez-vous que vos utilisateurs savent quelles devraient être les prochaines étapes
  • Servez-vous d'icones, de couleur, du discours et de la hiérarchie appropriés au message que vous communiquez

Ressources supplémentaires

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.