Uma tabela ordenável funciona quando a pessoa consegue reconhecer a coluna em uso, entender em que direção os dados foram organizados e mudar essa direção sem perder o contexto. Comece pela tarefa que justifica a ordem. Em uma biblioteca de projetos, pode ser encontrar a entrega mais próxima. Desenhe o cabeçalho como um controle e prototipe o que acontece com as linhas, o foco e a paginação. A qualidade aparece na transição entre dois estados tanto quanto na aparência de cada tela.
Escolha a ordem inicial a partir da tarefa
Imagine uma ferramenta para acompanhar trabalhos de um estúdio. Ela exibe nome, responsável, prazo e última atualização. A lista abre por data de atualização porque costuma ser usada para retomar o que mudou hoje. Quando a equipe está fazendo a pauta da semana, ordenar por prazo ajuda a enxergar o que precisa ser entregue primeiro. Esses usos justificam duas colunas ordenáveis. A coluna de responsável pode ter mais valor como filtro quando a tarefa é ver os trabalhos de uma pessoa específica.
Defina a ordem inicial por escrito. “Última atualização, da mais recente para a mais antiga” dá à equipe uma regra verificável. Se a pessoa volta à lista após abrir um projeto, preserve a ordem escolhida quando esse retorno faz parte da mesma tarefa. Num acesso novo, alinhe com produto se a preferência deve persistir ou se a ordem padrão tem um papel importante. Os dois comportamentos podem fazer sentido, dependendo de como a tela é usada.
Mostre o que muda e o que pode mudar
Para cada cabeçalho ordenável, desenhe três situações. Uma mostra o controle disponível, outra indica ordem crescente e outra indica decrescente. Na primeira, o sinal visual precisa comunicar possibilidade de ação. Nas outras, uma seta e uma diferença de tratamento podem mostrar o estado atual. Teste o significado das setas usando a linguagem da tarefa. A ideia de crescente é imediata para alguns números, mas pode exigir que a pessoa pense duas vezes quando a coluna contém datas. Um texto como “Mais recentes primeiro” esclarece uma configuração importante.
Diferencie o estilo de foco do estado ordenado. Uma borda de foco aparece enquanto a pessoa navega com o teclado e precisa continuar reconhecível quando o cabeçalho já está ativo. O estado de ordenação informa como o conjunto está organizado mesmo que o foco esteja em outra parte da página. Desenhe os dois estados sobrepostos na biblioteca de componentes e confira se ambos podem ser percebidos sem depender de cor. O guia de contraste de cores em sites ajuda a avaliar o ícone, o rótulo e os fundos usados nesse controle.
Combine semântica e interação no cabeçalho
Use a estrutura de tabela para preservar a relação entre células e seus cabeçalhos. O exemplo do WAI coloca um botão dentro do cabeçalho de cada coluna ordenável. O atributo aria-sort identifica a direção na coluna que está ordenando os dados. Quando a ordem passa para outra coluna, a informação também precisa mudar de lugar. O foco pode ficar no botão acionado enquanto as linhas se reorganizam. Isso permite repetir o comando, inverter a direção ou seguir navegando sem procurar novamente o controle.
Use a documentação como referência para desenhar os estados e combine um teste no navegador com teclado e leitor de tela. A página do Carbon apresenta o uso de tabelas em interfaces com densidade variável, enquanto o exemplo do WAI detalha a semântica do controle. O protótipo visual pode representar um clique, mas o protótipo funcional é que permite verificar a sequência do foco e a leitura do estado. Exemplo de tabela ordenável do WAI e orientações do Carbon Design System para tabelas.
Desenhe a ordem para dados que dão trabalho
Use valores que exponham diferenças entre texto e dado. Uma coluna de números com 2, 10 e 100 ajuda a flagrar uma ordem alfabética aplicada por engano. Numa coluna de data, inclua registros de anos diferentes com o mesmo dia e mês. Adicione duas linhas com prazo igual, um trabalho sem data e nomes com acentos. Escreva o comportamento que a pessoa deve observar. Por exemplo, itens sem prazo ficam no fim nas duas direções, e empates seguem o nome do projeto. Um critério secundário estável evita movimentos difíceis de entender.
Confira também o alcance da ação. Se a tabela mostra vinte de cem projetos, ordenar precisa considerar o conjunto de resultados da consulta, caso essa seja a expectativa da interface. Indique o que ocorre ao mudar a ordem quando a pessoa está na página três. Voltar à primeira página pode fazer sentido porque ali estão os primeiros resultados da nova ordem. Nesse caso, atualize o indicador de página junto das linhas e preserve os filtros. O artigo sobre resposta de filtros em catálogos no celular traz um caso complementar para observar o tempo entre ação e atualização.
Mostre o que acontece enquanto a tabela espera
Se ordenar envolve rede, prototipe uma resposta lenta. Durante a espera, manter a lista anterior pode preservar contexto, desde que exista um sinal claro de atualização e a nova ordem só seja anunciada quando os dados correspondentes chegarem. Defina com desenvolvimento o que acontece quando a pessoa aciona duas colunas rapidamente. O pedido mais antigo pode terminar por último. O componente precisa mostrar o resultado da escolha mais recente, ou impedir novas alterações enquanto houver uma mudança pendente com feedback claro.
Inclua o comportamento de falha na entrega. Se a atualização falhar, mantenha ou restaure o estado anterior de forma coerente e ofereça uma maneira de tentar de novo. A seta, o texto de estado e as linhas devem descrever a mesma ordem. Teste a falha com a tabela rolada para baixo e com o foco no cabeçalho. Esses contextos revelam se o feedback aparece perto o suficiente da ação e se a pessoa consegue se recuperar sem recomeçar a tarefa.
Inclua no ensaio uma lista curta de seis registros com a mesma configuração de largura usada em produção. Faça alguém ordenar pelo título enquanto a coluna de prazo está ativa e diga em voz alta qual mudança esperava. Em seguida, peça que compare o primeiro e o último registro. A pergunta ajuda a distinguir a descoberta do botão da compreensão da nova ordem. Se o ícone estiver claro mas a lista parecer arbitrária, investigue o dado exibido e o critério de desempate antes de redesenhar o cabeçalho.
Onde fica o controle no celular?
Se o cabeçalho cabe com rótulo e área de toque confortáveis, mantenha o botão na coluna. Caso a tabela precise de rolagem lateral e a ordenação seja uma tarefa frequente, considere um controle visível acima dela. Faça os dois pontos de interação refletirem a mesma escolha quando ambos existem. Teste com texto ampliado e confira se a indicação de ordem ainda aparece no espaço útil da tela.
Como validar a entrega?
Peça que alguém encontre o primeiro prazo válido, inverta a ordem e volte à lista depois de abrir um projeto. Repita o exercício com teclado e em uma conexão lenta. Observe qual coluna a pessoa acredita estar em uso, onde o foco termina e se os dados confirmam a regra descrita. Registre qualquer divergência com a combinação de dados que a produziu. Essa amostra vale tanto para revisar o design quanto para verificar o componente quando ele receber novas colunas.