Padrões de projeto frustrantes: Filtros quebrados

Os filtros estão por toda parte. Embora muitas vezes pensemos que eles aparecem ao reservar voos ou fazer compras online, os filtros são frequentemente usados ​​em praticamente todas as interfaces que apresentam mais do que um punhado de pontos de dados.

Não é necessariamente apenas a grande quantidade de dados que é difícil de entender; é a complexidade e falta de consistência que os dados geralmente envolvem que requer alguma filtragem-um cenário tão comum em grades de dados, painéis corporativos, rastreamento de vacinas e registros públicos.

Parte De: Padrões de design

Parte 1: Perfect Accordion Parte 2: Perfeito Responsivo Configurador Parte 3: Selecionador de data e hora perfeito Parte 4: Comparação perfeita de recursos Parte 5: Perfect Slider Parte 6: Perfect Birthday Picker Parte 7: Menus Mega suspensos perfeitos Parte 8: Filtros perfeitos Assine nossa newsletter por e-mail para não perder as próximas. Projetando para uma gama confortável

Como clientes, usamos filtros para reduzir um grande conjunto de opções a uma seleção mais gerenciável e altamente relevante. Talvez apenas algumas dezenas de recibos de pagamento em vez de milhares, ou apenas um punhado de blusas em vez de toda a coleção.

Temos atributos específicos de interesse, uma intenção específica, que precisamos de alguma forma comunicar ao interface. Fazemos isso dividindo nossa intenção em um conjunto de recursos disponíveis. Essa intenção pode ser bastante específica ou muito geral, mas em ambos os casos, o design deve minimizar o tempo necessário para os clientes irem do estado padrão (quando nenhum filtro é selecionado) para o estado final (quando todos os filtros foram aplicados com sucesso).

Essa é apenas uma parte da história. Aplicar filtros relevantes é a parte fácil, mas mostrar resultados relevantes suficientes é um pouco mais difícil. Na verdade, para cada interface e para cada intenção, temos um intervalo confortável específico em mente, que é um número preferencial de opções que acreditamos poder gerenciar com relativa facilidade.

Esta gama de opções não precisa caber em uma única tela, ou ser exibida em uma única página, ou ser limitada a uma pequena lista que podemos facilmente lembrar. Pode ser qualquer coisa de dezenas a centenas de itens espalhados por várias páginas.

O importante é que esse intervalo atenda às nossas expectativas de que:

estamos procurando em opções altamente relevantes, podemos entender facilmente o que estamos explorando, podemos identificar as diferenças entre todas as opções e podemos processar tudo dentro de um prazo razoável e previsível.

Ao contrário da classificação, que apenas reorganiza os resultados de acordo com alguns atributos preferidos (limites flexíveis), os filtros sempre representam limites rígidos. Eles limitam estritamente o escopo dos resultados. Filtros adequados e usuários insuficientes disparam além da faixa confortável; muitos filtros e usuários acabam sem resultados e abandonam o site completamente.

A faixa confortável varia significativamente de um produto para outro. A dica de onde ele se encontra pode ser inferida pelo quão diferentes as opções realmente são. Em testes de usabilidade, vemos as pessoas não tendo problemas para explorar 20-30 tipos de veículos, 40-50 tipos de tênis, 70-80 buquês de flores ou mesmo paginando em 100-200 comprovantes de pagamento. No entanto, eles se sentem totalmente sobrecarregados ao explorar 15 tipos diferentes de agulhas ou pilhas AAA. Como regra geral, parece que quanto mais diferentes as opções são, mais confortáveis ​​nos sentimos com um conjunto ligeiramente maior de opções.

A questão final, então, é como encontrar esse equilíbrio delicado, quando nossa interface ajuda os usuários a chegar rapidamente a resultados apenas suficientes. Uma resposta a essa pergunta está em algo que parece terrivelmente óbvio: elimine quaisquer obstáculos no caminho dos usuários em direção a esse intervalo confortável. No entanto, é mais fácil escrever do que fazer-especialmente quando você tem dezenas ou até centenas de filtros que precisam estar acessíveis no celular, no desktop e em qualquer lugar intermediário.

A complexidade da filtragem

À primeira vista, a filtragem não parece um empreendimento particularmente complexo. É claro que podemos ter longos debates sobre os elementos de formulário corretos para diferentes tipos de filtros-preenchimento automático, rádios, alternadores, menus suspensos de seleção, controles deslizantes e botões apenas para citar alguns-mas em sua essência, todos os elementos de formulário são apenas básicos entrada, certo?

