web-dev-qa-db-fra.com

Cochez toutes les cases / décochez toutes les cases concernant la convivialité

Je me demande simplement ce que vous pensez de la meilleure façon de proposer de cocher/décocher toutes les fonctionnalités d'un tableau HTML à plusieurs lignes, qui a une colonne de cases à cocher.

Quelques possibilités:

Case à cocher supplémentaire dans l'en-tête du tableau, similaire à Gmail. par exemple. [ ] Is enabled?

Vérifiez tous les liens dans l'en-tête du tableau. par exemple. Is enabled? (check all)

Vérifiez tous les liens dans le pied de page du tableau directement sous les cases à cocher.

19
bcmcfc

Je trouve cette approche assez explicite (pas besoin de " Tout sélectionner"):

screenshot
(De: http://www.ibm.com/developerworks/web/library/wa-jquery1/ )

Cependant, le mot clé ici est " je trouve"! @ ChrisF a quelques bons points dans sa réponse , mais je suppose que vous devrez comparer les différentes approches avec de vrais utilisateurs afin pour savoir quelle solution est la mieux adaptée.

Quelques indications sur l'approche présentée, cependant:

  • Rendez la réponse immédiate. c'est-à-dire que toutes les cases doivent être décochées/cochées instantanément sur le client (aucun aller-retour ou soumission de formulaire retardé) afin de répondre aux attentes de l'utilisateur.
  • Laissez le widget d'interface utilisateur "Tout sélectionner" être le même que celui de chaque élément. C'est toujours une case à cocher - cela affecte juste la colonne entière (et est donc placée dans l'en-tête de colonne).

[~ # ~] modifier [~ # ~]

12
jensgram

Tout cocher et décocher toutes les actions. En tant que tels, ils doivent être représentés de la manière dont les actions sont représentées: sous forme de boutons.

J'ai posté cela en tant que commentaire dans une autre réponse, mais je veux l'inclure ici pour expliquer pourquoi l'utilisation d'une case à cocher est une mauvaise idée:

Le problème avec l'utilisation d'une case à cocher "Tout cocher" est ce que cela représente? Que se passe-t-il lorsque vous décochez la case d'en-tête? Est-ce que tout décoche? Que se passe-t-il lorsque vous décochez l'un des éléments ci-dessous? Décoche-t-elle la case d'en-tête? Que se passe-t-il lorsque vous vérifiez tous les éléments individuellement? Coche-t-il la case d'en-tête? La case à cocher ne transmet pas correctement le sens pour que ce soit une bonne solution.

Les boutons (ou liens) qui indiquent ce qu'ils font ne laissent absolument aucune place à la confusion. Il n'y a rien à penser et le but de notre travail n'est-il pas de faire en sorte que les fonctions de base d'un système puissent être effectuées sans réfléchir (afin que le cerveau puisse être utilisé pour la fonction réelle exécutée)?

12
Charles Boyung

J'aimais la simple case à cocher en haut, ce qui est bien à propos de l'expérience, presque tout le monde sait ce qu'il fait, et s'ils ne le font pas, il leur suffit d'un clic pour le découvrir ... mais, j'ai vu linkedin faire quelque chose soigné:

enter image description here

7
Ayyash

Avoir la case à cocher supplémentaire dans l'en-tête (ou le pied de page) est une approche plus directe. L'option est étroitement liée à la colonne à laquelle elle se réfère, ce qui est particulièrement utile si vous avez plusieurs colonnes de case à cocher.

L'inconvénient est que l'action peut ne pas être immédiatement évidente pour tous les utilisateurs.

Un lien "Sélectionner/Désélectionner tout" est plus explicite et vous pouvez inclure un texte plus explicatif (si nécessaire), mais cela rend votre page plus longue.

6
ChrisF

Approche intéressante faite par Google dans GMail, le "Check/Uncheck All" est également un menu déroulant avec des options supplémentaires. Et a un état "Checked Some" quand il est grisé.

1
Evgeny