Quelle est la couleur la plus courante pour indiquer que le champ de saisie est désactivé?
en parcourant différentes références sur la conception des champs de saisie, j'ai réalisé que les gens avaient tendance à faire volte-face avec un fond gris ou blanc pour indiquer si le champ de saisie était activé ou désactivé.
Quelqu'un sait-il où je peux trouver plus d'informations à ce sujet?
La terminologie correcte est Greyout .
Cela indique moins d'importance, de pertinence ou de priorité ou un changement de statut tel qu'un élément désactivé ou inaccessible.
Définition par Oxford Dictionary :
nom
Panne partielle ou naissante subie par une personne soumise à de fortes forces d'accélération, en particulier pendant le vol; (plus généralement) diminution momentanée de la vision ou de la conscience, ou perte partielle de mémoire.
Origine
années 40; première utilisation trouvée dans The Richmond Times-Dispatch. De à grisé, après black-out.
Donc, nous pouvons en déduire que le grisé vient avant la panne, la fin .
Si vous utilisez un framework, il devrait avoir le modèle défini par défaut. Il est courant d'utiliser du gris, assombrissant souvent l'arrière-plan et le texte.
Même si vous n'implémentez pas de framework, vous pouvez incorporer ses modèles dans votre application.
Bootstrap
Leur section formulaires affiche les éléments désactivés:
Conception matérielle
Ils ont quelques styles différents de entrées , alors regardez ce qui pourrait correspondre à votre application. Voici la section Champs de texte soulignés :
Et leur champs de texte remplis:
Les champs de saisie désactivés sont généralement gris (texte gris et fond gris). Mais vous devez être prudent avec le rapport de contraste et d'autres problèmes d'accessibilité, comme travailler avec des lecteurs d'écran.
L'article les boutons désactivés n'ont pas besoin d'être nul! , bien qu'il s'agisse de boutons, contient quelques conseils intéressants qui peuvent être appliqués pour améliorer les champs désactivés (je les ai modifiés pour les appliquer aux champs):
- Obtenez un meilleur contraste en utilisant une police plus grande et/ou des couleurs plus sombres;
- Donnez aux technologies d'assistance, comme les lecteurs d'écran, des informations sur le terrain, car elles ne liront pas les informations dans le champ désactivé (elles sont souvent ignorées).
- Donnez des informations aux utilisateurs lorsqu'ils tapotent, survolent ou cliquent sur le champ désactivé. Ou donnez-leur un autre indice (par exemple via une info-bulle). Par exemple, vous pouvez leur expliquer pourquoi le champ est désactivé.
Bien que je sois d'accord avec à peu près tout le monde, vous pouvez faire des choses intéressantes non seulement avec la couleur, mais avec contraste:
Un niveau de contraste plus faible fera disparaître les éléments, comme le ferait un gris avec du noir sur fond blanc. À mon avis, cela rend l'élément d'interface utilisateur flou. Gardez à l'esprit que cette solution n'est peut-être pas la plus accessible, c'est pourquoi vous devrez peut-être envisager l'utilisation de thèmes.
De plus, vous pouvez envisager de masquer complètement l'élément. En ce qui concerne l'UX, cela peut aider à réduire la charge cognitive de vos utilisateurs, les aidant à être plus productifs avec votre application. Attention, il peut y avoir des inconvénients s'il est mal appliqué. J'ai vu des applications qui font réapparaître le contenu trop tard et c'est assez choquant.
Vous pouvez en savoir plus sur la deuxième approche en lisant sur The Motion Guide for Material Design
Quel est le plus commun couleur
Je dirais que le plus courant est le navigateur par défaut standard:
Chrome v73
Firefox v66
en utilisant le html suivant:
<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" value="normal">
<input disabled type="text" value="disabled">
</body>
</html>
Navigateurs plus anciens
Cet article de blog sur Styling Disabled Form Fields a un bon ensemble d'exemples standardisés dans divers navigateurs plus anciens.
Accessibilité
Quelqu'un sait-il où je peux trouver plus d'informations à ce sujet?
Mais cela vaut la peine de considérer les exigences d'accessibilité des champs désactivés, avec la première question si vous avez même besoin du champ.
Ce problème d'accessibilité au github w3c a une bonne discussion sur les différents aspects des entrées désactivées et a un bon exemple de remplacement d'une entrée désactivée par du texte, ce qui signifie que vous pouvez conserver le contraste des couleurs. Notez le Appuyez sur au moins 4 autres pour continuer bouton.
Avant:
Après:
Les normes sont liées à la couleur et à la bordure, pas à l'arrière-plan. Les éléments désactivés sont généralement dessinés avec du texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas être focalisé.
Certains concepteurs/développeurs utilisent une opacité plus faible pour les arrière-plans/textes pour mettre en évidence cet état car parfois les boutons sont des entrées avec type = "submit". De plus, si dans l'état normal, les entrées ont également un arrière-plan gris, avoir un arrière-plan gris dans l'état désactivé ne fait pas beaucoup de différence, mais une opacité inférieure pourrait aider davantage.