Arquivo para Tag: UI

Seu site vende?

Quando pergunto se o seu site vende, não estou me referindo a uma venda propriamente dita, como aquela realizada por uma loja virtual. Me refiro ao quanto o seu site está preparado para transformar visitantes em clientes.

Você já parou para pensar que a taxa de conversão de uma ação em seu site está diretamente relacionada ao seu design?

Assim como já falamos aqui sobre criar um blog focado em resultados, para alcançarmos êxito na projeção de um site é fundamental entendermos como podemos usar o design a nosso favor para criarmos layouts que realmente alcancem seus objetivos e que resultem em conversões.

Muito mais do que garantir beleza e usabilidade, o design é capaz também de gerar e aumentar os resultados do seu negócio gerando mais leads, vendas, visitas e … lucros!

Estudos mostram que nossas reações imediatas sobre um site tem um impacto duradouro sobre a forma como nos sentimos em relação ao site e ao negócio por trás deles. Poucos segundos após o carregamento inicial, seus visitantes já decidiram o que eles acham sobre seu site. Se eles o acham inteligente, engraçado, profissional, acessível, útil, competente e confiável – tudo isso em pouquíssimos segundos.

De acordo com um estudo da Universidade de Stanford, o design do site é o fator mais importante em que os usuários confiam para determinar se seu site é confiável ou não e, de acordo com a Forrester Research, um bom design de UX e UI pode aumentar a taxa de conversão do seu site em até 400%.

Portanto, neste artigo veremos como um Design focado em Conversão pode nos ajudar a melhorar os resultados das páginas que criamos, alavancando a audiência e as vendas. Tenho certeza que depois de ler até o final, seu site não será mais o mesmo! :)

Agora, se você ainda não tem nem visitantes no site, leia esse artigo: 4 ações que você precisa fazer para atrair mais visitas.

 

Design focado em conversão: o que é?

É o design focado em resultados. É o design focado em atingir um único objetivo.

Esses objetivos podem ser:

  • Mais visitas
  • Maior volume de leads
  • Mais ligações de clientes
  • Mais vendas
  • Mais cadastros no blog

Isso significa criar um layout onde o principal objetivo é potencializar o poder de decisão do usuário através do direcionamento para ações, guiando-o a completar uma ação ação específica (seja ela um cadastro em uma newsletter, preenchimento do formulário de contato ou até mesmo uma ligação) utilizando design persuasivo e gatilhos mentais como meios de aumentar as conversões.

Todo usuário tem um objetivo, mesmo que inconsciente.

E como conseguir persuadir um visitante a completar seus objetivos de conversão usando design?

Ao projetar um layout, não basta somente pensar no fator estético e visual. É preciso projetar também para que o design cumpra a função para qual ele foi concebido. Esse é o principal objetivo dele, antes de qualquer coisa = Design Funcional.

Um design eficaz faz que o usuário não procrastine em sua decisão a ponto de deixar facilmente o seu site, ou pior, executar ações em sites concorrentes.

O design para conversão motiva, incentiva e direciona o usuário a uma ação planejada na interface, diminuindo ao mínimo possíveis ruídos que causem dispersões. Ele é focado na experiência do usuário (UX) e na sua interface (UI).

Com isso alia-se a parte de usabilidade, arquitetura da informação, navegabilidade e acessibilidade, mais a parte estética e a psicológica, para influenciar o comportamento do visitante e alcançar realmente o objetivo do site.

 

💡 Leia também:

.

A importância do Design focado em Conversão

Com o avanço do Marketing Digital, das vendas pela internet, do número de infoprodutores e das oportunidades de negócio nesse meio, criar um design centrado na conversão se tornou essencial para o sucesso das empresas, pois um maximiza os resultados do outro.

De nada adianta anunciar no Google, por exemplo, levar vários visitantes qualificados ao seu site, se seu site não atrai, não interage, não vende, não funciona.

