Design da página de destino: construindo a página de destino definitiva

Uma Landing Page eficaz é crucial para o sucesso de um produto

Marketing é um conceito estranho para a maioria dos designers e desenvolvedores. Somos excelentes no desenvolvimento de produtos e desafios técnicos, mas quando chega a hora de promover um produto, não somos muito experientes.

Mas o marketing é crucial para o sucesso de um produto e não deve ser menosprezado. Este foi o desafio que eu projetei e preparei para lançar o teclado mais importante do mundo para desenvolvedores, o Ultimate Hacking Keyboard.

Felizmente, fiz parte de uma equipe que percebeu a importância de uma landing page atraente, especialmente nos meses que antecederam nossa campanha de financiamento coletivo. Juntos, nos propusemos a projetar uma página de destino que capturasse a imaginação, gerasse assinantes e preparasse nosso produto para um lançamento bem-sucedido.

Esta é a história da página de destino final para The Ultimate Hacking Keyboard.

Parecer técnico. Passos práticos para a frente.

Uma pesquisa no Google por “design da página de destino” leva a dezenas de artigos excelentes, cada um repleto de dicas importantes como:

• “O conteúdo deve carregar em um piscar de olhos.”
• “A fotografia deve ser relevante para o público do site.”
• e “Incluir um formulário para coletar leads”.

Esses são pontos úteis, mas há mais fatores para o sucesso da página de destino. Este guia de design da página de destino fornecerá conselhos técnicos, mas também oferecerá insights práticos que ajudam designers e desenvolvedores a escolher os serviços de terceiros certos e integrar tecnologias que funcionam nos bastidores.

Em última análise, o objetivo deste guia é economizar tempo e dinheiro de designers e desenvolvedores, que poderiam ser desperdiçados em tentativas e erros infrutíferos.

Apontar para produção e hospedagem de vídeo de alta qualidade

Apresentar vídeo na web é mais fácil do que nunca, mas relativamente poucos sites o utilizam. Do ponto de vista da web, não é um desafio técnico, mas um investimento de recursos — tempo e dinheiro.

O vídeo do trailer da página de destino do Ultimate Hacking Keyboard (UHK) passou por doze iterações, com cada nova versão refinando gradualmente cada pequeno detalhe. O processo de design foi exaustivo, mas gratificante, e o vídeo do trailer é a joia da coroa da nossa página de destino. Isso diferencia completamente nosso produto do resto do pacote.

Tenha em mente que a criação de conteúdo de alta qualidade é cara. Profissionais especializados podem fazer um produto brilhar, mas é importante entender o que você pode pagar; caso contrário, seu produto pode afundar antes mesmo de sair do chão.

Se você ou outro designer em sua equipe tiver as habilidades e o equipamento, tente criar seu próprio conteúdo de vídeo, mas mantenha os vídeos curtos e simples. Produções excessivamente ambiciosas nas mãos de amadores raramente dão certo.

A equipe do UHK optou por uma animação 3D dinâmica para demonstrar a funcionalidade básica do teclado em nossa página de destino. Se for necessária uma animação 2D (para um aplicativo ou serviço da Web) ou se for necessária uma filmagem de câmera de ação ao vivo, o processo apresentará diferentes desafios.

Depois que um vídeo é feito, ele deve ser hospedado em um site. Felizmente, existem muitas opções:

O YouTube é o líder indiscutível do mercado e sinônimo de vídeo na web. É um serviço capaz e uma escolha razoável, mas seu player incorporado não é a opção mais esteticamente agradável.

O Vimeo possui um player embutido com um design minimalista bastante elegante. É conhecido por hospedar conteúdo de qualidade e fornecer alta definição superior.

Wistia é outra escolha popular entre os profissionais de marketing. Ele fornece recursos avançados, como mapas de calor de vídeo que mostram quais partes de um vídeo foram assistidas, ignoradas e assistidas novamente.

Por fim, a equipe do UHK decidiu que o Vimeo atendeu melhor às nossas necessidades. Aqui está o trailer da nossa página de destino: Ultimate Hacking Keyboard

Também vale a pena notar que mergulhamos na Interface de Programação de Aplicativos (API) do Vimeo para ajudar nosso vídeo a capturar melhor a atenção dos visitantes da página de destino. Usando a API JavaScript do Vimeo, fizemos os botões “Eu quero um” em nosso site pulsar três vezes seguidas depois que nosso trailer termina. Usados ​​corretamente, pequenos ajustes como esse podem aumentar as taxas de conversão da página de destino.

