Expérience utilisateur : sept bonnes pratiques d'état vide pour la conception UX

Semblables à une carte, les états vides (instructions sur une page Web ou dans un logiciel) guident l'utilisateur lors d'un voyage à travers votre site Web ou votre logiciel. Imaginez que vous essayez de planifier un voyage en voiture dans un endroit où vous n'êtes jamais allé tout en utilisant une carte qui manque de gros éléments d'information. Les états vides sont les écrans qui remplissent ces blancs. Avec une conception et un placement réfléchis, ces écrans peuvent faire la différence entre un utilisateur heureux et un utilisateur frustré qui abandonne votre site à mi-chemin.

Selon IBM, chaque dollar investi dans la facilité d'utilisation rapporte 10 à 100 $, déclare Megan Hartman, apprentie chez UXbeginner. Ce retour sur investissement n'est qu'une des raisons de passer plus de temps à décider quelle plate-forme de commerce électronique convient le mieux à votre entreprise et à vos clients. L'expérience utilisateur (UX) devient de plus en plus importante pour la satisfaction, l'engagement, l'acquisition et la fidélisation des clients. Selon la convivialité de votre plate-forme ou de vos produits, l'UX peut faire ou défaire votre liste de clients.

Les états vides sont un concept important pour ceux qui aident les entreprises locales à passer au commerce électronique et aux solutions numériques. Une excellente expérience utilisateur est synonyme d'une excellente première impression ; il fait partie intégrante de la relation entre une entreprise locale et un expert local de confiance. Des états vides bien conçus garantissent que vos solutions et votre site Web professionnel ont un aspect professionnel. Cela aide à donner aux clients potentiels une première impression positive de votre entreprise, stimulant la confiance dans votre capacité à les guider.

L'utilisation appropriée des états vides peut vous aider à fidéliser davantage de clients en offrant une expérience utilisateur fluide.

« Sans états vides, l'utilisateur ne sait pas quoi faire ensuite et il peut facilement se perdre dans un logiciel ou sur un site Web. Lorsqu'ils ne savent pas quoi faire, ils déposeront probablement votre site Web et iront sur un autre. Les états vides atténuent cette chute et permettent à l'utilisateur de continuer le voyage que vous espérez qu'il suive », explique Loni Goff, designer, Vendasta .

Cet élément de conception peut avoir un impact critique sur la façon dont un utilisateur interagit avec votre site. En reconnaissant l'importance de l'expérience utilisateur, les concepteurs Vendasta UX ajoutent continuellement plus d'états vides aux points critiques de la plate-forme de commerce électronique de bout en bout. Les plateformes de médias sociaux comme Facebook et Snapchat utilisent des écrans d'état vides pour inviter à ajouter des « amis » à votre réseau social. Les invites favorisent la satisfaction et la fidélisation des clients, car elles maintiennent les utilisateurs actifs et engagés.

États vides et expérience utilisateur

Les états vides aident les utilisateurs à atteindre leurs objectifs dans le logiciel ou sur un site Web. Ils peuvent inclure l'orientation des nouveaux utilisateurs vers des modèles qui les aideront à démarrer avec le logiciel qu'ils utilisent. Des états vides peuvent se produire lorsqu'il y a une erreur, qu'une URL incorrecte est recherchée ou qu'une ancienne URL est utilisée.

Ils peuvent être utilisés pour collecter des informations marketing en exigeant qu'un formulaire soit rempli avant que la page suivante ne soit remplie. Des entreprises comme Hubspot utilisent cet état vide de remplissage de formulaire lorsque les utilisateurs souhaitent accéder à certains contenus.

Ces écrans sont utilisés pour augmenter l'engagement, incitant les utilisateurs à participer à la prochaine étape que le concepteur souhaite qu'ils franchissent. Ils peuvent également être utilisés pour expliquer pourquoi quelque chose sur un site Web ne répond pas. Yelp utilise un écran d'état vide qui a un visuel de construction intelligemment associé à un texte amusant qui ajoute de l'humour à une circonstance frustrante.