Não se pode criar um site somente “bonito” e deixá-lo no ar torcendo para que os visitantes realizem as ações pretendidas. Cada vez está mais caro e concorrido conseguir tráfego para o seu site, blog, loja virtual e landing page, por isso você deve aproveitá-lo ao máximo, tentando fazer com que os seus visitantes realizem as ações pretendidas.

Faz sentido né?

Por isso Design, Usabilidade e Conversão andam lado a lado.

Estudos apontam que:

  • Empresas que investiram na melhoria no design tiveram aumento de lucratividade
  • O design de um site é responsável por 94% da credibilidade transmitida ao visitante
  • Melhorias no design aumentam muito a taxa de conversão de um site
  • 94% dos usuários que abandonam um site é devido ao seu design
  • Apenas 55% das empresas estão atualmente realizando algum teste online de experiência do usuário
  • 88% dos consumidores não retornam a um site que tiveram experiência ruim

Convencido? Agora veja como aplicar:

 

Aplicando o Design focado em Conversão

Separamos alguns itens essenciais na projeção de um site focado em conversão. Vamos lá:

          1. CONTRATES E CORES: escolha as cores certas

A escolha da cor sempre foi uma parte importante do marketing e da embalagem do produto, e muitos estudos mostraram uma estreita correlação entre a cor e as decisões de compra.

As cores produzem reações em nosso cérebro e influenciam nossas escolhas e ações. As cores têm significados.

Existem estudos sobre a influência emocional que as cores tem em nosso comportamento, também conhecido como Psicologia das Cores.

A importância da Psicologia das Cores é algo que artistas e designers têm estudado há muito tempo. O impacto visual é muito determinado pela cor e suas combinações de cores, e pode até nos levar a ter diferentes respostas emocionais.

Psicologia das Cores vai te permitir prever como seus clientes respondem as suas mensagens de marketing com base na cor da sua mensagem e de seus botões de conversão – bem como os links.

De acordo com um estudo do Institute for Color Research, entre 62% e 90% da avaliação inicial que as pessoas fazem sobre um ambiente ou produto é baseada apenas na cor e, de acordo com a pesquisa da Kissmetrics, 52% dizem que não retornariam a um site se acharem as cores e a estética geral pouco atraentes.

Ao projetar seu site, escolha combinações de cores atraentes que se encaixem na imagem de sua marca e evoquem o clima que você deseja que seus clientes experimentem quando visitarem seu site.

Abaixo listamos algumas cores e quais influências psicológicas elas provocam:

  • Vermelho: Energia, aumenta a frequência cardíaca e cria a sensação de urgência. É uma cor apelativa, que faz com que quem a visualize queira imediatamente resolver aquilo que incomoda. Frequentemente usado durante as promoções.
  • Laranja: Agressividade, cria uma “chamada para ação”. O laranja é uma cor derivada do vermelho. Assim, campanhas e marcas que desejam estimular a energia podem utilizá-la.
  • Amarelo: Sugere cautela, parada e atenção. Frequentemente utilizado nas vitrines para chamar atenção dos consumidores.
  • Verde: Sensações de segurança, solidez, renovação e tranquilidade. Não é à toa que hospitais, clínicas e laboratórios fazem uso dessa cor em seus logotipos. O mesmo vale para produtos que queiram passar a sensação do frescor, como pastas de dentes e aromatizadores de ar.
  • Azul: Gera confiança, segurança e seriedade.Frequentemente é utilizado em bancos e negócios.
  • Roxo: Remetem ao mistério, espiritualidade, paz, sensualidade, sabedoria e à realeza. Geralmente é visto em produtos de beleza ou anti-idade.
  • Rosa: Romântico, inocente e feminino. Usado no marketing de produtos voltados para mulheres e meninas.
  • Preto: Imponente, sério e poderoso, remete a curiosidade, incerteza e mistério. Usado para produtos do mercado de luxo. Quando utilizada como a cor de fundo de um site, os botões com cores claras e fortes ganham bastante destaque.
  • Cinza: Remete ao progresso, tecnologia e futuro. É comum encontrar empresas destes segmentos que utilizem a cor em seus mais variados canais.

