Um sistema de busca precisa de design?
Dicas de design para sistemas de busca da vida real
A maioria de nós já se deparou com um campo de busca, seja como designers ou pessoas usuárias e sabemos o quão frustrante pode se tornar a experiência quando a busca simplesmente não responde como desejado e não conseguimos encontrar o que precisávamos.
Se você ainda não sabe da importância dessa funcionalidade, no artigo “As implicações do campo de busca na experiência do usuário”, Fabricio Teixeira explora o quanto um sistema de busca pode ser crucial na experiência de quem o usa e qual pode ser o papel da pessoa designer no processo de desenvolvimento de um sistema de busca, que vai desde o design de interface e pesquisa com usuários até a auditoria do conteúdo.
Nesse artigo quero tratar sobre os desafios de se projetar interfaces para sistemas de busca.
Na maioria das vezes, ao projetarmos interfaces para busca pensamos, principalmente, no próprio campo de busca e na lista de resultados, mas as possibilidades vão muito além disso. Costumo dividir a experiência em 5 estados, que podem variar de acordo com cada contexto, eles são:
- Campo de busca
- Estado vazio
- Digitação
- Lista de resultados
- Erros
Campo de busca
O campo de busca é a fonte de captura da intenção da pessoa usuária. É por meio do que ela digita, fala ou fotografa, que o sistema de busca será capaz de interpretar a informação e retornar um resultado relevante. E é ao campo de busca que a pessoa usuária vai recorrer sempre que precisar pesquisar algo. Por isso, segundo as boas práticas de usabilidade, o campo de busca deve estar sempre visível e acessível.
O que você não pode ignorar ao projetar um campo de busca:
- O label é uma variável muito importante pois pode influenciar no tipo de pesquisa que a pessoa usuária vai fazer e, consequentemente, nos resultados que o sistema vai retornar. Você pode utilizar o label “Buscar”, pode sugerir um tom conversacional, como “O que você quer buscar?” ou então instruir a pessoa usuária, como por exemplo “Procure por pessoas, lojas…”.
- O ícone de lupa pode parecer óbvio, mas sem ele o componente vira um input qualquer. Ele permite que seja claro o affordance do campo de busca.
- Você pode projetar o gatilho para a pesquisa — a ação que vai fazer com que o termo digitado seja pesquisado — de diferentes formas: usando um botão, fazendo com que a busca inicie ao apertar “Enter”, pesquisando automaticamente depois de alguns milissegundos, entre outras formas. Todas as opções são válidas, o importante é que esse gatilho seja projetado.
- Nos sistemas operacionais Android e iOS, é padrão existir um ícone para limpar o termo digitado pela pessoa usuária. Também é importante pensar em como a lista de resultados vai se comportar quando o termo for apagado.
Estado vazio
O estado vazio da busca é o estado onde a pessoa usuária tem o campo de busca focado, mas ainda não digitou nenhum termo. Esse estado pode ser muito útil para:
- Ajudar a pessoa a refazer uma ação. Exemplo: Buscas recentes do Twitter
- Iniciar uma pesquisa refinada. Exemplo: filtros de tipos de conteúdo na busca do WhatsApp
- Recomendar conteúdo. Exemplo: Sugestões de pesquisa do Facebook
Em alguns cenários esse estado simplesmente não existe, pois a tela só muda depois que o termo digitado é pesquisado. Porém, é importante que essa seja uma decisão consciente.
Digitação
O estado em que a pessoa está digitando algo mas ainda não terminou também pode ser uma oportunidade para criar uma boa experiência. Nesse estado é comum utilizar o autocomplete, em que o sistema faz sugestões de conteúdo enquanto a pessoa usuária está digitando.
Assim como o estado vazio, esse estado pode existir ou não, dependendo do contexto e da necessidade. Em testes com pessoas usuárias aprendi que só vale a pena usar o autocomplete se as informações apresentadas realmente trouxerem atalhos ou sugestões coerentes relacionadas ao termo que essas pessoas estiverem pesquisando. Caso contrário, é melhor deixar que elas terminem de digitar e realizem a pesquisa normalmente.
Lista de resultados
A lista de resultados é, sem dúvidas, o estado mais importante da busca. É a tela onde o sistema retornará as informações encontradas a partir do termo pesquisado.
Sempre procuro ter em mente que na tela de resultados a pessoa usuária precisa tomar uma decisão. Então, o principal questionamento a ser feito é: de quais informações a pessoa usuária precisa para identificar o resultado e tomar uma decisão?
O que não podemos esquecer ao projetar uma lista de resultados:
- O formato mais comum de exibição dos resultados é em lista, mas não precisamos ficar restritos a projetar listas. O Pinterest, por exemplo, apresenta o resultado em grade. O importante aqui é descobrir qual é o melhor formato para apresentar o conteúdo que a pessoa usuária está buscando.
- A quantidade de resultados que o sistema de busca retorna pode mudar a forma com que a interface irá se comportar. Logo, como deve ser a lista com poucos resultados? E com muitos resultados?
- O volume de resultados também impacta na forma com que o carregamento da lista deve ser realizado. As formas mais comuns são a criação de várias páginas de resultado (paginação) e a rolagem infinita com carregamento progressivo, onde a lista vai carregando mais resultados conforme a pessoa usuária rola a página.
- Se você está projetando uma “omni search” — uma busca que é capaz de retornar diferentes tipos de resultados, como a busca do Spotify, por exemplo, que retorna músicas, playlists, artistas, etc — como será a exibição desses diferentes tipos resultados? No mercado existem alguns padrões para resolver esse problema: seções, abas ou telas diferentes ou uma única lista com todos os resultados.
Erros
E por último, como todo sistema, o sistema de busca pode apresentar erros. Os mais comuns são:
- Zero Resultados: é quando o sistema de busca não foi capaz de encontrar nenhum resultado para o termo pesquisado. Nesse estado, além de dar um feedback coerente, podemos instruir sobre como realizar uma nova busca e também temos a oportunidade de recomendar conteúdos parecidos com o que a pessoa pesquisou e o sistema não foi capaz de encontrar.
- Página não encontrada (404): esse erro é muito comum em buscas na web, onde os buscadores são capazes de indexar uma URL da busca, mas depois ela deixou de existir no site por algum motivo, por exemplo. Também pode ser uma oportunidade de recomendar conteúdo e instruir a pessoa sobre o que ela pode fazer.
- Erros do sistema (502, 503, etc): esses erros podem ser causados por diversas razões e causam uma indisponibilidade temporária no sistema. Nesse caso é importante deixar claro que o problema está do lado do sistema e dar à pessoa uma sugestão do que fazer para se recuperar desse erro.
Projetar para busca exige atenção aos detalhes, mas cada decisão de design tomada pode impactar a forma como a pessoa usuária vai usar a funcionalidade
Construir uma interface para um sistema de busca, que proporcione uma boa experiência, não é uma tarefa trivial e muitas vezes subestimamos sua complexidade. Todos os estados e comportamentos da busca devem ser projetados e decididos pois podem ser cruciais para a experiência da pessoa e até mesmo para o sucesso do produto.
Apesar disso, um bom sistema de busca não se resume a uma boa interface, o conteúdo apresentado deve fazer sentido e ser relevante, a performance da busca deve estar adequada, entre outros fatores, mas esses são assuntos para próximos textos.
