Os melhores projetos da página inicial na Internet e como copiá-los

as pessoas vêm prevendo a “morte da página inicial” há anos.

mas a página inicial nunca irá embora.

cada site precisa de uma porta da frente para receber seus novos usuários pela primeira vez e dar-lhes o layout da terra.no entanto, a página inicial está a evoluir.

mesmo há apenas alguns anos, as páginas web continham toneladas de Informações diferentes sobre cada aspecto da empresa.

eles estavam cheios de links e lugares para ir., A empresa queria destacar todos os vários aspectos do que fez.

O problema é que ele saiu pela culatra.

havia simplesmente muitas opções. Era avassalador e perturbador para os usuários.

uma das melhores maneiras de melhorar rapidamente as conversões de design do site é livrando-se das características que diminuem a experiência do Usuário.sliders de carrossel são um exemplo perfeito. São comumente usados para mostrar várias coisas diferentes ao mesmo tempo.

mas que a versatilidade muitas vezes vem a um custo. Testes têm mostrado que eles machucam conversões, SEO, e tempos de carregamento de páginas.,

ver a percentagem de clique baixo na imagem acima? Isso não é um bom sinal.na verdade, foi por isso que criei o “ovo louco”. Se você pode ver que os usuários não estão clicando no que eles devem, Você pode mudar o projeto antes que seja tarde demais.

As melhores páginas levam em conta a experiência do utilizador.

Aqui estão alguns dos meus projetos favoritos da página inicial. Você pode começar a copiá-los para obter resultados semelhantes.

Bills.com

a primeira grande tendência a destacar é a ‘ homepage como uma página de destino.,faz muito sentido quando se pensa nisso.

Seu objetivo final é elevar as pistas e as vendas. O site “Brochura online” está morto e desaparecido há anos.

a parte complicada é saber a melhor abordagem para gerar pistas na página inicial para que você não assuste todos e os force a saltar.por exemplo, é muito pedir a novos visitantes que nunca ouviram falar de você para comprar um grande produto.

assim, em vez disso, você precisa de uma abordagem mais simples, menos invasiva para, em última análise, obter o que você quer.e é por isso que adoro o que Bills.com está a fazer.,

por exemplo, dirija-se ao seu site, e verá a seguinte barra deslizante:

Agora poderá deslizar interactivamente para trás e para a frente para escolher o montante da dívida que poderá dever. É tão simples que uma criança consegue.é também a única opção que te dão até agora! Assim não te sentes sobrecarregado ou distraído.

Depois de clicar em “Continue”, eles perguntam se você está atrasado em pagamentos ou não (e, em caso afirmativo, por quanto tempo).

estão a qualificá-lo para aqui., Se você não está atrasado em pagamentos, eles podem não ser capazes de ajudá-lo muito (leia: fazer dinheiro de você).

eles podem usar esta pergunta para personalizar a resposta que eventualmente vão lhe dar. Isso pode até ajudar internamente a dividir qual pessoa ou departamento será melhor para lidar com o seu caso se você se tornar um cliente.

O próximo passo é selecionar em que estado você vive:

Mais uma vez, isso o qualifica e também levanta quaisquer problemas potenciais com restrições de Estado (que eles podem ter que lidar mais tarde).,

O último passo é aquele que eles sempre quiseram: as suas informações pessoais!

KlientBoost chama a isto a “técnica do pão”, porque em vez de assustar as pessoas com a forma inicial, está a fazê-las fazer pequenos compromissos micro.

cada micro compromisso leva – os um pouco mais além até que eles já estão tão investidos que eles têm que terminar o processo.

Por exemplo, se eles tivessem pedido o seu nome e número de telefone na frente, isso poderia tê-lo assustado.,

no entanto, ao conseguir que você se comprometa com esses outros passos Primeiro, eles dão a si mesmos uma melhor chance de eventualmente convertê-lo para um novo cliente.

KlientBoost tem usado com sucesso esta técnica para aumentar as taxas de conversão de 1% para quase 20%.

o truque com estas páginas de aterragem em várias etapas é começar com a questão menos ameaçadora possível.

