Contexto
Ordenar uma tabela muda a posição das linhas para facilitar a comparação por um critério, como nome, data, quantidade ou valor. O recurso só ajuda quando a coluna tem uma ordem que faça sentido para a tarefa e quando a interface deixa claro qual critério está ativo. Ordenação não substitui filtros: ela reorganiza os dados, mas não remove linhas.
Use a ordenação para ajudar a pessoa a comparar, localizar e explorar os dados. Ela deve responder a uma necessidade real da tarefa, e não aparecer apenas porque a tabela tem várias colunas.
Ordene apenas colunas com sentido. Ative a ordenação em nomes, datas, números, estados ou outros valores que tenham uma ordem compreensível para a tarefa. Colunas com conteúdo livre, descrições longas ou combinações de informações geralmente não oferecem uma sequência útil.
Escolha um estado inicial útil. Defina uma coluna e uma direção que reflitam a prioridade mais provável, como data mais recente ou maior valor. Mostre essa ordenação desde o carregamento e deixe claro que a lista já está organizada.
Indique a coluna e a direção. Use o nome da coluna junto de um indicador compreensível de crescente ou decrescente. O estado não deve depender apenas de cor, posição ou uma seta sem nome acessível.
Faça a alternância ser previsível. Ao ativar a mesma coluna, alterne entre crescente e decrescente. Se existir um terceiro estado sem ordenação, explique o comportamento e torne esse estado fácil de reconhecer.
Ordene pelo valor real. Compare datas, números, percentuais, moedas e tamanhos por seus valores, não pela aparência formatada do texto. Por exemplo, “R$ 9,00” deve ser tratado como menor que “R$ 10,00”, mesmo que a comparação textual produza outro resultado.
Atualize sem perder o contexto. Reordene as linhas mantendo a posição e o estado do controle compreensíveis. Em ordenações remotas, mostre o carregamento, preserve ou explique a mudança de página e informe o novo critério aplicado.
Comunique a mudança de forma acessível. Atualize o estado do cabeçalho ou do controle de ordenação e anuncie a alteração para quem usa leitor de tela, sem mover o foco automaticamente para outro ponto da tabela.
Adapte a ordenação em telas estreitas. Se a tabela virar cards ou linhas empilhadas, mantenha uma forma equivalente de escolher o critério. Caso a ordenação não faça sentido nessa apresentação, remova o controle em vez de deixá-lo disponível sem efeito claro.
Regra prática
Se a pessoa precisa comparar os itens por um critério, permita ordenar por esse critério. Sempre mostre qual coluna e direção estão ativas, use valores reais e mantenha o resultado compreensível depois da atualização.
Base da recomendação
A orientação cruza pesquisa de usabilidade sobre exploração e ordenação, padrões de tabelas de Design Systems e recomendações normativas de acessibilidade para controles, estados e anúncio de mudanças.
Porque isso importa?
Em listas longas, encontrar o menor, o maior, o mais recente ou o mais relevante manualmente aumenta o esforço de comparação. A pesquisa da Baymard sobre product lists observou que a ordenação ajuda as pessoas a reorganizar resultados segundo os atributos que importam para sua decisão. Em tabelas, a mesma lógica é útil quando o critério de comparação é claro e os dados permanecem compreensíveis após a mudança.
Sem um estado ativo evidente, a pessoa pode não saber por que as linhas estão naquela ordem ou interpretar o ícone de forma errada. Sem um controle operável e um anúncio acessível, a mudança pode existir visualmente e continuar invisível para parte das pessoas.
Quando usar?
- Tabelas longas com muitas linhas para comparar.
- Dados numéricos, datas, nomes ou estados com ordem significativa.
- Interfaces de gestão, relatórios, dashboards, catálogos e listas administrativas.
- Tarefas em que a pessoa precisa localizar extremos, comparar grupos ou priorizar itens.
Quando evitar?
- Quando a ordem natural já é única e não ajuda oferecer outra.
- Quando a coluna não tem uma ordem compreensível ou confiável.
- Quando a ordenação quebra a leitura de linhas mescladas ou grupos hierárquicos.
- Quando a tabela vira uma apresentação empilhada no mobile e o controle deixa de representar as colunas.
- Quando reordenar altera uma prioridade manual que deve permanecer sob controle da pessoa.
Recomendações
Faça
- Ordene colunas relevantes.
- Mostre coluna e direção ativas.
- Use valores reais.
- Alterne a direção previsivelmente.
- Use botão no cabeçalho.
- Anuncie a atualização.
Evite
- Ordenar todas as colunas.
- Depender só de cor.
- Ordenar texto formatado.
- Ocultar o critério ativo.
- Mudar a direção sem feedback.
- Quebrar o controle no mobile.
