José, como ficou combinado — as ideias sobre o site. Passámos por duas páginas: a inicial e a das soluções de colaboração. Olhámos de fora, com olhos de designer.
Em vários pontos a resposta depende do que só vocês sabem: como vendem, quem decide do outro lado, quantos pedidos a equipa comercial consegue processar. Aí dizemos isso abertamente.
Cada ponto segue o mesmo formato: o que vemos, o problema, o que faríamos. Ao lado, como resolvemos a mesma coisa em projectos nossos.
Em resumo
- A página inicial não diz o que a empresa faz. A ideia forma-se a partir de pormenores: o menu, a barra «I need». O primeiro ecrã está entregue a fotografias de banco de imagens.
- Falta prova. O menu promete a secção «Casos de sucesso» — a secção não existe. Os melhores números estão dentro dos testemunhos, em texto corrido.
- O conjunto visual desfaz-se. As pré-visualizações das soluções estão em estilos diferentes, uma delas cortada a meio das letras.
- Custa a ler. Linhas com mais de mil pixéis, tipo fino, alinhamentos que se contradizem na mesma página.
- A conversão não tem porta de entrada. No primeiro ecrã não há botão. O formulário tem cinco campos. Por baixo dele fica um aviso sobre palavras-passe e cartões de crédito.
01 · PÁGINA INICIAL
O primeiro ecrã não diz o que a empresa faz
O que vemos
Um carrossel de fotografias de banco de imagens: uma mulher com um portátil, um quadro com a palavra productivity, um café.
O problema
Ao fim de dez segundos na página continua por perceber o que a Inúbia faz.
A ideia forma-se a partir de pormenores: os nomes no menu, o «Diagnóstico Tecnológico» e a barra estreita em baixo. Consultoria personalizada — de quê, exactamente? Cibersegurança — percebe-se. CRM & automatização — percebe-se muito bem. Produtividade e colaboração — adivinha-se que ande perto do CRM.
O sentido está nos elementos mais pequenos do ecrã. É à volta deles que vale a pena construir a página.
O que faríamos
Se o carrossel se mantiver, cada slide passa a ser uma área de negócio: título, uma frase, um botão. As mesmas quatro áreas da barra de baixo, abertas, para se poderem percorrer e entrar.
Em cada uma, aquilo em que são fortes e, se possível, um número. O ClickUp é implementado por toda a gente, a questão é porquê convosco. «Implementamos o ClickUp numa semana» funciona. «Implementamos o ClickUp» fica sem efeito.
02 · PÁGINA INICIAL
Um ecrã inteiro para a idade da empresa
O que vemos
«25 anos de know-how a implementar soluções que garantem que o seu negócio nunca pára», uma ligação para «Sobre nós» e uma animação.
O problema
A animação é agradável, e aqui a expressão visual está melhor do que no primeiro ecrã. Mas o ecrã inteiro transmite uma coisa: a empresa trabalha há 25 anos e implementa soluções. Para o espaço que ocupa, é pouco.
O que faríamos
Colocar aqui vantagens ou casos, aquilo que mostra uma empresa que leva os projectos até ao resultado.
Se os casos estiverem fechados por acordos de confidencialidade, substituem-se por factos sobre vocês. Um facto a partir do qual o leitor tira sozinho a conclusão.
03 · PÁGINA INICIAL
Pré-visualizações em estilos diferentes e mal cortadas
O que vemos
A grelha de soluções, cada uma com a sua imagem.
O problema
As imagens vêm em registos diferentes: um logótipo, uma abstracção, uma fotografia com um portátil, um homem ao telefone. Junta-se o corte descuidado, e uma delas fica cortada a meio das letras.
Separadamente, cada uma passaria. Juntas, leem-se como «pôs-se ali qualquer coisa».
Fica também por perceber porquê clicar. «CRM grátis» — entro. «Domínio, loja online, website» — o que vou encontrar lá dentro?
O que faríamos
Um estilo e um corte para todas. Uma linha por cartão a dizer o que se ganha lá dentro. A imagem a explicar o serviço.
04 · PÁGINA INICIAL
As linhas de texto são demasiado longas
O que vemos
O texto está composto à largura toda do ecrã.
O problema
Quanto mais longa a linha, mais custa ler: ao chegar ao fim, o olho perde o princípio da linha seguinte. Uma linha demasiado estreita atrapalha da mesma maneira, com as palavras a saltar depressa de mais.
A referência em inglês são 55 a 60 caracteres por linha. Em português as palavras são mais longas, por isso o número exacto merece ser medido numa publicação portuguesa bem composta.
No vosso bloco de testemunhos a linha está bem medida. Ali lê-se com facilidade.
O que faríamos
Definir uma largura máxima para a coluna de texto e mantê-la em todo o site.
05 · PÁGINA INICIAL
Os testemunhos não têm com que se confirmar
O que vemos
Três testemunhos assinados: Cheila Olive | Narrativa de Espaços, Sara Abreu | Clinica Caniço, André Feliciano | Ecoprime Soluções.
O problema
A empresa vem numa linha de texto cinzento. Ao lado falta o rosto e falta o logótipo. Um testemunho existe para gerar confiança, e aqui fica sem nada que o apoie.
Dentro dos textos está o mais forte de toda a página:
«Deixaram de existir 500 folhas de Excel para actualizar constantemente.»
«Temos o Pipedrive há menos de 6 meses e já estamos a duplicar a facturação.»
«Éramos dois. Hoje somos nove.»
São números dos vossos clientes. Estão compostos com o mesmo corpo de tudo o resto, e o olho passa ao lado.
Os logótipos dos clientes existem no site, num bloco separado logo abaixo, sem ligação a quem disse o quê.
O que faríamos
Uma fotografia da pessoa e o logótipo da empresa junto de cada testemunho. Para o vosso sector estas empresas podem ser conhecidas.
E destacar o número de cada testemunho numa linha própria, para ser visto antes da leitura.
06 · PÁGINA INICIAL
Em ecrã estreito os testemunhos são cortados
O que vemos
Num monitor largo os três testemunhos cabem em colunas. Com cerca de 900 px de largura, o terceiro fica cortado pela margem. Ao lado não há setas nem pontos.
O problema
O visitante fica sem saber que existe mais para ver. Num portátil da Apple resolve-se com dois dedos, e a maior parte dos utilizadores não tem essa possibilidade.
O que faríamos
Setas para a esquerda e para a direita. Pontos a indicar quantos testemunhos existem e onde estamos.
07 · PÁGINA INICIAL
Em ecrã estreito o menu passa por cima do logótipo
O que vemos
Com cerca de 900 px de largura os itens do menu entram por cima do logótipo, e o último fica cortado a meio da palavra: «Solutio ›».
O problema
É o que acontece num portátil normal com um painel lateral aberto, ou num tablet na horizontal. Estraga-se a primeira coisa que o visitante vê.
O que faríamos
Passar ao menu compacto mais cedo, antes de o bloco começar a desfazer-se.
08 · PÁGINA INICIAL
Os parceiros merecem estar mais acima
O que vemos
O bloco «Parceiros» na parte de baixo da página: Pipedrive Platinum Partner, Microsoft 365, Google Workspace, CloudTalk, Trend Micro, Vodafone Business, ClickUp.
O problema
São nomes reconhecíveis e estão no rodapé, onde quase ninguém chega.
O que faríamos
Subi-los para uma faixa fina logo a seguir ao primeiro ecrã, com os logótipos num só tom. Identificados como parceiros: a menção destas empresas transfere para vocês parte do peso delas.
09 · PÁGINA DE SOLUÇÃO
O título está escrito para informáticos
O que vemos
No topo da página «Collaboration Solutions», por baixo «Microsoft 365 and Google Workspace».
O problema
Para quem é da área, percebe-se. Para o dono de uma empresa fica por explicar em que é que isto o ajuda. Como funciona essa ajuda sabem vocês melhor do que ninguém, e na página isso está ausente.
O que faríamos
Passar a categoria «Soluções de colaboração» para uma etiqueta pequena por cima. O título passa a dizer o que cresce no negócio depois da implementação. Por baixo, uma descrição curta e factos: o que já fizeram.
Mostrar os logótipos da Microsoft e da Google. Vocês implementam as soluções deles, e nomes grandes acrescentam confiança de imediato.
10 · PÁGINA DE SOLUÇÃO
No primeiro ecrã não se sabe para onde olhar
O que vemos
Uma fotografia grande com pessoas numa chamada de vídeo e um bloco de texto ao lado.
O problema
A composição não define uma ordem de leitura. O elemento mais forte do ecrã é a fotografia, e ela responde a outra pergunta. O interface que mostra parece antigo, e o primeiro pensamento do leitor é: porquê isto, se existe o Zoom e o Google Meet de graça?
Pela função de chamadas dentro de uma solução maior ninguém vos procura. O lugar principal fica melhor entregue a outra coisa.
O que faríamos
Inverter os pesos. Primeiro o título, depois a vantagem, depois o botão. A imagem vem a seguir, mais pequena, e explica o que acontece do vosso lado.
O vídeo com o orador está bem filmado: luz, enquadramento. Vale a pena mantê-lo, desde que fale do que se vende nesta página.
11 · PÁGINA DE SOLUÇÃO
No primeiro ecrã não há um único botão
O que vemos
O primeiro ecrã foi lido e não há onde carregar.
O problema
Boa parte dos visitantes precisa de receber o essencial no primeiro ecrã e decidir ali mesmo. Sem nada para decidir, saem.
O que faríamos
Fechar o primeiro ecrã por inteiro: título que vende, descrição, vantagens, números das implementações e um botão.
12 · PÁGINA DE SOLUÇÃO
Um serviço complexo não se vende com «saber mais»
O problema
Mudar a forma como a empresa trabalha é uma decisão pesada. A partir de um ecrã ela não se toma.
O que faríamos
Serviços destes vendem-se por dois caminhos. Vemos ambos a funcionar connosco e com os nossos clientes.
O primeiro é uma consulta ou diagnóstico gratuito. Formalmente é uma reunião onde mostram os vossos serviços. Se nela ouvirem o cliente, transforma-se numa consultoria para ele: percebe porque precisa da implementação e o que vai poupar. O valor aparece antes do pagamento.
O segundo é o site como ponto de contacto adicional. A venda acontece ao vivo ou noutros canais, e o site recolhe quem veio confirmar quem vocês são.
À parte: serviços assim vendem-se bem através de webinars. O webinar entra no próprio serviço («webinar de implementação de CRM») ou vive numa faixa transversal ao site. Pode ser gravado previamente ou repetir-se com regularidade.
13 · PÁGINA DE SOLUÇÃO
Microsoft e Google ficam um por baixo do outro
O que vemos
Os dois produtos estão descritos na mesma página, em dois blocos longos, um por baixo do outro.
O problema
Para comparar é preciso andar pela página para cima e para baixo. Num mesmo ecrã as opções nunca ficam lado a lado, e o visitante guarda a diferença de cabeça.
Foi para comparar que ele veio.
O que faríamos
Há dois caminhos, e a escolha entre eles depende de como as pessoas chegam até vocês.
Primeiro: manter na mesma página, com os blocos lado a lado e compactos. Duas colunas com a mesma estrutura, para a diferença se ler de um relance. Funciona quando a pessoa chega para escolher.
Segundo: separar em duas páginas e levar a cada uma o seu público — a campanha de Microsoft 365 para uma, a de Google Workspace para outra. Funciona quando a pessoa chega com o produto já escolhido na pesquisa.
14 · PÁGINA DE SOLUÇÃO
«Porquê a nuvem»: linha longa e tipo fino
O que vemos
Quatro pontos — acessibilidade, colaboração em tempo real, segurança avançada, escalabilidade. Cada um numa linha.
O problema
Cada ponto ocupa quase a largura toda do ecrã, cerca de 1130 pixéis. O mais longo vai de margem a margem: o olho chega ao fim e perde o princípio da linha seguinte. O tipo é fino, mais claro do que o título. O contraste passa nas regras e cansa a leitura.
Por baixo dos pontos está uma colagem de três fotografias de banco sobrepostas, cortada pela margem. Não explica nada e puxa a atenção.
O que faríamos
Estreitar a coluna. Usar um peso de tipo normal. Separar o nome do ponto da descrição, que hoje vêm na mesma linha ligados por dois pontos e se fundem. Quatro pontos pedem quatro cartões.
15 · PÁGINA DE SOLUÇÃO
Os alinhamentos contradizem-se
O que vemos
No bloco «Porquê Migrar para a Nuvem?» o título está centrado. A frase de entrada «Migrar para uma solução… incluindo:» também está centrada. A lista que lhe pertence está alinhada à esquerda.
O problema
A frase pertence à lista e está alinhada de outra maneira. A linha de leitura parte-se, e o olho procura de novo onde começar.
Pelo site estes casos repetem-se: blocos alinhados ora à esquerda ora à direita, margens diferentes. Isoladamente o leitor ultrapassa cada um. Somados, deixam uma sensação de desleixo, e isso atrapalha quem vende sistemas de gestão.
O que faríamos
Fixar uma grelha e mantê-la. Um alinhamento, umas margens. O título alinhado como o texto a que pertence.
16 · PÁGINA DE SOLUÇÃO
O formulário compete com o blogue
O que vemos
No fundo da página, à esquerda «+ Insights» com cinco artigos, à direita o formulário «Quer saber mais? Fale conosco».
O problema
O foco dilui-se. O visitante olha para a página durante alguns segundos. O título de um artigo leva-o a ler, e o formulário fica esquecido. São cinco títulos contra um formulário, e a acção principal da página devia ser evidente.
O título do formulário propõe «saber mais». O que interessa à pessoa é o que ela ganha.
Por cima da parte de baixo do formulário fica a bolha do chat, que tapa o texto por baixo do botão.
O que faríamos
Ao lado do formulário, repetir o essencial: o que fazem, qual o ganho, os logótipos dos fabricantes em que se confia. Algo como «poupamos-lhe anos de trabalho com as soluções Google e Microsoft». O bloco pode ficar à esquerda do formulário e trabalhar para ele.
Se houver disponibilidade para oferecer algo gratuito — um webinar, uma chamada curta —, é para aí que o botão leva.
17 · PÁGINA DE SOLUÇÃO
O formulário é grande de mais
O que vemos
Cinco campos: nome, e-mail e nome da empresa obrigatórios, telefone e mensagem opcionais.
O problema
Quantos mais campos, menor a conversão. Funciona igual em qualquer negócio. À parte disso actua a área ocupada: um formulário grande desanima ainda antes de se lerem os nomes dos campos.
Dois campos foram marcados por vocês como opcionais. O espaço continuam a ocupá-lo.
O que faríamos
Retirar os dois campos opcionais e ficar por três. Reduzir a altura dos campos e os espaçamentos, para o bloco se ler como uma acção rápida.
18 · PÁGINA DE SOLUÇÃO
Em vez do formulário pode estar um calendário
O que faríamos
Há um caminho que vale a pena testar ao lado do formulário. Um cliente nosso coloca no site um calendário: a pessoa escolhe primeiro a data e a hora da reunião, e os seus dados deixa-os já dentro do mesmo widget.
Para eles converte bastante melhor do que um formulário comum. Vendem através de uma primeira reunião gratuita de enquadramento, o cenário de que falámos acima.
A pessoa sai da página com uma hora marcada no calendário, em vez de ficar à espera de uma chamada. Testa-se depressa: põe-se o calendário ao lado do formulário na mesma página e ao fim de um mês vê-se o que trouxe mais pedidos.
19 · PÁGINA DE SOLUÇÃO
Por baixo do botão há um aviso sobre palavras-passe
O que vemos
Mesmo por baixo do botão «Enviar»: «Nunca compartilhe informações confidenciais (cartões de crédito, CPF, senhas, etc.) por este formulário».
O problema
É o texto que a plataforma traz por omissão, e aparece no momento em que a pessoa decide se envia. Em vez de confiança, recebe uma lembrança de fraudes.
Outro pormenor: o CPF é o número fiscal brasileiro. Num site português, com moradas em Faro e Aveiro, é o rasto de um modelo vindo de outro lado, e há visitantes que reparam.
O que faríamos
Retirar o aviso. No lugar dele, o prazo de resposta e o que acontece a seguir. «Respondemos no próprio dia útil» trabalha a favor do envio.
20 · PÁGINA DE SOLUÇÃO
Faltam testemunhos e casos
O problema
Na página falta qualquer prova de que já fizeram isto antes.
O que faríamos
Colocar testemunhos, mesmo que sejam de outros serviços. É prática corrente e fazemo-lo com frequência. Acrescentar casos. Se os clientes não puderem ser identificados, os casos anonimizam-se: sector, dimensão da empresa, problema, resultado.
21 · ENCONTRADO NO CÓDIGO
Cinco coisas que se corrigem depressa
Estas cinco verificámos directamente nas páginas.
- Seis itens do menu levam ao mesmo endereço. «História», «Quem somos», «O que fazemos», «Casos de sucesso», «Equipa» e «Emprego» apontam para
/quemsomossem âncoras. Quem carrega em «Equipa» aterra no início de uma página longa e procura com os olhos. - A secção «Casos de sucesso» não existe. Está prometida no menu e falta na página. Numa empresa que vende implementação de CRM, é a ausência mais cara do site.
- O e-mail do rodapé diverge da ligação. Está escrito
inubia@brasfone.pte omailto:aponta parabrasfone@brasfone.pt. A mensagem vai para um sítio diferente daquele que a pessoa julga. - A página de solução não tem H1. O título mais alto do documento é um H2. Para os motores de busca, a página fica sem declarar o seu tema.
- Na versão inglesa o título do separador ficou em português: «Email profissional - Email, calendário, contatos». É o que um visitante de língua inglesa vê nos resultados de pesquisa.