Crie uma experiência imersiva com conteúdo 3D

Às vezes, é importante fornecer aos visitantes da página de destino uma experiência imersiva. Queríamos que nossos visitantes pudessem explorar o Ultimate Hacking Keyboard em 3D, então tivemos que investigar os serviços baseados em WebGL criados especificamente para essa finalidade.

Sketchfab é o serviço baseado em WebGL mais popular. É fácil de dominar, oferece uma variedade de configurações visuais e pode ser incorporado a uma ampla variedade de serviços de hospedagem populares.

O P3d.in é um serviço WebGL simples focado na facilidade de uso, mas tem suporte limitado para certas texturas de alta resolução.

Após cuidadosa consideração, escolhemos Sketchfab. É assim que o Ultimate Hacking Keyboard fica em 3D.

Visualize Problemas e Soluções com Animações 2D

Uma das principais vantagens do Ultimate Hacking Keyboard é que reduz drasticamente o movimento da mão. A equipe queria visualizar isso em nossa página de destino exibindo uma animação do UHK trabalhando lado a lado com um teclado comum. Implementar isso não foi tão simples quanto parece.

Usar um vídeo incorporado parecia um exagero e também exigiria o trabalho extra de renderização. GIFs animados não eram uma opção por causa de seu tamanho de arquivo enorme e paleta de cores limitada. Por fim, optamos por trabalhar com animações SVG inline porque elas permitiam que nossos gráficos de mão se movessem independentemente de outros gráficos na página.

Criar nossa animação da página de destino dessa maneira consumiu mais tempo do que esperávamos. Tivemos que navegar por problemas entre navegadores, bugs da biblioteca JavaScript e outros desafios técnicos imprevistos apenas para fazer uma animação simples. No entanto, o resultado final parece bastante agradável e provou valer a pena o trabalho extra.

Uma palavra para os sábios – nunca subestime o número de coisas que podem dar errado!

Avalie o Analytics em tempo real

O Google Analytics é ótimo. É amplamente utilizado e fácil de trabalhar. No entanto, existem melhores candidatos para operações em tempo real.

O Chartbeat faz um ótimo trabalho ao enviar notificações quando um site excede certos limites, principalmente o número de usuários simultâneos em um site. Por exemplo, o site UHK é ocasionalmente vinculado a fóruns online, gerando picos de tráfego repentinos. Graças ao Chartbeat, sabemos imediatamente e podemos participar da conversa em andamento mais cedo.

O Mixpanel ajuda os administradores da web a analisar eventos como visitas ao site, abrir um diálogo de assinatura e confirmar uma assinatura. Ele também pode criar funis a partir desses eventos e visualizar as taxas de conversão, tornando os números acionáveis.

O Clicky fornece um incrível recurso de mapa de calor que revela onde os visitantes clicam em um site. Com base nos resultados, melhorias podem ser feitas no layout ou no conteúdo de um site para obter melhores resultados.

O HotJar permite que os proprietários de sites registrem as interações de seus visitantes salvando todas as ações do mouse e do teclado e transformando-as em vídeos.

Cada um desses serviços tem seus próprios recursos e benefícios exclusivos, mas todos eles fornecem feedback valioso e instantâneo sobre a atividade do visitante de um site. Cabe às empresas individuais determinar que tipo de informação é mais valiosa para fins de marketing.

Registre erros e evite dores de cabeça desnecessárias

Os sites estão se tornando cada vez mais dependentes do JavaScript, tanto que os recursos críticos do site geralmente dependem dele. Por exemplo, a caixa de diálogo de assinatura na página inicial do Ultimate Hacking Keyboard é acionada pelo código JavaScript.

Ao implementar o recurso de assinatura, testamos nos principais navegadores e nos sentimos confiantes de que fizemos tudo o que precisávamos. Mais tarde, porém, recebemos um e-mail de um visitante reclamando que o recurso de assinatura da página de destino não funcionava.

Como se viu, o visitante em questão estava usando o Adblock Plus em seu modo mais estrito, que bloqueava o script de análise do Clicky. Ao contrário de outros serviços de análise, o código de incorporação do Clicky não era resiliente a esse respeito, portanto, ao registrar a ação de assinatura e fazer referência ao objeto Clicky, o código gerou um erro.

