Padrões de design frustrantes: filtros quebrados

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

Não é necessariamente apenas a grande quantidade de dados que é difícil de entender; é a complexidade e a 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 de registros públicos.

Projetando para a faixa 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 boletos 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 comunicar de alguma forma à interface. Fazemos isso dividindo nossa intenção em um conjunto de recursos disponíveis. Essa intenção pode ser bastante específica ou bastante geral, mas em ambos os casos, o design deve minimizar o tempo necessário para que os clientes passem do estado padrão (quando nenhum filtro é selecionado) para o estado final (quando todos os filtros são aplicados com sucesso).

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

Essa 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 lembrar facilmente. Pode ser qualquer coisa de dezenas a centenas de itens espalhados por várias páginas.

O importante é que esta gama vai ao encontro das nossas expectativas que:

• estamos analisando 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. Não há filtros adequados suficientes e os usuários disparam muito acima da faixa confortável; muitos filtros e usuários acabam com zero resultados e abandonam o site completamente.

A gama confortável varia significativamente de um produto para outro. A pista para onde ela se encontra pode ser inferida a partir de quão diferentes as opções realmente são. Nos testes de usabilidade, vemos que as pessoas não têm problemas para explorar 20 a 30 tipos de veículos, 40 a 50 tipos de tênis, 70 a 80 buquês de flores ou até mesmo paginar 100 a 200 boletos de pagamento. No entanto, eles se sentem totalmente sobrecarregados ao explorar 15 tipos diferentes de canetinhas ou pilhas AAA. Como regra geral, parece que quanto mais diferentes são as opções, 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 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 essa faixa confortável. No entanto, é mais fácil escrever do que fazer - especialmente quando você tem dezenas ou até centenas de filtros que precisam ser acessados ​​em dispositivos móveis, desktops e em todos os lugares intermediários.

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, alternâncias, 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, como se vê, existem algumas facetas da experiência que tornam o design de filtros bastante difícil :

• os filtros podem vir em 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.
• os filtros geralmente vêm em grande número e precisam ser exibidos nas telas,
• os filtros geralmente têm estados diferentes (selecionado, não selecionado, desativado)
• os filtros geralmente precisam de padrões sensatos e precisam lembrar a entrada do usuário,
• filtros podem ser interdependentes e essas dependências precisam ser óbvias,
• os filtros podem ser difíceis 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.

Os filtros nunca existem sozinhos ; de uma forma ou de outra, eles estão sempre ligados aos resultados sobre os quais estão agindo. Essa conexão geralmente faz com que os filtros e os resultados correspondentes sejam um pouco síncronos , pois os últimos dependem da rapidez com que a interface do usuário registra uma entrada e de quanto tempo ela precisa para processá-la com êxito.

Agora, abordar todos os meandros de cada um desses desafios é 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 críticos.

Evite pequenos painéis roláveis

Depois de apenas algumas sessões de usabilidade com clientes que tentam usar filtros em seu próprio dispositivo, pode-se identificar algumas frustrações comuns fazendo rondas repetidas. 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, devagar, com precisão, com foco e precisão extremos. Como eles fazem isso no celular, alguns filtros são ativados por engano, levando o cliente a ficar ainda mais focado. 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 de 7 a 10 opções de cada vez com um acordeão que se expandisse e mostrasse todas as opções ao clicar/tocar. Essas opções não precisam ser exibidas em sua altura total, mas podem ficar em um painel rolável maior . Mas eles não devem ser ativados rolando pelo painel.

Também é uma boa ideia complementar o filtro com um preenchimento automático de pesquisa e uma exibição 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 (veja acima).

Sempre fornecer fallback de entrada de texto para controles deslizantes

Sempre que os usuários puderem definir uma grande variedade de valores, seja faixa de preço na loja de varejo, duração máxima de uma viagem de trem ou cobertura mínima/máxima para um plano de seguro, provavelmente usaremos algum tipo de controle deslizante . Todos os controles deslizantes têm uma coisa em comum: são maravilhosos quando queremos incentivar 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 pela qual geralmente temos que passar ao aumentar um pouco o preço, de US $ 200 para US $ 215, ou adicionar mais uma hora pela duração de um voo. Fazer isso com um controle deslizante é difícil porque requer uma precisão incrível, e isso sempre produz erros e causa frustração.

