États vides - L'aspect le plus négligé de l'UX

Bien qu'importants pour l'expérience utilisateur, les états vides sont souvent négligés. Savoir ce qu'ils sont et comment les utiliser, et appliquer les meilleures pratiques UX, peut apporter des avantages substantiels.

Qu'est-ce qu'un état vide ?

Les designers UX ont de nombreuses opportunités pour créer des expériences agréables et significatives. Une telle opportunité qui est souvent ignorée est «l'état vide», ou écran vide. Les états vides sont des moments de l'expérience d'un utilisateur avec un produit où il n'y a rien à afficher.

Voici quelques exemples de situations d'état vide courantes :

• Un nouvel écran Dropbox où aucun fichier ou dossier n'a été créé.
• L'écran résultant après avoir terminé toutes les tâches dans un gestionnaire de liste de tâches.
• Obtenir un écran d'erreur dans Slack lorsqu'une commande n'est pas prise en charge.
• Démarrage d'un nouveau compte de réseau social et il n'y a pas de connexions.
• Recherche quelque chose dans Gmail et aucun résultat.

Ces moments intermédiaires offrent des opportunités d'améliorer l'expérience utilisateur et, par conséquent, d'amplifier les opportunités commerciales. Pour les concepteurs UX, saisir chaque occasion d'améliorer l'expérience utilisateur et d'ajouter plus de valeur à l'entreprise est une bonne chose.

Un état vide utile permettra à l'utilisateur de savoir ce qui se passe, pourquoi cela se passe et quoi faire à ce sujet. Voici deux exemples de bonnes conceptions UX d'état vide :

Voici quelques exemples de conceptions d'états vides avec des opportunités manquées :

Types d'états vides

Voici quatre types d'états vides fréquemment rencontrés :

• Première utilisation - Se produit avec un nouveau produit ou service lorsqu'il n'y a toujours rien à afficher, comme un nouveau compte Evernote ou Dropbox.
• Utilisateur effacé – Se produit lorsque les utilisateurs effectuent des actions telles que l'effacement de leur boîte de réception ou de leur liste de tâches, et que le résultat est un écran vide.
• Erreurs - Celles-ci se produisent lorsque quelque chose ne va pas ou lorsqu'il y a des problèmes tels qu'un téléphone portable se déconnecte en raison de problèmes de réseau.
• Aucun résultat/Aucune donnée – Se produit lorsqu'il n'y a rien à afficher. Cela peut se produire si quelqu'un effectue une recherche et que la requête est vide ou qu'il n'y a pas de données disponibles à afficher (lors du filtrage d'une plage de dates sans données, par exemple).

Alors que la conception de l'état vide reçoit plus d'attention, les concepteurs UX constatent qu'il y a des résultats bénéfiques à les utiliser, à la fois du point de vue de l'entreprise et de l'expérience utilisateur.

Les utilisateurs essaient de nombreuses applications, mais décident lesquelles ils veulent "arrêter d'utiliser" dans les 3 à 7 premiers jours. Pour les applications "décentes", la majorité des utilisateurs retenus pendant 7 jours restent beaucoup plus longtemps. La clé du succès est de rendre les utilisateurs accros au cours de cette première période critique de 3 à 7 jours. – Ankit Jain

Les avantages de l'utilisation d'états vides bien conçus

Concevoir des écrans d'état vides bien pensés et utiles peut aider à stimuler l'engagement du produit, ravir les utilisateurs et réduire le taux de désabonnement. Cela réduit les risques de perdre des utilisateurs au profit de produits concurrents, les laissant ainsi frustrés ou perdus.

Dans son livre, What Customers Really Want , Scott McKain énonce six principes directeurs d'une expérience client exceptionnelle.

Il écrit que les clients veulent :

1. Une expérience convaincante
2. Une attention personnelle
3. Loyauté réciproque
4. Différenciation
5. Coordination
6. Innovation

Lorsqu'ils sont appliqués à la conception d'états vides, ces principes peuvent être très avantageux pour une entreprise, par exemple, une augmentation de la satisfaction du produit et la réduction des taux d'abandon.

Voici trois domaines supplémentaires qui peuvent également bénéficier d'une bonne conception de l'état vide :

• Intégration des utilisateurs - Fournit une opportunité de renforcer la confiance et l'utilisation continue du produit en plus d'une expérience utilisateur améliorée.
• Développement de la marque - Génère une notoriété et promeut l'entreprise afin de renforcer le capital de la marque.
• Personnalisation - Peut être ludique, amusant, sérieux ou dynamique dans divers états d'utilisation ; crée une touche personnelle.