Após este incidente, pensamos cuidadosamente sobre como evitar situações semelhantes no futuro. Ocorreu à equipe que deveríamos usar o manipulador de eventos global window.onerror para capturar e registrar esses erros. Em seguida, procuramos serviços de registro adequados e acabamos escolhendo Errorception.

Errorception é incrível porque faz um trabalho e o faz extremamente bem – encontrar erros de JavaScript. Sua interface de usuário é minimalista e funcional, o suporte é ótimo e permite que o administrador do site visualize erros individuais e investigue rastreamentos de pilha. O melhor de tudo, ele fornece um verdadeiro estrondo para seu dinheiro.

Desde a integração do Errorception, resolvemos cerca de uma dúzia de bugs, alguns dos quais eram improváveis ​​e inesperados. Por exemplo, uma vez recebemos um erro relacionado ao localStorage e descobrimos que quando o Safari está no modo de navegação privada, localStorage.setItem() resulta em um erro.

É impossível contabilizar todos os casos de erro atípicos, portanto, o registro em log é uma ótima maneira de capturar falhas antes que elas se tornem grandes dores de cabeça.

Projete um processo de construção de baixa manutenção

Inicialmente, a página de índice UHK começou como uma única página HTML hospedada no WordPress e continha todo o código CSS, HTML e JavaScript. No início, essa era uma solução viável, mas à medida que a página crescia, tornou-se um fardo de manutenção e uma abordagem mais modular era necessária.

Nossa solução? Primeiro, dividimos o código CSS, HTML e JavaScript em vários arquivos separados. Em seguida, convertemos os arquivos CSS em arquivos Less para facilitar ainda mais a manutenção. Por fim, criamos um processo de compilação para reunir todos os nossos pequenos arquivos.

Sempre otimizar para desempenho

A equipe do UHK sabe por experiência que o desempenho do site é crucial, como quando nossa página de destino foi Slashdotted e recebemos 260 visitantes simultaneamente. Felizmente, nosso VPS Linode de US $ 20 por mês funcionou como um campeão, mas isso exigiu mais do que sorte cega, então aqui estão algumas dicas para aumentar o desempenho:

• O carregamento lento de imagens é seu amigo, especialmente se sua página, como a nossa, contém muitas imagens. Estamos usando o plugin WordPress Unveil Lazy Load.

• Você também pode carregar ativos com preguiça. Se uma seção de uma página depende de um script adicional, é possível carregá-la lentamente quando ela estiver na janela de visualização. Verifique a visibilidade da janela de visualização com o plugin jQuery inview e carregue o script com jQuery.getScript() ou qualquer outro carregador de script.

O design da página de destino é uma disciplina de design vital

Abordamos alguns problemas de design da página de destino neste post, então vamos resumir os pontos mais importantes:

• Vá além do conteúdo baseado em texto e inclua rich media como vídeos, modelos 3D e animações 2D. Esse tipo de conteúdo torna uma página de destino mais envolvente e incentiva os visitantes a compartilhar com outras pessoas.
• Use análises em tempo real para que você possa reagir rapidamente a picos de tráfego repentinos e participar da conversa em andamento.
• Sempre registre erros. Há muitas coisas que podem (e vão) dar errado, por isso é importante acompanhar.
• Otimize o desempenho para que seu site acompanhe as cargas de tráfego mais altas.

Como em todas as disciplinas de design, o design da página de destino exige um compromisso contínuo de aprender sobre novas ferramentas, técnicas e processos. A tecnologia e os gostos inevitavelmente evoluem – a vanguarda de hoje é a relíquia de amanhã.

Felizmente, o design da página de destino que se comunica com clareza e cativa o público não depende totalmente da tecnologia. Designers experientes sabem como incorporar as ferramentas mais recentes, mas seu processo de design é orientado principalmente por fazer as perguntas certas e navegar habilmente pelos problemas que ameaçam inviabilizar um projeto.

Em última análise, uma página de destino atraente deve ser uma parte essencial do plano de marketing de qualquer nova marca ou produto. Em nosso mundo voltado para a web, uma página de destino bem projetada tem a capacidade de criar seguidores, gerar buzz e aumentar as vendas – tudo isso é vital para a prosperidade contínua de uma empresa em ascensão.