Noções básicas: design de formulários para celular
O que você vai aprender
Conheça os 6 princípios básicos para criar formulários de registro para dispositivos móveis.
Por que o design de formulários para celular é importante?
Os compradores online estão cada vez mais usando seus dispositivos móveis para descobrir novas lojas, navegar por produtos e fazer compras. Apenas nos EUA, mais de 35% das compras online foram feitas em um dispositivo móvel, e esse número continua a crescer todos os anos.
Para garantir que você converta esses clientes em assinantes, é essencial que seus formulários de registro tenham a mesma boa aparência no celular e no desktop.
As 6 noções básicas do design de formulários para celular
- 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 seu formulário
- Escolha blocos de conteúdo que funcionem bem em dispositivos móveis
- Faça com que seu formulário seja fácil de abrir, ler e preencher em dispositivos móveis
- Considere suas cores e o contraste entre elas
Mantenha o formulário curto e direto ao ponto
Com formulários para dispositivos móveis, menos é sempre mais. Embora possa ser tentador aprender tudo o que você pode sobre um assinante de uma só vez (nome, e-mail, aniversário etc.), formulários longos para dispositivos móveis podem levar a uma taxa de conclusão menor.
Limite ao máximo o número de elementos ou campos do formulário que alguém precisa preencher.
- Número recomendado de campo de dados: 1–3 por página
- Número recomendado de botões de chamadas à ação: 1–2 por página
O que eu faço se eu precisar de mais de 3 campos?
Se você precisar de mais de 3 campos, por exemplo, se quiser coletar consentimento de e-mail e SMS ao mesmo tempo, considere um formulário de várias etapas.
Um formulário de várias etapas permite que você colete mais informações sem sobrecarregar 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, você pode aprender mais sobre seus assinantes redirecionando-os mais tarde na jornada do cliente. Talvez você pergunte sobre o aniversário dos seus assinantes atuais mostrando a eles outro formulário após 30 dias ou, quem sabe, perguntando como parte da 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 certa lógica, e pode ser frustrante (ou simplesmente estranho) se um formulário não seguir.
Confira abaixo dicas para estruturar um formulário para dispositivos móveis.
Peça primeiro as informações menos pessoais
Mesmo que todos os campos em um formulário sejam obrigatórios, ainda assim é estranho pedir o aniversário de alguém antes do nome.
Em geral, peça informações da menos à mais pessoal. Por exemplo:
- Nome
- E-mail ou número de telefone
- Aniversário
Use uma estrutura de coluna única no celular
O formato de coluna única significa que todas as entradas, campo de dados e botões seguem uma única linha no formulário. Embora os formatos de várias colunas sejam bons para usar no desktop, eles podem fazer com que os formulários para dispositivos móveis pareçam desorganizados ou lotados. Formulários de coluna única também são mais fáceis de escanear no celular.
Formulário de coluna única | Formulário multicoluna |
 |  |