Já abordamos 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;
• quando os clientes desejam ser 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 valores diretamente sem precisar usar o controle deslizante,
• em todos esses casos, as soluções precisam ser acessíveis e oferecer suporte à interação apenas com o teclado.

Dê uma olhada no exemplo do Lloydsbank abaixo. Uma calculadora de empréstimo pessoal suporta todos os tipos de interação lindamente. Além disso, observe os estilos de foco quando o polegar é ativado e os intervalos exibidos abaixo do controle deslizante de taxa de juros na parte superior para indicar 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 slider bem projetado vem do Sofasizer da Made.com, 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 “Redimensionar”. Você pode arrastar a alça para ajustar o tamanho ou digitar valores exatos nos campos de entrada de altura e largura.

Nunca faça a rolagem automática dos usuários em uma única entrada

Você já esteve lá antes. Talvez na onda de entusiasmo você vá para a loja de varejo, clique em todos os links de categoria certos, deslize para a esquerda e para a direita na sub-navegação e olhe para aquele laptop novo e brilhante com o qual você finalmente está pronto para se comprometer. O que está esperando por você a seguir pode não ser exatamente a experiência que você esperava. Dê uma olhada no exemplo abaixo. Você consegue identificar o que parece estar acontecendo?

Neste exemplo de Dell.com, conforme você escolhe os recursos do seu laptop, apenas uma única entrada é registrada por vez. Se você selecionar várias opções rapidamente, apenas a última entrada será aplicada. E à medida que uma entrada é registrada, a página é atualizada, pulando o cliente até o topo da barra lateral de filtragem. Isso significa que quanto mais filtros você quiser usar – e normalmente navegar de cima para baixo – mais você terá que continuar rolando para baixo para encontrar o filtro certo.

Uma razão pela qual essa implementação é tão comum não é porque queremos rolar automaticamente os clientes para o topo da área de filtros , mas porque queremos direcioná-los para o topo dos resultados dos produtos com filtros aplicados. Ficar preso em algum lugar no meio da lista não será particularmente útil quando você tiver novos filtros aplicados. E, de fato, é melhor mostrar o topo dos resultados a cada atualização de filtro, mas isso não significa que precisamos de filtros de rolagem automática também.

Na verdade, mesmo que você queira especificar apenas 6 a 10 recursos dessa maneira, precisará embarcar em uma luta de rolagem bastante teimosa contra a rolagem automática , com apenas um único filtro registrado por vez. É possível tocar ou clicar em vários filtros ao mesmo tempo, mas, neste caso, infelizmente, a interface do usuário não responderá conforme o esperado. A experiência geral é bastante frustrante e desorientadora, também porque o site parece lento e sempre exige mais e mais esforço para continuar filtrando. Não é o melhor exemplo de minimizar o tempo do estado padrão para o estado final.

Uma maneira de resolver esses problemas seria remover completamente a rolagem automática dos filtros e encontrar uma maneira melhor de indicar que apenas uma entrada pode ser feita por vez. Por exemplo, poderíamos congelar toda a interface e, assim, desabilitar qualquer entrada até que os novos dados voltem do servidor. Então precisaríamos esperar que novos resultados fossem injetados no DOM, e só então teríamos a UI voltando. Embora seja um pouco mais claro do que a solução anterior, acaba tendo problemas por conta própria.

Nunca congele a interface do usuário em uma única entrada

Toda vez que congelamos a interface do usuário em uma única entrada, reduzimos ativamente nossos clientes ao expressar sua intenção. Na verdade, tornamos um pouco mais complicado para eles especificarem no que estão interessados, priorizando a exibição de resultados sobre a entrada. Isso parece ser uma priorização errada embora. Vamos dar uma olhada no exemplo abaixo.

Na Sears.com, toda vez que uma seleção é feita, não apenas a interface do usuário é totalmente bloqueada; os usuários também são empurrados para o topo da página. Isso é especialmente frustrante para filtros que incluem acordeões (link “veja mais” em “Marca”, por exemplo). A cada novo filtro, o usuário precisa rolar para baixo e abrir o acordeão para encontrar aquele atributo específico que deseja selecionar. O Walmart (veja o exemplo abaixo) segue o mesmo padrão.

Nesses casos, precisamos confiar no JavaScript para alternar entre os estados congelado e de trabalho de forma confiável, mesmo se os dados não tiverem retornado do servidor, ou se voltarem lentamente, ou se estiverem mal formados. Essa é uma suposição bastante frágil para se confiar.

