web-dev-qa-db-fra.com

comment représenter les cellules désactivées dans un tableau avec une couleur de ligne alternative

Je crée un tableau html modifiable avec une couleur de ligne alternative avec un surlignage de ligne focalisé.

Lorsqu'une cellule est cliquée, l'utilisateur peut modifier son contenu.

Compte tenu de tout cela, je dois indiquer à l'utilisateur que des cellules spécifiques sont désactivées et donc non cliquables.

J'ai essayé la couleur de fond "gris" de base, mais elle cumule 3 nuances de gris différentes:

  • la couleur alternative de la ligne grise
  • la surbrillance de la couleur grise
  • la couleur grise des cellules désactivées

et le résultat est un peu décevant: enter image description here

J'ai essayé une autre façon, avec un fond de cellule dépouillé: enter image description here

Aucun d'entre eux ne me convainc suffisamment, alors quelle est la meilleure façon de représenter les cellules désactivées dans un tableau en utilisant une autre couleur de ligne?

[~ # ~] modifier [~ # ~]

Après les commentaires sur la première réponse, j'essaie aussi la solution d'icônes enter image description here

5
PEC

La meilleure façon serait de ne pas utiliser de couleur. En fait, la couleur n'est pas nécessairement la meilleure façon de le faire car elle repose beaucoup sur une bonne vue (ce que les concepteurs ont généralement, n'oubliez pas).

Voici quelques idées alternatives et façons de mettre l'accent sur l'état désactivé sans utiliser de couleur - ce sont des suggestions, tout faire serait probablement exagéré et observer les utilisateurs interagir avec des prototypes serait un bon moyen d'évaluer différentes idées (le test de couloir est une bonne chose pour cela) :

Modifiez l'état de vol stationnaire. N'utilisez pas de cursor: pointer style de survol par exemple, laissez l'icône comme curseur standard de la souris pour que rien ne lui arrive lors du survol de la cellule. Pensez à ajouter une icône de modification qui apparaît également au survol d'une cellule modifiable. Une icône "non modifiable" pourrait alors apparaître au survol d'une cellule désactivée.

Ne pas styliser les liens non plus - si vos cellules sont interactives, tout texte peut (ou devrait) avoir un style de lien typique. Cela peut être supprimé, ainsi que tout état de vol stationnaire, pour les cellules inactives.

Considérez une explication de l'infobulle. Cela donnerait à l'utilisateur une rétroaction s'il tentait d'interagir (ce que les utilisateurs feraient pour savoir pourquoi). Cela peut être au clic, et devrait être à portée de main pour aider avec les écrans tactiles sans état de vol stationnaire.

Vous pouvez également utiliser des bordures et le poids/style de la police. Ceux-ci fourniraient un contraste entre activé et désactivé. C'est un peu comme le style de lien.

Fournissez également une clé à l'extérieur du tableau, deux cellules, une de style activée et une désactivée avec les œuvres à l'intérieur pour aider l'utilisateur. Ce pourrait être le point auquel vous expliquez pourquoi si la raison est commune à travers le tableau.

2
Toni Leigh