O conteúdo do Bitcatcha é patrocinado pelos leitores. Quando você compra algo pelos links em nosso site, nós recebemos uma comissão.

A Lista Completa de 25 Truques de Design UX para Sites

A ideia por trás do design UX é simples: usuários felizes e confiantes têm mais probabilidade de comprar de você. Eles têm mais chances de confiar em você, se inscrever em suas listas de e-mail ou baixar seu aplicativo.

Costumo pensar no design de experiência do usuário (ou design UX) como psicologia e não como desenvolvimento.

Um bom design de UX é tudo sobre entrar na cabeça de seus visitantes.

É preciso antecipar cada movimento deles e criar um site que seja simples, intuitivo e agradável de usar.

Infelizmente, não existe uma resposta fácil ou uma solução mágica para um bom design de UX. É a culminação de muitos pequenos ajustes. Cada um melhorando a experiência em seu site.

Com isso em mente, listei uma lista de 25 pequenos (e fáceis) ajustes que farão seu design UX brilhar.

1. Velocidade

A velocidade do site é sua primeiríssima chance de causar uma boa impressão. É seu primeiro obstáculo de UX.

Se for muito lenta, seus visitantes já estarão agitados e menos propensos a confiar em você. Instintivamente, associamos velocidade ao profissionalismo, e a maioria dos visitantes espera que seu site carregue dentro de dois segundos.

Qualquer coisa mais lenta que isso, e é uma experiência ruim do usuário, logo de cara.

Certifique-se de que a velocidade de seu servidor esteja à altura, e diminua o peso de seu site para que ele abra rapidamente. Veja mais dicas acionáveis sobre como melhorar a velocidade do seu site aqui.

2. Quem é Você e O Que Você Faz?

Seu próximo grande desafio é informar rapidamente seus visitantes. Quem é você? O que você faz? E que valor você pode oferecer a eles?

netflix value proposition

Isso é chamado de proposta de valor, e é tão importante que escrevemos um post inteiro no blog sobre isso. Você só tem alguns segundos para convencer seus visitantes, então faça valer a pena!

Experimente agora: resuma todo o seu site em uma frase e sinalize para onde você quer que os visitantes vão a seguir.

3. Certifique-se de que os Visitantes Possam Entrar em Contato com Você

Uma parte central do design de UX é eliminar quaisquer preocupações ou ansiedades que seus visitantes possam ter.

Uma das maiores preocupações para novos visitantes é se eles devem confiar em você ou não – especialmente se você for um site novo.

Uma maneira de remover essa ansiedade é mostrando a eles que existe uma pessoa real nos bastidores. Adicione um endereço comercial, um número de telefone e um endereço de email de verdade. (NÃO um formulário de contato – as pessoas tendem a não confiar neles em comparação com um endereço de email direto).

Melhor ainda, use uma caixa de chat ao vivo para que os usuários possam fazer perguntas instantaneamente.

Tagove Live Chat

Se algo der errado, é bom saber que eles podem entrar em contato facilmente.

4. Sempre Dê aos Visitantes um Caminho de Volta para a Página Inicial

Todos nós já nos perdemos em sites antes. Você segue links e acaba em um buraco de coelho.

Se isso acontecer, seus visitantes ficam agitados e frustrados. Eles vão instintivamente clicar no botão “X” para fechar o navegador.

Em vez disso, certifique-se de que haja um botão ‘home’ claro e definido, para que eles possam sempre recomeçar. Normalmente, os usuários também esperam que seu logo redirecione para a página inicial, então certifique-se de que isso aconteça.

Além de dar a eles um reinício rápido, use ‘breadcrumbs’ para explicar onde eles estão no processo.

Grandes barras de progresso são ótimas para isso. Se for durante o processo de finalização de compra, por exemplo, deixe seu usuário saber exatamente onde ele está e o que falta fazer.

checkout progress bar

