Signifiant à l'utilisateur que ce champ est modifiable
J'ai une grille qui contient un tas de données. Certains des champs sont modifiables et provoquent une publication mettant à jour les données. Quelles sont les meilleures façons de le montrer à l'utilisateur? Existe-t-il une meilleure pratique pour faire une distinction entre modifiable et non modifiable du point de vue de l'interface utilisateur?
Je garde généralement mes champs modifiables blancs et les champs non modifiables gris (ou les couleurs monochromes sinon les champs blancs, couleur claire: modifiable et couleur foncée: non modifiable).
Oui, il existe une meilleure pratique: faire en sorte que les champs modifiables ressemblent à des zones de texte et les champs non modifiables à du texte. Il y a une raison pour laquelle ces deux éléments d'interface utilisateur ont un aspect distinct.
J'ai opté pour l'ajout d'une icône de crayon fa - muette flottant à droite du champ.
Les zones de texte sont idéales dans les mises en page plus simples, où l'utilisation principale de l'élément est l'édition. Dans une grille où le contrôle est répété indéfiniment, ils (comme les boutons ou d'autres contrôles) augmenteront l'encombrement visuel. C'est un problème car l'une des raisons pour lesquelles nous utilisons des grilles est de nous fournir un aperçu.
J'aime vraiment les conceptions où les champs modifiables sont très neutres, comme tout texte d'interface, mais en survolant, ils passent à un état qui montre qu'ils peuvent être modifiés. Cela pourrait être réalisé en utilisant une couleur ou une icône qui n'est visible qu'en vol stationnaire. En cliquant, vous entrez dans le mode d'édition réel. L'application Web de Jira est un excellent exemple de cette approche.
La meilleure pratique consiste généralement à utiliser des entrées pour le contenu modifiable et du texte brut pour le contenu non modifiable. Vous pouvez rendre les entrées subtiles, afin qu'elles ne créent pas autant d'encombrement, même dans une grille quelque peu peuplée.
Si l'encombrement provoqué par les entrées exposées est trop élevé, vous avez la possibilité d'utiliser les commandes affichées en survol (icône d'action de modification) ou de transformer le texte brut en champ de saisie en survol (fonctionne pour le contenu d'une ligne, avec prudence même pour le contenu de plusieurs lignes ).
Cependant, en termes de fourniture d'indices modifiables uniquement en survol, vous devez vous demander quel est le principal contexte d'utilisation. S'il s'agit d'appareils tactiles mobiles, vous ne pouvez pas compter sur le survol et vous devez exposer immédiatement la comestibilité (encore une fois, en utilisant l'icône pour modifier l'action ou en exposant le champ de saisie).
En général, j'ai un fond gris et un champ modifiable blanc. Lorsque le champ n'est pas modifiable, je mets son arrière-plan sur le même gris (qui est techniquement le même que transparent, mais l'utilisateur ne s'en soucie pas .. Ils voient juste que c'est le même).
Zone de texte pour le Web. Les utilisateurs pourront distinguer que le champ est destiné à la saisie de texte. Si possible, il est préférable de se concentrer sur le premier champ de texte. Ce champ peut être bordé d'un bleu mince avec un curseur dans le champ ou simplement mis en évidence avec une bordure.
Pour les mobiles, montez un clavier. Si vous pouvez faire sélectionner le premier élément avec un curseur clignotant, faites-le. Griser les champs restants est correct.
Cela peut révéler un parti pris personnel, mais j'ai également tendance à préférer une sorte de "focus visuel" qui indique à un utilisateur sur quel champ il se trouve. Un arrière-plan ou une bordure douce sont des moyens d'y parvenir.