Bem, ao que parece, existem algumas facetas da experiência que tornam o projeto de filtros bastante difícil :

os filtros podem vir vários sabores e formas, para preços, classificações, cores, datas, horários, tamanho, marca, capacidade, recursos, nível de experiência, faixa etária, sintomas, status do produto etc. filtros geralmente vêm em grandes números e precisam ser exibidos nas telas, os filtros geralmente têm diferentes estados (selecionados, não selecionados, desativados), os filtros geralmente precisam de padrões sensíveis e tem que lembrar a entrada do usuário, os filtros podem ser interdependentes e essas dependências precisam ser óbvias, os filtros podem ser difícil de validar , por exemplo quando os usuários podem digitar dados complexos, como hora ou datas, os filtros precisam oferecer suporte e mostrar mensagens de erro significativas e tantos outros.

Filtros nunca existem por conta própria ; de uma forma ou de outra, eles estão sempre conectados aos resultados sobre os quais estão agindo. Essa conexão geralmente faz com que os filtros e os resultados correspondentes sejam um tanto síncronos, pois os últimos dependem da rapidez com que a IU registra uma entrada e de quanto tempo ela precisa para processá-la com êxito.

Agora, resolvendo todas as As complexidades de cada um desses desafios não são nada menos que um trabalho monumental, mas alguns problemas são um pouco mais frustrantes do que outros, tornando a experiência geral dolorosa e irritante e, portanto, causando alto abandono e altas taxas de rejeição. Vamos explorar alguns dos mais importantes.

Evite os painéis roláveis ​​minúsculos

Depois de apenas algumas sessões de usabilidade com clientes que tentam usar filtros em seus próprios dispositivos, é possível detectar algumas frustrações comuns fazendo rondas indefinidamente. Um dos padrões mais irritantes vem de longas seções de filtro que contêm dezenas de opções. Essas opções geralmente ficam escondidas em um pequeno painel rolável, mostrando de 3 a 4 opções por vez e exigindo rolagem vertical para navegar pelas opções.

Essas seções geralmente fazem com que os clientes rolem verticalmente, lentamente, com precisão, com foco e precisão extremos. Como no celular, alguns filtros são ativados por engano, fazendo com que o cliente se concentre ainda mais. Um exemplo clássico desse padrão é o filtro “Marcas”, que geralmente contém centenas de opções, classificadas por popularidade ou por alfabeto.

Uma opção alternativa seria mostrar tantos quanto 7–10 opções de cada vez com um acordeão que se expandiria e mostraria todas as opções ao tocar/clicar. Essas opções não precisam ser exibidas em sua altura total, mas podem ficar em um painel rolável maior , mas não devem ser ativadas ao rolar pelo painel.

Também é uma boa ideia complementar o filtro com um preenchimento automático de pesquisa e uma visualização em ordem alfabética se algumas das opções populares estiverem destacadas na parte superior. Um bom exemplo disso é Rozetka.ua , um varejista de comércio eletrônico da Ucrânia (consulte acima).

Sempre fornecer substituto de entrada de texto para controles deslizantes

Sempre que os usuários puderem definir uma grande variedade de valores, seja faixa de preço em loja de varejo, duração máxima de uma viagem de trem ou cobertura mínima/máxima para um seguro plano, provavelmente usaremos algum tipo de controle deslizante . Todos os controles deslizantes têm uma coisa em comum: eles são maravilhosos quando queremos encorajar os clientes a explorar muitas opções rapidamente, mas são bastante frustrantes quando o usuário tem algo específico em mente e, portanto, precisa ser um pouco mais preciso.

Basta pensar na frustração que geralmente temos de passar ao aumentar um pouco o preço, de $ 200 para $ 215, ou adicionar mais uma hora para a duração do seu voo. Fazer isso com um controle deslizante é difícil porque requer uma precisão incrível e isso sempre causa erros e frustrações.

Cobrimos como projetar um controle deslizante perfeito em detalhes, mas provavelmente o recurso mais importante que todo controle deslizante precisa é oferecer suporte a diferentes velocidades de interação. Na verdade, existem alguns tipos comuns de interação:

