Marque todas / desmarque todas as caixas de seleção em relação à usabilidade
Eu só estou pensando em seus pensamentos sobre a melhor maneira de fornecer marcar/desmarcar todas as funcionalidades de uma tabela HTML com várias linhas, que possui uma coluna de caixas de seleção.
Algumas possibilidades:
Caixa de seleção extra no cabeçalho da tabela, semelhante ao Gmail. por exemplo. [ ] Is enabled?
Verifique todos os links no cabeçalho da tabela. por exemplo. Is enabled? (check all)
Marque todos os links no rodapé da tabela diretamente abaixo das caixas de seleção.
Acho essa abordagem bastante auto-explicativa (não é necessário " Selecionar tudo"):
(De: http://www.ibm.com/developerworks/web/library/wa-jquery1/ )
No entanto, a palavra-chave aqui é " eu acho"! @ ChrisF tem alguns pontos positivos em sua resposta , mas acho que você terá que comparar as diferentes abordagens com usuários reais em ordem para descobrir qual solução é a mais adequada.
Alguns indicadores sobre a abordagem mostrada, no entanto:
- Torne a resposta imediata. ou seja, todas as caixas devem ser desmarcadas instantaneamente no cliente (sem envio de ida e volta ou formulário atrasado) para atender às expectativas do usuário.
- Deixe o widget da interface do usuário "Selecionar tudo" ser o mesmo de cada item. Ainda é uma caixa de seleção - isso afeta apenas a coluna inteira (e, portanto, é colocada no cabeçalho da coluna).
[~ # ~] edite [~ # ~]
- Ticket # 308468 no rastreador de problemas do Drupal contém várias ótimas capturas de tela e alternativas.
- Além disso, você pode encontrar essa pergunta no Stack Overflow interessante: Mais utilizável, selecione todos/desmarque o formato de todas as caixas de seleção
Marque todas e desmarque todas são ações. Como tal, eles devem ser representados da maneira como as ações são representadas: como botões.
Publiquei isso como um comentário em outra resposta, mas quero incluí-lo aqui para explicar por que usar uma caixa de seleção é uma má ideia:
O problema de usar uma caixa de seleção "marcar tudo" é o que isso representa? O que acontece quando você desmarca a caixa de seleção do cabeçalho? Desmarca tudo? O que acontece quando você desmarca um dos itens abaixo? Desmarca a caixa de seleção do cabeçalho? O que acontece quando você verifica todos os itens individualmente? Ele marca a caixa de seleção do cabeçalho? A caixa de seleção não transmite o significado adequadamente para que seja uma boa solução.
Botões (ou links) que indicam o que eles fazem não deixam espaço para confusão. Não há nada em que pensar, e não é o objetivo de nossos trabalhos fazê-lo para que as funções básicas de um sistema possam ser realizadas sem pensar (para que a energia cerebral possa ser usada para a função real sendo executada)?
Eu costumava gostar da caixa de seleção simples no topo, o que é bom nisso é experiência, quase todo mundo sabe o que faz, e se não der um clique para descobrir ... mas, eu vi o linkedin fazer algo arrumado:
Ter a caixa de seleção extra no cabeçalho (ou rodapé) é uma abordagem mais direta. A opção está intimamente ligada à coluna a que se refere, o que é especialmente útil se você tiver mais de uma coluna da caixa de seleção.
A desvantagem disso é que a ação pode não ser imediatamente óbvia para todos os usuários.
Um link "Selecionar/desmarcar tudo" é mais explícito e você pode incluir um texto mais explicativo (se necessário), mas isso torna sua página mais longa.
Abordagem interessante feita pelo Google no GMail, o "Marcar/desmarcar tudo" também é um menu suspenso com opções adicionais. E tem um estado "Marcado alguns" quando está acinzentado.