Quando se trata de projetar ou reprojetar um site, é fácil se prender apenas à questão estética."Esse tom de azul não parece muito bom. Não seria legal colocar o logotipo no lado direito da tela? E se a gente puser um GIF animado gigante no meio da página?"
No entanto, se você estiver realmente tentando realizar algo com seu site (por exemplo, reconhecimento da marca, geração de leads etc.), precisará voltar sua atenção a outros aspectos além da aparência.
Em um mundo com mais de um bilhão de sites que as pessoas podem visitar, você precisa garantir que o design do seu site seja otimizado para a usabilidade (o quanto ele é fácil de usar) e a experiência do usuário (o quanto a experiência de interagir com o site é agradável para os usuários).
Você poderia passar anos estudando detalhes sobre a usabilidade e a experiência do usuário, mas como ponto de partida, reunimos a seguinte lista de diretrizes para você aplicar ao seu próximo projeto de design da Web.
Conheça 8 diretrizes de design de site para proporcionar uma experiência excepcional ao usuário
1) Simplicidade
Embora a aparência do site seja importante, a maioria dos visitantes não o acessa para avaliar se ele é bom de design. Em vez disso, eles acessam o seu site para concluir alguma ação ou para encontrar alguma informação específica.
Adicionar elementos de design desnecessários (ou seja, que não servem a nenhum propósito funcional) só dificulta para os visitantes fazerem o que vieram fazer.
Sob a perspectiva da usabilidade e da experiência do usuário, a simplicidade é uma virtude. E você pode empregar a simplicidade de várias maneiras diferentes. Aqui estão alguns exemplos:
- Cores. Não exagere. O livro The Handbook of Computer-Human Interaction (O Manual da Interação Computador–Humano), em uma tradução livre - recomenda usar no máximo cinco (mais ou menos duas) cores diferentesno design do seu site.
- Tipos de letra. Os tipos de letra que você escolher deverão ser, obviamente, legíveis. E quanto às cores, seja moderado. Uma recomendação comum é usar no máximo três tipos de letra diferentes de até três tamanhos diferentes.
- Elementos gráficos. Use-os somente se ajudarem o usuário a concluir uma tarefa ou executar uma função específica (não os adicione à toa).
Aqui está um ótimo exemplo de um design simples de página inicial do Rockaway Relief:
Tire tudo o que não agrega valor e, depois, adicione alguma textura visual.
O famoso designer automobilístico Colin Chapman disse: "Simplifique, depois dê um toque de leveza." O nosso princípio deve algo a essa mentalidade. Todos os elementos de uma página devem agregar valor ao usuário ou à empresa e, de preferência, a ambos. Se interpretado ao pé da letra, o processo de remoção de elementos que não agregam valor pode produzir um design bastante espartano. É aqui que deve entrar um pouco de textura visual na página. Essa abordagem significa o seguinte:
- O foco da página é o conteúdo principal.
- A textura visual e o interesse necessários estão presentes, dando apoio ao efeito estético-usabilidade, mas não às custas do conteúdo principal da página.
Tire tudo o que não agrega valor e, depois, adicione alguma textura visual.
O famoso designer automobilístico Colin Chapman disse: "Simplifique, depois dê um toque de leveza". O nosso princípio deve algo a esse modo de pensar. Todos os elementos de uma página devem agregar valor ao usuário ou à empresa e, de preferência, a ambos. Se interpretado ao pé da letra, o processo de remoção de elementos que não agregam valor pode produzir um design bastante espartano. É aqui que deve entrar um pouco de textura visual na página. Essa abordagem significa o seguinte:
- O foco da página é o conteúdo principal.
- A textura visual e o interesse necessários estão presentes, dando apoio ao efeito estético-usabilidade, mas não às custas do conteúdo principal da página.
2) Hierarquia visual
Intimamente ligada ao princípio da simplicidade, a hierarquia visual implica organizar os elementos do site de modo que os visitantes naturalmente gravitem em direção aos elementos mais importantes primeiro.
Lembre-se: quando se trata de otimizar o site para a usabilidade e a experiência do usuário, o objetivo é levar os visitantes a concluir uma ação desejada, mas de maneira natural e agradável. Ao ajustar a posição, a cor ou o tamanho de determinados elementos, você pode estruturar seu site de forma que os visitantes sejam atraídos para esses elementos primeiro.
No exemplo abaixo do Spotify, você pode ver que o call to action "Get Spotify Free" (na versão em português, "Obtenha o Spotify Free") fica no topo da hierarquia visual. Para começar, ele está posicionado à esquerda da página (a maioria dos visitantes lê os sites da esquerda para a direita). Além disso, é o único elemento acima da dobra que está na cor azul, o que naturalmente chama a atenção.
3) Navegabilidade
Uma navegação intuitiva é crucial para garantir que os visitantes encontrem o que estão procurando no site. O ideal é que o visitante possa chegar ao seu site e não tenha de pensar muito sobre onde deve clicar em seguida. Ir do ponto A ao ponto B deve ser uma ação intuitiva.
Veja algumas dicas para otimizar a navegação do seu site:
- Deixe a estrutura da navegação principal simples (e perto do topo da página).
- Inclua navegação no rodapé do site.
- Use trilhas de navegação (breadcrumbs) em todas as páginas (exceto no início) para que as pessoas saibam onde estão.
- Inclua uma caixa de pesquisa perto do topo do site para que os visitantes possam pesquisar por palavras-chave.
- Não ofereça muitas opções de navegação em uma página.
- Não se aprofunde demais. Na maioria dos casos, é melhor manter sua navegação até três níveis de profundidade. Leia este artigo (em inglês) para ter uma explicação mais clara da comparação entre a navegação rasa e a profunda.
- Inclua links no texto da página e mostre claramente aonde esses links levam.
Outra dica: depois de decidir qual será a navegação principal (superior) do site, mantenha-a consistente. Os rótulos e a localização da sua navegação devem ser iguais em todas as páginas do seu site. Veja um exemplo do site da InVision:
E isso nos leva ao nosso próximo princípio...
4) Consistência
Além de manter a navegação consistente, a aparência geral do site deve ser padronizada em todas as páginas. Planos de fundo, esquemas de cores, tipos de letra e até o tom da sua escrita são aspectos nos quais a consistência pode ter um impacto positivo na usabilidade e na experiência do usuário.
Isso não quer dizer, porém, que todas as páginas do seu site devam ter exatamente o mesmo layout. Em vez disso, você deve criar layouts diferentes para tipos específicos de páginas (por exemplo, um layout para landing pages, um layout para páginas informativas etc.). Com o uso consistente desses layouts, será mais fácil os visitantes entenderem o tipo de informação que provavelmente encontrarão em uma determinada página.
No exemplo abaixo, você pode ver que o Airbnb usa o mesmo layout para todas as suas páginas de "Ajuda" (uma prática comum). Imagine como seria a experiência da perspectiva de um visitante se cada página de "Ajuda" tivesse seu próprio e exclusivo layout. Isso provavelmente deixaria as pessoas meio perdidas.
5) Acessibilidade
Para proporcionar uma experiência realmente excelente ao usuário, seu site precisa ser compatível com os diferentes dispositivos (e sistemas operacionais e navegadores) que os visitantes estão usando.
De maneira geral, isso significa investir em uma estrutura de site altamente flexível, como o design responsivo. Com um site responsivo, o conteúdo é automaticamente redimensionado e reordenado para se ajustar às dimensões de qualquer dispositivo que o visitante esteja usando. Clientes do Marketing Hub: usando o design responsivo, o conteúdo da HubSpot criado é otimizado automaticamente para visitantes de qualquer dispositivo - e você pode contar com o recurso de arrastar e soltar do CMS Hub para criar o seu site de maneira fácil.
Em um nível mais específico, melhorar a acessibilidade pode ser tão simples quanto adicionar texto alternativo a todas as suas imagens (para que os visitantes que não puderem ver imagens em seus navegadores ainda possam entender o que está na página).
Por fim, é mais importante que seu site ofereça uma ótima experiência em diferentes plataformas, em vez de fazer com que ele pareça idêntico em todas elas. E isso pode significar aderir a convenções de design específicas da plataforma, em vez de tentar incluir elementos exclusivos com os quais os usuários dessa plataforma talvez não estejam habituados.
Isso nos leva ao nosso próximo princípio.
6) Convencionalidade
Existem certas convenções de design da Web com as quais os usuários da Internet foram se habituando ao longo dos anos. Exemplos:
- A navegação principal acontece no topo (ou no lado esquerdo) da página
- O logotipo fica posicionado no canto superior esquerdo (ou no centro) da página
- Esse logotipo é clicável, para sempre levar o visitante de volta ao início
- Os links mudam de cor/aparência quando você passa o mouse sobre eles
Embora dê uma certa vontade de jogar todas essas convenções de design para o alto e ser completamente original ou exclusivo, isso provavelmente seria um erro. Seria como colocar o volante do carro no banco de trás, ou seja: isso confundiria as pessoas.
Para proporcionar a melhor experiência possível aos visitantes do seu site, aproveite o fato de que você já sabe com quais tipos de experiência na Web eles estão habituados. Você pode usar essas informações para deixar seu site mais fácil para os visitantes navegarem.
Um dos exemplos mais comuns de convencionalidade no design da Web: usar um ícone de carrinho de compras em um site de comércio eletrônico:
Na imagem acima, você pode ver (da esquerda para a direita) os ícones de carrinho de compras da Amazon, da Wayfair e da Best Buy.
7) Credibilidade
Por fim, o uso de convenções de design da Web — elementos e estratégias de design com os quais os visitantes já estão habituados — pode ajudar a dar mais credibilidade ao seu site. E se você está se esforçando para construir um site que ofereça a melhor experiência possível ao usuário, a credibilidade (ou seja, a confiança que seu site transmite) pode ser um longo caminho a percorrer.
Uma das melhores maneiras de melhorar a credibilidade do seu site é ser claro e honesto sobre o produto/serviço que você está vendendo. Não faça os visitantes terem de vasculhar dezenas de páginas para descobrirem o que você realmente faz. Em vez disso, seja direto e separe um espaço para explicar o valor por trás do que você faz.
Outra dica de credibilidade: tenha uma página de preços. Embora seja tentador fazer as pessoas entrarem em contato com você para obter informações sobre preços, expor os preços de forma clara no site pode fazer sua empresa parecer mais confiável e legítima. Veja um exemplo de uma ótima página de preços no site do Box:
8) Centralização no usuário
Em última análise, a usabilidade e a experiência do usuário giram em torno das preferências dos usuários finais. Afinal de contas, se você não está fazendo o design para eles, para quem então?
Embora os princípios detalhados nesta lista sejam um ótimo ponto de partida, o verdadeiro segredo para melhorar o design do seu site é fazer testes com os usuários, reunir feedback e fazer alterações com base no que você aprendeu.
Aqui estão algumas ferramentas de teste de usuário para você começar:
- Crazy Egg. Use esta ferramenta para controlar vários domínios sob uma conta e descobrir insights sobre o desempenho do seu site usando quatro ferramentas de inteligência diferentes: mapa de calor, mapa de rolagem, sobreposição e confete.
- Loop11. Use esta ferramenta para criar facilmente testes de usabilidade, mesmo que você não tenha experiência com HTML.
- The User Is Drunk. Pague Richard Littauer para ficar bêbado e avaliar o seu site. Não acredita? Nós experimentamos. Confira.
De acordo com a Vitamin T, 68% dos visitantes não são convertidos porque eles não acham que você se importa com a experiência deles. Então, como um toque final de sabedoria sobre usabilidade e experiência do usuário, comece a se importar mais! Coloque-se no lugar dos visitantes do seu site e tenha-os em mente em cada passo do caminho.
Que outros princípios você acha que contribuem para a excelência no design da Web e na usabilidade do site?
Nota do editor: Este post foi publicado originalmente em janeiro de 2012 e foi atualizado para aumentar a precisão e a abrangência.