Mais uma vez, isso é uma psicologia simples. Por exemplo, dar um passeio é muito mais cansativo quando você não sabe onde está o fim. Nos sentimos muito mais confortáveis quando temos um mapa. A mesma ideia se aplica online.

6. Remova Qualquer Ação Repetitiva

É super frustrante inserir os mesmos dados duas vezes em um formulário (como um endereço de cobrança e um endereço de entrega). Tente se livrar de quaisquer ações repetitivas que retardem o processo de compra.

São coisas como essa que levam ao abandono de carrinho. Seus visitantes procuraram em outro lugar.

Melhor ainda, crie um sistema que lembre as preferências de seus clientes. Eles ficaram surpresos e encantados quando tudo estava lá esperando por eles novamente. É uma coisa simples que melhora as chances de retorno dos clientes.

7. Use Dicas de Ferramentas para Ajudar os Novatos (Mas Não Atrapalhe os Especialistas!)

Alguns de seus visitantes são clientes regulares. Eles vão passar rapidamente por suas fichas de inscrição e processo de compra. Outros serão totalmente novos e podem ter algumas dúvidas ao longo do caminho.

Pequenos ícones de ‘dica de ferramenta’ (geralmente identificados com um ponto de interrogação) ajudarão os novatos a entender o que precisam fazer. Mas, ao mesmo tempo, eles não atrapalham seus especialistas.

tooltips

Você pode até fornecer atalhos ou faixas rápidas para ajudar a acelerar os especialistas. Você verá com frequência links ‘pular isto’ na maioria dos sites e aplicativos, por exemplo.

8. Crie um Call-To-Action Grande e Ousado

Uma call-to-action diz exatamente ao seu visitante o que fazer: ‘Inscreva-se’ ou ‘Compre agora’, por exemplo. Certifique-se de que seja imponente, direta e explique o valor de fazê-lo.

big bold cta

Melhor ainda, faça com que seja uma cor clara e ousada (verdes e laranjas funcionam maravilhas aqui) e cerque-a de espaço em branco. Isso deve atrair o olhar dos seus usuários diretamente para ela, dando-lhes uma indicação clara de que é isso que você quer que eles façam.

9. Faça uma Distinção Clara Entre Calls-To-Action Primárias e Secundárias

Com muitas calls-to-action, você verá duas opções. ‘Enviar’ e ‘cancelar’, por exemplo. Ou ‘baixe agora’ e ‘teste grátis’.

primary and secondary cta

Está claro qual ação você quer que o visitante tome, então certifique-se de que eles saibam disso. Confira a página inicial do Spotify. Eles deixaram o botão ‘go premium’ ousado e atraente. Eles fizeram o botão ‘play free’ se misturar com o fundo.

Isso é apenas psicologia simples novamente. Você sutilmente deixa seus usuários saberem em qual clicar.

10. Use a Hierarquia para Mostrar aos Usuários para Onde Ir em Seguida

Com sorte, você deve ter uma ‘jornada do usuário’ clara em mente. Digamos que você ensine cursos online através do seu site. Uma jornada simples do usuário pode ser assim:

Leia o blog mais recente > baixe o relatório gratuito e cadastre-se na lista de e-mails > inscreva-se no seu curso online pago.

Se você tiver uma jornada clara, pode criar uma hierarquia visual para direcionar os usuários para onde você deseja. Nesse caso, você garantiria que seu blog fosse a primeira coisa que eles veem. Em seguida, você começará a incluir muitos links para sua lista de e-mail.

11. Não Mexa com Elementos Esperados!

Muitas vezes é difícil resistir à vontade de ser criativo com layouts e elementos. Mas a questão é que todos nós sabemos como uma loja online deve ser. Esperamos que os produtos sejam organizados em categorias simples. Esperamos descrições de produtos, avaliações e um processo de compra familiar.

familiar purchase process

Não tente reinventar a roda com esses aspectos cruciais! Mantenha as coisas simples.

