Tableau des bonnes pratiques côté case à cocher
Quand est-il recommandé de permettre aux cases à cocher d'apparaître à gauche/droite et sur le côté d'un tableau?
Un filaire est tombé sur mon bureau, ressemblant au filaire ci-dessous. La justification que l'équipe a donnée pour son placement est les cases à cocher à droite afin qu'elles soient proches des boutons d'action en bas.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
En comparant cela à des systèmes comme Gmail, Yahoo et Hotmail, ils ont plutôt tendance à placer des cases à cocher sur la gauche. Est-il préférable de placer ces cases à gauche? Ou serait-il préférable de les laisser près de leurs boutons correspondants à droite?
Le modèle que la plupart des gens ont l'habitude de est que les cases à cocher soient sur à gauche. Je ne vois aucune raison particulière pour laquelle il serait avantageux pour vous de les placer à droite, alors respectez plutôt les cases à cocher à gauche.
En général, je dirais qu'il vaut mieux les avoir plus près des boutons que vous utiliserez avec les cases à cocher, mais là encore, rien ne vous empêche d'avoir les boutons à gauche plutôt qu'à droite.
Une très bonne raison de les mettre à droite est pour vos utilisateurs qui utilisent des lecteurs d'écran. Ces utilisateurs entendront le contenu de la ligne et dureront la case à cocher vs entendre une case à cocher sans connaître le contenu de la ligne. Ils doivent ensuite entendre le contenu et sauvegarder dans la case à cocher s'ils doivent sélectionner la ligne. Pour ces utilisateurs, c'est une conception bien meilleure et cela a très peu d'effet sur les utilisateurs qui n'utilisent pas de lecteurs d'écran.
Même si j'ai voté pour la réponse de @JohnGB, j'ai toujours voulu répondre.
Si vous avez tous vos "boutons d'action" alignés à droite pour une raison quelconque, et que vos utilisateurs s'y sont habitués. Je vous suggère de suivre le style que vous avez enseigné à vos utilisateurs et de cocher les cases à droite également. Mais avec une implémentation alignée à droite, je dois vous suggérer de mettre un effet de survol pour toute la ligne, car le "label" de la case à cocher est à l'autre bout de la et il pourrait être difficile de cocher les bonnes cases. (Ou même faire de la ligne entière un sélecteur cliquable pour la case à cocher.)
Mais si vous n'avez aucun bouton existant aligné à droite, je vous suggère de faire comme @JohnGB l'a dit, utilisez les cases à cocher comme elles devraient être utilisées, avant le "label" pour la sélection.
Loi de Fitts indique essentiellement que le temps nécessaire à un utilisateur pour terminer une tâche est basé sur la distance à laquelle un utilisateur doit déplacer la flèche de la souris. Il est donc ergonomiquement plus rapide d'avoir les actions directement au-dessus ou en dessous des cases à cocher. Si l'utilisateur utilise une barre de défilement du navigateur, il est plus efficace de tout avoir sur le côté droit de l'écran pour réduire les mouvements inutiles de la souris. Cela est particulièrement exacerbé dans les produits d'entreprise, où un mouvement sur l'écran peut entraîner des heures de temps perdu.
Ainsi, la règle générale (meilleure pratique) est que les actions soient directement au-dessus ou en dessous des cases à cocher.
De nos jours, la ligne entière peut être une sélection et vous pouvez avoir un état de survol de ligne. La case à cocher peut donc être de chaque côté. La convention selon laquelle il doit être à gauche est ancienne.
La réponse à la question d'origine est "ça dépend". Et cela dépend du cas d'utilisation.
Toutes les directives de l'interface utilisateur indiquent que les étiquettes de la case à cocher doivent être placées à droite. Cette règle utilise également pour les tables. Recherchez n'importe quel client de messagerie pour vous assurer que cette règle a bien lieu.
Les boutons affectant les éléments sélectionnés doivent également être placés à droite.
Mais, la case à cocher sur la table a deux problèmes, ne l'oubliez pas lors de votre réalisation: 1. Il est difficile de viser une petite case à cocher. Cochez cette case pour cocher la ligne. 2. L'utilisateur peut sélectionner plusieurs lignes. L'utilisateur peut sélectionner les lignes en conséquence un par un clics sur la case à cocher. Tôt ou tard, il se trompe et toutes les lignes ont été désélectionnées. Assurez-vous que l'interface utilisateur que vous fournissez sélectionne toutes les lignes et sélectionnez plusieurs lignes avec les touches Ctrl/Maj enfoncées.
Recherche Gmail pour voir ces choses.
Les cases à cocher doivent être à gauche, près de leur étiquette. Plus la case est éloignée de son étiquette, plus l'utilisateur doit travailler pour les aligner visuellement.
Même avec un style de ligne alterné, les cases à cocher alignées à droite peuvent toujours conduire à une sélection de case incorrecte. En revanche, les cases à cocher alignées à gauche ne sont presque jamais sélectionnées par erreur. Malheureusement, je ne peux pas trouver une bonne source de référence pour soutenir cette pratique, mais je suis surpris que personne ne l’ait mentionné auparavant.