Agora, é claro que não sabemos quando o usuário terminou com sua entrada, mas é razoável garantir que durante toda a interação com os filtros, o cliente nunca precise esperar que uma interface responda de volta . Agora, se olharmos um pouco mais de perto para os três exemplos acima, vamos notar uma semelhança. Todos eles aplicam automaticamente todos os filtros após a seleção, desativando qualquer seleção adicional até que a nova página de resultados volte.

No entanto, é extremamente comum que os clientes adicionem vários filtros rapidamente , às vezes na mesma categoria. O comportamento da interface do usuário não é compatível com essa intenção.

Então, temos alternativas? Uma alternativa óbvia é entregar ao usuário a decisão sobre quando os resultados devem ser atualizados. Isso pode significar adicionar um botão “Aplicar” e incentivar os clientes a selecionar todos os filtros antes de ver os resultados. Mas não é necessariamente a única opção. Na verdade, podemos fazer as duas coisas: ver resultados atualizados enquanto interagimos com o filtro sem nenhum atraso. Só precisamos passar da exibição síncrona de resultados para sua contraparte assíncrona.

Sempre mostrar resultados de forma assíncrona

Já mencionamos que os filtros e os resultados correspondentes geralmente são um pouco síncronos. No entanto, poderíamos dividir as partes da interface do usuário e renderizá-las separadamente, de forma assíncrona. Nesse caso, em cada entrada de filtro, os resultados correspondentes podem ser atualizados de forma assíncrona, enquanto os filtros permanecem sempre acessíveis e no mesmo local. A cada nova entrada de filtro, o usuário veria um flash de novo conteúdo sendo transmitido.

O exemplo da BestBuy acima mostra esse padrão em ação. À medida que selecionamos filtros na barra lateral esquerda, eles são aplicados em segundo plano, enquanto podemos continuar selecionando cada vez mais filtros, caso optemos por fazê-lo. A lista de produtos é atualizada de forma assíncrona: nunca há um estado desabilitado, pois o novo conteúdo é preenchido na lista de resultados correspondentes toda vez que os dados são retornados do servidor.

Poderíamos torná-lo um pouco mais óbvio, mostrando que novos produtos estão sendo carregados à medida que novos filtros estão sendo aplicados. Um bom exemplo disso é o Coolblue, com uma UI de filtragem de barra lateral assíncrona aparecendo no lado esquerdo.

Vale ressaltar neste ponto que toda entrada na área de filtros precisa ser cadastrada, e então aplicada na lista de produtos. Percebemos que, para muitos clientes, esse é um comportamento esperado, a menos que você mantenha um botão flutuante “Aplicar” próximo à área de filtros.

Evite Mudanças de Layout na Entrada do Filtro

Contanto que a interface não esteja bloqueando a entrada, é claro que os clientes esperam que possam definir vários filtros um após o outro. No entanto, dependendo de onde os filtros estão localizados, às vezes eles podem encontrar mudanças de layout acidentais , então eles precisam se orientar na página novamente, rolar para cima e para baixo para encontrar de onde pararam e continuar com a próxima entrada. Dê uma olhada no exemplo abaixo. Qual parece ser o problema no VictoriaPlum (exibido abaixo)?

Toda vez que os usuários interagem com um filtro, uma vez que os novos itens do produto chegam, há uma pequena mudança acontecendo na área de filtragem. Normalmente, existem três razões pelas quais isso acontece:

• em cada entrada de filtro, as seções de filtro que foram expandidas pelo cliente são recolhidas automaticamente,
• filtros que estavam disponíveis anteriormente ficam indisponíveis e ficam ocultos, reduzindo a altura da área de filtragem,
• a visão geral dos filtros aplicados está localizada acima da área de filtros, portanto, à medida que aumenta de tamanho a cada novo filtro, ela também empurra os filtros para baixo.

Para evitar o primeiro problema, precisamos manter o estado dos acordeões e mantê-los abertos, mesmo que o usuário tenha definido um novo filtro ou atualizado a página. Também precisamos manter as configurações de filtragem na atualização ou navegação. Na verdade, vemos clientes esperando que os filtros ainda sejam aplicados mesmo que voltem às categorias ou páginas anteriores (por exemplo, com o botão “Voltar”).