Les avantages d'états vides bien conçus ne peuvent être sous-estimés. Ils contribuent non seulement à une expérience client convaincante, mais comme les fenêtres d'opportunité pour garder les clients satisfaits et engagés deviennent de plus en plus courtes, ils sont tout simplement de bonnes affaires.

Shunned : les écrans oubliés de l'UX Design

Puisqu'il y a des résultats positifs apparents à des états vides bien conçus, pourquoi sont-ils ignorés en premier lieu ?

Premièrement, il y a très peu de situations d'état vides qui se produisent par rapport au nombre total d'écrans dans une application, un produit ou un site Web, elles sont donc souvent négligées car elles ne sont pas considérées comme une priorité, et les concepteurs ont tendance à concentrer leurs efforts sur les parties les plus visibles d'un dessin.

Deuxièmement, avec seulement 2 à 5 % d'utilisateurs estimés voyant un état vide, ce n'est pas toujours une utilisation économique ou pratique du temps d'un concepteur.

Enfin, les états vides n'étaient pas toujours bien compris en termes d'endroit où ils se produisent et de ce qu'ils font, ils ont donc pris le pas sur les écrans et les pages les plus populaires.

Que se passe-t-il lorsque les états vides sont ignorés ?

Les écrans vides sans conseils peuvent entraîner de la confusion, de l'incertitude et de la déception. Cela peut entraîner des taux d'abandon plus élevés et une satisfaction globale moindre à l'égard du produit.

Heureusement, les choses commencent à changer à mesure que les avantages et les opportunités de concevoir de bons écrans d'état vides deviennent une partie plus importante et prioritaire du processus de conception UX.

Comment remplir un écran vide avec un but

Voici quelques bonnes pratiques UX pour vous assurer que les écrans vides sont conçus pour être utiles, utiles et informatifs.

Empathie. Ajouter de la surprise et du plaisir , de l'émotion et de la personnalité sont autant de façons dont les concepteurs UX ont créé de meilleures expériences, même dans les coins les plus sombres d'un produit. Pour les écrans vides, la messagerie empathique ajoute de la variété et crée une expérience plus engageante et personnalisée.

Imagerie. Il existe un principe de conception appelé effet biophilie. Il s'agit d'un état de stress réduit et d'amélioration de la concentration qui résulte des vues sur la nature. L'ajout d'images scéniques (l'arrière-plan d'un écran d'erreur d'état vide, par exemple) peut se traduire par une expérience utilisateur plus agréable.

Conseils utiles. Selon le type de produit, des états vides peuvent être utilisés pour guider l'utilisateur. Un bon exemple de ceci est une application de gestion de projet. Avec un nouveau compte, il n'y a pas encore de projets en jeu, offrant une excellente opportunité potentielle d'aider l'utilisateur à démarrer rapidement, réduisant ainsi les risques d'abandon. Voici un exemple:

Contenu de démarrage. Il y a beaucoup d'écrans qui restent vides assez longtemps pour que l'utilisateur soit frustré et parte. Pour certains produits, fournir un bon contenu de démarrage les aide à visualiser ce qui se passe et ce qu'ils peuvent faire ensuite.

Voici un exemple d'écran d'état vide avec un contenu de démarrage :

Fournir une étape d'action. Avec certains produits, nous n'avons pas besoin de fournir des conseils ou de remplir l'écran avec du contenu, car cela n'aurait aucun sens. Dans ces cas, les concepteurs pourraient simplement fournir une étape d'action.

Cependant, il est préférable de limiter les actions au minimum. La loi de Hick stipule que "le temps qu'il faut pour prendre une décision augmente avec le nombre et la complexité des choix". Ainsi, les utilisateurs seront probablement plus rapides à agir lorsque les appels à l'action seront limités à un ou deux au maximum. Voici un excellent exemple :

Un autre bon exemple est Instagram. Lorsque les gens sont nouveaux sur la plateforme, ils ne suivent encore personne (et personne ne les suit). Il serait facile de se concentrer sur toutes les fonctionnalités intéressantes d'Instagram, mais un bon écran d'état vide, par exemple, pourrait leur donner la possibilité "d'ajouter des personnes à suivre".

Meilleures pratiques UX de l'état vide - Depuis le terrain

Toptal dispose de talents indépendants mondiaux de premier plan dans tous les domaines du design. Voici ce que quelques concepteurs Toptal UX avaient à dire sur leurs expériences de conception d'écrans d'état vides.

