Processo E Ferramentas
Design da página de destino: construindo a página de destino final
Uma página de destino eficaz é crucial para o sucesso de um produto
O marketing é um conceito estranho para a maioria designers e desenvolvedores . Nós nos destacamos no desenvolvimento de produtos e nos 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 esquecido. Este foi o desafio quando projetei e me preparei para lançar o teclado mais proeminente do mundo para desenvolvedores, o Teclado Ultimate Hacking .
A fotografia de produtos de alta tecnologia é um componente crucial para as páginas de destino do comércio eletrônico.
Felizmente, eu fazia parte de uma equipe que percebeu a importância de uma página de destino atraente, especialmente nos meses que antecederam nossa campanha de crowdfunding decisiva. Juntos, decidimos 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 do página de destino final para The Ultimate Hacking Keyboard .
Parecer técnico. Passos práticos em frente.
Uma pesquisa no Google por “design da página de destino” leva a dezenas de artigos excelentes, cada um deles com 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, “Inclua um formulário para coletar leads”.
Esses são pontos úteis, mas há mais fatores para sucesso da página de destino . Este guia de design de página de destino fornecerá conselhos técnicos, mas também oferecerá percepções práticas 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 dos designers e desenvolvedores, que de outra forma poderiam ser desperdiçados em tentativas e erros infrutíferos.
Objetivo de produção e hospedagem de vídeo de alta tecnologia
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 de nossa página de destino. Isso diferencia completamente nosso produto do resto da embalagem.
Lembre-se de 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 solo.
Se você ou outro designer na sua equipe tem as habilidades e o equipamento, você pode tentar 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 vão bem.
A equipe UHK decidiu por uma animação 3D dinâmica para demonstrar a funcionalidade básica do teclado em nossa página inicial. Se uma animação 2D for necessária (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á desafios diferentes.
Depois que um vídeo é feito, ele deve ser hospedado em um site. Felizmente, existem muitas opções:
Youtube é líder indiscutível de 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.
Vimeo apresenta um player integrado com um design minimalista que é 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 oferece recursos avançados, como mapas de calor de vídeo, que mostram quais partes de um vídeo foram assistidas, puladas e refeitas.
No final das contas, a equipe UHK decidiu que o Vimeo atendia melhor às nossas necessidades. Aqui está o trailer da nossa página de destino: Teclado Ultimate Hacking
A animação 3D é uma ótima maneira de demonstrar a funcionalidade de um produto.Também é importante notar que mergulhamos no Vimeo's Interface de programação de aplicativos (API) para ajudar nosso vídeo a capturar melhor a atenção dos visitantes da página de destino. Usando API JavaScript do Vimeo , fizemos os botões “Eu quero um” em nosso site pulsarem três vezes seguidas após o término de nosso trailer. Usado corretamente, pequenos ajustes como este podem aumentar as taxas de conversão da página de destino.
Crie uma experiência envolvente com conteúdo 3D
Às vezes, é importante fornecer aos visitantes da página de destino uma experiência envolvente. 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, fornece uma variedade de configurações visuais e pode ser incorporado em uma ampla gama de serviços de hospedagem populares.
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 uma consideração cuidadosa, escolhemos Sketchfab. Esta é a aparência do Ultimate Hacking Keyboard 3D .
Visualize problemas e soluções com animações 2D
Uma das principais vantagens do Teclado Ultimate Hacking é que ele reduz drasticamente o movimento das mãos. A equipe queria visualizar isso em nossa página de destino exibindo uma animação do UHK trabalhando lado a lado com um teclado normal. Implementar isso não foi tão simples quanto parece.
Usar um vídeo incorporado parecia um exagero e também exigiria um trabalho extra de renderização. GIFs animados não eram uma opção devido ao seu enorme tamanho de arquivo e paleta de cores limitada. Por fim, optamos por trabalhar com animações SVG embutidas porque elas permitiam que nossos gráficos de mão se movessem independentemente de outros gráficos na página.
Criar a 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 muito bom e valeu a pena o trabalho extra.
Uma palavra para o sábio - 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 candidatos melhores para operações em tempo real.
Chartbeat faz um ótimo trabalho de envio de 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 repentinos de tráfego. Graças ao Chartbeat, sabemos imediatamente, e podemos entrar na conversa em andamento desde o início.
Mixpanel ajuda os administradores da web a analisar eventos como visitas a sites, abrir uma caixa de diálogo de assinatura e confirmar uma assinatura. Ele também pode criar funis a partir desses eventos e visualizar taxas de conversão, tornando os números acionáveis.
Clicky fornece um recurso de mapa de calor incrível que revela onde os visitantes clicam em um site. Com base nos resultados, melhorias podem ser feitas no layout ou conteúdo de um site para obter melhores resultados.
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 a cada empresa determinar que tipo de informação é mais valiosa para fins de marketing.
Registrar erros e evitar dores de cabeça desnecessárias
Os sites estão se tornando cada vez mais dependentes do JavaScript, tanto que os recursos essenciais do site geralmente dependem dele. Por exemplo, a caixa de diálogo de inscrição na página de destino do Ultimate Hacking Keyboard é acionada pelo código JavaScript.
Ao implementar o recurso de assinatura, nós o testamos nos principais navegadores e nos sentimos confiantes de que fizemos tudo o que era necessário. Mais tarde, no entanto, recebemos um e-mail de um visitante reclamando que o recurso de assinatura da página de destino não funcionava.
No final das contas, o visitante em questão estava usando o Adblock Plus em seu modo mais restrito, o que bloqueou o script de análise 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 inscrição e fazer referência ao objeto Clicky, o código gerou um erro.
Após esse incidente, pensamos cuidadosamente em 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 muito 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 é que oferece um verdadeiro retorno do seu investimento.
Desde a integração do Errorception, resolvemos cerca de uma dúzia de bugs, alguns dos quais eram improváveis e inesperados. Por exemplo, certa vez recebemos um localStorage erro relacionado e descobri 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 discrepantes, então o registro é uma ótima maneira de capturar as falhas antes que 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 todos os CSS , Código HTML e JavaScript. No início, essa era uma solução viável, mas conforme a página crescia, ela se tornava 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 tornar a manutenção ainda mais fácil. Finalmente, criamos um processo de construção para reunir todos os nossos arquivos minúsculos.
Sempre otimizar para desempenho
A equipe UHK sabe por experiência própria que o desempenho do site é crucial, como na época em que nossa página de destino era Slashdotted e recebemos 260 visitantes simultaneamente. Felizmente, nosso Linode VPS de $ 20 por mês teve um desempenho excelente, 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 WordPress Revele a carga lenta plugar.
- Você também pode carregar ativos lentamente. Se uma seção de uma página depende de um script adicional, é possível carregá-lo lentamente quando ele entra 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 vital do design
Já falamos sobre alguns design da página de destino questões nesta postagem, 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 a 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 repentinos de tráfego e entrar na conversa em andamento.
- Sempre registre os erros. Há muitas coisas que podem (e irão) dar errado, por isso é importante manter o controle.
- Otimize o desempenho para que seu site se mantenha mesmo com as cargas de tráfego mais altas.
Como acontece com todas as disciplinas de design, o design da página de destino requer um compromisso contínuo com o aprendizado de novas ferramentas, técnicas e processos. Tecnologia e gostos evoluem inevitavelmente - 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 inteiramente da tecnologia. Designers experientes sabem como incorporar as ferramentas mais recentes, mas seu processo de design é impulsionado principalmente por fazer as perguntas certas e navegar habilmente por problemas que ameaçam inviabilizar um projeto.
Em última análise, uma página de destino atraente deve ser uma parte essencial de qualquer nova marca ou plano de marketing de produto. Em nosso mundo orientado para a web, uma página de destino bem projetada tem a capacidade de criar seguidores, gerar buzz e aumentar as vendas - coisas que são vitais para a prosperidade contínua de uma empresa em ascensão.
Compreender o básico
Por que você precisa de uma página de destino?
As páginas de destino eficazes aumentam as taxas de conversão e ajudam as marcas e empresas a comunicar rapidamente o valor de seus produtos aos consumidores.
O que é uma taxa de conversão em SEO?
As conversões são eventos mensuráveis que ocorrem quando um visitante realiza uma interação desejada em um site por meio de anúncios, formulários de contato, assinaturas, compras, etc. Uma taxa de conversão em SEO mede o número de visitantes do site dividido pelo número de interações desejadas em um determinado valor de tempo.
Como você calcula uma taxa de conversão?
Vamos usar o seguinte exemplo: Se uma página de destino tem 100 visitantes em um dia e 20 visitantes preenchem um formulário de contato, a taxa de conversão do formulário de contato pode ser encontrada dividindo o número de formulários preenchidos (20) pelo número de visitantes da página de destino (100). 20 ÷ 100 = taxa de conversão de 20%