12. Fique com uma Paleta de 3 Cores Simples

Mais uma vez, trata-se de resistir à vontade de complicar demais as coisas. Combinar mais de 3 cores primárias é difícil e muitas vezes confunde seus usuários.

simple 3 color palette design

A cor também é muito útil para moldar a experiência do usuário, pois está intimamente ligada à psicologia e às emoções. Por exemplo, associamos o azul à confiança (há uma razão pela qual o Facebook usa azul!)

Combine sua paleta de cores com seu produto.

13. Por Que Estou Recebendo um Erro? E O Que Eu Faço Agora?

Às vezes, as coisas dão errado e erros 404 são inevitáveis. No entanto, você pode realmente transformar isso em uma experiência positiva para o usuário.

Explique exatamente por que eles estão recebendo esse erro criando páginas personalizadas de 404 e 504. O ‘fail whale’ do Twitter era famoso por isso.

twitter fail whale is a custom error page

Para erros desconhecidos, assegure aos usuários que você está trabalhando nisso e redirecione-os de volta para seu site.

Becos sem saída, como páginas de erro, são perigosos. Os usuários naturalmente procuram pela cruz. Tranquilize-os e envie-os de volta.

14. Dê aos Usuários um High-Five Quando Eles Completarem Algo

Os seres humanos são movidos por um senso de realização e conclusão. Quando eles completam uma tarefa, avise-os e mostre-lhes para onde ir em seguida.

Você pode fazer isso depois que eles enviarem seu endereço de e-mail, depois que comprarem um produto, depois que adicionam algo ao carrinho ou simplesmente quando chegarem ao final de um post do blog.

É uma experiência simples, fácil e positiva. Também dá aos usuários uma sensação de colaboração; como se você estivesse realmente ajudando-os a alcançar seus objetivos.

15. Fique com Apenas Duas Famílias de Fontes

Consistência e branding são fundamentais para uma boa experiência do usuário.

É muito confuso se a fonte do seu logotipo for Futura, o texto do corpo for Times New Roman, o call to action for Comic Sans e os títulos forem Windings…

excess fonts families

Fique com apenas duas famílias de fontes. É mais fácil de ler e parece mais profissional e confiável. Veja as melhores fontes para sites para usar que combinem com sua marca.

16. Use Mensagens de Alerta Distintas e Consistentes

Às vezes, seus usuários vão errar. Talvez eles tenham digitado a senha incorretamente e não conseguiram fazer login. Talvez eles tenham esquecido de incluir um CEP na ficha de inscrição.

use distinct alert messages

Nesses casos, você vai querer uma mensagem de erro ou alerta simples, mas distinta. Certifique-se de que seja distinta em cor e estilo de qualquer outra coisa em seu site. Isso dá uma indicação clara de que algo precisa de ação.

Você também deve tornar essas mensagens de alerta consistentes em todo o seu site. Não use uma cor, estilo ou posicionamento diferente, pois isso só se torna confuso.

17. LIMITE O TEXTO EM CAIXA ALTA

É apenas irritante.

Na verdade, existem razões mais importantes do que essa. Na verdade, lemos o texto em maiusculas mais devagar do que em minúsculas. Portanto, é muito mais difícil ler rapidamente (que é como geralmente lemos na internet).

Reserve o caps lock para quando você realmente precisar causar um impacto.

18. Agrupe Itens Relacionados

Isso é especificamente para sites de eCommerce, mas funciona em todos os casos.

Tente manter itens semelhantes e relacionados no mesmo lugar. Isso significa que seus visitantes e clientes obtêm um serviço muito mais personalizado, quase como se você tivesse antecipado suas necessidades.

group related items together

Você pode fazer isso com produtos físicos, como a seleção ‘mais como este’ da Amazon. Você também pode fazer algo semelhante com posts de blog e artigos, usando uma seção de conteúdo relacionado.

