O teu formulário pode funcionar na perfeição. Os dados são processados, as submissões passam, tudo funciona como foi desenhado. Mas se o formulário não responder visualmente ao que as pessoas fazem, elas vão achar que está avariado na mesma. Vão clicar duas vezes no mesmo campo, sem saber se o primeiro clique foi registado. Vão ficar na dúvida se apareceu uma mensagem de erro ou se a submissão realmente passou. A confusão mata as taxas de conclusão mais depressa do que qualquer problema de design. A solução são as microinterações, as pequenas animações e respostas visuais que dizem às pessoas que a ação delas funcionou.
Uma microinteração é o feedback instantâneo que aparece quando alguém interage com o teu formulário. Uma borda acende quando clicam num campo. Uma mensagem de erro treme ligeiramente para chamar a atenção. Um indicador de carregamento roda enquanto a submissão é processada. Uma marca de verificação aparece quando o que escreveram está correto. Estas animações duram só milissegundos, mas fazem um trabalho crítico. Respondem à pergunta silenciosa que todos os utilizadores de formulários fazem a cada ação: Isto fez alguma coisa? Este artigo explica o que as microinterações fazem, como as cronometrar bem e porque influenciam diretamente se as pessoas completam o formulário ou o abandonam a meio.
O que as microinterações fazem nos formulários
Uma microinteração tem uma só função: dar feedback imediato sobre uma ação concreta. Alguém escreve uma palavra-passe e um medidor de força enche-se. Alguém deixa um campo obrigatório vazio e surge um erro com uma mudança de fundo para vermelho. Alguém clica em enviar e o botão muda para mostrar que está a processar. Nenhuma destas interações é surpresa. São esperadas. E acontecem em menos de meio segundo.
As microinterações servem quatro objetivos nos formulários. Primeiro, confirmam que o sistema registou a ação. Um formulário parece avariado quando clicas e nada muda. Uma animação subtil diz-te que a ação funcionou. Segundo, orientam as pessoas para o passo seguinte. Um botão de enviar que brilha diz-te onde clicar. Uma mensagem de erro que destaca o campo com problema diz-te onde te concentrar. Terceiro, reduzem a ansiedade nos momentos de incerteza. Um indicador que roda durante o envio diz "está a acontecer algo, espera". Sem ele, as pessoas ficam na dúvida se o formulário bloqueou. Quarto, validam o que se escreve em tempo real. Mostrar uma marca de verificação quando um endereço de email é válido diz às pessoas que acertaram, sem esperar pelo envio.
O mais importante que as microinterações fazem é responder logo a uma única pergunta. Funcionou? Quando a pessoa vê a resposta, avança com confiança. Quando não vê, duvida de si mesma ou repete ações sem necessidade.
Estados de foco e como mostrar qual é o campo ativo
Um estado de foco é uma microinteração que acontece quando alguém clica num campo do formulário. O campo muda para mostrar que está ativo e pronto a receber texto. Sem estado de foco, a pessoa pode não saber em que campo acabou de clicar, sobretudo no telemóvel ou se o formulário tiver muitos campos juntos.
Um estado de foco simples é a mudança de cor da borda. O campo tem uma borda cinzenta clara. Em foco, passa a ter a cor da tua marca ou um azul suave. Isto demora 100 a 150 milissegundos. Essa velocidade é a diferença entre visível e invisível. Demasiado rápido e as pessoas não reparam. Demasiado lento e parece pesado.
Uma segunda opção é a mudança de cor de fundo. O fundo do campo fica branco quando inativo. Ao clicar, passa a um tom muito claro da cor da tua marca. De cinzento claro a um azul ligeiramente mais claro. Sem mudança dramática. Só o suficiente para se destacar.
Evita as duas mudanças ao mesmo tempo. Cor da borda mais mudança de fundo mais sombra mais brilho é demais. Escolhe uma e torna-a clara. O campo em foco deve ser a coisa mais visível do formulário nesse momento.
Um texto de exemplo que desaparece quando o campo ganha foco também ajuda. O texto de exemplo mostra o que escrever. "example@email.com" num campo de email. Quando alguém clica para escrever, o texto de exemplo desvanece para dar lugar ao que a pessoa escreve. Isto também é uma microinteração, ainda que muitas vezes passe despercebida.
Feedback de validação em tempo real
A validação em tempo real é quando o formulário verifica o que escreves à medida que escreves e diz-te se está correto. Um campo de email verifica cada caractere e mostra uma marca de verificação ou um X antes de acabares de escrever. Um campo de palavra-passe mostra a força à medida que acrescentas caracteres. Um campo de código postal confirma que o formato está correto.
A microinteração aqui é o aparecimento da marca de verificação ou do X e a mudança de cor de neutro para verde (correto) ou vermelho (incorreto). Isto acontece de imediato enquanto a pessoa escreve. Sem esperar. Sem precisar de enviar.
A validação em tempo real reduz os erros de envio. Se alguém vê um X ao lado do que escreveu, corrige antes de enviar. Não preenche o formulário todo só para saber no fim que um campo estava errado. Isto poupa frustração e aumenta as taxas de conclusão do formulário.
O momento importa. A validação deve disparar depois de a pessoa parar de escrever durante cerca de 500 milissegundos. Verificar a cada tecla pode parecer agressivo. Uma pequena pausa deixa a pessoa acabar o raciocínio antes de o feedback aparecer.
O feedback visual deve ser instantâneo. Sem indicador de carregamento durante a validação. Mostra a marca de verificação ou o erro de imediato. A maioria das validações (formato do email, tamanho da palavra-passe, formato do código postal) é feita logo no dispositivo. Não há chamada ao servidor. Mostra essa rapidez.
Mensagens de erro com destaque visual
Quando alguém envia um formulário com um erro, a mensagem de erro tem de aparecer de forma que não passe despercebida. Uma simples mensagem de texto no fim do formulário é fácil de ignorar. Uma microinteração torna o erro impossível de ignorar.
A melhor microinteração de erro é uma combinação. O campo com erro fica com a borda vermelha. O texto da etiqueta fica vermelho ou a negrito. A mensagem de erro aparece por baixo do campo com um ícone vermelho. Uma animação de tremor subtil (10 a 20 píxeis para a esquerda e para a direita, durante 300 milissegundos) chama a atenção sem ser brusca. O tremor diz "ei, isto é importante".
A própria mensagem de erro deve ser clara e específica. Não "Dados inválidos." Mas sim "Os endereços de email precisam de um símbolo @." Ou "As palavras-passe têm de ter pelo menos 8 caracteres." Quando as pessoas veem um erro, precisam de saber exatamente o que correu mal e como corrigir.
O vermelho é a cor padrão dos erros porque as pessoas entendem o vermelho como "pára" ou "problema". Não uses outra cor a pensar em combinar com a tua marca. Reconhecer o vermelho como erro é universal. Mantém-no.
Estados de carregamento e processamento
Quando alguém clica em enviar, o formulário manda os dados para um servidor. Isso leva tempo. Durante esse tempo, a pessoa fica à espera e a pensar. Aconteceu alguma coisa? Vai acabar alguma vez? Uma microinteração de carregamento preenche esse silêncio.
O estado de carregamento mais simples é desativar o botão de enviar e mudar o texto de "Enviar" para "A enviar..." ou "A carregar...". O botão também deve ficar ligeiramente esbatido ou cinzento, para mostrar que já não se pode clicar. Isto evita que as pessoas cliquem em enviar várias vezes.
Um passo melhor é acrescentar uma animação de indicador. Um pequeno ícone circular que roda enquanto o formulário processa. É mais envolvente do que texto estático e cria uma sensação de movimento e atividade.
O momento do estado de carregamento depende do tempo que o envio realmente demora. Em formulários que enviam em menos de um segundo, um estado de carregamento pode parecer desnecessário. O botão pode simplesmente escurecer por breves instantes. Em formulários que demoram dois a cinco segundos (como um processamento de dados complexo), mostra o indicador de carregamento. Preenche o tempo de espera e reduz a ansiedade.
O indicador deve rodar cerca de uma volta completa por segundo. Mais depressa parece frenético. Mais devagar parece bloqueado. Uma volta por segundo parece progresso constante.
Confirmação de sucesso e feedback de conclusão
Depois de um formulário ser enviado com sucesso, o utilizador precisa de saber que funcionou. Uma página ou mensagem de sucesso é a abordagem óbvia. Mas uma microinteração pode tornar esse momento mais satisfatório e memorável.
Uma marca de verificação verde que aparece com uma animação subtil de crescimento (de 80% a 100% do tamanho em 300 milissegundos) sinaliza a conclusão. A marca de verificação sabe a recompensa. Diz "conseguiste". Combinada com uma mensagem de sucesso em texto verde, confirma que o formulário foi enviado.
Uma segunda abordagem é uma barra de progresso que enche até 100% quando o envio termina. Se o formulário tem vários passos, uma barra de progresso no topo mostra até onde a pessoa chegou. Quando o último passo termina, a barra enche por completo e fica verde. Parece cortar a meta.
A própria mensagem de sucesso deve ser breve e clara. Não "A tua submissão foi recebida com sucesso pelo nosso sistema." Mas sim "Obrigado. Recebemos a tua mensagem." O tom deve ser pessoal e caloroso. A pessoa concluiu uma tarefa. Reconhece-o diretamente.
Se o formulário redireciona para uma nova página depois do sucesso, não removas o formulário logo. Deixa a animação de sucesso decorrer durante 500 a 800 milissegundos antes de redirecionar. Dá às pessoas um momento para verem que conseguiram antes de as levares para a página seguinte.
Tempo e velocidade nas microinterações
A velocidade de uma microinteração determina se parece reativa ou lenta. O intervalo ideal é de 200 a 500 milissegundos. É rápido o suficiente para parecer imediato e lento o suficiente para ser visto e compreendido.
A mudança do estado de foco deve estar no extremo rápido. 100 a 200 milissegundos. É quase instantâneo, mas dá ao olho tempo suficiente para registar a mudança.
O tremor de um campo com erro deve rondar os 300 milissegundos. É visível, mas não brusco. Mais rápido parece maníaco. Mais lento parece atrasado.
Um indicador de carregamento ou uma animação de sucesso podem ser mais lentos, 500 a 800 milissegundos. São momentos em que a pessoa espera esperar. Uma animação mais lenta parece mais substancial e gratificante.
Nunca uses animações com mais de um segundo num formulário. Parece lento. As interações de um formulário devem ser ágeis e reativas. Se uma animação demora mais de um segundo, as pessoas vão pensar que algo avariou.
Testa as tuas microinterações em dispositivos e redes reais. O que parece rápido num computador com fibra pode parecer lento num telemóvel com 4G. Constrói a pensar na experiência mais lenta provável.
Acessibilidade nas microinterações
Algumas pessoas não veem animações. Usam definições de acessibilidade que desativam o movimento. Uma microinteração que depende só de animação fica invisível para elas. O teu feedback tem de funcionar também sem movimento.
A cor é o sinal de feedback mais importante. Uma borda vermelha num campo com erro funciona quer a borda apareça com animação quer não. Uma marca de verificação verde num campo válido funciona com ou sem animação de crescimento. A cor comunica de imediato, sem movimento.
O texto também é crítico. Uma mensagem de erro tem de ser texto, não apenas um ícone vermelho. Um estado de sucesso precisa de "O teu formulário foi enviado com sucesso" em texto, não apenas uma marca de verificação. Quando algo corre mal ou bem, diz-o por palavras.
Usa a definição prefers-reduced-motion em CSS. Se alguém configurou o dispositivo para reduzir o movimento, remove ou simplifica as animações para essa pessoa. Mantém o feedback de cor e de texto. Mantém o estado de foco. Remove o tremor, o crescimento, a rotação. Continuam a ter a experiência de feedback completa, só sem movimento.
Erros comuns nas microinterações de formulários
As microinterações podem sair pela culatra se forem mal feitas. O erro mais comum é usar animações demasiado lentas ou demasiado longas. Uma animação de foco num campo que demora 500 milissegundos parece pesada. Uma transição do botão de enviar que dura dois segundos parece bloqueada. Mantém-nas ágeis.
Um segundo erro é usar animações sem um objetivo claro. Um ícone que gira sem ter nada a ver com carregamento, ou uma mudança de cor que não sinaliza uma mudança de estado, confunde as pessoas. Cada microinteração deve responder a uma pergunta ou indicar uma mudança concreta.
Um terceiro erro são microinterações inconsistentes. O estado de foco de um formulário usa uma mudança de cor da borda. O estado de foco de outro formulário no mesmo website usa uma mudança de fundo. As pessoas reparam nesta inconsistência e ficam inseguras sobre o que está a acontecer. Usa o mesmo estilo de microinteração em todos os formulários do teu website.
Um quarto erro é animar demais. Cada campo em foco traz um brilho. Cada tecla dispara feedback. Cada estado de passar o rato tem movimento. O formulário torna-se uma distração em vez de uma ajuda. Usa microinterações onde acrescentam valor. Dispensa-as onde são desnecessárias.
Um quinto erro são mensagens de erro fracas. Um campo vermelho sem texto explicativo deixa as pessoas a adivinhar o que correu mal. Junta sempre o feedback visual a uma mensagem de erro clara e específica.
Como a WEMASY te ajuda a acrescentar microinterações aos formulários
O criador de formulários da WEMASY inclui microinterações integradas para os momentos mais comuns. Quando alguém clica num campo, os estados de foco aparecem automaticamente com as cores da tua marca. Quando alguém deixa um campo obrigatório vazio, aparece uma mensagem de erro com destaque visual. Quando alguém envia um formulário, surge um estado de carregamento para mostrar o progresso. Quando o envio tem sucesso, uma mensagem de sucesso confirma a conclusão.
Podes personalizar estas microinterações para combinarem com a tua marca sem mexer em código. Muda a cor das mensagens de erro. Ajusta a velocidade da animação dos estados de carregamento. Escolhe entre um indicador ou texto para o estado de envio. Estas definições estão disponíveis na interface do criador de formulários.
A validação em tempo real está incluída nos tipos de campo mais comuns. Os campos de email validam o formato à medida que escreves. Os campos de telefone validam o formato. Os campos de palavra-passe mostram a força. Os campos de código postal verificam o formato. Estas validações mostram marcas de verificação e ícones de erro com mudanças de cor, tudo integrado.
Para formulários mais complexos ou animações avançadas, a WEMASY permite que programadores acrescentem JavaScript personalizado. Mas as microinterações por defeito cobrem 95% dos casos e não exigem código.
Vê que funcionalidades de formulários estão incluídas no teu plano WEMASY.