ele precisa estar relacionado com a forma como você vai ajudá-los. No entanto, deve ser incrivelmente simples para alguém fornecer.,obviamente, deve haver uma menção zero do preço ou dos seus dados pessoais neste momento.

pode até ser tão simples quanto pedir um código postal.

O próximo passo fica um pouco mais específico, insinuando no nível de serviço que eles vão precisar.

Depois de fazê-los se comprometer com os dois primeiros passos, você pode trazer algumas perguntas mais pessoais para acompanhar com eles depois.você vai notar que Bills.com também usa conteúdo interativo para mantê-lo ocupado em seu site.

Qzzr é uma ferramenta que você pode usar para fazer isso acontecer em seu próprio site., Eles já têm ‘widgets’ pré-construídos que podem ser configurados em alguns minutos (em oposição a pagar a um desenvolvedor para personalizar fazê-lo para você).a Victoria’s Secret usa uma que Pergunta: “Qual é a tua personalidade de fitness?”A rede de alimentos pergunta:” podemos adivinhar a sua idade com base nas suas preferências alimentares?”

em cada caso, estas marcas estão a usar uma pergunta divertida que o torna comprometido. Não há nenhuma ameaça em responder a essas perguntas inicialmente.

outra ferramenta alternativa é o SnapApp., Eles também criam Calculadoras interativas e até mesmo infografias que as pessoas podem apontar, clicar e ajustar para ver novos resultados.

Aqui está um exemplo engraçado de como o seu marketing é vaidoso que leva você a responder a perguntas de uma forma flowchart.

uma recomendação final para a ferramenta é a Brackify. Esse nome soa como “suportes”, certo?bem, essa é exactamente a questão! Você pode criar suportes interativos ou competições para quase tudo, e deixar os clientes ou visitantes do site entrar na ação.,

aqui está o que pode parecer se alguém perguntar Qual é o seu filme favorito da Disney:

Kiva

Kiva é uma plataforma de microcrédito.eles conectam empresários de países do terceiro mundo com doadores e patrocinadores de outras partes do mundo.por exemplo, digamos que um empresário na Índia precisa de mil dólares para uma nova máquina de costura comercial, para que possa produzir e vender o dobro dos produtos.,

assim, as pessoas de todo o mundo podem doar em pequenas quantidades e, em seguida, ser pagas ao longo de um ano ou dois fora do novo fluxo de caixa que este empreendedor é capaz de gerar.

a página inicial de Kiva é relativamente básica, para ser honesto.no entanto, como vimos, está tudo bem!

simples e direto pode manter as pessoas focadas no que é importante (dando-lhe suas informações em troca de algo de valor).,

o problema é que enquanto as pessoas podem visitar a sua página inicial e estar interessadas no que você faz, nem sempre há uma razão convincente para kickstart esse processo.

às vezes, você tem que ser um pouco mais agressivo ou assertivo para deixá-los saber sobre o valor incrível que eles podem obter.neste caso, Kiva decidiu usar uma sobreposição popup para simplesmente obter opt-ins newsletter por e-mail.

eles queriam começar pequeno (e não usar algo ameaçador como aprendemos na última etapa).,então Kiva foi com uma simples opção de E-mail para pelo menos obter algo de alguém antes de sair do site.

aqui está o aspecto da nova oferta:

estas sobreposições são difíceis de arrancar.algumas audiências odeiam-nos, obviamente. Mas pode pagar enormes dividendos se você posicionar o seu conteúdo e oferecer bem.

Você também pode controlar como ou quando ele se mostra. Por exemplo, você pode decidir apenas ativá-lo para novos visitantes (vs. retornando) e só quando seu cursor começa a sair da janela.,

estas irão muitas vezes criar um efeito ‘lightbox’ que des-enfatiza tudo o resto em segundo plano para que as pessoas olhem diretamente para a sua nova oferta.

Aqui está outro exemplo do que eu uso para os próximos webinars:

haverá sempre uma percentagem do seu público que odeia estas coisas.por isso, tem de ter cuidado com a forma como os utiliza. (Você também precisa ter cuidado com os erros de design que vai arruinar o seu SEO também.)