Isso pode ajudá-lo a seguir um caminho de cores e agregar valor a uma mensagem que o layout queira passar.

Mas, não vá usar várias cores diferentes juntas e fazer do seu site um carnaval, que não vai funcionar e, ao contrário, irá confundir a mente do usuário.

Lembrando que, não existem regras para as cores que devem ou não serem usadas. A única maneira de concluir alguma coisa é testando.

Uma dica é explorar a roda das cores para contrastar cores quentes com cores frias para ter um destaque maior em seu call to action (chamada para ação).

Sugerir onde clicar pode ser uma good idea quando algumas pessoas precisam de um empurrãozinho, pois quanto mais escolhas disponíveis, menor as chances de uma decisão e de colocá-la em prática. Sendo assim, tente enfatizar e destacar certas opções de escolhas.

70% dos sites de empresas B2B não têm chamadas claras para a ação. Ter um botão que chame atenção, um pouco mais chamativo e distinto dos elementos que o cercam, tornará sua interface mais chamativa e pode fazer muita diferença na sua taxa de conversão.

 

          2. IMAGENS, ELEMENTOS E ÍCONES

Sabe aquele monte de texto, que tem bastante importância, mas que o usuário não lê por preguiça?

Utilize imagens, fotografias e elementos para facilitar a leitura e identificação dos textos que você está abordando para o usuário. Além de ter o poder de equilibrar interfaces discretas e minimalistas

Utilizar as imagens certas no seu site pode aumentar consideravelmente a taxa de conversão, e por diferentes motivos. Por exemplo: uma figura positiva, como a de uma pessoa sorrindo ou uma criança brincando, é capaz de trazer à tona no cliente bons sentimentos, como felicidade e alegria, e fazer com que ele crie laços com a marca. Muitas pessoas compram algo por razões emocionais, e essa identificação criada entre consumidor/empresa a partir dos sentimentos despertados facilita o processo de compra.

 

Psicologia das cores emoções

Crie também uma mascote para o seu site! Muitas empresas vêm adotando essa prática, uma vez que esses desenhos ajudam a construir um elo junto ao consumidor, que guarda na mente a marca mais facilmente quando associada a uma mascote simpática.

 

          3. FACILIDADE E SIMPLICIDADE: minimize as escolhas

Menos é mais. Uma mente confusa não toma decisão alguma. Ou seja, quanto menos opções você dá para seu cliente, menos confuso ele fica e mais fácil é de converter.

Esse é um conceito muito simples para a própria homepage de seu site ou para as suas landing pages.

Quanto menos elementos você coloca, menos você está concorrendo pela atenção do usuário. Ou seja, aquele elemento principal que você quer destacar, seja um formulário de contato ou uma CTA, precisa estar em evidência não só entre os outros elementos, mas entre o menor número de elementos possíveis.

Em vez de tentar colocar todas as informações possíveis em uma página, faça o mínimo para que a taxa de conversão se torne maior.

 

          4. DIRECIONAMENTO: facilite a navegação

O direcionamento no design se resume basicamente em indicações visuais que levam para uma área de foco.

Elas ajudam a guiar os visitantes para ações desejadas, deixando claro o propósito da página assim que elas a visualizam.

Podem ser setas, pessoas olhando para uma direção determinada, caminhos, estradas e outras formas que direcionam o visitante para algum lugar.

O olho humano tende naturalmente a seguir essas direções.

 

Psicologia das cores CTA

 

        5. DIAGRAMAÇÃO UX E UI: design para experiência do usuário

A diagramação em uma estrutura UX (User Experience ou Experiência do Usuário) e UI (User Interface ou Interface do Usuário) representa o conjunto da obra.

