web-dev-qa-db-fra.com

Faut-il utiliser des cases à cocher ou non et sélectionner des lignes en cliquant

Nous avons un panneau de type CMS où l'utilisateur doit gérer les commandes. Nous avons un tableau que vous pouvez voir ci-dessous. Un ami (connu pour son expérience en UX) dit que nous devons supprimer les cases à cocher et sélectionner/supprimer les lignes au clic. Je dis qu'il n'est pas approprié de le faire parce que les utilisateurs aiment cliquer sur les espaces vides et les lignes sont sélectionnées lorsque l'utilisateur copie une valeur d'une ligne. Les lignes sélectionnées ont également un fond légèrement bleu. Je demande quelle est la meilleure solution du point de vue UX.

R: Nous devons supprimer les cases à cocher et sélectionner/supprimer la ligne en cliquant.

B: Conservez les cases à cocher et utilisez la sélection de ligne lors du clic de ligne.

C: Ne cochez que les cases et ne sélectionnez pas en cliquant sur la ligne.

Voici le tableau

data grid with check boxes

10
Hasan Gürsoy

C'est une question de prix :-)

La chose géniale à propos des cases à cocher est tout le monde sait ce qu'elles sont et ce que vous devez faire pour interagir avec elles.

La sélection de ligne n'est pas si bien connue et ce n'est certainement pas d'une évidence aveuglante dans la façon dont les cases à cocher le sont, bien que l'interaction de sélection de ligne soit facilement apprise.

La sélection de ligne peut cependant avoir ses situations difficiles, par exemple la situation que vous avez décrite, ou si vous avez des déclencheurs supplémentaires dans les cellules (par exemple des liens hypertexte, des boutons, etc.), et vous devez absolument obtenir le point de style "sélectionné", car vous avez besoin du style pour augmenter son accessibilité. Changer le curseur de la souris lorsque vous survolez une ligne fait également allusion à son caractère abordable.

13
SteveD

La sélection de la case à cocher semble un peu héritée ... Je pense que la sélection de type feuille de calcul, comme celle-ci , est une bien meilleure UX.

4
Vladimir Georgiev

Public et scénario
. , droite?
De plus, des choses (comme la façon de sélectionner une ligne) ne doivent être apprises qu'une seule fois, non?
Ainsi, un utilisateur pourrait être intrigué sur la façon de sélectionner une ligne la première fois et d'utiliser ces connaissances à plusieurs reprises à l'avenir.
Affordances
Ceci est une application de bureau, non?
La puissance de # hover # est alors disponible.
regular hand pointer Lorsque votre utilisateur heureux survole un lien, vous faites ressembler le pointeur à la main bien connue des liens.
arrow with plus sign cursor pointer Sinon, lorsque l'utilisateur survole une partie de la ligne lorsqu'il peut cliquer pour la sélectionner, vous passez à flèche décorée d'un signe plus pour indiquer que la sélection est disponible.
De plus, lorsque le pointeur se trouve sur une ligne déjà sélectionnée, vous pouvez utiliser une flèche décorée d'un signe moins pour dire qu'en cliquant dessus, la ligne peut être désélectionnée.
Si la ligne entière change immédiatement de couleur d'arrière-plan, votre utilisateur obtient les commentaires attendus et devient encore plus heureux.
Facilité d'utilisation
Souvent, la largeur des lignes dépasse celle de la fenêtre.
Si vous cochez les cases au début des lignes, vous forceriez l'utilisateur à faire défiler horizontalement, et elle ne serait plus si heureuse.
De plus, si elle sélectionne les lignes en fonction du contenu d'une colonne qui est loin du début de la ligne, elle pourrait faire une erreur en raison d'une erreur de parallaxe et maintenant son patron sera mécontent aussi.
Idéalement, les utilisateurs devraient regarder et cliquer ici pour être en sécurité (et heureux).
Si vous avez besoin d'une sélection de plusieurs lignes, l'idéal est de le faire en cliquant une ligne après l'autre, sans touche de contrôle vers le bas.
L'idiome de sélection contigu (sélectionner un, puis un autre décalage de maintien) doit être disponible.
Utilisez les deux
.
Cette cellule, une fois survolée, changerait également son arrière-plan pour imiter celui de la ligne sélectionnée (mais uniquement cette cellule).
De cette façon, vous faites plaisir aux utilisateurs de dinosaures et de la génération Y (je suis un dinosaure).
En outre, cliquer sur l'en-tête de la colonne de coche peut être utilisé, si cela est utile, pour tout sélectionner ou tout désélectionner.
Engagement final
Bien sûr, n'obligez pas vos utilisateurs à cliquer dans une petite boîte de 12x12px pour sélectionner une ligne!
Oui, je parle de la case à cocher.
Et n'ajoutez pas d'offense à l'insulte en les forçant à défiler horizontalement!

4
Juan Lanus

Seule la sélection sera un défi pour rejeter les lignes mais la soutenir avec la case à cocher apportera de la clarté car l'utilisateur sera conscient de la possibilité d'action.

Et si les lignes ont ou auront des CTA différents comme la commande terminée ou la commande rejetée. Ces actions peuvent également être effectuées en sélectionnant des cases à cocher et en cliquant sur CTA associé.

Exemple: si un utilisateur souhaite passer plusieurs commandes: il peut sélectionner les lignes et cliquer sur CTA commun pour COMMANDER TERMINE.

2
Priyanka Goyal

Il semble que chaque ligne de votre capture d'écran comporte plusieurs hyperliens qui peuvent amener l'utilisateur vers d'autres ressources de l'application (client, SKU, source, ID, etc.). En supposant que cela soit correct, je recommanderais de ne pas autoriser l'utilisateur à cliquer sur la ligne pour la sélectionner. Je pense que cela rend l'interface utilisateur maladroite et potentiellement déroutante.

L'option "C: Conserver uniquement les cases à cocher et ne pas sélectionner en cliquant sur la ligne" , est la plus propre et la plus simple de mon point de vue.

Exemple:

Si l'utilisateur clique dans la cellule SKU (l'espace blanc autour du lien), la ligne serait sélectionnée. Si l'utilisateur clique à nouveau dans la même cellule SKU, mais que cette fois-ci arrive à cliquer sur le lien, il est redirigé vers une autre page.

Pour les utilisateurs novices, ils peuvent ne pas comprendre exactement pourquoi cela s'est produit. Pour ceux qui le font, ils doivent maintenant être plus précis et prudents avec leurs clics. Dans les deux cas, je ne pense pas que ce soit un problème majeur, car les utilisateurs apprendront et s'adapteront rapidement. Mais personnellement, je pense que c'est le genre d'inconvénient mineur que je préfère ne pas mettre en œuvre.

2
Ben Harrison