7 práticas recomendadas no design e no posicionamento da caixa de pesquisa
A caixa de pesquisa é um dos elementos mais importantes em um site. Independentemente do tipo de negócio que você tenha, ter uma caixa de pesquisa bem projetada é essencial para que os visitantes possam encontrar facilmente o que procuram. Isso não significa que é suficiente simplesmente adicionar um recurso de pesquisa sem sequer pensar em sua aparência.
Você precisará considerar a funcionalidade, a facilidade de uso, a estética e até o posicionamento da caixa de pesquisa. Isso tudo para que você possa melhorar a experiência do usuário em seu site, o que pode até levar ao aumento das conversões.
Então, o que você precisa fazer ao criar uma caixa de pesquisa? Embora as recomendações exatas possam ser subjetivas com base em suas necessidades e objetivos, existem algumas dicas gerais que podem funcionar para diferentes tipos de sites. Então, aqui estão algumas das práticas recomendadas no design e no posicionamento da caixa de pesquisa:
1 Torne-o Proeminente
A primeira e mais importante regra no design da caixa de pesquisa é torná-la facilmente perceptível. Você pode estar tão focado na estética do design que cria uma caixa de pesquisa que combina com o restante do site. Mas é importante lembrar que você está adicionando uma caixa de pesquisa para pessoas que desejam encontrar algo em seu site. Fazer com que eles pesquisem a caixa de pesquisa não fará sentido e pode até ter um impacto negativo em sua experiência.
Isso não significa que você tenha que comprometer totalmente a estética. Crie um design que pareça ótimo em relação ao design do site existente e, ao mesmo tempo, seja proeminente o suficiente para que as pessoas percebam. Portanto, o tamanho da caixa deve ser grande, mas não muito grande a ponto de ocupar muito espaço na página. E a cor deve ser contrastante, mas complementar ao restante das cores usadas na página.
A caixa de pesquisa da Best Buy é um bom exemplo, pois o branco contrasta com o azul da página enquanto ainda se alinha com as outras cores usadas no design da página. O tamanho da caixa de pesquisa não é muito grande, embora seja proeminente o suficiente para que as pessoas percebam imediatamente assim que entrarem na página.
2 Destaque o botão Enviar
Como mencionado anteriormente, todo o propósito de uma caixa de pesquisa é facilitar as coisas para os visitantes do site. Evite complicar demais as coisas com botões de envio minúsculos nos quais os usuários precisam se concentrar para clicar. Destacar o botão enviar melhora a visibilidade da própria caixa de pesquisa e também facilita o clique dos usuários.
Se você optar por usar um ícone de lupa ou soletrar "Enviar" no botão enviar, depende de você. No entanto, concentre-se no tamanho e na cor do botão para garantir que os usuários não tenham problemas para encontrá-lo depois de digitar o campo de pesquisa. Deixe claro para eles o que eles devem fazer depois de digitar o que estão procurando.
Alguns sites chegam a colocar apenas o ícone da lupa para que os visitantes pesquisem algo. Isso pode ser um grande benefício para a estética do site, como no caso da Levi’s Strauss. Mas este não é um exemplo ideal de design de caixa de pesquisa.
Embora pareça bom em termos de design, pode ser inconveniente para os visitantes, pois eles precisam aguardar o carregamento da caixa de pesquisa depois de clicar no ícone da lupa. Pode ser frustrante, especialmente se você estiver acessando o site de um local onde a conexão é lenta. Em vez de carregá-la separadamente, talvez seja melhor expandir a caixa de pesquisa no mesmo local onde a lupa está colocada.
Quando preso com espaço limitado, mas a pesquisa é importante, pode ser bom que ela se misture à navegação superior. Isso é exatamente o que o Shralpin fez em seu site para celular.
O Xero Shoes, por outro lado, não possui nenhum botão de envio. Os visitantes terão que inserir uma palavra-chave no campo de pesquisa e, em seguida, pressionar Enter para pesquisar algo no site. Agora você pode pensar que não é tão ruim simplesmente apertar a tecla enter para iniciar a busca, mas e o resto dos visitantes? Alguns deles podem estar procurando especificamente pelo botão enviar e podem ter dificuldade em conduzir a pesquisa usando esse tipo de design.
O botão de envio da Amazon é bastante proeminente em laranja, enquanto o restante da caixa de pesquisa está em branco. A cor do botão enviar também contrasta com a cor mais escura do cabeçalho do site. Portanto, embora eles usem apenas um ícone de lupa como botão de envio, ele ainda é bem visível, ao contrário do exemplo da Levi’s. Certifique-se de que o ícone esteja preenchido, pois isso aumentará a visibilidade.
3 Coloque-o onde os usuários provavelmente olharão
Há um debate em andamento sobre o melhor lugar para colocar a caixa de pesquisa em um site. Mas se você olhar alguns dos sites mais populares, notará que as caixas de pesquisa geralmente são colocadas na parte superior central ou superior direita da página. Isso é evidente no estudo publicado pela SLI Systems. A análise constatou que 54% dos varejistas colocam a caixa de pesquisa no canto superior direito, 30% no centro e apenas 16% à esquerda.
Isso significa que os visitantes podem esperar encontrar a caixa de pesquisa no canto superior direito do seu site. Colocá-lo em algum lugar inesperado significa que os usuários podem precisar fazer um esforço extra para encontrar a caixa de pesquisa. Apesar disso, ainda é uma boa ideia estudar a atividade do visitante usando um mapa de calor ou uma ferramenta de rastreamento ocular. Isso ajudará você a identificar onde é mais provável que eles procurem, ajudando você a entender onde deve colocar a caixa de pesquisa em seu site.
Independentemente de você escolher esquerda, direita ou centro; certifique-se de que está na parte superior da página, pois é onde os visitantes têm maior probabilidade de digitalizar primeiro, de acordo com um estudo de rastreamento ocular do NN Group. qual posição parece estar funcionando melhor para você.
Aqui está um exemplo de uma caixa de pesquisa colocada no lado direito da página de Get Plus Followers.
O posicionamento da caixa de pesquisa do eBay está no centro da página, onde fica bem visível e uma das primeiras coisas que os visitantes notarão sobre o site.
4 Combine preenchimento automático com gráficos
Seu site pode estar entre os 62,5% que usam o recurso de preenchimento automático na caixa de pesquisa. Para obter vantagem competitiva, você pode aprimorar ainda mais o recurso adicionando visualizações de imagem do produto junto com as sugestões de preenchimento automático em sua função de pesquisa. Isso ocorre porque apenas 28,2% dos sites participantes estão implementando esse recurso atualmente.
Para defender ainda mais o preenchimento automático com gráficos, você pode querer dar uma olhada no caso do LED Hut. Depois de adicionar visualizações de imagens às sugestões de preenchimento automático, o fornecedor de iluminação LED conseguiu aumentar a taxa de conversão de pesquisa em 200%. Veja como ficará quando você adicionar visualizações de imagem à sugestão de pesquisa.
5 Evite isolar ou superlotar a caixa de pesquisa
O primeiro ponto mencionou como é importante deixar a caixa de pesquisa em destaque. Isso significa que você deve evitar superlotar as áreas ao redor com ícones ou outros elementos que possam distrair os visitantes da caixa de pesquisa. A caixa de pesquisa precisa ser priorizada e focada. Ao mesmo tempo, evite exagerar, pois você pode acabar isolando a caixa de pesquisa a ponto de dificultar sua localização.
A caixa de pesquisa de Snow and Rock é um bom exemplo de uma caixa de pesquisa bem projetada. Como você pode ver na imagem abaixo, não há muitos elementos lotando a área onde está colocado. Mas você ainda pode vê-lo no centro-esquerda da página e não é colocado em algum lugar que os usuários tenham dificuldade em encontrar. O botão enviar também contrasta com o restante das cores do site, fazendo com que ele se destaque.
6 Opte por uma caixa de pesquisa em expansão
Quando você está procurando maneiras de economizar espaço enquanto ainda destaca a caixa de pesquisa para os usuários, pode optar por uma caixa de pesquisa crescente. Essa é uma escolha ideal para sites nos quais a pesquisa pode não ser muito essencial, mas você ainda deseja dar aos usuários a opção de pesquisar algo. Em vez de adicionar apenas um ícone de lupa, você adicionará uma pequena caixa de pesquisa ao lado dele para atuar como uma pista visual para os visitantes do site. Quando um usuário clica no campo, a caixa se expande e permite que os usuários insiram o termo de que precisam.
Aqui está um bom exemplo do Net-a-Porter. Se você observar o canto superior direito do site, verá que a caixa de pesquisa está visível, mas não muito grande. Há um ícone de lupa para os usuários identificarem que é uma opção de busca.
Mas quando você clica no campo, a caixa de pesquisa se expande para você digitar o termo de pesquisa necessário. Essa combinação de estética e usabilidade é excelente para um site que precisa incluir muitos elementos na página inicial, pois ajuda a economizar espaço sem comprometer a visibilidade da caixa de pesquisa.
A caixa de pesquisa existe para pessoas que já têm alguma ideia do que estão procurando. Mas e aqueles que não têm muita certeza do que estão procurando? Você pode ter um recurso de sugestão de preenchimento automático, mas adicionar uma função suspensa ao lado da caixa de pesquisa pode ser uma boa ideia para alguns sites. Ele dá aos usuários um senso de direção e dicas sobre o que procurar.
Essa tática provou ser um sucesso para a Casa Mineira, uma empresa imobiliária com sede no Brasil. Em um estudo de caso realizado no site, substituir a caixa de pesquisa padrão por menus suspensos ajudou a gerar mais leads. Na verdade, a variação resultou em 57,25% mais leads do que antes.
A razão pela qual essa variação teve um desempenho tão bom é porque os visitantes receberam um caminho de ação claro e puderam encontrar rapidamente o que estavam procurando. No projeto anterior, os visitantes precisavam ter certeza do que exatamente estavam procurando. Assim, para orientar melhor os visitantes, eles decidiram cobrir uma grande variedade de locais e tipos de acomodação.
Mas é importante lembrar que essa opção pode não ser a melhor para todos os tipos de sites. Uma loja de comércio eletrônico, por exemplo, pode não conseguir tornar a pesquisa mais funcional para os visitantes usando essa técnica. Mas para empresas imobiliárias e empresas relacionadas a serviços, uma funcionalidade de pesquisa suspensa pode ser a solução perfeita.
Conclusão
Agora você tem uma melhor compreensão do design e do posicionamento da caixa de pesquisa com a ajuda de exemplos e dicas. Então, o que você aprendeu com isso? Você deve ter notado a ênfase colocada no destaque e na visibilidade da caixa de pesquisa. Isso significa que contraste de cores, estética e tamanho da caixa de pesquisa são alguns dos aspectos mais importantes.
Seu foco deve estar na combinação de funcionalidade e estética, o que pode não ser fácil de executar. O melhor conselho que você pode obter é realizar testes A/B em vários designs e posições, conforme mencionado nos pontos anteriores. Tem alguma dúvida sobre o design da caixa de pesquisa? Fique à vontade para deixar um comentário abaixo.