\n Muitos fatores t\u00eam um impacto direto na convers\u00e3o do seu site. No entanto, o web design \u00e9 o mais importante deles.\n<\/p>\n
\n A primeira impress\u00e3o que temos \u00e9 visual e decisiva. Portanto, se voc\u00ea deseja melhorar a taxa de convers\u00e3o em seu site, o web design \u00e9 o primeiro lugar para come\u00e7ar.\n<\/p>\n
\n Neste artigo, reunimos os princ\u00edpios b\u00e1sicos e dicas que ir\u00e3o ajud\u00e1-lo nessa tarefa.\n<\/p>\n
\n A parcela de tr\u00e1fego m\u00f3vel est\u00e1 crescendo e crescer\u00e1 em 2020. A pesquisa sugere que a maioria dos usu\u00e1rios se recusar\u00e1 a interagir com a marca se for imposs\u00edvel realizar a a\u00e7\u00e3o necess\u00e1ria em um dispositivo m\u00f3vel. Portanto, antes de fazer altera\u00e7\u00f5es no design do seu site para obter mais convers\u00f5es, certifique-se de que o site seja exibido corretamente em dispositivos m\u00f3veis e que os usu\u00e1rios n\u00e3o encontrem obst\u00e1culos em seu caminho.\n<\/p>\n
\n Como fazer isso? Tudo vai depender da forma como voc\u00ea cria seu site. Por exemplo, sites no WordPress e outros CMS populares ser\u00e3o responsivos desde o momento da cria\u00e7\u00e3o. No entanto, um teste adicional de usabilidade n\u00e3o ser\u00e1 excessivo.\n<\/p>\n
\n Essa lei sugere que menos escolhas aumentam a velocidade da tomada de decis\u00e3o e vice-versa. Por exemplo, se voc\u00ea usar tr\u00eas chamadas para a\u00e7\u00e3o ao mesmo tempo na p\u00e1gina principal, por exemplo, se cadastrar no site, ganhar um desconto e baixar um e-book, ent\u00e3o ser\u00e1 dif\u00edcil para o usu\u00e1rio decidir qual a\u00e7\u00e3o tomar primeiro. Ser\u00e1 muito mais razo\u00e1vel organizar essas chamadas \u00e0 a\u00e7\u00e3o em uma sequ\u00eancia l\u00f3gica \u2013 conforme foram listadas e oferecer ao usu\u00e1rio a pr\u00f3xima a\u00e7\u00e3o ap\u00f3s a anterior.\n<\/p>\n
\n O mesmo vale para o n\u00famero de produtos que voc\u00ea exibe na p\u00e1gina. Voc\u00ea n\u00e3o deve mostrar ao usu\u00e1rio todos os produtos poss\u00edveis adequados para sua consulta de pesquisa \u2013 \u00e9 melhor mostrar as cinco op\u00e7\u00f5es mais adequadas e permitir a continua\u00e7\u00e3o da pesquisa usando filtros.\n<\/p>\n
\n Pense na possibilidade de mostrar um formul\u00e1rio de lead em tela cheia no momento em que o usu\u00e1rio rola a p\u00e1gina principal at\u00e9 determinado ponto. Em primeiro lugar, o formul\u00e1rio em tela cheia vai chamar toda a aten\u00e7\u00e3o do usu\u00e1rio e n\u00e3o vai deixar que ele se distraia com outros elementos do site, e em segundo lugar, trata-se apenas das possibilidades de escolha de que falamos anteriormente. Assim, o usu\u00e1rio recebe apenas duas op\u00e7\u00f5es. A primeira \u00e9 fechar o formul\u00e1rio de lead e continuar interagindo com o site. A segunda \u00e9 fornecer o endere\u00e7o de e-mail dele em troca de sua oferta.\n<\/p>\n
\n Voc\u00ea provavelmente conhece uma das principais regras da fotografia \u2013 a regra dos ter\u00e7os. De acordo com esta regra, duas linhas dividem visualmente a tela horizontal e verticalmente, resultando em nove quadrados. Assim, os quatro pontos de interse\u00e7\u00e3o das linhas no centro da tela s\u00e3o o centro das aten\u00e7\u00f5es do usu\u00e1rio, por isso as informa\u00e7\u00f5es essenciais, como um call to action, devem ser colocadas aqui.\n<\/p>\n
\n Esse item est\u00e1 diretamente relacionado ao design, pois sua p\u00e1gina pode ficar sobrecarregada com imagens pesadas que retardam o carregamento do seu site. Remova tudo o que for desnecess\u00e1rio e otimize as imagens que s\u00e3o essenciais. Segundo as estat\u00edsticas, a velocidade ideal de carregamento do site \u00e9 de dois a cinco segundos. E, nesse caso, voc\u00ea precisa buscar um indicador mais baixo, j\u00e1 que 40% dos usu\u00e1rios dizem que v\u00e3o fechar um site que demora mais de tr\u00eas segundos para carregar, o que significa que voc\u00ea perder\u00e1 um potencial lead toda vez que o site ficar lento.\n<\/p>\n
\n Jan Tschichold diz que o espa\u00e7o negativo deve ser visto como um elemento ativo, n\u00e3o como um fundo passivo. Existe uma conex\u00e3o entre dist\u00e2ncia e aten\u00e7\u00e3o. Uma dist\u00e2ncia maior chama a aten\u00e7\u00e3o e a aus\u00eancia de outros elementos distingue mais fortemente os elementos existentes. Os designers podem usar essa propriedade de espa\u00e7o para destacar elementos importantes. Adicionar espa\u00e7os a um segmento espec\u00edfico do conte\u00fado faz com que o usu\u00e1rio preste aten\u00e7\u00e3o nessa \u00e1rea simplesmente porque n\u00e3o h\u00e1 mais nada na tela para chamar a aten\u00e7\u00e3o. Como voc\u00ea pode ver no exemplo abaixo, o Google \u00e9 um grande defensor do espa\u00e7o em branco em seus projetos. Ajuda a entender imediatamente o objetivo deste projeto: o foco est\u00e1 no objetivo principal da p\u00e1gina.\n<\/p>\n
\n Infelizmente, n\u00e3o h\u00e1 um conselho universal sobre quais cores convertem melhor. Tudo vai depender das especificidades do seu neg\u00f3cio. Por exemplo, as cores branca e azul causam uma sensa\u00e7\u00e3o de estabilidade e confiabilidade. Portanto, o PayPal usa essa combina\u00e7\u00e3o para formar as associa\u00e7\u00f5es corretas.\n<\/p>\n
\n Se voc\u00ea n\u00e3o tem certeza de que suas cores est\u00e3o funcionando corretamente, basta voltar \u00e0s origens da psicologia das cores no marketing e tamb\u00e9m reexaminar os valores de sua empresa e encontrar a combina\u00e7\u00e3o perfeita.\n<\/p>\n
\n Al\u00e9m disso, existem opini\u00f5es diferentes sobre a cor dos bot\u00f5es que convertem pior ou melhor. A cor correta do bot\u00e3o \u00e9 uma velha quest\u00e3o filos\u00f3fica. Algu\u00e9m afirma que a maior convers\u00e3o \u00e9 obtida por meio de bot\u00f5es vermelhos. Outros dizem verde ou azul. A resposta correta soa assim (como muitas outras respostas em marketing e design): “Precisa ser testado.” Portanto, escolha uma cor de bot\u00e3o que contraste com as cores prim\u00e1rias do design e fa\u00e7a alguns testes para entender qual a cor converte melhor.\n<\/p>\n
\n Uma imagem correta pode dizer mais do que alguns par\u00e1grafos de texto. Portanto, use o poder da percep\u00e7\u00e3o visual e das emo\u00e7\u00f5es no design do seu site. Por exemplo, voc\u00ea pode fazer da imagem o plano de fundo do seu site e, em seguida, colocar todos os seus elementos de forma que sigam as regras b\u00e1sicas do web design. E por falar nisso, tamb\u00e9m contribui para melhores convers\u00f5es.\n<\/p>\n
\n Al\u00e9m disso, essa abordagem promove a simplicidade e o minimalismo, tend\u00eancia dos \u00faltimos anos, e uma imagem selecionada corretamente evoca as emo\u00e7\u00f5es e associa\u00e7\u00f5es necess\u00e1rias. E vice-versa, como j\u00e1 dissemos, muitas imagens tornam a escolha mais complicada e dispersam a aten\u00e7\u00e3o do usu\u00e1rio.\n<\/p>\n
\n Em outras palavras, esforce-se para obter a m\u00e1xima simplicidade. Na abund\u00e2ncia moderna de ru\u00eddo informativo, simplicidade e clareza tornaram-se uma verdadeira escassez. Estudos mostraram que 76% dos usu\u00e1rios consideram a simplicidade o principal fator decisivo no design do site. E aqui \u00e9 preciso manter um equil\u00edbrio competente entre simplicidade, minimalismo, mas ao mesmo tempo funcionalidade \u2013 j\u00e1 que simplicidade \u00e9 tamb\u00e9m a oportunidade de encontrar o que o usu\u00e1rio precisa em poucos cliques.\n<\/p>\n
\n Infelizmente, a Internet est\u00e1 cheia de cr\u00edticas falsas e n\u00e3o duvide que seus usu\u00e1rios tamb\u00e9m saibam disso. Portanto, em vez de for\u00e7\u00e1-los a buscar feedback sobre seus produtos ou servi\u00e7os (que podem ser escritos por seus concorrentes para minar seus neg\u00f3cios), voc\u00ea precisa dar a eles essa oportunidade na hora.\n<\/p>\n
\n Portanto, pense no design do site de forma que voc\u00ea possa colocar algumas avalia\u00e7\u00f5es reais (e melhor ainda, um carrossel) perto do final da p\u00e1gina. E certifique-se de usar fotos de pessoas vivas (idealmente seus clientes reais) para criar a impress\u00e3o de forte evid\u00eancia social.\n<\/p>\n
\n Voc\u00ea provavelmente j\u00e1 viu sites que cont\u00eam um milh\u00e3o de categorias e \u00e9 simplesmente imposs\u00edvel escolher a se\u00e7\u00e3o certa na primeira tentativa. E se antes os usu\u00e1rios ainda pagavam tempo para essa pesquisa, hoje eles querem ver o que precisam sem a\u00e7\u00f5es adicionais.\n<\/p>\n
\n Portanto, reconsidere sua abordagem de navega\u00e7\u00e3o no site, reduza o n\u00famero de categorias, remova todas as desnecess\u00e1rias e deixe apenas as se\u00e7\u00f5es mais importantes. Como j\u00e1 dissemos, toda a gama de escolhas complica a decis\u00e3o ou, em geral, obriga o usu\u00e1rio a sair da p\u00e1gina e adiar a tarefa para depois.\n<\/p>\n
\n Este \u00e9 um truque psicol\u00f3gico que desencadeia uma rea\u00e7\u00e3o subconsciente \u2013 as pessoas tendem a acreditar nas estat\u00edsticas. E esta \u00e9 outra oportunidade de aumentar a convers\u00e3o construindo confian\u00e7a e criando uma impress\u00e3o de confiabilidade. Mas h\u00e1 um ponto crucial. Lembra que falamos sobre a regra dos ter\u00e7os e pontos estrat\u00e9gicos de interse\u00e7\u00e3o? Estes s\u00e3o precisamente os lugares onde voc\u00ea precisa colocar suas estat\u00edsticas para que estejam no centro das aten\u00e7\u00f5es e percep\u00e7\u00f5es.\n<\/p>\n
\n Os profissionais de marketing n\u00e3o concordam com essa t\u00e1tica de vendas, mas para vendas r\u00e1pidas e sazonais, essa abordagem ainda \u00e9 apropriada. Portanto, se voc\u00ea tem uma oferta sazonal ou promocional, ou se est\u00e1 testando o interesse por um novo produto, faz sentido criar a ilus\u00e3o de escassez e refletir isso com a ajuda do design. Por exemplo, voc\u00ea pode definir um cron\u00f4metro de contagem regressiva e, novamente, colocar os n\u00fameros no foco da aten\u00e7\u00e3o do visitante.\n<\/p>\n
\n No entanto, aqui voc\u00ea ainda precisa posicionar os bot\u00f5es de chamada para a\u00e7\u00e3o corretamente. E nesse caso \u00e9 melhor fazer seguindo o esquema Z.\n<\/p>\n
\n A aten\u00e7\u00e3o do usu\u00e1rio desliza ao longo da horizontal superior, diagonalmente para baixo, e vai para a informa\u00e7\u00e3o na parte inferior. No canto superior esquerdo, coloque o logotipo, na horizontal \u2013 os cabe\u00e7alhos. O canto inferior direito \u00e9 o local ideal para uma chamada \u00e0 a\u00e7\u00e3o.\n<\/p>\n
\n Voc\u00ea pode perceber, com raz\u00e3o, que isso \u00e9 responsabilidade do UX designer, mas, na pr\u00e1tica, \u00e9 exatamente o que acontece quando o web e o UX designer devem trabalhar juntos para obter um \u00fanico resultado. O design de UX \u00e9 outro fator que tem impacto direto nas convers\u00f5es, e quanto menos etapas separam os usu\u00e1rios da a\u00e7\u00e3o de destino, maior a probabilidade de conclu\u00ed-la.\n<\/p>\n
\n Por isso, voc\u00ea precisa ter mais uma vez a certeza de que a informa\u00e7\u00e3o ou produto que ele precisa est\u00e1 a no m\u00e1ximo tr\u00eas cliques de dist\u00e2ncia.\n<\/p>\n
\n Para melhorar a convers\u00e3o do seu site, aproveite a regra dos ter\u00e7os e o esquema Z ao colocar suas chamadas para a\u00e7\u00e3o. Voc\u00ea pode melhorar a percep\u00e7\u00e3o de uma chamada \u00e0 a\u00e7\u00e3o se a duplicar \u2013 na interse\u00e7\u00e3o das linhas e no canto superior direito da p\u00e1gina, onde termina a linha superior da letra Z. Assim, a aten\u00e7\u00e3o do usu\u00e1rio ir\u00e1 primeiro parar no canto superior direito, depois deslizar diagonalmente para baixo e repousar diretamente no ponto estrat\u00e9gico de interse\u00e7\u00e3o das linhas \u00e0 esquerda.\n<\/p>\n
\n Os usu\u00e1rios modernos s\u00e3o muito impacientes e j\u00e1 falamos sobre isso no par\u00e1grafo sobre a velocidade de carregamento de sua p\u00e1gina. E um formul\u00e1rio enorme pode matar suas convers\u00f5es, j\u00e1 que ningu\u00e9m quer perder tempo, principalmente em um dispositivo m\u00f3vel. Portanto, revise seu formul\u00e1rio de registro e deixe apenas tr\u00eas linhas \u2013 para nome, endere\u00e7o de e-mail e senha, al\u00e9m de adicionar a possibilidade de se registrar via Google e Facebook.\n<\/p>\n
\n Como voc\u00ea pode ver, muitos truques podem afetar as convers\u00f5es. No entanto, a coisa mais importante a lembrar \u00e9 que qualquer nova abordagem deve ser testada nos usu\u00e1rios. Cada neg\u00f3cio e cada p\u00fablico-alvo \u00e9 espec\u00edfico; portanto, n\u00e3o pode haver instru\u00e7\u00f5es de modelo sobre o que usar em seu design para aumentar as convers\u00f5es. Al\u00e9m disso, o design \u00e9 o primeiro, mas n\u00e3o o \u00faltimo fator que converte (ou n\u00e3o converte), e isso tamb\u00e9m precisa ser lembrado.\n<\/p>\n<\/p>\n