no entanto, os resultados podem muitas vezes valer a pena o risco.,

Kiva decidiu dividir o teste para ver como seu próprio público respondeu.

eles conectaram Unbounce com MailChimp (para o eventual opt-ins de E-mail) e decidiram mostrar a nova sobreposição para apenas 50% do tráfego inicialmente. Foram cerca de 5.000 visitantes.

apenas essa sobreposição única capturou um extra de 3-4% dos visitantes imediatamente.

encorajado, Kiva continuou a iterar com melhores projetos e diferentes opções para dobrar esse número para 6-7%.nada mau para um” irritante ” aparecer, certo?

H. Bloom

o que é exactamente H. Bloom?,são um serviço de entrega de flores de luxo. Podes continuar, introduzir as tuas preferências, e eles tratam do resto.por isso, são perfeitos para que o empresário sobrecarregado nunca se esqueça dos seus entes queridos.

Vamos dar uma rápida olhada em sua página inicial, e então eu vou dizer por que eu gosto tanto:

em Primeiro lugar, eles têm o seu formulário acima da dobra.

isso faz com que o objetivo desta página fique claro. Os seus clientes chegam a esta página, e não precisam de adivinhar o que devem fazer a seguir.,

a forma que é frente e centro mantém as coisas agradáveis e claras.

a maioria dos visitantes do site tendem a concentrar a maior parte de sua atenção acima da dobra ainda (mesmo que eles estão se acostumando a deslizar para baixo).

a maneira mais fácil de melhorar a sua optimização da forma de geração de chumbo é manter o seu CTA no padrão de olho normal que as pessoas já usam.

Por exemplo, um estudo foi feito anos atrás que rastreou como e onde os olhos das pessoas rastrearam quando eles atingiram sua página. Eles descobriram que as pessoas tendem a digitalizar o seu site em forma de “F”.,

portanto, a primeira secção da página inicial de H. Bloom diz imediatamente ao leitor o que devem fazer na página.

E, em seguida, a próxima seção no meio explica exatamente como seu processo funciona.

a progressão lógica, passo a passo, ajuda as pessoas a compreender o que se espera deles e o quão difícil ou demorado uma coisa como esta está prestes a ser.,

isso é crítico porque está imediatamente definindo expectativas e superando a objeção potencial de que pode ser muito demorado para começar.

ele trabalha ao longo das mesmas linhas que uma barra de progresso.

Por exemplo, as barras de progresso têm o poder de aumentar as conversões em 28%, porque eles rapidamente asseguram ao espectador que não há muito a fazer para obter a sua ‘recompensa.’

a minha última peça favorita desta página é a seta subtil usada como uma deixa visual para ajudar os telespectadores a passar de uma secção para a seguinte.,

é um pequeno detalhe, mas ajuda a dar aos usuários a mensagem para continuar a ler a página, especialmente se eles ainda não estão prontos para preencher o formulário e começar o mais rápido possível.

Basecamp

Before Basecamp was ” Basecamp,” they were 37 signals with multiple different software products.

e ao longo dos anos eles têm constantemente iterado para ver o que funciona melhor para conduzir novas inscrições de teste gratuito.,

Aqui está uma das suas atuais variações na página inicial que usam uma técnica clássica de escrita de cópias que existe há décadas:

Leia a primeira linha dessa página muito rapidamente.”o teu negócio está a crescer e tu estás atolado. A forma como estás a trabalhar já não funciona.”

eles passam a listar alguns dos vários problemas e problemas que você (proprietário de Negócio sobrecarregado) provavelmente estão esperando.

Este é um exemplo textual da técnica de copiwriting PAS., Aqui está como ele funciona:

• problema: você rapidamente cortar para o coração da matéria, confirmando claramente o problema principal que sua perspectiva está contra (por exemplo, “você está inundado.”).
• Agitate: então você transição para nomear todos os vários pontos de dor e sintomas que eles estão experimentando atualmente como resultado desse problema (por exemplo,” e-mails e textos bagunçados, “” coisas escorregando através das rachaduras, ” etc.).
• solução: agora você apresenta a sua solução como o Salvador que irá remover todos esses problemas para eles (por exemplo, “é hora de Basecamp.”).,