Para o segundo problema, se os filtros não estiverem mais disponíveis, em vez de ocultá-los automaticamente, podemos desativá-los, mas também explicar por que eles estão desabilitados (uma dica amigável pode ajudar) e o que precisa ser feito para reativá-los . Também podemos adicionar uma opção para “Ocultar todas as opções indisponíveis”.

Finalmente, podemos querer reconsiderar a posição dos filtros aplicados acima da área de filtros. Não há realmente muitas opções onde eles poderiam viver, e uma opção melhor parece ser a área acima dos resultados de filtragem.

Exibir filtros acima dos resultados

Para evitar mudanças de layout, podemos exibir filtros aplicados acima dos resultados do produto . Isso manteria a área de filtragem estável e previsível durante toda a interação do usuário. Na verdade, ele não precisa estar visível o tempo todo. Crate & Barrel, no exemplo abaixo, permite que os clientes ocultem e mostrem filtros sob demanda, enquanto os filtros aplicados são adicionados à área dedicada acima dos produtos. Observe que uma opção para limpar todos os filtros também está disponível. (A página do produto mudou desde que o vídeo foi gravado.)

Outra opção é transformar todas as seções de filtro em sobreposições e exibi-las ao tocar/clicar acima dos resultados. Na verdade, você pode até usar filtros flutuantes , para que um cliente rola a página para baixo, os filtros ainda estejam acessíveis o tempo todo.

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

Para não dizer que exibir filtros acima dos resultados é sempre melhor por padrão. No Asos, cada entrada de filtro causa saltos para o topo da página, então os clientes precisam rolar manualmente para baixo para continuar filtrando. Em vez de renderizar novamente a página inteira, faria mais sentido renderizar novamente a área de filtros e a lista de produtos separadamente.

Em geral, porém, as duas primeiras opções (Crate & Barrel e Adidas) parecem funcionar muito bem, e deixam mais espaço para a exposição dos produtos, evitando todos os problemas que discutimos anteriormente. Esse é um padrão bastante confiável para usar quando queremos evitar bloqueios ou confusão. Mas ainda podemos fazer um pouco mais, por exemplo, com um bom e velho botão “aplicar”.

Mostrar o número de resultados no botão "Aplicar"

Quase parece um pouco arcaico ter um botão “Aplicar” para filtros em momentos em que estamos nos acostumando a interações contínuas e suaves, fade-ins e animações cronometradas. No entanto, se queremos direcionar os clientes para uma faixa confortável, dificilmente há uma maneira melhor de fazê-lo do que exibir o número de resultados o mais rápido possível .

A 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 mega-filtro da barra lateral à direita com todas as opções de filtragem disponíveis agrupadas ali. À medida que o cliente percorre os 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 mostrando esse número na interface do usuário. 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 bela integração 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 funcionar melhor. Ele realmente combina o melhor de ambas as soluções: mostrar os resultados imediatamente quando eles chegam, mantendo os filtros sempre acessíveis.

Evite telas divididas no celular

Os problemas que exploramos no artigo se aplicam igualmente a telas grandes e pequenas. No entanto, em telas pequenas e especialmente em conexões lentas, esses problemas se tornam ainda mais críticos. Na maioria das vezes, as interfaces tendem a bloquear toda a interface do usuário em uma única entrada de filtro, causando grandes atrasos para clientes em trânsito (por exemplo, Crutchfield, Walgreens). Por outro lado, é comum dividir a tela para exibir uma sobreposição de filtros, enquanto ainda mostra a lista de produtos atualizada em segundo plano (por exemplo, Nordstrom).

Em geral, porém, pode ser uma ideia melhor experimentar se uma sobreposição de página inteira para filtros tiver um desempenho melhor. Dá mais espaço para experimentar uma visualização de várias colunas, ou talvez até exibir uma área deslizável para escolher filtros sem ter que se mover entre páginas separadas. Na verdade, usar acordeões que podem colapsar e expandir em vez de levar o usuário para uma página separada pode ser uma boa ideia - semelhante ao que discutimos com mega-dropdowns.

Ao contrário da área de trabalho, ter um botão “Aplicar” em todos esses exemplos é importante, e você pode torná-lo um pouco mais útil adicionando a quantidade de produtos como um rótulo no botão e mantendo o botão fixo na parte inferior enquanto o usuário está rolando para baixo .

Lista de verificação de projeto de filtragem

