Share
Les états vides sont souvent une réflexion après coup pour la plupart des concepteurs.
La page d'accueil et le panier de paiement, par exemple, pourraient constituer la fonctionnalité la plus prioritaire de votre carnet de commandes. Mais qu'en est-il des états vides de ces fonctionnalités? Comment devraient-ils être abordés?
L'article suivant n'est pas exhaustif, ou un "doit faire" par tout moyen. Au lieu de cela, il décrit trois types courants d'état vide:
Nous allons examiner un bon exemple de chacun, expliquer pourquoi cela fonctionne et comment vous pouvez mettre en œuvre des idées similaires, ou les développer en fonction de votre situation unique..
L'écran suivant provient de l'application BBCNews. C'est un exemple d'écran où l'utilisateur utilise l'application pour la première fois et a besoin de quelques instructions pour se lancer..
C'est efficace à plusieurs niveaux:
Il offre une explication claire. Cet état vide explique ce que fait la fonctionnalité actuelle et vous fournit un bouton indiquant la marche à suivre. Dans ce cas, l'utilisateur doit ajouter des sujets pour créer son propre flux de nouvelles personnel..
Il fournit un lien pour remplir cette fonctionnalité. Le bouton, qui amène l’utilisateur à la page où il peut renseigner l’écran donné, est une fonction pratique. Cela évite à l'utilisateur de devoir naviguer chez lui et d'essayer de trouver l'écran par d'autres moyens.
Alors, comment pourriez-vous mettre en œuvre quelque chose de similaire vous-même?
Fournir une séquence d'embarquement. Si l'utilisateur utilise votre application Web pour la première fois, vous pouvez envisager une visite virtuelle pour l'aider à devenir plus rapide. Cependant, gardez à l'esprit que cela peut frustrer l'expert et l'utilisateur intermédiaire. Envisagez de ne l'afficher qu'une seule fois, puis de diffuser les informations dans votre section d'aide..
La page suivante est la liste de souhaits de Apple iTunes Store. C'est un exemple de page où l'utilisateur n'a rien ou a tout effacé de sa liste.
Qu'est-ce qui rend cette page vide efficace??
Quelque chose c'est mieux que rien. Cette liste de souhaits ne produit pas simplement rien. Cela indique à l'utilisateur qu'il doit ajouter un élément à la liste. L'icône est grande et audacieuse, mais subtile. Votre état vide devrait attirer l’attention des utilisateurs (vous n’avez rien ici!), Mais il doit également indiquer un vide, par exemple. en utilisant des couleurs en sourdine, etc..
Direct et droit au but. Il est tentant de mettre du texte fluff dans votre état vide… peut-être une citation de quelqu'un. Cependant, la plupart du temps, la meilleure option consiste simplement à être direct et précis, comme indiqué 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, que devrions-nous en apprendre??
Donnez un exemple. Vous pouvez également penser à ajouter un exemple de ce à quoi pourrait ressembler un état rempli. C’est probablement plus pertinent pour les ordinateurs de bureau que pour les interfaces mobiles, car vous avez un peu plus d’espace sur l’écran pour travailler avec.
La page d'erreur suivante fait partie du navigateur Google Chrome. C'est un exemple de situation dans laquelle l'utilisateur obtient autre chose que l'état souhaité. Dans ce cas, ils ne peuvent pas se connecter à Internet.
Ce graphique est devenu familier pour des millions de personnes, mais ce qui le rend efficace?
Il convient à la situation. Cela fonctionne parce que l'icône est subtile et appropriée à la gravité du problème. Il est courant de faire une croix ou un «X» et c'est bien; c'est un bon moyen d'attirer l'attention de quelqu'un, mais ici, vous voulez simplement informer l'utilisateur que quelque chose ne va pas. Vous n'avez pas besoin de crier dessus avec une icône ou un message en haut.
Il offre plus d'informations. Vous ne devriez jamais laisser vos utilisateurs incertain de ce qu'il faut faire ensuite. Dans ce cas, Chrome a fourni une Plus bouton pour aider à résoudre le problème. Dans la plupart des cas, l'utilisateur sera probablement conscient du fait qu'il doit activer son réseau Wi-Fi, réinitialiser son modem ou appeler son fournisseur d'accès Internet, mais cela ajoute de la valeur aux utilisateurs qui ont besoin d'informations supplémentaires..
Que diriez-vous d'appliquer ceci vous-même?
Considérez à quel point vos messages d'erreur sont critiques. Quelle est la gravité de l'erreur? Si cela est essentiel pour l'utilisateur, vous devrez vraiment attirer son attention avec des couleurs vives et une hiérarchie claire. Considérez le langage utilisé et faites preuve d'empathie pour la position de l'utilisateur. Une icône amusante qui évite une situation frustrante pourrait aggraver les choses!
Cet article vous a fourni un bon cadre de départ à prendre en compte lorsque vous examinez des états vides. Déterminez le type d'état vide que vous concevez et les moyens les plus appropriés de mettre en page la page en fonction de la situation de vos utilisateurs et de leurs objectifs..
Quelques bonnes règles de base comprennent:
Accentsconagua