Noções básicas: design de formulários para celular
O que você vai aprender
Conheça os 6 princípios básicos de criação de formulários de inscrição para dispositivos móveis.
Por que o design de formulários móveis é importante?
Os compradores on-line estão usando cada vez mais seus dispositivos móveis para descobrir novas lojas, pesquisar produtos e fazer compras. Somente nos EUA, mais de 35% das compras on-line foram feitas por meio de um dispositivo móvel, e esse número continua crescendo a cada ano.
Para garantir a conversão desses clientes em assinantes, é fundamental que seus formulários de inscrição sejam tão bons no celular quanto no desktop.
Os 6 princípios básicos do design de formulários móveis
- Mantenha o formulário curto e direto ao ponto
- Estruture seu formulário para atender às expectativas do usuário
- Ajude os usuários a navegar pelo formulário
- Escolha blocos de conteúdo que funcionem bem em dispositivos móveis
- Facilite a abertura, a leitura e o preenchimento de seu formulário em dispositivos móveis
- Considere suas cores e seu contraste
Mantenha o formulário curto e direto ao ponto
Com formulários móveis, menos é sempre mais. Embora possa ser tentador saber tudo o que puder sobre um assinante de uma só vez (nome, e-mail, data de nascimento etc.), formulários móveis longos podem levar a uma taxa de conclusão mais baixa.
Limite ao máximo o número de elementos ou campos do formulário que o usuário precisa preencher.
- Número recomendado de campos de entrada: 1-3 por página
- Número recomendado de botões de call-to-action: 1 a 2 por página
O que devo fazer se precisar de mais de 3 campos?
Se o senhor precisar de mais de três campos, por exemplo, se quiser coletar consentimento por e-mail e SMS ao mesmo tempo, considere um formulário de várias etapas.
Um formulário de várias etapas permite que o senhor colete mais informações sem sobrecarregar os possíveis assinantes. Além disso, ter uma etapa separada para SMS é uma prática recomendada de conformidade ao coletar vários tipos de consentimento em um único formulário.
Como alternativa, o senhor pode saber mais sobre seus assinantes redirecionando-os posteriormente na jornada do cliente. Talvez o senhor pergunte sobre o aniversário de seus assinantes atuais mostrando-lhes outro formulário após 30 dias, ou talvez pergunte como parte de sua série de boas-vindas.
Estruture seu formulário para atender às expectativas do usuário
As pessoas esperam que os formulários sigam uma determinada lógica, e pode ser frustrante (ou simplesmente estranho) se um formulário não seguir essa lógica.
Veja abaixo dicas para estruturar um formulário para celular.
Solicite primeiro as informações menos pessoais
Mesmo que todos os campos de um formulário sejam obrigatórios, ainda é estranho perguntar a data de nascimento de alguém antes do nome.
Em geral, solicite informações do menos para o mais pessoal. Por exemplo:
- Nome
- E-mail ou número de telefone
- Aniversário
Use uma estrutura de coluna única no celular
Uma coluna única significa que todas as entradas, campos e botões seguem uma única linha no formulário. Embora os formatos de várias colunas sejam bons para uso em desktops, eles podem fazer com que os formulários móveis pareçam desordenados ou lotados. Os formulários de coluna única também são mais fáceis de digitalizar no celular.
Formulário de coluna única | Formulário com várias colunas |
 |  |