A disposição dos elementos, cores e e textos conta muito, então é necessário deixar tudo o mais harmônico possível e de fácil compreensão para o público. Use a hierarquia visual para enfatizar sua mensagem. Dê destaque para o campo de buscas, no topo do site, de forma elegante, por exemplo.

Você já percebeu que landing pages ou páginas de vendas só possuem 1 coluna?

Se o objetivo de uma página for voltado totalmente à uma conversão, manter uma só coluna dá a você mais controle sobre sua narrativa, guiando seus leitores de cima para baixo.

Nesse caso, aplica-se facilidade e simplicidade no layout. Novamente, menos é mais. O layout com várias colunas corre o risco de distrair os leitores do propósito central de uma página.

Foi o que abordamos em simplicidade e facilidade. Quanto menos elementos você coloca, menos você está concorrendo pela atenção do usuário.

No entanto, se sua página for longa, repita a CTA ao invés de mostrá-la uma vez só. Quando as pessoas chegam ao fim da página, elas param e pensam no que fazer depois – e este é um lugar em potencial para fazer uma oferta ou fechar um negócio. Elas aguardam seu empurrãozinho, seu incentivo sobre o que fazer. Basta você ajudar 😉 #TakeIdea

 

Está gostando do conteúdo? Aproveite e faça como os 5.347 inscritos: assine grátis nossa newsletter e faça parte da nossa lista VIP:

 

       6. ESTRUTURA AIDA: empregue a regra dos 8 segundos

Você já deve conhecer o acrônimo de AIDA. Para aqueles que não sabem ainda, AIDA significa Atenção, Interesse, Desejo e Ação.

São as 4 fases, muito utilizada na publicidade, que todo cliente deve passar antes de tomar uma decisão de compra. E isso também se aplica na criação do design do site.

1. Atenção: Atraia a atenção do visitante assim que ele acessar o seu site;

2. Interesse: Deixe seu cliente interessado com um design atrativo e navegação intuitiva;

3. Desejo: Use imagens e cores que despertem o desejo do cliente seguir em frente;

4. Ação: Deixe sempre bem claro qual o próximo passo necessário para a conversão (ex: call to action e direcionamentos)

O visitante médio do site tem um tempo de atenção de 8 segundos e você precisa fazer com que cada segundo conte

Por isso, se atente ao design da área acima da 1º dobra – ou seja, a primeira tela do seu site que o usuário vê antes de rolar a tela. As pessoas mergulham no conteúdo abaixo da dobra apenas se acharem o conteúdo acima da dobra atraente o suficiente. E mesmo assim, a maior parte do tempo do usuário é gasta acima da dobra, como mostra este estudo de rastreamento ocular de Jakob Nielsen:

acima da dobra

 

Há uma infinidade de técnicas e estratégias de design que podem não só deixar o seu site mais atrativo, bonito e confiável, mas também mais rentável.

Aliás, como estratégia de conversão, pense em ter no seu site um blog e landing pages. Recomendo a leitura: Ter um blog dá resultados? Sim, mas só depende de você.

Realize testes em seus layouts

Não fique sobrecarregado tentando implementar tudo de uma vez. Dê um passo de cada vez e execute testes para identificar o culpado por trás de suas conversões de site sem brilho.

Se você não tem o costume de fazer testes, certamente está desperdiçando seu dinheiro. Boa parte do sucesso, de qualquer ação da sua empresa, está nos testes.

Às vezes você cria algo legal, harmonioso, funcional, mas que não converte. Por isso é muito importante realizar testes. Não se pode criar uma interface e não acompanhar o seu desempenho.

Os testes vão te permitir compreender a maneira como seu público se comporta diante dos elementos design que estão utilizando em seu site, bem sua diagramação e estrutura.

Selecionei abaixo alguns testes que uso:

  • Teste A/B
  • Mapa de Calor

 

– TESTES A/B

É um dos testes mais conhecidos e efetivos. Ele consiste em dividir o tráfego de uma determinada página em 2 versões: a atual e a versão “concorrente”.

