Quelle devrait être l'option par défaut d'une liste déroulante requise?
Étant donné qu'il n'y a pas de valeur logique par défaut animal dans la liste des animaux ci-dessous, quelle devrait être la "valeur par défaut" ci-dessous, selon les meilleures pratiques?
<label for="animal">Animal (required):</label>
<select name="animal">
<option value="">Default Value</option>
<option value="0">Cat</option>
<option value="1">Dog</option>
<option value="2">Horse</option>
<option value="3">Pig</option>
<option value="4">Sheep</option>
</select>
Une valeur vide, <option value=""></option>?
Quelque chose d'irritant visuellement, <option value="">***CHOOSE ANIMAL***</option>?
Quelque chose qui s'intègre mais fournit des instructions, <option value="">Select an Animal</option>?
Quelque chose d'autre entièrement?
Je ne suis respectueusement pas d'accord avec la réponse de Michael. Je ne peux pas parler des interfaces graphiques de bureau, mais dans les formulaires Web, vous voulez éviter d'avoir une valeur par défaut, sauf si vous pensez qu'une grande partie de votre utilisateur (peut-être 90% +) sélectionnera cette valeur. Surtout s'il s'agit d'un champ obligatoire.
Pourquoi? Parce que vous risquez d'introduire des erreurs parce que les gens parcourent rapidement les formulaires en ligne - ne présumez pas qu'ils prendront le temps d'analyser tous les choix et peuvent sauter allègrement par quelque chose qui a déjà une valeur. S'il s'agit d'une valeur requise, je suppose qu'il est important de faire la différence entre ce qu'ils avaient l'intention d'entrer et la valeur par défaut.
Dans votre cas particulier, je vous suggère d'utiliser l'option du milieu - <option value="">Select...</option> ou quelque chose de similaire. Pas besoin de dire "Sélectionnez un animal" lorsque votre étiquette est là.
Ensuite, vous DEVEZ valider via javascript, etc. pour que le formulaire ne soit pas soumis si la valeur est vide. Cela évite d'obtenir des résultats kludgy et donne à l'utilisateur un retour sur ce qu'il a manqué.
Et bien sûr, il existe des centaines de scripts pour effectuer des actions plus sophistiquées comme supprimer l'option par défaut une fois que quelque chose est sélectionné.
C'est une question à laquelle je n'ai jamais trouvé la "bonne" réponse. Le laisser vide semble aussi valable que d'en faire une commande "sélectionnez-en un". En fin de compte, ce n'est peut-être pas un problème majeur.
Je pense cependant qu'il est logique de ne pas le définir par défaut sur une sélection valide.
Si je devais trouver des arguments pour les deux options:
- vide = facile à scanner le formulaire pour voir ce que vous n'avez pas rempli.
- command = indique clairement que vous devez faire quelque chose.
Sur cette base, peut-être une solution hybride où vous avez la commande par défaut, mais la grisez visuellement via JavaScript/CSS. Cela lui permet d'être visiblement différent d'un élément sélectionné, mais pas laissé vide.
Une valeur vide n'est vraiment pas une bonne idée - elle ne fournit pas vraiment un indice visuel, et peut même impliquer à certains utilisateurs que le champ n'est pas obligatoire. Dire quelque chose comme "Sélectionnez un animal" avec le même type de repère visuel que vous utilisez pour d'autres champs obligatoires (le plus courant étant l'astérisque rouge) devrait aider à transmettre le point.
La valeur par défaut doit être une valeur légitime. C'est la pratique dans presque toutes les interfaces graphiques de bureau, et cela a bien fonctionné pendant des décennies. Les directives d'interaction Windows 7 UX indiquent spécifiquement "Sélectionnez l'option par défaut la plus sûre (pour éviter la perte de données ou l'accès au système) et la plus sécurisée. Si la sûreté et la sécurité ne sont pas des facteurs, sélectionnez l'option la plus probable ou la plus pratique .... N'utilisez pas les invites [dans la liste déroulante] juste pour demander aux utilisateurs de sélectionner quelque chose dans la liste "(p88-89).
Je ne vois aucune raison pour qu'une application Web soit différente. La valeur par défaut à une non-valeur est un kludge qui va à l'encontre de la conception et de la mise en œuvre prévue des listes déroulantes, une assez bonne indication qu'il s'agit d'une mauvaise utilisation.
La valeur par défaut doit être:
Premièrement, une valeur non dangereuse, qui est la moins susceptible de causer des pertes ou des dommages irrécupérables à l'utilisateur ou à ses biens. Si cette liste déroulante désigne l'animal pour délivrer un message à l'utilisateur, la valeur par défaut ne doit pas être Hungry Tiger.
Deuxièmement, la valeur la plus couramment choisie. Même si seulement 20,1% de vos utilisateurs choisissent "Chien", cela représente tout de même 20,1% de vos utilisateurs qui n'auront pas à faire quelques clics, sans frais pour les 79,9% restants de vos utilisateurs.
Troisièmement, le meilleur exemple de l'ensemble. La liste déroulante par défaut sert à illustrer les types de valeurs que l'utilisateur peut choisir. Dans votre cas, il semble que ce soit la catégorie des "animaux de la ferme", donc je serais enclin à choisir "Cheval". "Chien", en revanche, peut suggérer "animal de compagnie" plus que "animal de ferme".
Je ne vois aucun intérêt à faire de la valeur par défaut une instruction. Le fait qu'il y ait une liste déroulante fait qu'il est assez évident que les utilisateurs doivent sélectionner une valeur. Un exemple de valeur par défaut est plus informatif.
Je soupçonne que de nombreux concepteurs Web pensent que vous obtenez des données plus précises si vous forcez l'utilisateur à choisir explicitement une option. Bien qu'il puisse y avoir des situations où c'est le cas, je n'en ai vu aucune preuve. Je soupçonne que la valeur par défaut d'une valeur légitime rend généralement plus probable que vous obteniez des données précises. En libérant certains de vos utilisateurs de la sélection de la valeur, vous évitez les glissades possibles que les utilisateurs pourraient faire, ou, plus probablement sur un formulaire Web, la sélection de toute ancienne valeur juste pour satisfaire l'entrée requise.
Je pense en fait ne liste déroulante est de toute façon une mauvaise utilisation. Cette question pointe sur l'un des problèmes, qu'il n'est pas si clair que faire avec elle. En partie un problème de la façon dont les navigateurs affichent une telle liste, mais surtout votre problème selon vos utilisateurs.
Mieux vaut le remplacer par:
- une zone de texte libre alimentée par une recherche javascript parmi les valeurs autorisées, comme lors de l'ajout de balises;
- pour moins d'options: boutons radio (ou radio-like)
- des boîtes à boutons que vous pouvez activer/désactiver, pour des choix qui ne sont pas si noirs/blancs; "votre animal préféré" pourrait être multiple.
- juste du texte libre complètement, si vous découvrez que ce n'est pas obligatoire après tout
Je suis tombé sur cette information de X Movement.com
Comme les autres éléments du formulaire, un menu de sélection doit toujours avoir une étiquette à côté. Cependant, vous devriez également avoir une étiquette dans le menu de sélection qui indique aux utilisateurs ce qu'ils sélectionnent. L'étiquette doit décrire clairement et distinctement le groupe d'options.
Une étiquette générique telle que "Veuillez sélectionner" n'est pas suffisamment claire pour que les utilisateurs d'accessibilité qui utilisent des lecteurs d'écran remplissent des formulaires. L'ajout d'une étiquette à l'extérieur et à l'intérieur du menu de sélection permet à tous les utilisateurs d'agir plus rapidement sans aucune confusion.
Dans l'ensemble, il peut ne pas y avoir de solution 100% correcte, mais uniquement ce qui permet à l'utilisateur de terminer sa tâche avec le moins de chances possible que l'utilisateur ait une erreur.
J'utilise un indice visuel que le champ nécessite une entrée. Quelque chose comme une bordure rouge avec un point d'exclamation rouge avec une info-bulle lorsque vous survolez la souris.
-Edit- Comme Peter le fait remarquer dans un commentaire, ce n'est vraiment pas une bonne idée car cela dira à l'utilisateur qu'il a fait quelque chose de mal avant d'avoir fait quoi que ce soit. Je suppose qu'un autre indice visuel comme un astérisque ou quelque chose pour indiquer que le champ est requis, même avec une option par défaut vide, est plus approprié.