Coloque botões de chamada à ação (CTA) na parte inferior de um formulário
O botão de CTA deve ficar no fim do percurso de leitura do visualizador, para ser a última coisa que ele veja. Você não quer que eles tenham que rolar para cima para preencher o formulário, nem que precisem procurar o botão.
Normalmente, o botão de CTA é colocado no centro ou no lado esquerdo.
Coloque o botão de fechar no canto superior direito
O motivo pelo qual o botão Fechar precisa estar no canto superior direito é simplesmente porque é ali que os usuários esperam vê-lo.
Se você colocar em outro lugar, como no canto superior esquerdo ou perto da parte inferior, seus usuários podem passar tempo procurando uma forma de fechar o formulário e ficar 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 seu formulário
No celular, você precisa ser o mais claro possível sobre o que a pessoa precisa fazer, como isso deve ser feito e o que ela já fez.
Coloque rótulos concisos acima (e perto de) cada campo
Coloque um rótulo diretamente acima de cada campo no seu formulário que descreva com clareza quais informações a pessoa deve fornecer.
Além disso, coloque rótulos perto dos campos que eles descrevem, para ficar claro que os dois estão juntos.
Cada rótulo deve ocupar menos de uma linha quando visualizado em qualquer dispositivo móvel, então ser conciso é fundamental.
Use placeholders em cada campo de dados de entrada de texto
Em todos os campos em que os usuários precisem inserir texto ou números, inclua placeholders para mostrar ao seu público como a entrada deve ser (por exemplo, um e-mail de exemplo, nome, formato de data etc.).
Isso ajuda a reduzir o número de erros que alguém pode cometer. Trabalhar em conjunto com rótulos e placeholders facilita para os usuários navegar pelo seu formulário.
Use uma chamada à ação descritiva para os botões
Dica profissional: 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 à ação “Enviar”, dizer “Inscrever-se na newsletter” ou “Cadastrar-se para receber SMS” dá uma ideia mais clara do que o botão faz. Além disso, isso pode ajudar você a economizar um espaço valioso no formulário 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 torna a experiência do usuário mais simples. Você pode tornar alguns 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 a pessoa usuária saiba que foi bem-sucedida.
Escolha blocos de conteúdo que funcionem bem em dispositivos móveis
Alguns tipos de blocos de formulário são mais compatíveis com dispositivos móveis do que outros. A seguir, listamos o que usar no celular e o que não usar.
Bom para usar em dispositivos móveis | Ruim para usar no celular |
Entradas de texto ou número (e-mail, telefone, data) | Caixas de seleção múltiplas |
Botões de rádio | Menus suspensos |
Botões tap-to-text (para consentimento de SMS) |
Faça com que seu formulário seja fácil de abrir, ler e preencher em dispositivos móveis
Em geral, seu formulário deve ser fácil de usar em dispositivos móveis. As pessoas não devem precisar ter dificuldade para ler o texto ou clicar em um botão específico. Se isso acontecer, elas podem ficar frustradas e acabar abandonando o formulário ou o seu site completamente.
Há várias práticas recomendadas ao criar para dispositivos móveis.
Defina o tamanho da fonte como, no mínimo, 16 pixels
Usar um tamanho de fonte de 16 pixels ou mais ajuda a garantir que o texto seja legível. Assim, os usuários não precisam ampliar para ler.
16 pixels é o tamanho mínimo de fonte recomendado para qualquer texto no seu formulário para dispositivos móveis, incluindo rótulos, placeholders e texto de botão.
Adicione pelo menos 8 pixels de espaço entre campos, botões etc.
Deixe espaço suficiente entre ações individuais no seu formulário para que os usuários não tenham dificuldade de clicar no campo que desejam. Caso contrário, eles podem decidir desistir em vez de continuar tentando.
Ao criar seu formulário, tente fazer com que seja o mais difícil possível para os usuários cometerem um erro. Teste a experiência do usuário em diferentes tipos de dispositivos.
Deixe as áreas clicáveis com pelo menos 48 pixels
Quaisquer "alvos de toque", como campo de dados ou botões, devem ser grandes e fáceis de clicar.
O dedo de um adulto médio tem 11 mm, o que equivale a cerca de 41,6 pixels. Para levar isso em conta, uma boa prática é fazer com que as áreas de toque tenham pelo menos 48 pixels.
Use um teaser de formulário
Use um teaser do formulário para que visitantes em dispositivos móveis possam abrir e fechar o formulário quando quiserem enquanto navegam, e para que o formulário não cubra o conteúdo do seu site.
Observe que o Google aplica uma penalidade a sites com intersticiais intrusivos. Os teasers ajudam a evitar essa penalidade, mas você também deve usar um atraso de tempo longo com formulários.
Considere suas cores e o contraste entre elas
Você sempre deve fazer com que as cores do seu formulário combinem com a sua marca, para que ele reflita a sua marca.
No entanto, é tão importante quanto garantir que as combinações de cores sejam acessíveis a todos os usuários. Caso contrário, você corre o risco de afastar possíveis assinantes ou clientes.
Ao escolher suas cores, há 2 considerações principais.
Escolha cores com alto contraste
O contraste de cores é a diferença de luz entre o texto ou objetos em primeiro plano e o plano de fundo. Bom contraste de cores melhora a legibilidade do seu formulário e é um componente essencial da acessibilidade. Use um verificador de contraste de cores para verificar o contraste de cores.
O menor contraste é 1:1 e é impossível de ler (pense em texto branco em um fundo branco). O maior contraste disponível é 21:1, ou texto preto em um fundo branco. Em outras palavras, quanto maior a proporção, melhor é o contraste.
De acordo com as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG), o contraste de cor mínimo é 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 a WCAG, um mínimo melhor é:
- 7:1 para texto menor, imagens ou imagens de texto
- 4,5:1 para textos maiores, elementos visuais-chave etc.
Escolha cores adequadas para daltônicos
É importante que todo mundo consiga aproveitar o conteúdo em que você trabalhou tanto. Usar determinadas combinações de cores pode dificultar ou até impossibilitar a leitura do formulário para alguns grupos.
Combinações compatíveis com daltônicos | |||
Azul e laranja |   | Azul e amarelo |  |
Azul e vermelho |  | Laranja e amarelo | |
Azul e marrom |  | ||
Sobre quais não usar, tenha em mente que existem muitos tipos de daltonismo (não é só vermelho e verde).
Combinações de cores a evitar | |||
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
- Getting started with sign-up forms
Learn how to create and customize sign-up forms in Klaviyo to publish on your website so you can engage shoppers, collect emails and phone numbers, and build long-lasting customer relationships.
- How to collect SMS consent with a tap-to-text form
Learn how to set up a tap-to-text sign-up form to collect phone numbers from new prospects. With tap-to-text, site visitors can click a button in your sign-up form to automatically open their text messaging app where Klaviyo has added a message. They only need to send the message to subscribe.
- How to create ADA-friendly sign-up forms
Learn how to use the accessibility assistant feature in the Form Alerts tab of the sign-up forms editor to avoid some of the most common web content accessibility guidelines (WCAG) compliance issues. Companies striving to make their websites ADA-friendly should reference and follow WCAG standards. The accessibility assistant guides you in creating sign-up forms that are accessible for all of your site visitors.