quando os clientes desejam explorar muitas opções rapidamente, um bom e velho controle deslizante com uma faixa e um polegar funciona perfeitamente bem; quando os clientes são mais precisos em sua exploração, podemos ajudar adicionando steppers (+/-) para saltos granulares para frente e para trás, quando os clientes têm um valor exato em mente , podemos ajudar fornecendo campos de entrada de texto para valores mín./máx., para que os usuários possam digitar os valores diretamente sem ter que usar o controle deslizante, em todos esses casos, as soluções devem ser acessíveis e oferecer suporte ao teclado-apenas interação.

Dê uma olhada no exemplo do Lloydsbank abaixo. Uma calculadora de empréstimo pessoal oferece suporte a todos os tipos de interação perfeitamente. Além disso, observe os estilos de foco quando o polegar é ativado e os intervalos exibidos abaixo do controle deslizante da taxa de juros na parte superior para indicar por onde o cliente está navegando no momento. A taxa de juros muda dependendo de quanto dinheiro o cliente gostaria de pedir emprestado.

Outro exemplo interessante de um controle deslizante bem projetado vem do Sofasizer , que permite filtrar sofás com base nas dimensões que eles precisam ter. Em vez de usar um conjunto de campos de entrada, a Made.com optou por usar uma interface visual com um ícone de “Redimensionar”. Você pode arrastar a alça para ajustar o tamanho ou digitar valores exatos nos campos de entrada de altura e largura.

Outra opção é transformar todas as seções de filtro em sobreposições e exibição eles na torneira/clique acima dos resultados. Na verdade, você pode até usar filtros flutuantes , de modo que, à medida que o cliente rola a página para baixo, os filtros ainda estão acessíveis.

Um exemplo desse padrão é Adidas (veja a imagem abaixo). A barra de filtros é persistente; mesmo quando os usuários estão rolando a página para baixo, a sobreposição do filtro não fecha automaticamente -requer a entrada do usuário, novamente passando o controle para o usuário. No entanto, ele fecha automaticamente quando um dos filtros é selecionado. Se o usuário deseja selecionar vários filtros, ele deve reabrir o mesmo grupo de filtros repetidamente. Manter os filtros persistentes pode ser uma ideia melhor. Ainda assim, o resultado: nenhuma mudança de layout, nenhuma rolagem frustrante em corredores estreitos e filtros sempre acessíveis.

Não quer dizer que exibir filtros acima dos resultados é sempre melhor por padrão. Em Asos , todos os filtros a entrada faz com que salte para o topo da página, então os clientes precisam rolar manualmente para baixo para continuar a filtragem. Em vez de renderizar novamente a página inteira, faria mais sentido renderizar novamente apenas a área de filtros e a lista de produtos.

Ikea apresenta filtros na parte superior dos resultados. Às vezes, os filtros aparecem em uma sobreposição suspensa e, às vezes, como uma pílula abaixo dos filtros. Mas na maioria das vezes, ao contrário dos exemplos anteriores, quando um filtro é selecionado, ele exibe uma sobreposição de megafiltro da barra lateral à direita com todas as opções de filtragem disponíveis agrupadas ali. Conforme o cliente está passando pelos filtros, a lista de produtos é atualizada em segundo plano de forma assíncrona. Mais importante, observe o botão “Aplicar”, cujo rótulo muda dependendo da entrada.

A cada entrada de filtro, uma nova solicitação é enviada ao servidor, recuperando o número de resultados e, em seguida, mostrando-os no UI. Essa é uma ótima maneira de dar aos usuários uma noção muito clara de quão longe ou quão perto eles estão de seu alcance confortável.

Outro exemplo é Galaxus.ch (veja abaixo), um varejista suíço de comércio eletrônico que oferece uma experiência de primeira classe quando se trata de filtragem. Os filtros são exibidos acima dos resultados do produto; uma sobreposição de filtro aparece ao tocar/clicar. Sem lentidão, tempos de resposta rápidos e uma integração adorável de filtros ativos com a área de filtros. Um ótimo exemplo de referência que vale a pena considerar ao projetar qualquer tipo de filtro.

Em geral, ter um botão “ Aplicar ” junto com atualizações em tempo real da área de conteúdo parece estar funcionando melhor. Ele realmente combina o melhor de ambas as soluções: mostrar os resultados imediatamente quando eles chegam, enquanto mantém os filtros acessíveis em todos os momentos.