Aplicando filtros de pesquisa na interface

Comecei a scrollar bastante entre os resultados e percebi que meu interesse era especificamente por fones da Apple, porém quanto mais scrollava, mais resultados aleatórios apareciam.

Eventualmente surgiam o fones da Apple, mas sequer conseguia fazer comparação de valores com outras ofertas do mesmo fone, já que os resultados estavam muito espalhados.

Em meio a tantos resultados para a mesma palavra-chave, como eu poderia diminuir esse meu desgaste nas pesquisas, direcionando a busca especificamente para o que eu queria?

Afunilando as pesquisas

Ao realizar buscas em fontes com muitos resultados encontramos resultados de todos os tipos, inclusive muitos que nem nos servem.

Se estivéssemos em uma biblioteca, por exemplo, e quiséssemos pegar emprestado algum livro de determinado tema, poderíamos simplesmente entrar no catálogo com o tema e esperar por todos os resultados referentes àquilo. Mas, e se na relação de livros houvesse tanto livros disponíveis quanto livros já emprestados para outros usuários? Não faria sentido eu escolher um livro e no final ele nem estar disponível...

Pensando nisso, por que não pedir uma relação apenas de livros disponíveis para empréstimo?

Adicionando algumas categorizações à pesquisa, não apenas diminuímos a quantidade de resultados, como também tornamos essa pesquisa mais lapidada ao que realmente nos interessa.

A chance de perder algum item relevante por ter volume demais de informações diminui.

Ao fazer isso, nós basicamente filtramos uma pesquisa de maior quantidade de resultados, afunilando apenas às características que esperamos encontrar nesse resultado.

O filtro na prática

Assim como quando lidamos com a arquitetura da informação para priorizar e organizar melhor nosso conteúdo em um app ou site, pensar em quais serão os filtros aplicados pelo usuário segue a mesma ideia.

No exemplo do início, fui buscar no filtro alguma opção que me ajudasse:

Entrei no filtro de "marca" e selecionei então a opção que queria:

Conseguimos afunilar a pesquisa apenas para o que me interessava:

Filtros, assim como qualquer categorização, precisam ser bem pensados, sem escolhas aleatórias, para que o resultado seja de fato útil ao usuário, além de evitar a confusão,adicionando milhares de categorias desnecessárias.

Priorizando a categorização específica para cada contexto, eliminamos possíveis ruídos para o usuário.

Como fazem por aí

No app do Mercado Livre conseguimos afunilar as pesquisas de duas formas: progressivamente, adicionando mais categorizações à medida que a interação acontece, ou aplicando diversos filtros de uma vez.

No primeiro caso temos algo mais ou menos assim:<iframe src="https://streamable.com/s/9ua43/miwkuf" width="170" height="300" frameborder="0" allowfullscreen></iframe>

Enquanto no segundo os filtros são uma tela específica, um formulário, com diversas categorias.

No caso do Mercado Livre, os filtros mudam também quando entramos em alguma categoria específica. Por exemplo, se estamos na categoria de roupas, surge no filtro a possibilidade de filtro por gênero, tamanho, cor, etc.

Além disso, podemos considerar que nem sempre precisaremos de uma tela dedicada exclusivamente ao filtro. Se você tiver apenas um tipo de categorização, poderia simplesmente chamar um modal, como o Enjoei fez com as opções de ordenamento dos produtos:

Alguns elementos importantes

Quando criamos um filtro, existem alguns elementos da UI que podem fazer muita diferença para a usabilidade.

A primeira delas é deixar claro como fechar o filtro, caso desista das alterações. Por incrível que pareça, alguns filtros em apps não tem isso muito claro, apenas um botão "voltar" que às vezes mantém os filtros, às vezes apaga, etc…

Outro ponto importante, pensando na confusão causada pelo ponto anterior, é adicionar um botão de "filtrar" ou equivalentes, que contribuam para que o usuário entenda que os filtros foram efetivamente aplicados.

Assim como aplicar um filtro ou cancelá-lo, o usuário pode querer eliminar todos os filtros e voltar para sua busca padrão. Para isso, um botão de "limpar filtros" ou algo do tipo, pode facilitar muito.

A forma como serão criados os inputs de categorização podem seguir diversas linhas diferentes: um dropdown list, um slider, checkboxes, enfim… o importante é que a escolha faça sentido para o tipo de input.

Por exemplo, se quisermos uma margem mais "customizável" de preços, podemos adicionar um slider que permita ao usuário esse controle, mas se quisermos adicionar margens de valor pré-determinadas, um dropdown list com algumas opções pode ser uma boa escolha. Isso tudo depende de como pretendem apresentar os resultados.

Para entender um pouco mais de toda essa construção do app pensando na UX, a Alura tem uma Formação de UX com vários cursos bem legais abordando pontos diferentes em cada etapa do processo. :)