Aqui está outra rápida olhada na página inicial agora que você pode identificar a fórmula que eles estão seguindo.

demasiadas empresas querem lançar directamente para as características e benefícios do seu produto na página inicial.

no entanto, o problema com isso é que os visitantes do site ainda não estão lá.

estas pessoas podem não reconhecer os mesmos problemas em sua vida, então a ‘solução’ que você está vendendo não ressoa com eles. Eles deixam o seu site sem Converter como resultado!,

Você também vai notar que esta página inicial é pesada de texto, o que é incomum em comparação com alguns outros sites de software.

é outro truque que eles aprenderam depois de testar diferentes versões nos últimos anos.

anos atrás, eles testaram uma página de pouso clássica em forma longa e inicialmente viram um enorme salto em conversões (37,5%).

No entanto, eles ainda não estavam satisfeitos e pensavam que poderiam fazer melhor.

então eles tentaram outro teste, mas desta vez usando um testemunho do cliente contra o projeto original.,

O cliente um saiu no topo com um aumento de conversão de 102%.

eles então seguiram isso com mais um teste para ver se o comprimento da cópia tinha alguma coisa a ver com os resultados. (Answer: It didn’t.)

assim você pode ver que eles ainda permanecem em um formato pesado de texto global. No entanto, não é necessariamente o comprimento dessa cópia que faz a diferença.

em vez disso, tudo se resume às palavras específicas utilizadas e à fórmula inteligente para garantir que os seus clientes saibam exactamente quais os problemas que a Basecamp resolve.,

MailChimp

a página inicial da Empresa de software de email marketing, MailChimp, apresenta uma das melhores lições de como desenhar uma página inicial que se converte.

no entanto, no primeiro blush, não parece muito:

Uma das primeiras coisas que você vai notar é que há um único botão acima da dobra.não há literalmente mais nada para clicar aqui!

opções e escolhas decrescentes tem sido mostrado para ajudar a melhorar as taxas de conversão., A idéia é que quanto mais decisões você forçar os visitantes a fazer, mais tempo leva para que eles decidam o que fazer (se alguma coisa).

Mailchimp’s homepage also offers a lesson in white space (or negative space).

por exemplo, todos nós tentamos ler um post no blog em um site, apenas para sentir que é muito ‘apertado’ ou confuso. Essa é uma grande bandeira vermelha que seu projeto de blog fede!

em vez disso, uma página bem desenhada deve ser aberta e arejada como a MailChimp.

O espaço negativo em torno do seu CTA primário ajuda a aumentar o seu significado na página., Assim, as pessoas são quase forçadas a prestar mais atenção a ela.

vamos percorrer a página um pouco e ver como eles jogam com espaçamento horizontal para também monopolizar a sua atenção.

eles estão usando um truque de fotografia chamado “regra dos terços” que diz que você deve colocar os elementos de página mais importantes no meio da sua mira.

o conteúdo dessa secção da página inicial é pouco centrado por uma razão! Ele acaba moldando ou controlando como eles querem que você veja o conteúdo da página em ordem de importância.,

dessa forma, eles podem ajudá-lo subtilmente priorizar uma hierarquia de páginas que diz: “Esta é a opção #1, Esta é a opção #2, etc.”

Conclusion

the best homepages on the web today might have different objectives.

no entanto, há sempre um grande para o qual eles voltam. Geracao.

Todos os sites hoje precisam vender.isso não significa que tenham de fazer com que as pessoas comprem imediatamente. Mas tem de chegar a esse ponto, eventualmente.

As melhores páginas usam vários fatores, desde recursos interativos ao design, para instruir subtilmente o usuário o que fazer a seguir.,acredite ou não, Isto também deve ser do interesse do visitante.

ajuda a simplificar a sua vida ao tomar menos decisões, enquanto também levá-los para o destino pretendido mais rápido (para que eles possam resolver o problema ou ponto de dor que estão experimentando).

Qual é o seu exemplo favorito da página inicial e o que você gosta nele?