Isso mantém os visitantes navegando pelo seu site, reduz sua taxa de rejeição e cria uma experiência mais pessoal.

19. Mantenha Tudo Consistente

A última coisa que você quer é que um visitante clique em um link e sinta que navegou para um site diferente.

Certifique-se de que sua barra de navegação permaneça no mesmo lugar, não importa onde você esteja no site. Certifique-se de que seu logotipo esteja sempre visível e que a paleta de cores permaneça a mesma.

20. Projete o Layout para Leitura Rápida

Nós não lemos sites como lemos um livro. Nossos olhos pulam e buscam informações importantes.

scanning website with f-pattern

Normalmente, lemos sites de maneira em forma de F, mas imagens ousadas e calls-to-action também são conhecidos por chamar a atenção primeiro. Certifique-se de conferir os layouts populares de sites que você pode usar para seu site.

21. Construa Confiança com Depoimentos e Provas Sociais

A maioria dos visitantes do seu site chega com a guarda levantada. Eles são naturalmente cautelosos com novos sites e certamente ainda não estão prontos para comprar de você.

Como eu disse, uma parte fundamental do design UX é remover essas barreiras e fazer as pessoas se sentirem confortáveis em seu site. Alguns depoimentos e provas sociais bem colocados farão as pessoas se sentirem mais à vontade. Gostamos de ver que outras pessoas (idealmente grandes nomes) usaram seu produto e serviço e o aprovam.

22. Deixe os Usuários saberem com o Que Eles Podem Brincar!

Os sites são tipicamente compostos de duas partes: Número um: conteúdo – é estático e não podemos interagir com ele. E número dois: controles – são coisas que podemos clicar, brincar e interagir.

page with interactive buttons

O Twitter é ótimo nisso. Texto preto simples para conteúdo. O texto azul indica o que você pode clicar e interagir. Os ícones ficam coloridos quando você passa o mouse sobre eles para mostrar com o que você pode brincar.

Convide as pessoas a brincarem com seu site!

23. Crie uma Curva de Aprendizado Suave

Ninguém gosta de ficar preso em um site confuso e difícil.

Tente dar a seus visitantes uma vitória rápida quase imediatamente. Facilite para eles e simplifique – especialmente se você estiver oferecendo uma proposta de negócios complicada.

24. Encontre uma Maneira de se Identificar Rapidamente com seu Visitante

A experiência do usuário é toda sobre imitar um relacionamento humano e criar uma conexão com seu usuário. A empatia é uma grande parte disso – Quais são os objetivos e sonhos de seus visitantes? O que os tem impedido até agora?

Deixe-os saber imediatamente que você entende o problema deles. Você pode fazer isso com uma imagem com a qual eles possam se relacionar ou uma frase que resuma seus maiores problemas.

Seu visitante pensará ‘este site me entende!’ o que é uma ótima experiência do usuário a criar.

Tente fornecer feedback ao seu usuário em cada pequena parte da jornada. Isso criará uma comunicação e um relacionamento reais aos quais os usuários responderão.

Você pode fazer isso com texto, como “Bom trabalho!” “Achamos que você pode gostar disso”, “gostaria de falar com um especialista?”

Ou pequenos gráficos e elementos visuais, como um sinal de positivo, um rosto sorridente ou um relógio piscando em uma página de carregamento.

———

Combine esses pequenos ajustes e você criará uma experiência do usuário que constroi confiança, se conecta com seu público-alvo e os deixa felizes e com uma sensação de realização.Você está usando algum desses truques de design UX no gerenciamento do seu site? Eu adoraria ouvir sobre qualquer um que eu tenha perdido também! Me avise na seção de comentários.

(Voltar ao início)

Guia Completo para Gerenciar Sites

Descubra recursos para gerenciar seu site de forma eficaz, abordando tópicos como backup de sites, otimização de velocidade, WordPress, conteúdo e segurança.