Designer Toptal: Tamara Olson

Discipline de conception : conception UX

Quelles sont les bonnes conceptions d'états vides sur lesquelles vous avez travaillé ou que vous avez vues ?

Les bonnes conceptions d'états vides modernes que j'ai observées sont généralement en deux parties d'instruction, une partie de plaisir. Si une interface utilisateur est vide, c'est le travail du concepteur UX d'aider les utilisateurs à comprendre ce qui se passera dans l'espace lorsqu'il sera rempli. Si c'est le travail de l'utilisateur de le remplir, la messagerie doit inclure des instructions sur la manière de procéder. (Par exemple, un tableau "Classes" vide dans un produit edtech peut inclure une copie informant les enseignants de la manière de créer leur première classe.)

Je vois également de nombreuses applications utiliser l'immobilier généreux des États vides comme une opportunité d'injecter du plaisir et une personnalité de marque ludique. Vous pourriez dire qu'il s'agit de la version d'application Web de la page 404 d'un site Web.

Avez-vous déjà oublié des états vides, et si oui, pourquoi ?

Bien sûr, c'est un piège facile. Lorsque nous sommes visionnaires, nous imaginons des applications et des produits lorsqu'ils sont en plein vol, remplis de contenu et d'utilisateurs. Lorsque je travaillais chez Google, un vice-président du produit a fait un commentaire selon lequel les produits sont comme des vols d'avion ; la plupart des problèmes surviennent lors des décollages et des atterrissages.

Lorsqu'un utilisateur entre pour la première fois dans votre produit, les états vides sont inévitables et nous ne voulons pas qu'il se retrouve dans une impasse avant même d'avoir commencé. J'encourage les concepteurs juniors à concevoir un ensemble distinct de conceptions linéaires montrant le flux d'intégration de l'utilisateur.

Avez-vous vu des clients réussir à utiliser des états vides ? Si oui, de quelles manières ?

J'ai récemment travaillé avec National Novel Writing Month sur la refonte de leur plate-forme, qui permet aux utilisateurs de définir et de suivre des objectifs en fonction de leurs progrès en écriture. Notre équipe produit s'est bien amusée avec les états vides ; c'était une merveilleuse façon de présenter et de taquiner les fonctionnalités et la personnalité de la plate-forme, et d'inciter les utilisateurs à commencer à consigner leurs progrès.

Quelle est l'utilisation la plus réussie d'un état vide que vous ayez expérimentée ?

En tant que "zéro inboxeur", je suis constamment ravi par l'illustration de la boîte de réception vide de l'application Gmail : une personne sous un parapluie, lisant un livre sous le soleil, avec la légende "Vous avez terminé !" Cela enfreint techniquement la règle que j'ai mentionnée sur les états vides nécessitant un appel à l'action, et pourtant, ce n'est pas le cas, car le CTA subliminal est "Lâchez votre e-mail et allez profiter de votre vie". J'aime ça.

Toptal Concepteur: Michael Clingerman

Discipline de conception : Conception de produits SaaS

Si vous avez conçu pour des états vides, quels types voyez-vous le plus fréquemment ?

Les états vides que je connais le mieux sont les états 404/error et les états effacés par l'utilisateur.

Avez-vous vu des clients réussir à utiliser des états vides ? Si oui, de quelles manières ?

Oui. J'ai vu des cas où des écrans d'état vides faisaient partie d'une stratégie de contenu et de communication attrayante et agréable. Il existe d'autres cas où les clients les ont utilisés pour construire leur personnalité de marque.

Quelle est l'utilisation la plus réussie d'un état vide que vous ayez expérimentée ?

J'ai toujours aimé l'utilisation par Dropbox de styles illustratifs simples et monochromes pour établir la personnalité, le ton et le caractère de la marque de l'entreprise.

Conclusion

Il est facile d'ignorer les états vides (ou les écrans vides) dans la conception UX, car ils se produisent rarement et ne sont pas toujours bien compris. Cependant, les avantages de leur inclusion sont sous-estimés car ils améliorent l'expérience utilisateur et aident à créer un produit plus cohérent.

• • •

Pour en savoir plus, rendez-vous sur le blog Toptal Design

• Meilleures pratiques de conception d'interface utilisateur et erreurs courantes
• Mobile UX Design - Meilleures pratiques, contraintes et collaboration avec les développeurs
• Principes heuristiques pour les interfaces mobiles
• Influence avec le design - Un guide de la couleur et des émotions
• Les principes de conception et leur importance