Conceitos básicos de desenvolvimento de uma bela experiência de pesquisa

Artigo original publicado na sexta-feira, 14 de dezembro de 2012

Olá a todos! Meu nome é Kate Dramstad, gerente de programas da equipe de pesquisa do SharePoint. A experiência de pesquisa no SharePoint 2013 é mais extensível do que nunca, pois os designers e desenvolvedores podem criar praticamente tudo o que imaginarem. Mas é importante ter cuidado ao personalizar a experiência de pesquisa. Há um limite entre uma página equilibrada e uma página confusa, e gostaríamos de compartilhar algumas reflexões sobre como desenvolver uma experiência de pesquisa que seja bonita e útil.

Alinhamento geral da página

Um dos fatores mais importantes da experiência de pesquisa é o alinhamento de todos os elementos da página. Em nosso design padrão, você perceberá que a Web Part de refinamento (que mostra as opções de classificação ao longo do lado esquerdo da página) e o ícone do centro de pesquisa do SharePoint (a imagem de lupa no canto superior esquerdo) estão alinhados à esquerda, do mesmo modo que a caixa de pesquisa, a navegação e os resultados. A parte superior da caixa de pesquisa está alinhada à parte superior do ícone; a parte inferior da navegação está alinhada à parte inferior do ícone. 

Figura 1. Todos os elementos da página de resultados de pesquisa estão alinhados com uma grade, mostrada em verde

Pode parecer um detalhe insignificante, mas encaixar os elementos da página à grade realmente ajuda os usuários a percorrerem a página com mais facilidade. Os componentes são separados uns dos outros por sólidas linhas verticais e horizontais de espaços em branco. Isso ajuda os olhos a distinguirem com mais facilidade os diferentes componentes da página, algo que é extremamente importante. Uma página mal-alinhada, no melhor dos casos, apenas parece "estranha" para a maioria dos usuários e, no pior dos casos, realmente dificulta a localização eficiente de resultados. Quando os componentes estão mal-alinhados, eles podem criar "bordas irregulares". Quando o olho tenta acompanhar uma borda irregular, ele precisa se mover de um lado para outro. O olho acompanha linhas retas com muito mais eficiência. 

Figura 2. Nesta imagem, o ícone de pesquisa está à esquerda e não está mais alinhado à grade

Ao adicionar um novo componente à página ou reorganizar os componentes existentes, é muito importante levar essa grade em consideração caso você queira uma experiência o mais refinada possível.

Figura 3. Aqui, modificamos os resultados embutidos de modo a incluir um recurso de classificação com estrelas e alguns metadados adicionais. Observe como os recursos adicionados continuam alinhados à grade.

Aparência geral da página

O alinhamento não é a única coisa importante. Também é necessário prestar atenção ao número de cores, fontes e controles avançados na página. O foco da página de resultados de pesquisa deve ser quase sempre os próprios resultados. Por isso, ao estilizar os componentes na página de resultados, convém certificar-se de que a atenção do usuário não esteja sendo desviada dos resultados. Veja a seguir algumas dicas e truques.

Quando possível, use mapeamentos de cores bem conhecidos

Por exemplo: nos resultados de pesquisa, é convenção geral que o texto em azul seja um título de resultado clicável e que o texto em verde seja a URL de um resultado específico. Caso haja desvios desses padrões, os usuários serão forçados a refletir mais a respeito do que estão olhando. 

Figura 4. Mudar a cor do título e da URL desorienta os usuários. Tente usar cores que correspondam a convenções conhecidas

Use o mínimo de cores possível

Normalmente, as cores são usadas para ajudar a destacar alguns elementos importantes, como um filtro selecionado, o título de uma pesquisa ou uma URL. Porém, utilizar muitas cores pode passar a impressão de que todos os elementos estão tentando se destacar, todos estão competindo pela atenção do usuário. No fim, nada se destaca, pois tudo vira uma confusão visual colorida. 

Figura 5. Utilizar muitas cores diferentes causa distrações, dificultando que o usuário decida para onde olhar e o que é mais importante. Limite o número de cores usadas na interface do usuário.

Use o mínimo de faces de tipos e tamanhos de fonte possível

As fontes, os tamanhos de fontes e negrito/itálico são usados por motivos semelhantes aos da utilização de cores: ajudar no destaque de alguns elementos importantes. Do mesmo modo que as cores, se você usar muitos estilos e fontes, tudo fica confuso. Nossa equipe de produtos costuma chamar isso de "bilhete de resgate", pois parece que a página foi composta utilizando recortes de várias revistas!

Mantenha o máximo de simplicidade visual dos controles avançados

Veja o refinador do histograma do filtro Date, com o título Modified, na Figura 6. Inicialmente, colocar esse refinador na página padrão foi arriscado, pois é um controle com aparência complexa, que possivelmente pode se destacar quando comparado a filtros textuais. Porém, mantivemos a uniformidade das cores com o restante da página e deixamos as bordas e linhas limpas e simples. É importante que você faça o mesmo ao adicionar qualquer controle personalizado.

Uma ideia que tivemos foi a de um filtro de gráfico de pizza. Porém, observe a Figura 6 e veja como esse refinador é chamativo. 

Figura 6. O filtro personalizado de gráfico de pizza tem muitas cores e não combina com o estilo visual de outros controles. Ele é muito chamativo.

Agora, veja na Figura 7 o que acontece quando simplificamos o esquema de cores e as formas. 

Figura 7. Utilizando cores que já são usadas na interface do usuário e mantendo o estilo visual de outros controles, este refinador de gráfico de pizza fica interessante o suficiente para que os usuários explorem brevemente sua finalidade, mas não tão chamativo que os distraia de suas tarefas

Divisão conceitual da página

Ao desenvolver uma experiência de pesquisa, leve em consideração os detalhes estéticos e conceituais. Com base em convenções de pesquisa populares e em nossas próprias pesquisas, organizamos os componentes da página em áreas diferentes, de acordo com a funcionalidade e com o modelo de interação do usuário. No momento da adição ou reorganização de componentes, é melhor manter a divisão conceitual, de modo que os usuários não se percam quando tentarem descobrir como realizar uma ação.

Por exemplo, todas as ações de filtros estão no lado esquerdo da página de resultados de pesquisa. Quando os usuários desejam filtrar o conjunto de resultados, eles sabem que devem procurar ali. Caso deseje adicionar um novo filtro à página, o melhor a fazer é adicioná-lo ao lado de outros filtros, de modo que os usuários não precisem procurar por ele pela página.

A Figura 8 mostra uma visão geral das divisões conceituais da página padrão de resultados de pesquisa. 

Figura 8. A página de resultados de pesquisa é divida em cinco áreas funcionais. Ao personalizar a página, tente adicionar novos elementos à área funcional correspondente.

Essas foram apenas algumas orientações gerais para que você comece a criar belas experiências de pesquisa. Aguardo seus comentários e dúvidas!

Esta é uma postagem de blog traduzida. Consulte o artigo original em Designing a beautiful search experience – The basics