Uma homepage de pequenas empresas deve ajudar um novo visitante a responder a três perguntas: o que você oferece, é relevante para mim, e o que posso fazer a seguir? Comece lá. Adicione evidências e detalhes que ajudam com essas decisões em vez de encher uma página com tudo o que a empresa poderia dizer.
Os exemplos originais abaixo mostram como redigir a página para um serviço, uma loja e um produto de software. São demonstrações, não campanhas reais de clientes ou histórias de sucesso medidas. Adapte-as ao que você pode realmente entregar.
O livre Planejador da página inicial Ajuda a transformar sua oferta em um esboço de página editável. Você pode usar este guia sem a ferramenta: pegue cada seção, escreva seu propósito na margem e remova qualquer coisa que não ajude o visitante a tomar uma próxima decisão sensata.
Escolha o trabalho principal da página
Uma homepage pode introduzir vários serviços, mas ainda precisa de uma finalidade de organização. Uma empresa de reparação local pode querer consultas de reparação adequadas. Uma loja pode querer que os visitantes comparem grupos de produtos relevantes. Uma empresa de software pode querer que os usuários inspecionem um exemplo de trabalho antes de começar.
Escreva esse trabalho em palavras comuns. “Generate engagment” é muito vago para orientar uma decisão de design. “Ajude um cliente próximo a verificar se nós reparamos o seu tipo de bicicleta e solicitamos um compromisso” diz-lhe que informação deve aparecer.
Isso não significa que cada visitante deve tomar a mesma ação. Os clientes existentes podem precisar de suporte ou acesso à conta. Mantenha esses destinos disponíveis, mas evite apresentar cada departamento organizacional como um primeiro passo igualmente importante para um novo visitante.
Use um serviço dedicado ou página de produto quando o público precisa de uma explicação mais específica. A homepage pode direcionar a pessoa certa lá em vez de tentar persuadir todos os clientes possíveis com um parágrafo muito amplo.
Rascunhe a primeira tela como uma pequena conversação completa
Uma primeira tela prática contém um cabeçalho claro, uma breve explicação e uma ação cujo significado é óbvio. Uma imagem pode ajudar a mostrar o produto ou resultado, mas não deve ser o único lugar onde a oferta é explicada.
Para um exemplo original de reparação-serviço, o título poderia ser “Reparação de bicicletas para pilotos diários no norte de Bristol”. A linha de apoio poderia ser “Diga-nos o que precisa de reparação. Vamos confirmar o trabalho que podemos oferecer e opções de marcação disponíveis.” A ação poderia ser “Pergunte sobre uma reparação.”
Este texto faz uma oferta limitada. Não promete disponibilidade imediata, uma cotação fixa ou uma reviravolta particular, a menos que o negócio possa apoiar essas alegações. Um parágrafo curto pode ser persuasivo precisamente porque responde honestamente às perguntas práticas.
Numa tela pequena, verifique se o cabeçalho e a ação permanecem legíveis sem espremê- los em uma forma decorativa estreita. A primeira tela é um ponto de entrada, não um requisito para caber todo o negócio em um número arbitrário de pixels.
Separar um cabeçalho da cópia de suporte
Um cabeçalho deve identificar a seção ou idéia principal. Apoiar cópia fornece as condições e detalhes. Quando ambos repetem a mesma promessa vaga, a página usa mais espaço sem ajudar o leitor a entender mais.
Considere este par original: “Espaços melhores, melhor vida” seguido de “Criamos espaços excepcionais que transformam sua vida”. Nem identifica o serviço. Uma alternativa é “Armazenamento arrumado para pequenos quartos”, seguido de uma explicação simples de medição, design e cobertura de instalação.
Um cabeçalho ainda pode ter personalidade. O teste é se o conteúdo circundante fornece a um leitor informações suficientes para interpretá- lo. Se alguém deve percorrer várias seções antes de descobrir o que é vendido, a abertura provavelmente fez o visitante fazer trabalho desnecessário.
A Tutorial de cabeçalhos W3C explica como os cabeçalhos comunicam organização e navegação de suporte. Use os cabeçalhos semânticos reais em uma estrutura lógica. Um parágrafo grande em negrito nem sempre é um substituto adequado para um cabeçalho de seção na marcação da página.
Exemplo original da loja: guia a escolha do produto
Imagine uma loja vendendo garrafas de limpeza recarregáveis e recargas concentradas. Um cabeçalho útil da página inicial é “Limpar recargas para pequenas casas.” A cópia de apoio pode explicar quais kits de arranque estão disponíveis e o que um cliente deve comprar.
A ação principal pode ser “Compare kits de arranque.” Uma ação secundária, “Reenchimentos de compras,” serve as pessoas que já possuem as garrafas. Esses rótulos ajudam os leitores a escolher entre duas tarefas reais em vez de apresentar uma linha de botões genéricos “Saiba mais”.
Uma secção do produto deve identificar o que está incluído, a dimensão relevante e a base de preços real. Não utilize alegações ambientais atraentes, mas não apoiadas, como substituto dos detalhes de que o comprador necessita. Se as provas apoiarem uma alegação material, ligue-se a ela e indique o seu âmbito de aplicação.
Uma imagem deve mostrar o produto real ou ser claramente identificada como uma ilustração. Não use uma fotografia de stock que implique que um kit diferente está a ser vendido. A escolha do produto torna-se mais difícil quando o título, a imagem e o destino parecem descrever coisas diferentes.
Exemplo de serviço original: tornar o pedido previsível
Imagine um pequeno serviço de contabilidade para designers freelancers. Uma explicação útil pode ser “A contabilidade mensal para designers freelancers que querem seus registros prontos para revisão.” Texto de suporte pode explicar quais registros são manipulados e o que o cliente ainda precisa fornecer.
A ação principal pode ser “Pergunte sobre a contabilidade mensal.” Cópia próxima deve indicar o que acontece após o pedido. Se o serviço revê a adequação antes de fornecer uma citação, diga-o em vez de rotular o formulário como uma reserva confirmada.
Uma breve seção de processo pode descrever o compartilhamento do contexto de negócios, recebendo um escopo proposto e concordando com uma data de início. Essas etapas devem refletir a operação real. Não anuncie um processo de três etapas se a jornada real incluir várias aprovações e taxas inexplicadas.
Uma FAQ adequada pode abordar a compatibilidade de software, cobertura de serviços e como os registros são trocados. O aconselhamento detalhado regulamentado ou fiscal pertence a um profissional devidamente qualificado. A página inicial não deve implicar que uma descrição geral do serviço resolva as obrigações legais de cada cliente.
Exemplo de software original: mostrar a tarefa antes da lista de funcionalidades
Imagine um produto que rastreie as aprovações do cliente. Um título como “Veja qual feedback do cliente ainda é excelente” identifica uma tarefa. Cópia de suporte pode explicar que o produto mantém solicitações, proprietários e status de aprovação em uma lista compartilhada.
Uma visualização genuína da interface pode mostrar um projeto de exemplo com entradas de exemplo claramente rotuladas. A ação "Ver uma lista de aprovação de amostra" deve levar a essa amostra. Não prometa uma demonstração de trabalho e, em seguida, exigir uma chamada de vendas não divulgada antes de mostrar qualquer coisa.
As características tornam-se significativas quando ligadas à tarefa. Um campo de data limite é importante porque alguém precisa saber quando o feedback é esperado. Uma exportação é importante porque uma equipe precisa compartilhar um registro. Integrações de listagem sem explicar seu uso podem não ajudar um novo cliente a decidir.
Mantenha as limitações visíveis. Se um produto não enviar lembretes ou suportar um determinado fluxo de trabalho, evite a formulação que implica que sim. Um visitante que entenda os limites pode decidir se deve continuar; um visitante desencaminhado por uma promessa ampla só pode descobrir o problema após o tempo de investimento.
Adicionar prova de que você realmente possui
Uma seção de prova deve responder a uma incerteza real. Uma certificação relevante pode ajudar a estabelecer competência para uma determinada tarefa. Uma imagem genuína pode mostrar como um produto funciona. Uma conta de cliente autorizada pode descrever o que aconteceu nas circunstâncias desse cliente.
Não insira logotipos do cliente placeholder, contagens de revisão inventadas ou uma porcentagem de satisfação sem uma base documentada. Uma seção de prova atraente torna-se um problema de confiança se suas evidências não podem ser rastreadas. “Nenhum resultado do cliente publicado ainda” é um ponto de partida melhor do que um testemunho fabricado.
Use um exemplo de saída quando você não pode mostrar um resultado do cliente. Rotule-o como um exemplo e explique as entradas. Uma avaliação de reparo de amostra, comparação de produto ou relatório pode demonstrar o trabalho sem fingir que alguém já comprou ou se beneficiou dele.
Mantenha a reivindicação e seu suporte perto o suficiente para se conectar. Uma certificação não prova que cada cliente economiza dinheiro. Um depoimento isolado não estabelece um resultado médio. O objetivo é reduzir uma incerteza específica, não criar uma impressão de aprovação universal.
Explicar benefícios sem repetir um adjetivo de vendas
Um recurso diz o que está presente. Um benefício explica para que a pessoa pretendida pode usá-lo. “Exportar para CSV” é um recurso. “Leve os registros em sua planilha existente” explica um possível uso, desde que a exportação realmente funciona com esse fluxo de trabalho.
Escrever benefícios como tarefas concretas em vez de transformações garantidas. Uma planilha de estoque pode ajudar a comparar quantidades e custos. Não pode garantir que um produto vende. Uma página de reserva pode tornar visíveis compromissos disponíveis, mas não pode garantir um espaço adequado para cada visitante.
Mantenha a lista suficientemente curta para escolher. Se cada detalhe é descrito como essencial, o leitor tem de realizar a priorização com que a página deve ajudar. Coloque os benefícios mais relevantes perto da primeira decisão e especificações detalhadas onde os leitores esperam.
Pergunte aos clientes reais quais os detalhes que eles precisam antes de escolher. Suas respostas podem diferir das características favoritas da equipe. Trate essa diferença como evidência útil, em vez de uma razão para adicionar mais alto texto em torno da lista existente.
Usar uma seção de processo para remover a incerteza
Uma seção de processo deve explicar o que acontece, quem faz isso e o que o cliente deve fornecer. É especialmente útil quando uma consulta, avaliação ou citação personalizada precede o serviço. Mantenha os passos precisos, mesmo que isso os torne menos arrumados do que uma sequência decorativa.
Para um exemplo de armazenamento personalizado escolhido, a sequência pode ser solicitar uma visita de medição, revisar um projeto e cotação, em seguida, concordar com os arranjos de instalação. Se o pagamento, permissões ou lead times importam, explicá-los onde eles afetam a decisão.
Não descreva um passo interno como um benefício do cliente sem contexto. “Nossa equipe revisa seu caso” deixa em aberto quanto tempo isso leva e o que é devolvido. Uma frase mais útil identifica a saída real e qualquer expectativa suportada sobre o tempo.
Esta seção também deve distinguir o que ainda não está comprometido. Um pedido não é uma ordem, uma estimativa não é um contrato fixo e uma demonstração não é uma garantia. Limites claros podem tornar a página mais calma porque o visitante sabe o que clicar fará.
Escreva formulários como parte da página, não um pensamento posterior
Peça apenas informações necessárias para o próximo passo. Um inquérito de reparação pode precisar do tipo de bicicleta, o problema e detalhes de contato. Pode não precisar de um endereço postal completo antes que o negócio saiba se pode ajudar.
A Tutorial de instruções de formulário W3C cobre etiquetas, informações necessárias e instruções úteis. Aplique essas ideias no formulário real: etiquetas visíveis, formatos compreensíveis e erros que ajudam a pessoa a recuperar. Um placeholder fraco sozinho não é um sistema de instruções confiável.
Explique o que acontece na submissão. Se uma mensagem for enviada à equipe para revisão, diga isso. Se o pagamento for feito, deixe claro a obrigação. Uma confirmação deve dizer à pessoa que o pedido foi recebido sem fingir que o serviço já foi aprovado ou reservado.
Testar o formulário inteiro num telemóvel e com um teclado. A qualidade da cópia não pode compensar um botão de envio obscuro, um erro inacessível ou uma confirmação que desaparece antes de alguém o poder ler.
Use StoryBrand como uma estrutura para investigar
A página oficial do livro StoryBrand descreve a abordagem de mensagens centradas no cliente de Donald Miller. Uma aplicação útil é verificar se a página inicial se concentra no problema do visitante, na ajuda oferecida e na próxima ação.
Isso não significa que cada página deve seguir um padrão visual fixo. Uma loja comparando produtos, um serviço de emergência e um serviço profissional de longa consideração têm necessidades diferentes. A mesma estrutura pode ser interpretada de forma diferente entre layouts móveis, idiomas e tecnologias assistivas.
As anedotas comerciais do livro não são uma experiência que prove que o seu layout proposto aumentará a receita. Use as ideias para criar um rascunho coerente e, em seguida, teste a página real com pessoas relevantes. Mantenha compreensão, conclusão e resultados de negócios como observações separadas.
Uma página útil não é simplesmente curta. Ela fornece informações suficientes para a decisão sem fazer as pessoas lutar através de material irrelevante. Métodos detalhados podem permanecer acessíveis através de seções claras e links, mesmo quando a abertura é concisa.
Reveja a página com uma tarefa real
Peça a um cliente provável para completar uma tarefa realista, como descobrir se o serviço cobre sua necessidade e explicar como pedir ajuda. Evite dizer-lhes qual botão usar. Veja onde eles hesitam e grave o que eles esperam.
A Guia de ensaio de usabilidade GOV.UK descreve observar pessoas tentam tarefas específicas. Isso é uma verificação prática mais forte do que perguntar se a página parece bem. Um participante pode gostar de um design e ainda não encontrar as informações relevantes.
Mantenha a tarefa observada separada da decisão de compra da pessoa. Alguém pode encontrar o preço e decidir corretamente que é muito alto para eles. Isso não é necessariamente uma falha de navegação. Por outro lado, um clique em um botão grande não prova que a oferta foi entendida.
Revise o obstáculo específico, salve a versão antiga e verifique novamente. O resultado deve ser uma jornada mais compreensível da oferta para a evidência para o próximo passo. Use o Planejador da página inicial para organizar esse rascunho, em seguida, registrar respostas reais no Feedback de leitores em vez de declarar a página terminada porque sua cópia soa polida.
Antes do lançamento, abra cada destino de ação você mesmo. Verifique se o título da página, a oferta, a base de preço e o compromisso solicitado ainda correspondem às palavras que levaram lá. A consistência em toda a jornada importa tanto quanto uma abertura atraente.
Usar um modelo de cópia do site sem soar como todos os outros
Um modelo de cópia útil do site dá a cada seção uma tarefa. Comece com o cliente, a tarefa que você ajuda, o serviço ou produto, e o próximo passo. Depois adicione evidência real, uma breve explicação do processo e respostas às perguntas que atrasam uma decisão. Mantenha qualquer seção vazia até que você tenha algo verdadeiro para colocar lá. Um modelo não é permissão para inventar um testemunho.
Para exemplos de manchetes de homepage, compare as informações em vez de a esperteza. “A contabilidade para cafés independentes” nomeia um serviço e um cliente. Uma sub-linha pode explicar o detalhe prático: “Conciliamos as contas todas as semanas e enviamos ao proprietário um breve resumo.” Estes são exemplos de redação originais, não reivindicações sobre um provedor real. Pergunte a um leitor adequado o que o negócio faz antes de perguntar se eles gostam da página.
Utilizar o Planeador da página inicial para o contorno da secção e o editor de página para ver o seu próprio texto em uma página responsiva. O esboço e o layout visual respondem a diferentes perguntas.