Psicologia das cores teste ab

 

A versão desafiante contém modificações que podem ser desde novas cores até alterações nos conteúdos. A partir disso mede-se qual é a versão que apresenta maior taxa de conversão.

Por exemplo, a CTA da nossa homepage tinha 2 botões da cor verde, que é a principal cor da nossa marca. Porém não nos contentamos com os resultados pois nosso principal objetivo era que o visitante entrasse em contato e agendasse um bate papo.

Decidimos então realizar testes trocando as cores do botão, deixando “o de objetivo principal” na cor rosa.

Mantivemos o mesmo conteúdo na página e texto no botão.

Resultado: 21% mais pessoas clicaram no botão rosa do que no botão verde.

 

– MAPA DE CALOR

Heatmap, ou mapa de calor, é uma ferramenta que mostra os pontos mais acessados e clicados pelos visitantes do seu site.

Através dos mapas de calor é possível identificar a usabilidade e analisar o layout, encontrando possíveis problemas e, assim, propiciar a realização de correções certeiras.

Você tem que saber quais seções de sua página de destino irá atrair clientes com maior potencial. É cabeçalho, barra lateral, acima da dobra ou o título?

Para usar o fluxo de pessoas a seu favor, você precisa gerenciar os pontos mais quentes do seu site.

Psicologia das cores mapa padrão F

Olhando essa imagem, você pode notar que quando os visitantes navegam por determinados sites, eles vão primeiro analisar e fazer a leitura da esquerda para a direita. Como um profissional de marketing esperto, você pode aumentar sua taxa de conversão se baseando no padrão em forma de F.

Como dica do item 4, “direcionamento”, veja esse case abaixo. Existe um aumento na fixação no texto quando o olhar do bebê se vira para ele.

Por isso, faça testes e veja como os elementos afetam sua conversão.

 

Pronto para um Site de Alta Performance?

Poucas empresas criam o site pensando na usabilidade, experiência do usuário, cores, tipografia e etc; como forma de conseguir mais conversões. Mas então, fica a pergunta: o que adianta investir em publicidade se as pessoas que visitam o seu site não se cadastram na sua lista? O que adianta trazer tráfego para sua loja virtual se ela não vende os produtos?

A criação de um site deve ir muito além da parte estética (que é importante pois atrai seu cliente). Ele precisa funcionar de verdade e sozinho, ser uma máquina e alcançar os reais objetivos para qual ele foi criado. É preciso zelar pela harmonia entre beleza estética, questões funcionais, de usabilidade e de conversão.

Aqui na Mkt Ideas temos um time de desenvolvedores especializados em sites focados na conversão. Para isso, usamos as melhores estratégias de design, UX Design e SEO, para que seu site dê o melhor resultado para sua empresa. Temos diversos cases de clientes que tiveram sucesso com nossas propostas e estratégias de design de site voltadas para a conversão. E se você também quer melhorar sua presença online, entre em contato conosco. Vamos fazer seu site se tornar uma referência na sua área!

Design não é apenas o que parece e o que se sente. Design é como funciona.” – Steve Jobs

Lembre-se de que o design do seu site deve colocar os usuários em primeiro lugar – não designers ou profissionais de marketing. Criar um site esteticamente agradável que facilite a ação dos visitantes aumentará suas conversões rapidamente.

Espero que esse post tenha te ajudado a olhar seu site de outra forma.

Aproveite para participar de nosso diagnóstico gratuito de design, usando o cupom PROMO5. Tenho certeza que conseguiremos gerar muitas ideias de melhorias para ajudar de forma individual e personalizada a potencializar os seus resultados! Aproveite, pois as vagas são limitadas:

 

Continue nos acompanhando em nosso blogfanpageinstagram, linkedIn e Grupo no Whatsapp para receber mais dicas que irão ajudar seu negócio 😁

#TakeIote #TakeIdeias