Como de costume, aqui estão todas as coisas a serem lembradas ao projetar qualquer tipo de filtro - um pequeno auxiliar para evitar perder detalhes importantes antes de entrar em conversas com seus colegas designers e desenvolvedores. Você também pode encontrar um conjunto completo de listas de verificação de padrões de design de interface inteligente na Smashing Magazine.

1. Podemos evitar um ícone de filtro e mostrar os filtros como eles são?
2. Se não, qual ícone escolhemos para indicar a filtragem?
3. O ícone + preenchimento é grande o suficiente para um toque confortável?
4. Colocamos o ícone na parte superior, inferior ou flutuante (mobile/desktop)?
5. O que exatamente acontece quando o usuário clica/toca no ícone?
6. Como o ícone mudará ao tocar/clicar?
7. Teremos algum tipo de animação ou transição ao clicar?
8. Os filtros aparecerão como página inteira/sobreposição parcial ou slide-in?
9. Podemos evitar a filtragem da barra lateral, pois geralmente é lenta?
10. Expomos filtros populares ou relevantes por padrão?
11. Exibimos o número de resultados esperados para cada filtro?
12. Podemos usar um swiper horizontal para mover entre os filtros?
13. Podemos evitar drop-downs e usar apenas botões/chips + alternâncias?
14. Para filtros complexos, fornecemos pesquisa dentro dos filtros?
15. Usamos ícones para explicar as diferenças entre vários filtros?
16. Usamos os elementos certos para filtros, por exemplo, controles deslizantes, botões, alternâncias?
17. Os filtros são aplicados automaticamente (sim, para slides)?
18. Os filtros são aplicados manualmente na confirmação (“Aplicar”) (sim, para sobreposições)?
19. Como comunicamos os filtros já selecionados?
20. Os filtros selecionados podem aparecer como pílulas, chips ou tags removíveis?
21. Recomendamos filtros relevantes com base na seleção?
22. Rastreamos a incompatibilidade entre os filtros selecionados?
23. Como as mensagens de erro ou avisos aparecem na interface do usuário?
24. Permitimos que os clientes redefinam todos os filtros rapidamente, de uma só vez?
25. Os filtros (ou botão de filtros) estão flutuando na rolagem no celular/desktop?
26. Os usuários podem tocar no mesmo local para abrir/fechar filtros?

Empacotando

Muitas vezes, a experiência de filtragem na web é interrompida e frustrante, tornando desnecessariamente difícil para os clientes chegarem a essa faixa confortável e brilhante de resultados relevantes. Ao projetar o próximo filtro, dê uma olhada em alguns dos problemas comuns que você pode querer evitar e, esperançosamente, evite toda a frustração que vem de implementações quebradas e inacessíveis.

• Projete para a variedade confortável de opções, para o caso em que um cliente deseja adicionar vários filtros rapidamente - um após o outro.
• Para grupos de filtros longos, evite pequenos painéis roláveis ​​e mostre de 7 a 10 opções por vez com um acordeão que se expande e mostra todas as opções ao clicar/tocar. Adicione um preenchimento automático de pesquisa e uma exibição alfabética também.
• Sempre adicione steppers (+/-) e campos de entrada de texto ao usar controles deslizantes,
• O cliente geralmente deseja definir vários filtros do mesmo tipo. Nunca faça a rolagem automática de usuários em uma única entrada e nunca recolha um grupo de filtros automaticamente.
• Nunca congele a interface do usuário em uma única entrada e nunca faça seu cliente esperar que uma interface responda ao definir filtros.
• Sempre atualize os filtros e mostre os resultados de forma assíncrona , para que em cada entrada de filtro, os resultados correspondentes possam ser atualizados de forma assíncrona, enquanto os filtros permanecem sempre acessíveis e no mesmo local.
• Sempre evite mudanças de layout na entrada do filtro e considere exibir filtros acima dos resultados.
• No celular, o botão "Aplicar" pode ficar fixo na parte inferior da tela. Atualize a contagem de produtos e mostre-os no botão.

Artigos da Série

Se você achar este artigo útil, aqui está uma visão geral de artigos semelhantes que publicamos ao longo dos anos - e mais alguns estão chegando.

• Acordeão Perfeito
• Configurador responsivo perfeito
• Selecionador de aniversário perfeito
• Seletor de data e hora perfeito
• Mega dropdown perfeito
• Comparação perfeita de recursos
• Controle deslizante perfeito
• Form Design Patterns Book por Adam Silver, publicado no SmashingMag
• Assine nossa newsletter por e-mail para não perder as próximas.