Bonnes pratiques relatives à l'état vide

1. Guider l'expérience utilisateur

Profitez-en pour relayer l'information à l'utilisateur. Cela peut inclure la prochaine étape à suivre, un avertissement concernant un lien rompu ou tout autre élément permettant d'éviter une mauvaise expérience utilisateur. Cette interaction guidée avec l'utilisateur peut vraiment influencer sa décision finale de rester sur un site Web.

Voir l'exemple ci-dessous de Skyscanner.

Source de l'image

2. Choisissez vos mots avec soin

Formuler le bon message est extrêmement important dans un logiciel à état vide. Le message doit être clair afin qu'il ne soit pas facilement mal interprété. L'explication écrite doit aider l'utilisateur à comprendre ce qu'il doit faire ensuite. Cela peut aller de la création d'un profil à l'ajout d'autres utilisateurs à un réseau. Ce guide écrit doit être concis afin que l'utilisateur puisse facilement passer à la prochaine étape appropriée.

3. Utilisez du contenu visuel

Engagez-vous avec l'utilisateur au-delà des mots avec un contenu visuel bien conçu. Cette opportunité de branding doit inclure une image qui correspond au texte. Assurez-vous que la création n'est pas trop voyante ou trop grande et qu'il s'agit d'une représentation visuelle du texte à l'état vide. L'ajout d'une image rend l'état vide plus professionnel et attrayant.

4. Inclure un bouton

Les boutons sont une invite claire pour guider l'utilisateur vers l'endroit où le concepteur veut les emmener. Cette expérience technique peut emmener les utilisateurs n'importe où sur le site. Il peut leur demander d'ajouter des contacts à une liste de clients ou d'ajouter une plate-forme sociale à un logiciel, comme dans le rapport instantané Vendasta . Ce rapport est un outil automatisé de veille commerciale qui extrait une évaluation des besoins marketing des prospects à partir des informations disponibles en ligne.

Voir la progression de l'état vide de Dropbox ci-dessous, y compris un texte réfléchi, une image correspondante et un bouton.

Source de l'image

5. Invitez l'utilisateur à cliquer quelque part sur la page

Cela peut être utile lorsque l'utilisateur commence tout juste sur votre site Web ou dans le logiciel. Incluez une brève description et des flèches pointant vers quelques-uns des boutons importants situés à l'écran.

Source de l'image

6. Lien retour vers le contenu

Ajoutez un backlink dans un état vide qui renvoie à un élément de contenu d'actualité. Cette meilleure pratique est une bonne pratique à suivre si une bibliothèque de contenu est facilement disponible sur le site Web - tout ce qui donne des informations sur votre site Web qui pourraient être utiles à un utilisateur. Cela peut inclure un lien vers une démo, un blog de haut niveau ou un article d'information.

7. S'assurer que les concepteurs et les développeurs entretiennent de bonnes relations de travail

Dans le cas où un état vide résout un problème technique, comme le classique « Erreur 404 », cela signifie généralement qu'il y a une énorme déconnexion dans la communication entre les développeurs et les concepteurs. Ces messages inutiles n'ont probablement pas été vérifiés par un concepteur et perturbent l'expérience utilisateur.

Les plats à emporter

États vides :

• Augmenter l'acquisition de clients
• Augmenter la fidélisation de la clientèle
• Réduire les taux de rebond du site Web
• Augmenter l'engagement client

Non seulement les états vides sont une feuille de route au sein des sites Web et des logiciels, mais ils indiquent également à l'utilisateur l'avantage de suivre les étapes suivantes.

Des outils tels que le rapport instantané utilisent des états vides pour vous aider à augmenter l'acquisition de clients en évaluant les besoins en marketing numérique des prospects. Par exemple, vous pourrez voir leurs performances dans les listes, les avis, les médias sociaux, les sites Web, la publicité numérique, le référencement et le commerce électronique, et les états vides indiqueront les prochaines étapes.