web-dev-qa-db-fra.com

Quelle est la bonne façon de marquer visuellement qu'une sélection est désactivée

J'ai une page avec une liste de produits. Chaque produit peut être personnalisé en couleur et en largeur. Le sélecteur de largeur est un choix, mais certains produits n'ont qu'une seule option, il est donc présélectionné.

Quelle est la meilleure manière de s'occuper de ça? Est-il approprié de marquer visuellement la liste déroulante de sélection comme disabled et d'effacer la flèche qui indique qu'il s'agit d'une sélection, ou cela déroutera-t-il l'utilisateur? Ou, serait-il préférable de marquer la flèche avec de la transparence ou une autre couleur, pour faire savoir à l'utilisateur qu'il y a l'option de sélectionner, mais pour leur cas particulier, elle n'est pas active?

Ce sont les deux cas auxquels j'ai pensé:

Premier cas: un désactivé avec la flèche et une transparence

First case: one disabled with the arrow and a transparency

Deuxième cas: les deux en sélectionnent un sans la flèche Second case: the two selects one without the arrow

2
Simona Adriani

Une liste déroulante désactivée indique qu'il existe des options dans la liste déroulante mais qu'elles ne peuvent pas être sélectionnées car la fonction n'est pas active. Mais dans ce cas, il n'y a pas d'options supplémentaires et le champ s'applique afin que les personnes handicapées puissent créer de la confusion.

Comme il n'y a pas d'options supplémentaires, pour que l'utilisateur choisisse, n'utilisez pas de liste déroulante pour ce champ , laissez-le à la place sous forme de texte. De plus, dans votre deuxième cas, la bordure donne l'impression que le texte peut être modifié avec une certaine interaction, comme dans une entrée de texte.

enter image description here

3
Alvaro

Je suis d'accord avec la réponse d'Alvaro. Cela correspond au principe du "Contexte sur la cohérence". Dans le blog "usabilitypost", vous pouvez lire:

Les principes traditionnels de l'interface utilisateur (UI) exigent que vous gardiez vos éléments d'interface utilisateur cohérents. Si vous avez utilisé cette navigation ici, utilisez le même format dans les autres endroits. Cela permet aux gens de se familiariser avec votre interface utilisateur et donc, selon la logique, de la rendre plus facile à utiliser. Mais garder les choses cohérentes peut ne pas être la meilleure façon de procéder dans de nombreux cas.

Source: http://usabilitypost.com/2008/08/04/context-over-consistency/ Vous pouvez également trouver quelques bons exemples de "contexte sur cohérence" dans ce blogpost.

En substance, dans une certaine mesure, la négligence de la cohérence est acceptable lorsqu'elle permet de simplifier l'interaction pour l'utilisateur.

2
Anna Prenzel

Je suis d'accord avec la suggestion de @Anna, mais si vous voulez utiliser la cohérence, car je sais que dans certains cas, il est difficile de gérer différents contrôles, en particulier lorsqu'il existe des dispositions prédéfinies, vous pouvez simplement définir l'arrière-plan désactivé pour ce contrôle de sélection. (Utilisez également la même couleur que la flèche pour qu'elle se masque automatiquement)

enter image description here

2
Zea Shah