Um bom design de site B2B não tem a ver com parecer uma startup ou um banco. Tem a ver com permitir que cinco ou seis pessoas da mesma empresa, cada uma com uma pergunta diferente, encontrem a resposta sem falar com vendas primeiro. A maioria dos sites B2B é projetada para um visitante imaginário: um tomador de decisão que lê a home de cima a baixo e clica em "Agende uma demo". Essa pessoa raramente existe.
Este guia aborda o design de sites B2B do ponto de vista do comprador: o que cada página precisa fazer, como a navegação deve funcionar quando várias funções e setores visitam o mesmo site, como projetar para visitantes que você não consegue identificar e como construir páginas com slots intercambiáveis para que possam se adaptar depois. Ele termina com um exemplo ilustrativo comentado e um redesign antes/depois que você pode copiar.
Nossa posição: projete para o comitê, não para a persona
A maioria dos briefings de design de sites B2B começa com uma persona e um mood board da marca. Achamos que esse é o ponto de partida errado. Uma compra B2B é feita por um comitê de compra, e o site é visitado por seus membros separadamente, em momentos diferentes, com tarefas diferentes. O comprador econômico quer saber o custo e o risco. O usuário quer saber se o produto resolve a tarefa do dia a dia. A TI quer saber sobre segurança e integrações. Compras quer as condições.
Os compradores também fazem a maior parte desse trabalho sozinhos. Uma pesquisa do Gartner divulgada em 2018 concluiu que os potenciais clientes passam só cerca de 17% do tempo de compra em reuniões com fornecedores, e esse tempo é dividido entre todos os fornecedores que estão considerando. O resto é pesquisa, grande parte dela nos sites dos fornecedores.
Então a pergunta de design não é "o que o nosso cliente ideal quer ver?". É "qual membro do comitê está nesta página agora, e ele consegue a resposta em menos de um minuto?". Um site que responde bem a isso geralmente parece mais simples do que um site premiado. Ele converte melhor porque ninguém precisa mandar e-mail para vendas para saber se você integra com o Salesforce.
O que diferencia um site B2B de um site B2C
Antes das orientações página por página, vale explicitar as restrições. Estas são as diferenças que devem orientar as decisões de design:
| Fator | Site B2C típico | Site B2B típico | Implicação para o design |
|---|---|---|---|
| Quem decide | Uma pessoa | Um comitê com várias funções | Caminhos e conteúdos por função, não um único funil |
| Visitas antes de converter | Muitas vezes, uma sessão | Muitas sessões ao longo de semanas ou meses | Visitas de retorno precisam de um caminho mais rápido para conteúdo mais aprofundado |
| Conversão principal | Compra | Demo, contato, conta de teste, orçamento | A conversão pede comprometimento, então as provas precisam ficar ao lado dela |
| Preço | Visível | Muitas vezes sob medida ou por níveis | Explique como funcionam os preços, mesmo que você não mostre os valores |
| Risco | Baixo, reversível | Alto, custos de contrato e de troca | Conteúdo de segurança, implementação e suporte é conteúdo de conversão |
Nada disso significa que sites B2B devam ser densos. Significa que a hierarquia precisa atender várias pessoas. Se você quer se aprofundar no lado da usabilidade, nosso post sobre sites B2B fáceis de usar aborda padrões de UX, formulários e velocidade.
Boas práticas de design de sites B2B, página por página
Cada página principal tem uma tarefa. Quando uma página tenta fazer três, não faz nenhuma bem.
Home: direcione, não venda
A home B2B é uma central de distribuição. Um visitante que chega ali geralmente conhece seu nome (por uma indicação, um anúncio, uma listagem no G2) e quer confirmar duas coisas rapidamente: o que você faz e se isso serve para empresas como a dele. Projete a página para responder às duas acima da dobra e depois direcionar. Indicações de parceiros e afiliados também costumam cair aqui; nosso guia de marketing de afiliados para SaaS mostra para onde esse tráfego deveria ir. Nossa galeria de exemplos de home B2B mostra como 11 empresas de software fazem esse direcionamento hoje.
- Título: o resultado e a categoria em palavras simples. "Software de folha de pagamento para equipes em vários países" é melhor do que "Impulsionando o futuro do trabalho".
- Subtítulo: para quem é, por tipo ou porte de empresa.
- Faixa de provas: logos de clientes reconhecíveis ou um único resultado concreto, posicionados logo abaixo do título, e não no fim da página.
- Bloco de direcionamento: “Trabalho em finanças / RH / TI” ou “Soluções para SaaS / indústria / saúde”, cada um levando a uma página criada para esse leitor.
- Um CTA principal e um secundário: por exemplo, “Agende uma demo” mais “Veja os preços”. Mais opções dividem a atenção.
Nosso guia de personalização da home B2B se aprofunda no que mudar na home para diferentes segmentos de visitantes.
Páginas de soluções e de setores: façam o trabalho da primeira conversa de vendas
Essas páginas carregam a maior parte do peso no design de um site B2B e costumam ser as mais fracas. Uma boa página de setor parece os primeiros 15 minutos de uma call de descoberta: este é o problema como o seu setor o vive, é assim que times como o seu o resolvem com a gente, este é um cliente do seu setor, é assim que a implantação funciona. Se a página pudesse ser copiada para outro setor com um localizar e substituir no nome do setor, ela não está cumprindo o seu papel. Veja personalização de sites por setor para saber como estruturar o conteúdo por vertical.
Página de preços: explique o modelo mesmo que esconda os números
Muitas empresas B2B não conseguem publicar um preço único. Tudo bem. O que não funciona é uma página de preços com três colunas dizendo "Fale conosco". No mínimo, explique do que o preço depende (usuários, volume, módulos), qual é a duração típica do contrato e o que está incluído na implementação. Os compradores econômicos usam essa página para decidir se vale a pena envolver compras. Nosso post sobre personalização da página de preços B2B mostra como adaptá-la ao porte da empresa.
Páginas de prova: torne os estudos de caso fáceis de escanear
Cases são lidos por céticos, muitas vezes no fim do ciclo. Estruture-os para que o leitor encontre uma empresa comparável em segundos: filtros por setor e porte da empresa e, no topo de cada case, um quadro-resumo com a situação inicial, o que mudou e o resultado medido. Uma parede de PDFs para download atrás de um formulário não é uma biblioteca de provas.
Páginas de segurança, integrações e implementação
Essas são as páginas que mais faltam em sites B2B, e são lidas pelos membros do comitê que podem vetar o negócio. Um diretório de integrações com detalhes reais de configuração, uma página de segurança que lista certificações e o tratamento de dados com clareza e uma página de implementação com um cronograma realista fazem mais pela conversão no estágio final do que mais uma página de recurso.
Páginas de demo e contato: mantenha o pedido proporcional
A página de conversão deve repetir o resultado que o visitante está comprando, mostrar o que acontece depois do envio (quem vai entrar em contato e quando) e pedir apenas os campos de que vendas precisa para a primeira ligação. Abordamos a escolha dos campos em detalhe no nosso guia de formulários de captura de leads.
Navegação para vários cargos e setores
A navegação é onde o design de um site B2B respeita ou ignora o comitê de compras. Estes padrões ajudam. (Para mudar o próprio conteúdo por cargo, veja como personalizar seu site B2B por cargo.)
- Menu de soluções dividido em dois. Uma coluna "Por cargo" (Finanças, Operações, TI), outra "Por setor". Os visitantes se autosselecionam e você ganha um sinal gratuito sobre quem eles são.
- Uma entrada visível para "Por que nós" ou "Comparar". Visitantes em estágio avançado procuram conteúdo de comparação e de troca de fornecedor. Escondê-lo no rodapé o oculta justamente das pessoas mais perto de comprar.
- Um menu de recursos organizado por tarefa, não por formato. "Montar o business case", "Avaliar a segurança", "Planejar a implementação" é mais útil do que "Blog, E-books, Webinars".
Mantenha o menu principal com cinco ou seis itens. Se precisar de mais, o problema está na arquitetura da informação, não no menu. A mesma estrutura determina como os buscadores rastreiam e avaliam suas páginas; este guia de arquitetura de site para SEO trata desse lado.
Como projetar para visitantes anônimos
A grande maioria dos visitantes de sites B2B nunca preenche um formulário, então o design precisa funcionar para pessoas sobre as quais você não sabe nada. Isso tem duas consequências.
Primeiro, toda página precisa de uma versão padrão sensata. O título, a prova e o CTA padrão devem atender ao seu comprador mais comum, e não a um "todo mundo" genérico. Segundo, as páginas devem ser construídas para que a versão padrão possa ser trocada depois sem um redesign. É aqui que design e personalização se encontram.
Design pronto para personalização: construa páginas com slots
Uma página pronta para personalização tem um pequeno número de módulos bem delimitados que podem mudar enquanto o resto da página permanece fixo. Na prática, três slots cobrem a maior parte do valor:
- Slot do título: o H1 e o subtítulo. Mesma faixa de tamanho em todas as variantes, para que o layout não pule.
- Espaço de provas: uma faixa de logos ou um único card de case. Projetado para conter os logos de um setor ou uma história de cliente por vez.
- Slot de CTA: texto do botão mais uma frase de apoio de uma linha, por exemplo "Agende uma demonstração" para um visitante mid-market versus "Fale com um especialista enterprise" para uma conta grande.
Desenhe esses espaços com dimensões fixas e limites de conteúdo (por exemplo, título de 40 a 70 caracteres, card de prova com um logo, uma frase e um link). Assim um time de conteúdo pode escrever variantes sem pedir um novo layout ao design toda vez. Para padrões de interface específicos dentro desses espaços, veja nosso post sobre padrões de design para sites B2B personalizados.
Exemplo comentado: uma home B2B de mid-market
Exemplo (ilustrativo, não é uma empresa real): "Ledgerline", um fornecedor fictício de automação de contas a pagar que vende para equipes de finanças em empresas de 200 a 2.000 funcionários. Veja como a home dele poderia ser organizada, de cima para baixo, com o motivo de cada bloco.
- Cabeçalho: logo, Soluções (Por cargo / Por setor), Preços, Clientes, Recursos, Segurança. Botão de CTA "Agende uma demo." Segurança fica no menu principal porque, neste exemplo, a revisão de TI é a etapa que costuma travar os negócios no final.
- Hero (slot do título): “Automação de contas a pagar para equipes financeiras que já não cabem em planilhas.” Subtítulo: “Aprovações, conciliação e pagamentos em um único fluxo, funcionando em cerca de seis semanas.” Categoria, público e prazo, tudo em duas linhas.
- Slot de provas: cinco logos do segmento mais provável do visitante, com uma linha: “Usado por equipes financeiras na indústria, no varejo e na logística.” Pode ser trocado por setor depois.
- Bloco de direcionamento: três cards: "Para CFOs: reduza o custo por fatura", "Para equipes de contas a pagar: pare de correr atrás de aprovações", "Para TI: integrações e segurança". Cada card leva a uma página por função.
- Como funciona: três passos com uma captura de tela cada. Mostra o produto, algo que os compradores esperam ver antes de uma demo.
- Card de estudo de caso único: empresa comparável, situação inicial, resultado. Segunda prova, mais profunda que os logos.
- Prévia de preços: “Preço por volume de notas fiscais. Veja como funciona.” Responde à primeira pergunta de filtro do decisor econômico.
- Slot do CTA de fechamento: “Agende uma demo de 30 minutos. Você vai falar com um especialista em finanças, não com um SDR genérico.” Define as expectativas sobre o que acontece em seguida.
Antes e depois: redesenhando uma página inicial B2B genérica
Exemplo (ilustrativo): a homepage da mesma empresa fictícia antes de um redesign, e o que mudou.
| Elemento | Antes | Depois | Por quê |
|---|---|---|---|
| Título | "O futuro das finanças chegou" | "Automação de contas a pagar para times financeiros que já não cabem em planilhas" | Nomeia a categoria e o público |
| Visual do hero | Foto de banco de imagens de pessoas em uma reunião | Captura de tela do produto mostrando a fila de aprovações | Mostra o que o comprador está avaliando |
| Prova | Barra de logos no fim da página | Slot de logos abaixo do hero, card de case no meio da página | A prova ao lado da afirmação que ela sustenta |
| Navegação | Produto, Empresa, Blog, Contato | Soluções por cargo e setor, Preços, Clientes, Segurança | Corresponde ao que os membros do comitê procuram |
| CTAs | “Comece agora”, “Saiba mais”, “Fale conosco”, “Assine” | “Agende uma demo” mais “Ver preços” | Dois caminhos claros em vez de quatro vagos |
| Preços | Não mencionado | Prévia do modelo de preços com link | Permite que os compradores econômicos se qualifiquem sozinhos |
O redesign não adiciona uma única animação. Cada mudança facilita o trabalho de um membro específico do comitê.
O que faz um bom site B2B: checklist com 12 pontos
Quando pedimos que citem um bom site B2B, a maioria dos profissionais de marketing escolhe um pelo visual. As características que ajudam os compradores, em sua maioria, não são visuais. Um bom site B2B passa nas verificações abaixo, seja qual for o estilo. Avalie o seu próprio site com honestidade: um ponto por item, e qualquer nota abaixo de 9 mostra para onde deve ir o orçamento do redesign antes que alguém abra uma ferramenta de design.
- O título da homepage nomeia a categoria e o cliente. Em cinco segundos, quem visita pela primeira vez consegue dizer o que você vende e para quem.
- Toda afirmação tem uma prova ao lado. Um nome de cliente, uma captura de tela ou um número com fonte fica ao lado da afirmação, e não em uma página separada.
- Existe um caminho para cada função. O comprador econômico, o usuário do dia a dia e a TI encontram sua página a partir da navegação principal.
- Existe um caminho para cada setor nos seus dois ou três maiores verticais, com uma história de cliente específica do setor em cada um.
- Os preços são explicados. Ou com números, ou com o modelo de cobrança e um exemplo calculado para um cliente de porte típico.
- Segurança, integrações e implementação têm páginas próprias. Elas respondem a perguntas de estágio avançado que, de outra forma, viram e-mails para vendas.
- Cada página tem um CTA principal e no máximo um secundário, e o pedido principal combina com o provável estágio do visitante.
- O formulário de demo pede apenas o que o roteamento precisa e diz o que acontece após o envio.
- As principais landing pages funcionam sem a home. Um visitante que chega pela busca a um post do blog ou a uma página de recurso ainda consegue ver o que você faz e para onde ir em seguida.
- As páginas carregam rápido no celular. Os Core Web Vitals são aprovados nos dados de campo mobile dos seus principais templates.
- Existe conteúdo comparativo. Compradores em estágio avançado buscam “X vs Y” e “alternativas a X”; uma página justa feita por você é melhor do que o resumo de um site de reviews sobre você. As nossas próprias comparações da Markettailor seguem essa abordagem.
- A conversão é medida por segmento. Você vê a taxa de demos por setor, porte da empresa ou lista de contas-alvo, não só uma média do site inteiro.
Nenhum dos doze pontos trata de estilo visual. Se você quer ver como empresas reais lidam com os pontos 1, 2 e 7, nossa análise de exemplos de home B2B percorre onze homes de SaaS seção por seção. O ponto 9 importa mais do que a maioria dos times imagina. Quando a busca leva os visitantes direto para posts do blog e páginas de funcionalidades, a home pode ser a página de entrada de apenas uma pequena parcela das sessões. Confira o relatório de páginas de destino no seu analytics: o checklist precisa valer para as suas dez principais páginas de entrada, e não só para aquela que a diretoria revisa.
Um fluxo em 6 passos para auditar o design do seu site B2B
- Liste o comitê. Anote as 4 a 6 funções envolvidas em um negócio típico e a pergunta que cada uma precisa ver respondida no seu site.
- Associe perguntas a páginas. Para cada pergunta, encontre a página que a responde. Páginas que faltam (segurança, implementação, comparações) vão para o topo do backlog.
- Confira as principais páginas de entrada. No seu analytics, liste as 10 landing pages mais comuns. Muitos visitantes B2B nunca veem a homepage, então essas páginas precisam da mesma clareza.
- Faça um teste de 60 segundos por função. Dê a um colega uma função e uma pergunta e cronometre quanto tempo ele leva para encontrar a resposta a partir de uma página de entrada típica.
- Defina espaços nas páginas principais. Marque os espaços de título, prova e CTA com limites de conteúdo para que variantes possam ser adicionadas depois.
- Meça por segmento, não só no site inteiro. Acompanhe a taxa de conversão por setor e porte da empresa quando for possível identificá-los. Uma média do site inteiro esconde em quais segmentos o design falha.
A etapa 6 é onde a maioria das equipes trava, porque os dados de conversão raramente incluem atributos da empresa. A identificação de visitantes do Markettailor associa o tráfego anônimo a empresas, para que você veja quais setores e portes de empresa se engajam com cada página. Quando os espaços existem, a segmentação dele permite preenchê-los com variantes por segmento e manter o padrão para todos os demais.
Próximos passos
Comece pelo fluxo de auditoria acima, corrija primeiro as páginas que faltam e crie espaços nas páginas que recebem mais tráfego. Nossa comparação entre landing pages e home ajuda a decidir para onde o tráfego pago deve ir.
Perguntas frequentes
O que é design de sites B2B?
Design de sites B2B é a estrutura, o conteúdo e o design visual de um site que vende para empresas, e não para consumidores. Ele precisa atender várias funções do mesmo comitê de compra, apoiar ciclos longos de pesquisa ao longo de muitas visitas e converter visitantes em pedidos de demo, solicitações de contato ou contas de teste, e não em compras diretas.
Quais são as boas práticas de design de sites B2B?
Diga no título o que você faz e para quem, coloque a prova logo ao lado das afirmações, ofereça navegação por cargo e por setor, explique como os preços funcionam mesmo que os valores sejam personalizados, publique páginas de segurança, integrações e implementação e mantenha uma chamada para ação principal e uma secundária por página.
Como o design de sites B2B se diferencia do B2C?
Sites B2C normalmente atendem um único decisor que pode comprar em uma única sessão. Sites B2B atendem um comitê ao longo de semanas ou meses, com uma compra de maior risco e uma conversão que pede uma reunião, e não um pagamento. Isso leva o design para caminhos por cargo, provas mais aprofundadas e conteúdo que reduz o risco.
O que faz um bom site B2B?
Um bom site B2B permite que cada membro de um comitê de compra responda rapidamente à sua própria pergunta: o que você faz e para quem, prova ao lado de cada afirmação, caminhos por função e setor, um modelo de preços explicado, páginas de segurança e integrações, uma chamada para ação clara por página e conversão medida por segmento. O acabamento visual importa muito menos do que esses fundamentos.
Quais páginas um site B2B deve ter?
No mínimo: uma página inicial, páginas de soluções por função ou caso de uso, páginas de setor para os seus principais verticais, uma página de preços, uma página de clientes ou cases, páginas de segurança e de integrações e uma página de demo ou contato. Páginas de comparação e de implementação costumam faltar e são as que mais importam para compradores em estágio avançado.
Como projetar um site B2B para personalização?
Dê às suas páginas principais um padrão forte para o seu comprador mais comum e depois defina alguns espaços delimitados, geralmente o título, um módulo de provas e o CTA, com tamanhos fixos e limites de conteúdo. Assim, variantes por setor ou porte de empresa podem ser escritas nesses espaços sem redesenhar a página.