Filtros na loja virtual: como ajudar a cortar o catálogo

Um bom filtro de loja deixa marcar várias opções no mesmo grupo, aplica a escolha no ritmo de quem está filtrando e mostra o tempo todo o que está ativo. Os três pontos ainda falham em lojas grandes. Nos testes do Baymard Institute (em inglês), 15% das lojas não aceitam duas opções do mesmo grupo. Outros 28% não exibem um resumo dos filtros aplicados (Baymard (em inglês)).

Para que serve o filtro

Filtro é a ferramenta de quem já está diante de uma lista grande e quer só o que atende aos seus critérios. O NN/g (em inglês) separa dois papéis. O filtro tira da lista o que não cumpre uma condição. A faceta sugere categorias e atributos em que a pessoa talvez nem tivesse pensado, e assim transforma a busca em navegação.

Os controles são simples de propósito: caixas de seleção e menus com rótulos em linguagem comum. Com eles, qualquer cliente monta uma consulta complexa sem conhecer lógica booleana (NN/g (em inglês)). Isso vale para quem já sabe o que quer. Para comparar meia dúzia de opções finais, o caminho é outro, e está no texto sobre tabela de comparação.

Várias opções no mesmo grupo

A pessoa que procura calça jeans azul ou preta precisa marcar as duas cores juntas. Quando a loja só aceita uma, ela filtra pelo azul, decora o que gostou, desmarca, filtra pelo preto e tenta lembrar de tudo no fim. O Baymard (em inglês) descreve esse percurso em nove passos e conta que participantes desistiram de produtos que serviam.

A regra que o cliente espera tem duas partes:

Entre grupos diferentes, vale o “e”. Cor preta e marca X mostra só o que é preto e da marca X.
Dentro do mesmo grupo, vale o “ou”. Marca X e marca Y mostra o que é de uma ou da outra.

O mesmo artigo pede caixa de seleção para as opções, porque o formato já avisa que dá para marcar mais de uma. Nos testes, era comum alguém aplicar cinco ou seis filtros, e houve quem chegasse a dez (Baymard (em inglês)).

Aplicar na hora ou esperar o botão

Existem dois jeitos de aplicar. No interativo, a lista muda a cada clique. No modo em lote, a pessoa marca tudo e confirma num botão. O NN/g (em inglês) liga a escolha a duas perguntas: o que a pessoa pretende e quão rápido o site responde.

Quem está explorando ganha com o interativo, porque cada resultado dá ideia para o próximo filtro. Quem já chega com vários critérios, como tamanho, cor e comprimento, se irrita com a página recarregando a cada marcação. Quando o site pode ficar lento, o lote poupa espera, e por isso o NN/g o recomenda no celular.

Há um meio termo. O sistema espera a pessoa parar de mexer na área dos filtros e só então atualiza, depois de um ou dois segundos sem atividade (NN/g (em inglês)). Enquanto isso, um indicador de progresso confirma que o clique foi recebido. Escurecer a lista inteira durante a troca evita que cada miniatura pisque sozinha.

Para onde a página vai depois

Depois de aplicar, a página pode voltar ao topo ou ficar onde estava. Voltar ao topo no meio da escolha tira a pessoa do lugar e pode fazer o próximo clique cair na opção errada. Ficar parado também falha quando sobram poucos itens e a área ao lado dos filtros aparece vazia. O NN/g (em inglês) mostra um caso assim, em que a tela vazia parecia carregamento ou falta de resultado.

O critério é o mesmo da seção anterior. Enquanto a pessoa ainda mexe nos filtros, a página não se move. Quando ela termina, levar ao topo mostra o que mudou.

Mostrar o que está ativo

O resumo dos filtros aplicados resolve três problemas que o Baymard (em inglês) viu nos testes. Sem ele, falta a confirmação imediata de que o filtro entrou. Falta um jeito rápido de remover. E falta contexto para a lista, como um título que diz onde a pessoa está.

O terceiro é o mais caro. Quem esquece um filtro ativo pode achar que a loja não tem o produto, quando bastava tirar uma condição. O mesmo artigo cita filtros que entram sem a pessoa escolher, como um atalho da home para “poltronas até 300 dólares” que já chega com três condições marcadas.

Alguns cuidados ajudam:

cada item do resumo tem um “x” grande para remover e há um botão para limpar tudo;
mostrar só a contagem, como “Filtros (3)”, não basta, porque obriga a abrir o painel para saber quais são;
em loja de produto técnico, o nome do grupo acompanha a opção: “Largura: 90 cm” diz mais que “90 cm”.

Segundo o Baymard (em inglês), 72% das lojas avaliadas já mostram esse resumo no desktop. Quem não mostra destoa do que o cliente encontra no resto da web.

No celular

A tela pequena tira o que fazia o filtro funcionar no computador: ver os controles e a lista ao mesmo tempo. Muitos sites mandam os filtros para outra tela, e a pessoa vai e volta para saber se a escolha deu certo. O NN/g (em inglês) defende um painel que desliza por cima da lista, com o total de resultados fixo no topo e parte da lista visível ao fundo.

O mesmo texto pede uma palavra no botão, como “Filtrar”, em vez de um ícone de linhas e círculos que nem todo mundo reconhece. Para o resumo dos filtros, o Baymard (em inglês) aceita uma fileira com rolagem lateral, desde que o último item apareça cortado pela metade. O corte é o que avisa que há mais itens à direita.

O que levo do meu trabalho

Entre fevereiro e setembro de 2022 fui designer sênior de UX na Newfold Digital, onde criei um sistema para buscar e filtrar domínios que simplificou a escolha do usuário. A experiência está no meu perfil completo. Não tenho número medido desse trabalho para mostrar aqui.

A outra lição vem do case da Le Biscuit, uma loja com milhares de produtos de casa e estilo de vida, montada sobre um design system casado com os esquemas de conteúdo. Na minha leitura, filtro bom começa antes da tela. Se a largura do produto não existe como campo no cadastro, não há o que filtrar. O Baymard (em inglês) faz um alerta parecido: com o catálogo mal categorizado, nem a melhor lógica de filtro salva a lista.

Onde as fontes divergem

O artigo do NN/g sobre o painel no celular (em inglês), de 2015, trata como ideal ver a lista mudar assim que a pessoa marca uma opção. O texto do NN/g sobre quando aplicar (em inglês), de 2016, recomenda o botão de aplicar no celular, mesmo com o painel. As duas leituras se encontram na velocidade. Resposta instantânea favorece a atualização na hora, e rede lenta favorece o lote.

O erro comum: deixar a lista zerar sem aviso

O deslize mais frequente é a combinação de filtros que não devolve nada e não explica por quê. O NN/g (em inglês) lembra que facetas costumam mostrar quantos itens há em cada opção, o que evita o resultado zero antes do clique. Junto com o resumo dos filtros ativos, a pessoa vê o que cortou e desfaz o excesso. Para quando a busca por texto não encontra nada, veja o texto sobre busca na loja.