web-dev-qa-db-fra.com

Liste déroulante: espace réservé ou vide

Quel est le meilleur pour l'état "non sélectionné"?

A) Espace réservé

Lors des tests d'utilisabilité, avec cette option, les gens omettent ce champ. Ils semblent penser que ce n'est pas obligatoire ou que c'est déjà choisi.

enter image description here

B) Vide

Je n'ai pas encore eu de tests d'utilisabilité à ce sujet. L'espace vide blanc semble provoquer le besoin urgent de le remplir. Quels sont les inconvénients réels de cela?

Dropdown with blank state

Autres considérations

  • Il existe également d'autres options pour l'espace réservé, par exemple "Sélectionner ...", "---", "--- Sélectionner ---"
  • Peut-être que la couleur du texte des espaces réservés est importante? Il ne doit pas être trop sombre pour que vous puissiez voir que le champ est vide?
8
Maciej Sawicki

Conclusion après les tests

Après avoir essayé les différentes options mentionnées dans la question et les avoir essayées pendant les tests d'utilisabilité, je pense que le meilleur compromis est d'utiliser un espace réservé très léger avec "..." à la et avec un texte d'appel à l'action très court comme "Veuillez sélectionner ... "

enter image description here

Pourquoi?

  • Un texte très léger donne toujours l'impression que le champ est vide, mais plus agréable visuellement que le champ déroulant vide. Il n'est pas vraiment super important que le contraste soit accessible, car le texte à l'intérieur n'est pas crucial à lire, mieux vaut le rendre trop clair que trop sombre.
  • Le texte doit être court pour que le champ soit vide
  • Les "..." points de suspension à la fin ajoutent au sentiment que la liste déroulante est obligatoire
  • Le texte doit commencer par un mot qui appelle une action, comme "Choisir ..."
  • N'ajoutez pas de tirets à comme préfixe pour l'espace réservé car il ne communique rien

Espace réservé non répertorié en option

N'ajoutez pas d'espace réservé comme l'une des options de sélection possibles

enter image description here

1
Maciej Sawicki

Je crois NNGroup a un article mentionnant différents scénarios pour le texte d'espace réservé dans les champs de formulaire. Ce qui est bien, c'est que le contenu de NNGroup est également basé sur la recherche des utilisateurs et les tests d'utilisabilité. Une mise en garde cependant est que la recherche semble mentionner principalement les champs de texte et non les listes déroulantes, donc je ne suis pas certain de la façon dont la recherche s'appliquera à votre scénario. C'est le type de recherche le plus proche que j'ai réussi à trouver à ce sujet. Pour être sûr à 100%, je recommande d'effectuer des tests d'utilisabilité très légers et de voir si votre conception fonctionne ou non.

Voici 7 raisons, tirées de l'article ci-dessus, pour lesquelles les espaces réservés en tant qu'étiquettes ne doivent pas être utilisés lors du remplacement des étiquettes de champ:

  1. La disparition du texte de l'espace réservé pèse sur la mémoire à court terme des utilisateurs.
  2. Sans étiquettes, les utilisateurs ne peuvent pas vérifier leur travail avant de soumettre un formulaire.
  3. Lorsque des messages d'erreur se produisent, les utilisateurs ne savent pas comment résoudre le problème.
  4. Le texte d'espace réservé qui disparaît lorsque le curseur est placé dans un champ de formulaire est irritant pour les utilisateurs naviguant avec le clavier.
  5. Les champs contenant des éléments sont moins visibles.
  6. Les utilisateurs peuvent confondre un espace réservé avec des données qui ont été automatiquement remplies.
  7. Parfois, les utilisateurs doivent supprimer manuellement le texte de l'espace réservé.

Voici ce que le même article a à dire sur votre exemple spécifique, où le texte d'espace réservé est utilisé en plus des étiquettes.

Texte d'espace réservé en plus des étiquettes

L'utilisation de texte d'espace réservé en combinaison avec des étiquettes de formulaire est un pas dans la bonne direction. Les étiquettes en dehors des champs de formulaire rendent les informations essentielles visibles à tout moment, tandis que le texte d'espace réservé à l'intérieur des champs de formulaire est réservé pour des informations supplémentaires. Cependant, même lorsque vous utilisez des étiquettes, le fait de placer des conseils ou des instructions importants dans un champ de formulaire peut toujours causer les 7 problèmes mentionnés ci-dessus, mais avec moins de gravité. Si certains champs nécessitent une description supplémentaire essentielle pour remplir correctement le formulaire, il est préférable de placer ce texte en dehors du champ afin qu'il soit toujours visible.

Une solution à ce problème pourrait plutôt être d'avoir du texte à proximité du champ: Placeholder next to label and form field

5
Andreas Johansson

La couleur et le style de police peuvent distinguer un espace réservé ou du texte d'aide dans une zone vide. Vous pouvez rendre la couleur de police plus claire et utiliser Italique pour la distinguer de la valeur réelle. Il s'agit d'une directive standard et l'utilisateur ne sera pas confondu avec cela.

Voir les directives du bureau Windows pour le texte de l'interface utilisateur:

https://msdn.Microsoft.com/en-us/library/windows/desktop/dn742478.aspx

enter image description here

2
Saadia

Dropdowns devrait toujours avoir une valeur par défaut par opposition à un espace réservé. C'est à vous de décider quelle est cette valeur par défaut - une chaîne vide ou une étiquette demandant à l'utilisateur de sélectionner une autre valeur.

1
Vladimir Georgiev

En voyant que vous mettez un élément "--Select--" dans la zone de liste déroulante, il n'y a pas de valeur par défaut pour le champ, mais le champ lui-même est obligatoire.

J'ai eu l'idée suivante. Que se passe-t-il si vous restez en mettant l'élément "--Select--" affiché dans une couleur moins contrastée et l'attribut "désactivé" (il n'est donc pas possible de le sélectionner), mais lors de la sélection d'un autre élément, cet élément "--Select--" disparaîtrait? La seule possibilité de conserver cet élément serait d'ouvrir la zone de liste déroulante à l'aide du bouton "développer" et de la fermer de la même manière sans effectuer de sélection.

N'oubliez pas que cela aide énormément l'utilisateur à indiquer doucement que certains dossiers sont obligatoires et non encore remplis (soit la validation du formulaire en temps réel lorsque l'utilisateur fait défiler le formulaire ou la validation avant de le soumettre).

0
Mike