Colocar botões de call-to-action (CTA) na parte inferior de um formulário
O botão de CTA deve estar no final da jornada de varredura do visualizador, para que seja a última coisa que ele veja. O senhor não quer que eles tenham que rolar a tela para cima para preencher o formulário ou que tenham que procurar o botão.
Normalmente, o botão de CTA é colocado no centro ou no lado esquerdo.
Coloque o botão Fechar no canto superior direito
O motivo pelo qual o botão Fechar precisa estar no canto superior direito é simplesmente porque é onde os usuários esperam vê-lo.
Se a colocar em outro lugar, como no canto superior esquerdo ou perto da parte inferior, os usuários poderão gastar tempo procurando uma maneira de fechar o formulário e ficarão frustrados enquanto procuram. Isso pode fazer com que eles saiam com uma impressão negativa da sua marca, o que significa que é menos provável que visitem seu site no futuro ou se tornem clientes.
Ajude os usuários a navegar pelo formulário
No celular, o senhor quer ser o mais claro possível sobre o que alguém precisa fazer, como deve ser feito e o que já foi feito.
Coloque rótulos concisos acima (e perto) de cada campo
Coloque um rótulo diretamente acima de cada campo do formulário que descreva claramente as informações que devem ser fornecidas.
Além disso, coloque os rótulos próximos aos campos que estão descrevendo, para que fique claro que os dois estão juntos.
Cada rótulo deve ocupar menos de uma única linha quando visualizado em qualquer dispositivo móvel, portanto, ser conciso é fundamental.
Use marcadores de posição em cada campo de entrada de texto
Em todos os campos em que os usuários precisarem inserir texto ou números, inclua marcadores de posição para mostrar ao seu público como deve ser a entrada (por exemplo, um exemplo de e-mail, nome, formato de data etc.).
Isso ajuda a reduzir o número de erros que o senhor pode cometer. O trabalho conjunto com rótulos e espaços reservados facilita a navegação dos usuários pelo formulário.
Use uma chamada à ação descritiva para os botões
Dica de profissional: os botões também devem ter rótulos. Ser mais descritivo no texto do botão também ajuda o usuário.
Por exemplo, em vez de uma simples chamada para ação "Enviar", dizer "Assinar o boletim informativo" ou "Inscrever-se para receber SMS" dá uma ideia mais clara do que o botão faz. Além disso, isso pode ajudar o senhor a economizar um espaço precioso no formato menor.
Indique quais campos são obrigatórios e quais são opcionais
Informar aos seus clientes quais campos eles precisam preencher e quais não precisam simplifica a experiência do usuário. O senhor pode tornar certos elementos do formulário obrigatórios e outros opcionais,
Incluir uma mensagem de sucesso
Inclua uma mensagem de sucesso depois que alguém enviar o formulário para que o usuário saiba que foi bem-sucedido.
Escolha blocos de conteúdo que funcionem bem em dispositivos móveis
Certos tipos de blocos de formulários são mais compatíveis com dispositivos móveis do que outros. Abaixo, listamos o que usar no celular e o que não usar.
Bom para usar no celular | Ruim de usar no celular |
Entradas de texto ou número (e-mail, telefone, data) | Caixas de seleção múltiplas |
Botões de rádio | Dropdowns |
Botões Tap-to-Text (para consentimento de SMS) |
Facilite a abertura, a leitura e o preenchimento de seu formulário em dispositivos móveis
Em geral, seu formulário deve ser fácil de usar em dispositivos móveis. As pessoas não deveriam ter que se esforçar para ler o texto ou clicar em um botão específico. Se isso acontecer, eles podem ficar frustrados e abandonar o formulário ou o site completamente.
Há várias práticas recomendadas ao projetar para dispositivos móveis.
Faça com que o tamanho da fonte seja de pelo menos 16 pixels
Usar um tamanho de fonte de 16 pixels ou mais ajuda a garantir a legibilidade do texto. Dessa forma, os usuários não precisam aumentar o zoom para ler.
16 pixels é o tamanho mínimo de fonte recomendado para qualquer texto em seu formulário móvel, inclusive rótulos, espaços reservados e texto de botão.
Adicione pelo menos 8 pixels de espaço entre campos, botões, etc.
Deixe espaço suficiente entre as ações individuais do formulário para que os usuários não tenham dificuldade para clicar no campo desejado. Caso contrário, eles podem decidir se afastar em vez de continuar tentando.
Ao criar o formulário, tente dificultar ao máximo que os usuários cometam um erro. Teste a experiência do usuário em diferentes tipos de dispositivos.
Faça com que os alvos de toque tenham pelo menos 48 pixels
Todos os "alvos de toque", como campos de entrada ou botões, devem ser grandes e fáceis de clicar.
O dedo médio de um adulto tem 11 mm, o que equivale a cerca de 41,6 pixels. Para levar isso em conta, uma prática recomendada é fazer com que os alvos de toque tenham pelo menos 48 pixels.
Use um teaser de formulário
Use um teaser de formulário para que os visitantes móveis possam abrir e fechar o formulário conforme desejado enquanto navegam e para que o formulário não cubra o conteúdo do seu site.
Observe que o Google aplica uma penalidade aos sites com intersticiais intrusivos. Os teasers ajudam a evitar essa penalidade, mas o senhor também deve usar um longo intervalo de tempo com os formulários.
Considere suas cores e seu contraste
O senhor sempre quer que as cores do formulário correspondam à sua marca, para que ela reflita sua marca.
No entanto, é igualmente importante tornar as combinações de cores acessíveis a todos os usuários. Caso contrário, o senhor corre o risco de alienar possíveis assinantes ou clientes.
Ao escolher suas cores, há duas considerações fundamentais.
Escolha cores de alto contraste
O contraste de cores é a diferença de luz entre o texto ou os objetos em primeiro plano e o plano de fundo. Um bom contraste de cores melhora a legibilidade do formulário e é um componente essencial da acessibilidade. Use um verificador de contraste de cores para verificar o contraste de cores.
O menor contraste é de 1:1 e é impossível de ler (pense em um texto branco em um fundo branco). O maior contraste disponível é de 21:1, ou seja, texto preto em um fundo branco. Em outras palavras, quanto maior for a proporção, melhor será o contraste.
De acordo com as WCAG (Web Content Accessibility Guidelines, Diretrizes de acessibilidade de conteúdo da Web), o contraste mínimo de cores é de 4,5:1 para textos pequenos, imagens e textos em imagens e de 3:1 para textos grandes ou elementos importantes.
O ideal é que o contraste seja ainda maior. De acordo com as WCAG, um mínimo melhor é:
- 7:1 para textos menores, imagens ou imagens de texto
- 4,5:1 para textos maiores, elementos visuais importantes, etc.
Escolha cores que não agridam os daltônicos
É importante que todos possam apreciar o conteúdo no qual o senhor trabalha tão arduamente. O uso de determinadas combinações de cores pode dificultar ou mesmo impedir a leitura do formulário por alguns grupos.
Combinações amigáveis para daltônicos | |||
Azul e laranja |   | Azul e amarelo |  |
Azul e vermelho |  | Laranja e amarelo | |
Azul e marrom |  | | |
Quanto aos que não devem ser usados, lembre-se de que há muitos tipos de daltonismo (não é apenas vermelho e verde).
Combinações de cores a serem evitadas | | ||
Verde e vermelho |  | Azul e roxo |  |
Vermelho e laranja | | Azul e cinza |  |
Verde e laranja | | Roxo e vermelho | |
Vermelho e marrom | | Azul-esverdeado e rosa |   |
Verde e marrom | | Azul-esverdeado e cinza | |
Verde e azul | | Amarelo e rosa | |
Verde claro e amarelo |  | Rosa e cinza | |
Verde e cinza | | Cinza e marrom | |
Verde e preto |  | Laranja e marrom | |
Vermelho e preto | | | |
Recursos adicionais
- Introdução aos formulários de registro
Saiba como criar e personalizar formulários de registro na Klaviyo para interagir com compradores, coletar e-mails e números de telefone e criar relacionamentos duradouros.
- Como coletar consentimento por SMS com um formulário tap-to-text
Saiba como configurar um formulário de inscrição "tap-to-text" para coletar números de telefone de novos clientes potenciais. Com o tap-to-text, os visitantes do site podem clicar em um botão no seu formulário de inscrição para abrir automaticamente o aplicativo de mensagens de texto no qual o Klaviyo adicionou uma mensagem. Eles só precisam enviar a mensagem para se inscrever.
- Como criar formulários de inscrição compatíveis com a ADA
Saiba como usar o recurso de assistente de acessibilidade na guia Form Alerts (Alertas de formulário ) do editor de formulários de inscrição para evitar alguns dos problemas mais comuns de conformidade com as WCAG (Diretrizes de acessibilidade de conteúdo da Web). As empresas que se esforçam para tornar seus sites compatíveis com a ADA devem fazer referência e seguir os padrões WCAG. O assistente de acessibilidade orienta o senhor na criação de formulários de inscrição que sejam acessíveis a todos os visitantes do seu site.