A seleção em massa funciona quando a interface deixa claro quais itens entraram na seleção, qual é o alcance do controle principal e sobre o que a próxima ação vai operar. Use o checkbox indeterminado para indicar que só parte do grupo está selecionada. Combine esse sinal com uma contagem e um rótulo que diga se a seleção cobre a página atual, um grupo ou todos os resultados da busca.
Separe os itens que aparecem dos itens que existem
Imagine a biblioteca de imagens de um estúdio. A busca por “Festival” devolve 82 arquivos e mostra 20 por página. Uma pessoa quer mover quatro imagens para uma pasta de revisão. Outra quer atribuir a mesma etiqueta aos 82 resultados. Para a primeira tarefa, o checkbox no topo pode selecionar só os arquivos desta página. Para a segunda, mostre uma ação separada que amplie a seleção após a pessoa ver o total. “Selecionar os 82 resultados” descreve a ação com mais precisão que “Selecionar tudo”.
Desenhe a diferença entre as duas situações no mesmo quadro de protótipo. Acima da lista, mostre “20 selecionados nesta página” no primeiro estado. Se a pessoa ampliar, indique “82 resultados selecionados” e ofereça uma saída que limpe a seleção de forma visível. Se uma alteração de filtro muda o conjunto, decida se o sistema mantém itens já marcados ou limpa a seleção. Quando a ação vai atingir itens fora da vista, o rótulo precisa deixar essa consequência clara antes da execução. O artigo sobre resposta de filtros no celular ajuda a observar como alterações de consulta afetam o contexto da lista.
Dê um papel preciso ao estado parcial
O checkbox do cabeçalho pode representar três situações. Ele fica desmarcado quando nenhum item elegível do grupo está selecionado. Fica marcado quando todos estão selecionados. Exibe um traço ou outro indicador reconhecível quando só parte está selecionada. O rótulo deve nomear o grupo controlado. Quando a pessoa marca uma linha individualmente, o cabeçalho precisa atualizar esse estado de imediato. O traço descreve o conjunto e pode coexistir com uma linha em foco ou com um item que acabou de entrar na seleção.
Defina o que acontece ao ativar o cabeçalho enquanto ele está parcial. Neste exemplo, o clique completa a seleção da página. O clique seguinte limpa a seleção daquele grupo. Descreva as duas transições no protótipo e deixe uma ação “Limpar seleção” fácil de localizar se a operação envolver várias páginas. O WAI apresenta opções de comportamento para grupos de checkboxes. Em um componente nativo de HTML, a propriedade indeterminate é aplicada via código e é distinta do estado checked. Combine com desenvolvimento como esses estados serão derivados dos dados a cada atualização. Padrão de checkbox do WAI e especificação HTML do checkbox.
Mostre a seleção onde a decisão vai acontecer
Quando pelo menos um item está marcado, uma barra próxima à lista pode mostrar a contagem e as ações disponíveis. Nomeie a ação com o objeto que será afetado. “Mover 4 arquivos” é mais fácil de conferir que “Mover” quando a barra permanece na tela durante a navegação. Se alguns itens marcados não aceitam determinada ação, diga quantos são elegíveis e por qual motivo os demais ficam de fora. Considere oferecer um resumo dos afetados antes de uma mudança difícil de reverter.
Evite depender de um fundo colorido para mostrar uma linha marcada. Preserve o sinal no checkbox e revise a leitura das ações quando a barra recebe foco. Se a barra aparece no momento da primeira seleção, a posição do foco pode continuar no controle que a pessoa acabou de acionar. Ela ainda precisa conseguir encontrar a barra pela ordem do teclado. Quando a ação termina e a linha some, defina um ponto de retorno previsível. O guia sobre como desfazer ações de interface com segurança é útil para desenhar o resultado e o caminho de recuperação.
Resolva paginação, mudanças externas e filtros
Desenhe o retorno à primeira página depois de marcar itens na segunda. Se o produto mantém a seleção entre páginas, a contagem total precisa permanecer visível mesmo quando nenhum item da página atual está marcado. Nesse caso, o cabeçalho ainda descreve os itens da página. Diferencie no texto “nenhum nesta página” de “nenhum selecionado”. Essa distinção evita um estado em que a barra oferece uma ação para dez arquivos enquanto o cabeçalho parece indicar que nada foi marcado.
Inclua na revisão um item que muda de permissão ou sai do conjunto enquanto a seleção está ativa. Antes de efetuar a ação, o produto precisa conferir os itens que ainda podem participar. Se o resultado for parcial, mostre quantos arquivos foram movidos e quais ficaram de fora. Quando o comando se refere a todos os resultados de uma consulta, combine como o sistema delimita esse conjunto. Um filtro guardado e uma lista de identificadores capturada no momento da seleção têm comportamentos diferentes se entram novos arquivos antes do clique final.
Prepare os estados que quase sempre faltam no protótipo
Comece por uma página sem resultados, uma com apenas um item e uma com vários itens indisponíveis. Decida quando faz sentido mostrar o checkbox geral desativado e quando removê-lo do cabeçalho. Inclua um caso em que a lista está carregando e o sistema ainda não conhece o total. Se o total definitivo puder mudar depois da resposta, aguarde o dado confiável antes de oferecer uma ação cujo rótulo promete cobrir todos os resultados.
No celular, abra a tela com texto ampliado e confira se a contagem continua perto das ações. Uma barra com muitas opções pode separar a ação do contexto e apertar os alvos. Priorize a ação frequente e agrupe as demais em um controle claro, preservando o número de itens selecionados. Teste ainda uma linha cujo título ocupa duas linhas. A área acionável do checkbox deve acompanhar a composição de forma previsível, sem fazer com que um toque próximo ao título dispare outra ação por engano.
Considere um cenário com ações em andamento. Depois que a pessoa inicia “Mover 82 arquivos”, o estado da seleção pode ficar visível enquanto o processo trabalha. Se ela puder continuar navegando, deixe claro se as próximas marcações pertencem a outra operação. Quando o resultado chegar, relacione o aviso ao comando que o gerou. Uma mensagem vaga como “Atualização concluída” fica difícil de interpretar se a pessoa já mudou a busca. “79 arquivos movidos para Revisão” recupera o contexto e abre espaço para explicar os três restantes.
Na entrega para desenvolvimento, descreva as regras em uma pequena matriz. Cruze a página vazia, a seleção parcial e a seleção total com os eventos de trocar filtro, trocar página e limpar a seleção. Acrescente um exemplo para a opção de ampliar a todos os resultados. Essa matriz ajuda a manter consistência quando a tabela ganha uma nova ação ou outra equipe usa o mesmo componente em uma lista diferente.
Como testar se a seleção ficou clara?
Peça que alguém marque dois arquivos, passe para a página seguinte e diga quantos seriam afetados antes de tocar em “Mover”. Depois peça que selecione a página atual e desmarque apenas uma linha. A pessoa deve conseguir dizer o que o traço significa e como voltar ao estado sem seleção. Repita com teclado e leitor de tela. Observe a ordem do foco, o nome do controle e se o estado parcial é informado. Se a resposta sobre o alcance mudar entre as duas formas de navegar, reveja o rótulo e a contagem no ponto em que a decisão é tomada.