États vides

Les états vides, également appelés "empty states", sont des états d'interface utilisateur qui se produisent lorsque l'application n'a pas encore de données à afficher ou lorsque les données précédemment affichées ont été supprimées ou filtrées. Les états vides sont un aspect important du design d'interface utilisateur car ils peuvent aider à améliorer l'expérience utilisateur en fournissant des informations utiles et en guidant les utilisateurs vers des actions utiles.

Pour concevoir des états vides efficaces, il est important de comprendre les besoins et les attentes des utilisateurs, ainsi que les objectifs de l'application. Les états vides doivent être conçus pour être clairs, informatifs et utiles. Ils peuvent inclure des messages d'erreur, des instructions sur la façon d'ajouter des données, des suggestions de contenu ou des actions à entreprendre pour aider les utilisateurs à atteindre leurs objectifs.

En termes de design, les états vides doivent être cohérents avec le reste de l'application, en utilisant des couleurs, des typographies et des éléments graphiques similaires. Les états vides doivent également être visuellement distincts des autres états de l'application, pour éviter toute confusion.

Enfin, il est important de tester les états vides avec les utilisateurs pour s'assurer qu'ils sont compréhensibles et utiles. Les tests utilisateurs peuvent aider à identifier les problèmes de compréhension et à améliorer la conception des états vides pour une expérience utilisateur améliorée.

Alias empty state

Avantages

Inconvénients

Aide l'utilisateur à comprendre le contexte : un empty state peut donner une idée de ce que l'utilisateur peut faire ou s'attendre à trouver dans cette partie de l'interface.
Évite la confusion : en fournissant des informations claires, un empty state peut aider à éviter la confusion de l'utilisateur et à réduire la probabilité d'erreurs.
Favorise l'engagement : un empty state bien conçu peut être utilisé pour encourager les utilisateurs à effectuer des actions spécifiques, ce qui peut augmenter leur engagement et leur satisfaction.

Peut être ignoré : les utilisateurs peuvent ignorer les empty states ou ne pas les comprendre correctement, ce qui peut entraîner une frustration et une baisse de l'engagement.
Peut être perçu comme un échec : si un utilisateur voit un empty state, il peut penser qu'il a mal utilisé l'interface ou qu'il n'y a rien d'intéressant à découvrir dans cette partie de l'application. Cela peut entraîner une perception négative de l'interface et de l'application dans son ensemble.

Soyez clair et concis : utilisez un texte court et précis pour expliquer pourquoi l'état est vide et ce que l'utilisateur peut faire pour remédier à la situation.
Utilisez des images pertinentes : les images peuvent aider à expliquer pourquoi l'état est vide ou à donner une idée de ce que l'utilisateur peut attendre.
Utilisez des couleurs contrastantes : utilisez des couleurs contrastantes pour mettre en évidence le message principal et aider à orienter l'utilisateur vers les actions qu'il peut entreprendre.
Offrez des options de recherche : si l'empty state est lié à un manque de contenu, offrez des options de recherche pour aider l'utilisateur à trouver du contenu pertinent.
Offrez des actions pour l'utilisateur : si possible, offrez des actions pour aider l'utilisateur à remplir l'état vide, comme des boutons de création ou des options de recherche.
Évitez de surcharger l'empty state : ne surchargez pas l'empty state avec trop d'informations ou d'options, car cela peut compliquer la compréhension de l'utilisateur et la navigation.
Faites en sorte que l'état vide soit cohérent avec le reste de l'interface : assurez-vous que l'état vide utilise les mêmes éléments de design que le reste de l'interface, afin de maintenir la cohérence visuelle et d'assurer une expérience utilisateur fluide.
Testez votre empty state : testez votre design d'empty state auprès d'utilisateurs réels pour vous assurer que le message est clair, que les actions sont intuitives et que l'expérience utilisateur est satisfaisante.

Références

https://stackoverflow.design/product/components/empty-states/

https://protocol.mozilla.org/patterns/molecules/picto.html

https://www.patternfly.org/v4/components/empty-state

https://elastic.github.io/eui/#/display/empty-prompt

https://design.wonderflow.ai/components/loading/skeleton