Um formulário é submetido e a página fica em branco. Nada acontece. A pessoa pergunta-se se a submissão funcionou. O servidor recebeu-a? O formulário ainda está a processar? Devem submeter outra vez? Esse momento entre clicar em enviar e saber que a ação teve sucesso é um tempo de grande ansiedade. A experiência do formulário não acaba quando alguém clica em enviar. Acaba quando sabe que teve sucesso. O que acontece nesses momentos determina se confiam na tua marca e se os dados que recolheste são realmente úteis.
Três elementos controlam esse momento final. Um estado de carregamento mostra que algo está a acontecer enquanto o formulário processa. Uma mensagem de sucesso confirma que a submissão funcionou. Uma página de agradecimento guia o que vem a seguir. Bem feitos, estes três elementos fazem alguém sentir confiança de que fez a coisa certa. Mal feitos, criam confusão e desconfiança. Este artigo explica o que cada um faz, quando usá-los, o que dizer e como construí-los sem estragar a experiência do formulário.
Porque importam os estados de carregamento antes de o formulário terminar
A submissão do formulário acontece no servidor. Quando alguém clica em enviar, os dados viajam até um computador algures, são processados e volta uma resposta. Toda essa viagem demora normalmente de um a cinco segundos. Um segundo parece instantâneo. Cinco segundos parecem uma eternidade. Durante esse tempo, a pessoa fica presa. Vê o formulário e não sabe o que fazer. Submeter outra vez? Esperar? Atualizar a página?
Um estado de carregamento elimina essa incerteza. Algo visível muda quando alguém clica em enviar. O botão desativa-se e muda o texto. Aparece um indicador de carregamento. Uma barra de progresso mostra movimento. Algo diz à pessoa "a tua ação foi registada e algo está a acontecer."
A regra mais importante para os estados de carregamento é a regra do segundo. Se a submissão demora mais de um segundo, mostra um indicador de carregamento. Se demora menos de um segundo, podes dispensar o estado de carregamento visual, porque acontece tão depressa que as pessoas mal reparam. Em quase todos os formulários reais que se ligam a um servidor, a submissão demora mais de um segundo. Mostra o estado de carregamento.
Sem um estado de carregamento, as pessoas clicam muitas vezes em enviar várias vezes. A ansiedade leva-as a assumir que o primeiro clique não funcionou. As submissões múltiplas criam dados duplicados, desperdício de recursos do servidor e utilizadores frustrados. Um indicador de carregamento evita isto, sinalizando claramente que a ação está em curso.
Como desenhar um estado de carregamento que cria confiança
O estado de carregamento mais simples é desativar o botão de envio e mudar o seu texto. O botão diz "Enviar" normalmente. Quando clicado, passa a "A enviar..." e fica cinzento ou esbatido. A pessoa vê que o botão já não é clicável. Sabe que algo está a acontecer. Isto funciona na maioria dos formulários.
Um passo acima é acrescentar movimento visual. Um pequeno ícone giratório aparece junto ao texto do botão ou dentro dele. O ícone roda continuamente. Isto cria uma sensação de atividade e progresso. A velocidade de rotação importa. Uma rotação completa por segundo parece estável. Mais rápido parece frenético. Mais lento parece parado. Mantém o ritmo de uma por segundo.
Para processos mais longos, uma barra de progresso funciona melhor do que um ícone giratório. Uma barra horizontal no topo do formulário enche à medida que o processamento avança. Se o formulário sabe quantos passos tem de executar, pode mostrar um progresso realista. Se não sabe a duração total, usa uma barra baseada em percentagem que enche até 90% e completa quando há sucesso. Isto diz à pessoa exatamente em que ponto está o processo.
A cor do teu indicador de carregamento deve destacar-se, mas sem colidir com o design do formulário. Usa a cor da tua marca ou um azul ou cinzento neutro. Vermelho ou laranja podem parecer um erro, mesmo que não seja. O verde pode levar as pessoas a pensar que o formulário já teve sucesso.
Mantém os estados de carregamento mínimos. O botão muda. Aparece um indicador. O formulário não precisa de desvanecer, os campos não precisam de se desativar e novo texto não precisa de entrar deslizando pelo lado. A simplicidade cria confiança. A complexidade cria suspeita.
A diferença entre uma mensagem de sucesso e uma página de agradecimento
Depois de um formulário ser submetido com sucesso, o utilizador precisa de confirmação. Essa confirmação pode acontecer de duas formas. Uma mensagem de sucesso em linha aparece na mesma página onde estava o formulário. Ou o formulário redireciona para uma nova página de agradecimento com uma mensagem de sucesso. Ambas funcionam. A escolha depende do teu objetivo.
Uma mensagem de sucesso em linha mantém o utilizador na mesma página. O formulário desaparece ou muda para mostrar "Recebemos a tua submissão." Uma confirmação simples e clara. Funciona bem em formulários pequenos ou quando queres que o utilizador fique na mesma página a explorar mais conteúdo. Os formulários de contacto usam muitas vezes mensagens em linha. As subscrições de newsletter também. Rápido, simples, está feito.
Uma página de agradecimento é uma página dedicada onde o utilizador chega depois da submissão. Só existe depois de o formulário ser submetido com sucesso. Tem o seu próprio URL. É útil quando precisas de acompanhar a conversão em separado nas estatísticas, quando queres mostrar conteúdo adicional depois da submissão ou quando queres guiar o utilizador para o passo seguinte de um funil de vendas. Os formulários de pagamento de lojas online redirecionam para páginas de agradecimento. Os formulários de captação de leads redirecionam para páginas de agradecimento. A página dedicada dá-te mais espaço para trabalhar.
A diferença técnica importa para o acompanhamento. Uma mensagem em linha mostra a conversão na mesma página do formulário. Uma página de agradecimento mostra uma visualização de página separada e um URL separado. Do ponto de vista do acompanhamento, uma página de agradecimento é mais limpa. É um evento distinto que as ferramentas de análise conseguem medir com precisão.
O que uma mensagem de sucesso precisa de dizer
Uma mensagem de sucesso tem uma só função: dizer à pessoa que a submissão funcionou. É só isso. Não acrescentes texto de marketing, não ofereças produtos adicionais, não compliques.
Começa com uma confirmação clara. "Obrigado. Recebemos a tua submissão." Não "A tua submissão foi recebida com sucesso pelo nosso sistema automático." A primeira soa humana. A segunda soa robótica e corporativa. A confirmação deve parecer pessoal e direta.
Acrescenta logo o passo seguinte. Se o formulário era um pedido de contacto, diz quando a pessoa terá resposta. "Respondemos em duas horas úteis." Não "Voltamos a contactar-te em breve." Prazos específicos criam confiança. Em breve é vago. Duas horas é concreto.
Se a submissão despoleta uma resposta automática, menciona-o. "Verifica o teu email para ver uma ligação de confirmação." Ou "Uma ligação para repor a palavra-passe está a caminho da tua caixa de entrada." Isto explica o que acontece a seguir sem fazer a pessoa adivinhar ou temer que lhe escapou algo.
Opcional mas poderoso: refere algo que a pessoa submeteu. "Recebemos a tua mensagem sobre otimização de websites. Vamos analisar e entrar em contacto." Devolver-lhes as suas próprias palavras cria a sensação de serem vistos e compreendidos. Confirma que os dados foram realmente recebidos e registados.
Mantém a mensagem curta. Uma ou duas frases para uma mensagem em linha. Três a cinco frases para uma mensagem de página de agradecimento. Mensagens de sucesso longas parecem spam ou uma proposta de vendas adicional.
Usa linguagem calorosa e conversacional. "Obrigado por entrares em contacto." Não "Agradecemos a conclusão desta submissão de formulário." A linguagem conversacional faz o momento parecer humano, não automático.
Desenhar uma página de agradecimento que converte, não um beco sem saída
Uma página de agradecimento é um momento de grande valor. A pessoa acabou de converter. Está de bom humor. Agiu. Fez o que lhe pediste. É o momento logo a seguir a dizerem sim. É o momento de os guiar para a frente, não de os mandar embora.
No topo da página de agradecimento, repete a confirmação. "Obrigado. Recebemos o teu pedido." Mantém-na breve. A pessoa já sabe que teve sucesso. A confirmação serve só para o tornar oficial.
Por baixo da confirmação, acrescenta conteúdo que corresponda ao que acabaram de fazer. Se subscreveram uma newsletter, mostra-lhes o que vão receber. Se pediram uma demonstração, mostra os próximos passos. Se fizeram uma compra, mostra os detalhes da encomenda e o prazo de envio. O conteúdo deve parecer a continuação natural do que acabaram de submeter.
Acrescenta uma ação opcional. Não cinco. Não três. Uma. O que devem fazer a seguir? Explorar o teu website? Ler recursos úteis? Seguir-te nas redes sociais? Marcar uma chamada? Escolhe uma e faz dela o foco da página. Várias chamadas para ação concorrentes confundem as pessoas. Acabaram de dizer sim. Guia-as para a frente com um passo seguinte claro.
Se queres recolher informação adicional, uma página de agradecimento é um bom sítio. Não a peças no próprio formulário. Pede depois de já se terem comprometido ao submeter uma vez. Um segundo formulário, mais leve, na página de agradecimento converte muitas vezes melhor do que meter tudo no primeiro.
Inclui prova social, se for relevante. Uma citação de um cliente satisfeito. Uma estatística sobre pessoas que tomaram a mesma ação. Algo que reforce que tomaram a decisão certa. Não se trata de os convencer a converter. Já converteram. Trata-se de reforçar a confiança no que acabaram de fazer.
Garante que o design da página combina com o resto do teu website. Uma página de agradecimento que parece diferente, usa tipos de letra diferentes ou tem um esquema de cores chocante faz o utilizador sentir que saiu do website da tua marca. A coerência cria confiança. A página de agradecimento deve parecer pertencer ao teu site.
Cronometrar a transição do formulário para o estado de sucesso
Quando alguém clica em enviar, quanto tempo deve o estado de carregamento aparecer antes de surgir a mensagem de sucesso ou a página de agradecimento? A resposta é: o tempo que o formulário realmente demora a processar.
Em formulários que submetem muito depressa, em menos de um segundo, mantém o estado de carregamento visível pelo menos um segundo, de qualquer forma. Se a submissão demora na verdade 300 milissegundos mas o teu indicador desaparece após 400 milissegundos, as pessoas podem pensar que algo se partiu. A transição deve parecer deliberada, não apressada.
Em formulários que demoram dois a cinco segundos, mostra o estado de carregamento durante todo esse tempo. Deixa as pessoas ver a espera. Não escondas quanto tempo o processo está a demorar. A transparência cria confiança.
Nunca mostres um estado de carregamento que desaparece e depois volta a aparecer. Isso cria confusão. Mostra-o uma vez e mantém-no visível até haver sucesso. Se precisares de repetir depois de um erro, limpa completamente o estado de carregamento e mostra a mensagem de erro antes de tentar outra vez.
Em processos muito longos, com mais de dez segundos, considera mostrar atualizações de progresso. Não só um indicador. Uma mensagem que muda. "A validar a tua informação." Depois "A processar o teu pedido." Depois "A finalizar a submissão." Três ou quatro pequenas mensagens ao longo de um processo longo mantêm as pessoas envolvidas e cientes de que algo ainda está a acontecer.
Considerações para telemóvel nos estados de carregamento e mensagens de sucesso
Num ecrã de telemóvel, o espaço é limitado. Um indicador de carregamento que funciona bem no computador pode ocupar demasiado espaço no telemóvel. Uma página de agradecimento que é longa no computador fica muito longa no telemóvel.
Nos estados de carregamento no telemóvel, mantém o texto mínimo. "A enviar..." em vez de "Aguarda enquanto processamos a tua submissão." Um indicador giratório ocupa menos espaço do que uma barra de progresso. Posiciona o indicador de carregamento dentro do botão de envio ou mesmo por cima ou por baixo dele, não a flutuar a meio da página.
Nas mensagens de sucesso no telemóvel, mantém-nas breves. Uma frase é o ideal. Duas frases é aceitável. Mais do que isso e a mensagem sai do ecrã.
Nas páginas de agradecimento no telemóvel, coloca a mensagem de confirmação principal nos dois primeiros parágrafos. Não obrigues as pessoas a descer na página para saber se o formulário foi mesmo submetido com sucesso. A mensagem de agradecimento deve estar imediatamente visível, acima da dobra.
Testa os teus estados de carregamento e de sucesso em telemóveis reais, não só na emulação do navegador. O tamanho do ecrã do telemóvel e a renderização podem afetar o aspeto das coisas.
Análise e acompanhamento dos momentos finais do teu formulário
A página ou mensagem de sucesso é onde medes se o formulário realmente converteu. Plataformas de análise como o Google Analytics, o Meta Pixel e as plataformas de email conseguem acompanhar o momento de sucesso com precisão.
Se usas uma mensagem de sucesso em linha na mesma página do formulário, define um gatilho de conversão para o aparecimento dessa mensagem. Usa JavaScript para registar quando a mensagem aparece, e não apenas quando a página carrega. Isto diz-te exatamente quem submeteu com sucesso, e não apenas quem visitou a página.
Se redirecionas para uma página de agradecimento, o acompanhamento é automático. Cada visualização dessa página é uma conversão. É por isso que muitos formulários usam páginas de agradecimento. O URL é único. As ferramentas de análise percebem-no na perfeição. Uma visualização de página equivale a uma submissão bem-sucedida.
Acrescenta o URL da página de agradecimento aos objetivos de conversão da tua análise. No Google Analytics, cria um objetivo que dispara quando alguém chega a yourdomain.com/thank-you. Isto conta automaticamente cada submissão de formulário bem-sucedida.
Se usas vários formulários no teu website, cria uma página de agradecimento única para cada um ou usa parâmetros de URL para os distinguir. contact-form.com/thank-you versus demo-form.com/thank-you. Ou usa parâmetros como /thank-you?form=contact. Isto permite acompanhar que formulários estão a converter.
Erros comuns que estragam o momento de sucesso
Uma mensagem de sucesso que não confirma que a ação funcionou não é uma mensagem de sucesso. É um beco sem saída. "Obrigado." Só isso. O que deve a pessoa fazer a seguir? Onde está a confirmação? Recusar clarificar cria desconfiança.
Estados de carregamento demasiado longos ou demasiado curtos parecem avariados. Um indicador que roda durante 20 segundos faz as pessoas pensar que algo correu mal. Um indicador que aparece e desaparece em 100 milissegundos pode passar despercebido.
Páginas de agradecimento que tentam vender em vez de reconhecer. Logo depois de alguém converter não é altura de lhe propor outra coisa. Reconhece o que fizeram. Guia-os para a frente. Vender pode vir depois.
Uma mensagem de sucesso ou página de agradecimento que repete informação que o formulário já pediu. A pessoa já te deu o nome e o email. Não a obrigues a lê-los de volta na página de sucesso. Usa-os para personalizar a mensagem, não repitas o que foi recolhido.
Formulários em telemóvel que mostram estados de carregamento demasiado grandes para o ecrã. Um indicador que ocupa metade do ecrã do telemóvel é esmagador. Mantém os indicadores visuais proporcionais ao tamanho do ecrã.
Esquecer de acrescentar um passo seguinte claro. "Obrigado por submeteres." E depois nada. O que deve a pessoa fazer? Sem direção, sai. Uma única ação seguinte clara mantém-na envolvida.
Como o WEMASY te ajuda a desenhar estados de carregamento e experiências de sucesso
O criador de formulários do WEMASY inclui estados de carregamento incorporados que aparecem automaticamente quando um formulário é submetido. Podes personalizar o estilo do indicador de carregamento para combinar com a tua marca. Escolhe entre uma mensagem de texto, um indicador giratório ou uma barra de progresso. Define a cor para combinar com o tema da tua marca. O estado de carregamento aparece enquanto os dados do formulário são processados e desaparece quando a submissão termina.
As mensagens de sucesso são totalmente personalizáveis no criador de formulários. Escreve a tua própria mensagem. Escolhe se aparece em linha ou se redireciona para uma página de agradecimento. Se redirecionares, o WEMASY permite-te indicar o URL da tua página de agradecimento. O formulário redireciona automaticamente depois de uma submissão bem-sucedida.
Para as páginas de agradecimento, cria uma página no criador de websites do WEMASY como qualquer outra página. Desenha-a para combinar com a tua marca. Acrescenta texto de confirmação, próximos passos, prova social ou chamadas para ação secundárias. Quando terminares a configuração do formulário, cola o URL da página de agradecimento nas definições de redirecionamento do formulário. O WEMASY trata do redirecionamento automaticamente.
A validação em tempo real evita muitos erros de submissão antes de acontecerem. Quando os dados chegam sem erros, a submissão acontece de forma limpa. O estado de carregamento aparece brevemente e o estado de sucesso dispara mais depressa. Menos erros significam submissões mais rápidas e menos tempo a mostrar estados de carregamento.
A integração com análise está incorporada. O WEMASY acompanha as submissões de formulários e pode disparar objetivos de análise automaticamente. Quando um formulário é submetido com sucesso, podes configurar eventos no Google Analytics ou no Meta Pixel. Vê que campos têm as melhores taxas de conversão, que formulários convertem com mais frequência e onde as pessoas desistem.
Vê que funcionalidades de formulários estão incluídas no teu plano WEMASY.