Práticas recomendadas para design de formulários para dispositivos móveis

(Este artigo é gentilmente patrocinado pela Adobe.) Os formulários são a base de todas as interações móveis; fica entre a pessoa e o que ela está procurando. Todos os dias, usamos formulários para atividades online essenciais. Lembre-se da última vez que você comprou uma passagem, reservou um quarto de hotel ou fez uma compra online – provavelmente essas interações continham uma etapa de preenchimento de um formulário.

As formas são apenas um meio para um fim. Os usuários devem ser capazes de completá-los rapidamente e sem confusão. Neste artigo, você aprenderá técnicas práticas que o ajudarão a criar um formulário eficaz.

O que torna um formulário eficaz

O objetivo principal com cada formulário é a conclusão. Dois fatores têm um grande impacto na taxa de conclusão:

• Percepção de complexidade
  A primeira coisa que os usuários fazem quando veem um novo formulário é estimar quanto tempo é necessário para completá-lo. Os usuários fazem isso digitalizando o formulário. A percepção desempenha um papel crucial no processo de estimativa. Quanto mais complexo parecer um formulário, maior a probabilidade de os usuários abandonarem o processo.
• Custo de interação
  O custo de interação é a soma dos esforços – tanto cognitivos quanto físicos – que os usuários colocam na interação com uma interface para alcançar seu objetivo. O custo de interação tem uma conexão direta com a usabilidade do formulário. Quanto mais esforço os usuários tiverem que fazer para preencher um formulário, menos utilizável ele será. Um alto custo de interação pode ser resultado de dados difíceis de inserir, incapacidade de entender o significado de algumas perguntas ou confusão sobre mensagens de erro.

Os componentes dos formulários

Um formulário típico tem os cinco componentes a seguir:

• Campos de entrada
  Isso inclui campos de texto, campos de senha, caixas de seleção, botões de opção, controles deslizantes e quaisquer outros campos projetados para entrada do usuário.
• Rótulos de campo
  Eles informam aos usuários o que significam os campos de entrada correspondentes.
• Estrutura
  Isso inclui a ordem dos campos, a aparência do formulário na página e as conexões lógicas entre os diferentes campos.
• Botões de ação
  O formulário terá pelo menos um call to action (o botão que aciona o envio de dados).
• Comentários
  Feedback notifica o usuário sobre o resultado de uma operação. O feedback pode ser positivo (por exemplo, indicando que o formulário foi enviado com sucesso) ou negativo (dizendo algo como “O número que você forneceu está incorreto”).

Este artigo aborda muitos aspectos relacionados à estrutura, campos de entrada, rótulos, botões de ação e validação. A maioria dos pontos mencionados neste artigo tem exemplos visuais de fazer e não fazer; todos esses exemplos foram criados usando o Adobe XD.

Campos de entrada

Quando se trata de design de formulários, a coisa mais importante que um designer pode fazer é minimizar a necessidade de digitação. Reduzir o esforço de entrada é essencial. Os designers podem atingir esse objetivo concentrando-se no design do campo de formulário.

Minimize o número total de campos

Cada campo que você solicita aos usuários para preencher requer algum esforço. Quanto mais esforço for necessário para preencher um formulário, menor será a probabilidade de os usuários preencherem o formulário. É por isso que a regra fundamental do design de formulários é quanto menor é melhor – livre-se de todos os campos não essenciais.

O Baymard Institute analisou formulários de checkout e descobriu que um processo de checkout muito longo ou complicado é uma das principais razões para o abandono durante o checkout. O estudo descobriu que o checkout médio contém quase 15 campos de formulário. A maioria dos serviços online pode reduzir o número de campos exibidos por padrão em 20 a 60%.

Muitos designers estão familiarizados com a regra “menos é mais”; ainda assim, eles fazem perguntas adicionais na tentativa de coletar mais dados sobre seus usuários. Pode ser tentador coletar mais dados sobre seus usuários durante a inscrição inicial, mas resista a essa tentação. Pense desta forma: com cada campo adicional que você adiciona ao seu formulário, você aumenta a chance de perder um usuário em potencial. As informações que você obtém de um campo valem a pena perder novos usuários? Lembre-se de que, contanto que você tenha coletado as informações de contato de um usuário, você sempre poderá acompanhar uma solicitação de mais dados.

Distinguir claramente todos os campos opcionais

Antes de otimizar campos opcionais, pergunte-se se você realmente precisa incluí-los em seu formulário. Pense em quais informações você realmente precisa, não no que você deseja. Idealmente, o número de campos opcionais em seu formulário deve ser zero.

Se, após uma sessão de brainstorming, você ainda quiser incluir algumas perguntas opcionais em seu formulário, deixe claro para os usuários que esses campos são opcionais:

• Marque campos opcionais em vez de obrigatórios.
  Se você perguntar o mínimo possível, a grande maioria dos campos do seu formulário serão obrigatórios. Portanto, marque apenas os campos em minoria. Por exemplo, se cinco dos seis campos são obrigatórios, faz sentido marcar apenas um campo como opcional.
• Use o rótulo "Opcional" para indicar campos opcionais.
  Evite usar o asterisco ( * ) para significar “opcional”. Nem todos os usuários associarão o asterisco a informações opcionais, e alguns usuários ficarão confusos com o significado (um asterisco é frequentemente usado para indicar campos obrigatórios).

Campos de tamanho de acordo

Quando possível, use o comprimento do campo como uma affordance. O comprimento de um campo de entrada deve ser proporcional à quantidade de informação esperada no campo. O tamanho do campo funcionará como uma restrição visual - o usuário saberá quanto texto deve ser inserido apenas olhando para o campo. Geralmente, campos como códigos de área e números de casa devem ser mais curtos do que os de endereços.

Oferecer foco no campo

Foque automaticamente o primeiro campo de entrada em seu formulário. A focagem automática de um campo dá ao usuário uma indicação e um ponto de partida, para que ele possa começar a preencher o formulário rapidamente. Ao fazer isso, você reduz o custo da interação — economizando ao usuário um toque desnecessário.

Torne o campo de entrada ativo proeminente e focado. O foco de campo em si deve ser claro – os usuários devem ser capazes de entender rapidamente onde está o foco. Pode ser uma cor de borda acentuada ou um fade-in da caixa.

Não peça aos usuários que repitam seus endereços de e-mail

A razão pela qual um campo extra para o endereço de e-mail é tão popular entre os desenvolvedores de produtos é aparente: toda empresa deseja minimizar o risco de devoluções definitivas (não entregáveis ​​causados ​​por endereços de e-mail inválidos). Infelizmente, seguir essa abordagem não garante que você obtenha um endereço válido. Os usuários geralmente copiam e colam seu endereço de um campo para outro.

Forneça a opção "Mostrar senha"

Duplicar o campo de entrada de senha é outro erro comum entre designers de produtos. Os designers seguem essa abordagem porque acreditam que isso impedirá que os usuários digitem uma senha incorretamente. Na realidade, um segundo campo para uma senha não só aumenta o custo de interação, mas também não garante que os usuários prossigam sem erros. Como os usuários não veem o que inseriram no campo, eles podem cometer o mesmo erro duas vezes (em ambos os campos) e enfrentarão um problema quando tentarem fazer login usando uma senha. Como Jakob Nielsen resumiu:

A usabilidade sofre quando os usuários digitam senhas e o único feedback que recebem é uma fileira de marcadores. Normalmente, o mascaramento de senhas nem aumenta a segurança, mas custa seus negócios devido a falhas de login.

Em vez de duplicar o campo de senha, forneça uma opção que permita que os usuários visualizem a senha que escolheram criar. Tenha um ícone ou caixa de seleção que desmascare a senha quando clicada. Uma visualização de senha pode ser uma oportunidade para os usuários verificarem seus dados antes de enviar.

Não corte campos de dados

Não corte campos ao pedir um nome completo, número de telefone ou data de nascimento. Os campos fatiados forçam o usuário a fazer toques adicionais para passar para o próximo campo. Para campos que exigem alguma formatação (como números de telefone ou data de nascimento), também é melhor ter um único campo emparelhado com regras de formatação claras como seu espaço reservado.

Evite menus suspensos

Luke Wroblewski disse que os dropdowns deveriam ser a interface do usuário do último recurso. As listas suspensas são especialmente ruins para dispositivos móveis porque os elementos recolhidos tornam o processo de entrada de dados mais difícil em uma tela pequena: colocar opções em uma lista suspensa requer dois toques e oculta as opções.

Se você estiver usando um menu suspenso para seleção de opções, considere substituí-lo por botões de opção. Eles tornarão todas as opções visíveis e também reduzirão o custo de interação – os usuários podem tocar no item e selecionar de uma só vez.

Use espaços reservados e entrada mascarada

A incerteza de formatação é um dos problemas mais significativos do design de formulários. Esse problema tem uma conexão direta com o abandono do formulário — quando os usuários não têm certeza do formato em que devem fornecer os dados, eles podem abandonar o formulário rapidamente. Há algumas coisas que você pode fazer para tornar o formato claro.

Texto do espaço reservado

O texto em um campo de entrada pode informar aos usuários qual conteúdo é esperado. O texto do espaço reservado não é obrigatório para campos simples, como "Nome completo", mas pode ser extremamente valioso para campos que exigem dados em um formato específico. Por exemplo, se você projetar a funcionalidade de pesquisa para rastrear um pacote, seria bom fornecer um número de rastreamento de amostra como um espaço reservado para o campo de número de rastreamento.

É vital que seu formulário tenha uma distinção visual clara entre o texto do espaço reservado e o valor real inserido pelo usuário. Em outras palavras, o texto do espaço reservado não deve se parecer com um valor predefinido. Sem uma distinção visual clara, os usuários podem pensar que os campos com espaços reservados já possuem valores.

Entrada Mascarada

O mascaramento de campo é uma técnica que ajuda os usuários a formatar o texto inserido. Muitos designers confundem mascaramento de campo com texto de espaço reservado — eles não são a mesma coisa. Ao contrário dos placeholders, que são basicamente texto estático, as máscaras formatam automaticamente os dados fornecidos pelo usuário. No exemplo abaixo, os parênteses, espaços e traços aparecem na tela automaticamente quando um número de telefone é inserido.

A entrada mascarada também facilita a validação das informações pelos usuários. Quando um número de telefone é exibido em partes, fica mais fácil encontrar e corrigir um erro de digitação.

Fornecer teclado correspondente

Os usuários móveis apreciam aplicativos e sites que fornecem um teclado apropriado para o campo. Esse recurso impede que eles executem ações adicionais. Por exemplo, quando os usuários precisam inserir um número de cartão de crédito, seu aplicativo deve exibir apenas o teclado de discagem. É essencial implementar a correspondência de teclado de forma consistente em todo o aplicativo (todos os formulários em seu aplicativo devem ter esse recurso).

Defina os tipos de entrada HTML para mostrar o teclado correto. Sete tipos de entrada são relevantes para o design de formulários:

• input type="text" exibe o teclado normal do dispositivo móvel.
• input type="email" exibe o teclado normal e '@' e '.com'.
• input type="tel" exibe o teclado numérico de 0 a 9.
• input type="number" exibe um teclado com números e símbolos.
• input type="date" exibe o seletor de data do dispositivo móvel.
• input type="datetime" exibe o seletor de data e hora do dispositivo móvel.
• input type="month" exibe o seletor de mês e ano do dispositivo móvel.

Use um controle deslizante ao pedir um intervalo específico

Muitos formulários solicitam que os usuários forneçam uma faixa de valores (por exemplo, faixa de preço, faixa de distância etc.). Em vez de usar dois campos separados, “de” e “para”, para esse fim, use um controle deslizante para permitir que os usuários especifiquem o intervalo com uma interação com o polegar.

Explique claramente por que você está solicitando informações confidenciais

As pessoas estão cada vez mais preocupadas com a privacidade e a segurança da informação. Quando os usuários veem uma solicitação de informações que consideram privadas, eles podem pensar: “Hm, por que eles precisam disso?” Se o seu formulário solicitar informações confidenciais aos usuários, explique por que você precisa delas. Você pode fazer isso adicionando texto de suporte abaixo dos campos relevantes. Como regra geral, o texto explicativo não deve exceder 100 caracteres.

Tenha cuidado com padrões estáticos

Ao contrário dos padrões inteligentes, que são calculados pelo sistema com base nas informações que o sistema possui sobre os usuários, os padrões estáticos são valores predefinidos em formulários iguais para todos os usuários. Evite padrões estáticos, a menos que acredite que uma parte significativa de seus usuários (digamos, 95%) selecionaria esses valores, principalmente para campos obrigatórios. Por quê? Porque é provável que você introduza erros — as pessoas verificam os formulários rapidamente e não gastam tempo extra analisando todas as perguntas; em vez disso, eles simplesmente pularão o campo, supondo que ele já tenha um valor.

Proteger os dados do usuário

Jef Raskin disse uma vez: “O sistema deve tratar todas as entradas do usuário como sagradas”. Isso é absolutamente verdadeiro para formulários. É ótimo quando você começa a preencher um formulário da web e atualiza a página acidentalmente, mas os dados permanecem nos campos. Ferramentas como Garlic.js ajudam você a manter os valores de um formulário localmente até que o formulário seja enviado. Dessa forma, os usuários não perderão nenhum dado precioso se fecharem acidentalmente a guia ou o navegador.

Automatizar ações

Se você deseja tornar o processo de entrada de dados o mais tranquilo possível, não basta minimizar o número de campos de entrada — você também deve prestar atenção ao esforço do usuário necessário para a entrada de dados. A digitação tem um alto custo de interação — é propensa a erros e demorada, mesmo com um teclado físico. Mas quando se trata de telas móveis, torna-se ainda mais crítico. Mais digitação aumenta a chance do usuário cometer erros. Esforce-se para evitar digitação desnecessária, pois isso melhorará a satisfação do usuário e diminuirá as taxas de erro.

Aqui estão algumas coisas que você pode fazer para atingir esse objetivo:

autocompletar

A maioria dos usuários experimenta o preenchimento automático ao digitar uma pergunta na caixa de pesquisa do Google. O Google fornece aos usuários uma lista de sugestões relacionadas ao que o usuário digitou no campo. O mesmo mecanismo pode ser aplicado ao design de formulários. Por exemplo, um formulário pode preencher automaticamente um endereço de e-mail.

Capitalizar automaticamente

A capitalização automática torna a primeira letra maiúscula automaticamente. Esse recurso é excelente para campos como nomes e endereços, mas evite-o para campos de senha.

Auto correção

A correção automática modifica palavras que parecem estar incorretas. Desative esse recurso para campos exclusivos, como nomes, endereços etc.

Preenchimento automático de dados pessoais

Digitar um endereço geralmente é a parte mais complicada de qualquer formulário de inscrição online. Facilite essa tarefa usando a função do navegador para preencher o campo com base nos valores inseridos anteriormente. De acordo com a pesquisa do Google, o preenchimento automático ajuda as pessoas a preencher formulários 30% mais rápido.

Use os recursos nativos do dispositivo móvel para simplificar a entrada de dados

Os dispositivos móveis modernos são dispositivos sofisticados que possuem muitos recursos incríveis. Os designers podem usar os recursos nativos de um dispositivo (como câmera ou geolocalização) para simplificar a tarefa de entrada de dados.

Abaixo estão apenas algumas dicas sobre como fazer uso de sensores e hardware do dispositivo.

Serviços de localização

É possível pré-selecionar o país do usuário com base em seus dados de geolocalização. Mas às vezes o preenchimento prévio de um endereço completo pode ser problemático devido a problemas de precisão. A API do Google Places pode ajudar a resolver esse problema. Ele usa geolocalização e preenchimento prévio de endereço para fornecer sugestões precisas com base na localização exata do usuário.

Usando serviços de localização, também é possível fornecer padrões inteligentes. Por exemplo, para um formulário “Encontrar um voo”, é possível preencher previamente o campo “De” com o aeroporto mais próximo do usuário com base na geolocalização do usuário.

Autorização biométrica

O maior problema de usar uma senha de texto hoje é que a maioria das pessoas esquece as senhas. 82% das pessoas não conseguem lembrar suas senhas e 5 a 10% das sessões exigem que os usuários redefinam uma senha. A recuperação de senha é um grande negócio no comércio eletrônico. 75% dos usuários não concluiriam uma compra se tivessem que tentar recuperar sua senha durante o check-out.

O futuro das senhas é sem senhas. Ainda hoje, os desenvolvedores móveis podem tirar proveito das tecnologias biométricas. Os usuários não precisam digitar uma senha; eles devem poder usar leitores biométricos para autenticação — fazendo login usando uma impressão digital ou digitalização facial.

Câmera

Se o seu formulário solicitar que os usuários forneçam detalhes do cartão de crédito ou informações da carteira de motorista, é possível simplificar o processo de entrada de dados usando a câmera como um scanner. Forneça uma opção para tirar uma foto do cartão e preencher todos os detalhes automaticamente.

Mas lembre-se que por melhor que seu aplicativo preencha os campos, é fundamental deixá-los disponíveis para edição. Os usuários devem poder modificar os campos sempre que quiserem.

Voz

Dispositivos controlados por voz, como Apple HomePod, Google Home e Amazon Echo, estão invadindo ativamente o mercado. O número de pessoas que preferem usar a voz para operações comuns cresceu significativamente. De acordo com a ComScore, 50% de todas as buscas serão por voz até 2020.

À medida que os usuários ficam mais confortáveis ​​e confiantes usando comandos de voz, eles se tornarão um recurso esperado das interações móveis. A entrada de voz oferece muitas vantagens para usuários móveis — é especialmente valiosa em situações em que os usuários não podem se concentrar em uma tela, por exemplo, enquanto dirigem um carro.

Ao projetar um formulário, você pode fornecer entrada de voz como um método alternativo de entrada de dados.

Rótulos de campo

Escreva rótulos claros e concisos

O rótulo é o texto que informa aos usuários quais dados são esperados deles em um campo de entrada específico. Escrever rótulos claros é uma das melhores maneiras de tornar um formulário mais acessível. Os rótulos devem ajudar o usuário a entender rapidamente quais informações são necessárias.

Evite usar frases completas para explicar. Um rótulo não é um texto de ajuda. Escreva rótulos sucintos e nítidos (uma ou duas palavras), para que os usuários possam digitalizar rapidamente seu formulário.

Coloque o rótulo e a entrada juntos

Coloque cada rótulo próximo ao campo de entrada, porque o olho visualmente saberá que eles estão amarrados.

Não use o texto do espaço reservado que desaparece como rótulos

Embora as etiquetas em linha tenham uma boa aparência e economizem um valioso espaço de tela, esses benefícios são superados em muito pelas desvantagens significativas de usabilidade, sendo a mais crítica a perda de contexto. Quando os usuários começam a inserir texto em um campo, o texto do espaço reservado desaparece e força as pessoas a recuperar essas informações. Embora possa não ser um problema para formulários simples de dois campos, pode ser um grande problema para formulários com muitos campos (digamos, de 7 a 10). Seria difícil para os usuários recuperar todos os rótulos de campo depois de inserir dados. Não surpreendentemente, o teste do usuário mostra continuamente que os espaços reservados nos campos de formulário geralmente prejudicam a usabilidade mais do que ajudam.

Há uma solução simples para o problema do desaparecimento de espaços reservados: o rótulo flutuante (ou adaptativo). Depois que o usuário toca no campo com o marcador de posição do rótulo, o rótulo não desaparece, ele se move para o topo do campo e abre espaço para o usuário inserir seus dados.

Rótulos de alinhamento superior

Colocar rótulos de campo acima dos campos em um formulário melhora a maneira como os usuários digitalizam o formulário. Usando a tecnologia de rastreamento ocular para isso, o Google mostrou que os usuários precisam de menos fixações, menos tempo de fixação e menos sacadas antes de enviar um formulário.

Outra vantagem importante dos rótulos alinhados no topo é que eles fornecem mais espaço para rótulos. Etiquetas longas e versões localizadas caberão mais facilmente no layout. Este último é especialmente adequado para pequenas telas móveis. Você pode fazer com que os campos de formulário se estendam por toda a largura da tela, tornando-os grandes o suficiente para exibir toda a entrada do usuário.

Sentença Caso Vs. Caso de título

Existem duas maneiras gerais de capitalizar palavras:

• Maiúsculas e minúsculas: cada palavra em maiúscula. “Esta é a capa do título.”
• Letra maiúscula: coloque a primeira palavra em maiúscula. “Este é um caso de sentença.”

Usar maiúsculas e minúsculas para rótulos tem uma vantagem sobre maiúsculas: é um pouco mais fácil (e, portanto, mais rápido) de ler. Embora a diferença para rótulos curtos seja insignificante (não há muita diferença entre “Nome Completo” e “Nome Completo”), para rótulos mais longos, o uso de maiúsculas e minúsculas é melhor. Agora você sabe como é difícil ler texto longo em maiúsculas.

Evite usar tampas para rótulos

Texto em maiúsculas — ou seja, texto com todas as letras maiúsculas — é aceitável em contextos que não envolvem leitura substantiva (como siglas e logotipos), mas evite todas as letras maiúsculas. Conforme mencionado por Miles Tinker em seu trabalho Legibility of Print , a impressão em maiúsculas diminui drasticamente a velocidade de digitalização e leitura em comparação com o tipo minúsculo.

Esquema

Você já sabe que os usuários verificam as páginas da web, em vez de lê-las. O mesmo vale para o preenchimento de formulários. É por isso que os designers devem projetar um formulário que seja fácil de digitalizar. Permitir uma digitalização eficiente e eficaz é crucial para tornar o processo de preenchimento de um formulário o mais rápido possível.

Use um layout de coluna única

Um estudo do CXL Institute descobriu que formulários de coluna única são mais rápidos de preencher do que formulários de várias colunas. Nesse estudo, os participantes do teste foram capazes de preencher um formulário de coluna única em média 15,4 segundos mais rápido do que um formulário de várias colunas.

Várias colunas interrompem o impulso vertical de um usuário; com várias colunas, os olhos começam a ziguezaguear. Isso aumenta drasticamente o número de fixações oculares e, como resultado, o tempo de conclusão. Além disso, formulários de várias colunas podem levantar perguntas desnecessárias ao usuário, como “Por onde devo começar?” e "As perguntas da coluna da direita são iguais em importância às perguntas da coluna da esquerda?"

Em um design de uma coluna, os olhos se movem em uma direção natural, de cima para baixo, uma linha de cada vez. Isso ajuda a definir um caminho claro para o usuário. Uma coluna é excelente para dispositivos móveis porque as telas são mais longas verticalmente e a rolagem vertical é um movimento natural para usuários móveis.

Existem algumas exceções a essa regra. É possível colocar campos curtos e logicamente relacionados na mesma linha (como para a cidade e o código de área).

Crie um fluxo com suas perguntas

A maneira como você faz perguntas também é importante. As perguntas devem ser feitas logicamente da perspectiva do usuário, não de acordo com a lógica do aplicativo ou do banco de dados, pois isso ajudará a criar um senso de conversa com o usuário. Por exemplo, se você criar um formulário de checkout e solicitar detalhes como nome completo, número de telefone e cartão de crédito, a primeira pergunta deve ser o nome completo. Alterar a ordem (por exemplo, começar com um número de telefone em vez de um nome) causa desconforto. Em conversas do mundo real, seria incomum pedir o número de telefone de alguém antes de perguntar seu nome.

Adiar perguntas detalhadas para o fim

Quando se trata de projetar um fluxo para perguntas que você deseja fazer, pense na priorização. Siga a regra “fácil antes de difícil” e coloque as perguntas profundas ou pessoais por último. Isso facilita os usuários no processo; eles estarão mais propensos a responder a perguntas complexas e mais intrusivas uma vez que tenham estabelecido um relacionamento. Isso tem uma base científica: o princípio de consistência de Robert Cialdini estipula que quando alguém faz uma pequena ação ou dá um passo em direção a algo, ele se sente mais compelido a terminar.

Agrupar campos relacionados

Um dos princípios da psicologia da Gestalt, o princípio da proximidade, afirma que os elementos relacionados devem estar próximos uns dos outros. Este princípio pode ser aplicado à ordem das perguntas em um formulário. Quanto mais questões relacionadas, mais próximas elas devem estar umas das outras.

Os designers podem agrupar campos relacionados em seções. Se o seu formulário tiver mais de seis perguntas, agrupe as perguntas relacionadas em seções lógicas. Não se esqueça de fornecer uma boa quantidade de espaço em branco entre as seções para distingui-las visualmente.

Faça um formulário longo parecer mais simples

Como você cria um formulário que faz muitas perguntas aos usuários? Claro, você pode colocar todas as perguntas em uma tela. Mas isso atrapalha sua taxa de conclusão. Se os usuários não tiverem motivação suficiente para preencher um formulário, a complexidade do formulário pode assustá-los. A primeira impressão desempenha um papel vital. Geralmente, quanto mais longo ou mais complicado parecer um formulário, menos provável será que os usuários comecem a preencher os espaços em branco.

Minimize o número de campos visíveis ao mesmo tempo. Isso cria a percepção de que a forma é mais curta do que realmente é.

Existem duas técnicas para fazer isso.

Divulgação progressiva

A divulgação progressiva tem tudo a ver com dar aos usuários a coisa certa na hora certa. O objetivo é encontrar as coisas certas para colocar na tela pequena no momento certo:

• Inicialmente, mostre aos usuários apenas algumas das opções mais importantes.
• Revele partes do seu formulário à medida que o usuário interage com ele.

Chunking

Chunking envolve quebrar uma forma longa em etapas. É possível aumentar a taxa de conclusão dividindo um formulário em algumas etapas. Chunking também pode ajudar os usuários a processar, entender e lembrar de informações. Ao projetar formulários de várias etapas, sempre informe os usuários sobre seu progresso com um medidor de integridade.

Os designers podem usar um rastreador de progresso (como mostrado no exemplo acima) ou um indicador “Step # out of #” tanto para informar quantos passos existem no total e para mostrar o quanto o usuário está no momento. A última abordagem pode ser ótima para formulários móveis porque a indicação de etapas não ocupa muito espaço.

Botões de ação

Um botão é um elemento interativo que direciona os usuários a realizar uma ação.

Tornar os botões de ação descritivos

O rótulo de um botão deve explicar o que o botão faz; os usuários devem ser capazes de entender o que acontece após um toque apenas olhando para o botão. Evite rótulos genéricos como “Enviar” e “Enviar”, usando em vez disso rótulos que descrevam a ação.

Não use os botões Limpar ou Redefinir

Os botões de limpar ou redefinir permitem que os usuários apaguem seus dados em um formulário. Esses botões quase nunca ajudam os usuários e muitas vezes os prejudicam. O risco de excluir todas as informações que um usuário inseriu supera o pequeno benefício de ter que começar de novo. Se um usuário preencher um formulário e acidentalmente apertar o botão errado, há uma boa chance de que ele não recomece.

Use estilos diferentes para botões primários e secundários

Evite ações secundárias, se possível. Mas se o seu formulário tiver duas frases de chamariz (por exemplo, um formulário de comércio eletrônico que tenha os botões “Aplicar desconto” e “Enviar pedido”), garanta uma distinção visual clara entre as ações primárias e secundárias. Priorize visualmente a ação principal adicionando mais peso visual ao botão. Isso impedirá que os usuários toquem no botão errado.

Projete alvos de toque fáceis de usar

Pequenos alvos de toque criam uma experiência de usuário horrível porque tornam difícil para os usuários interagir com objetos interativos. É vital projetar alvos de toque fáceis de usar: campos de entrada e botões maiores.

A imagem abaixo mostra que a largura média do dedo adulto é de cerca de 11 mm.

De acordo com as diretrizes de design de materiais, os alvos de toque devem ter pelo menos 48 × 48 DP. Um alvo de toque desse tamanho resulta em um tamanho físico de cerca de 9 mm, independentemente do tamanho da tela. Pode ser apropriado usar alvos de toque maiores para acomodar um espectro mais amplo de usuários.

Não apenas o tamanho do alvo é importante, mas o espaço suficiente entre os alvos de toque também é importante. A principal razão para manter uma distância segura entre os alvos de toque é evitar que os usuários toquem no botão errado e invoquem a ação errada. A distância entre os botões se torna extremamente importante quando opções binárias como “Concordo” e “Discordo” estão localizadas bem próximas umas das outras. As diretrizes de design de materiais recomendam separar os alvos de toque com 8 DP de espaço ou mais, o que criará densidade e usabilidade de informações equilibradas.

Desativar botões após tocar

As ações de formulários geralmente exigem algum tempo para serem processadas. Por exemplo, o cálculo de dados pode ser necessário após um envio. It's essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

Assistance And Support

Provide Success State

Upon successful completion of a form, it's critical to notify users about that. It's possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Errors And Validation

Users will make mistakes. It's inevitable. It's essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it's still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you're a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it's usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it's better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today's date or a date in the future. Such a selector would force users to pick a date range that fits.

Don't Make Data Validation Rules Too Strict

While there might be cases where it's essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It's very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state's abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it's the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

• Never blame the user.
  The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You've entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
• Avoid vague or general error messages.
  Messages like “Something went wrong. Please, try again later” don't say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
• Make error messages human-readable.
  Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

É muito melhor posicionar as mensagens de erro inline. Primeiro, esse posicionamento corresponde ao fluxo natural de leitura de cima para baixo do usuário. Em segundo lugar, os erros aparecerão no contexto da entrada do usuário.

Usar validação dinâmica

A hora em que você escolhe exibir uma mensagem de erro é vital. Ver uma mensagem de erro somente após pressionar o botão enviar pode frustrar os usuários. Não espere até que os usuários terminem o formulário; fornecer feedback à medida que os dados estão sendo inseridos.

Use validação em linha com feedback em tempo real. Essa validação informa instantaneamente às pessoas se as informações digitadas são compatíveis com os requisitos do formulário. Em 2009, Luke Wroblewski testou a validação inline contra a validação pós-envio e encontrou os seguintes resultados para a versão inline:

• 22% de aumento na taxa de sucesso,
• 22% de redução nos erros cometidos,
• 31% de aumento no índice de satisfação,
• Redução de 42% nos tempos de conclusão,
• Redução de 47% no número de fixações oculares.

Mas a validação em linha deve ser implementada com cuidado:

• Evite mostrar validação em linha no foco.
  Nesse caso, assim que o usuário tocar em um campo, ele verá uma mensagem de erro. O erro aparece mesmo quando o campo está completamente vazio. Quando uma mensagem de erro é mostrada em foco, pode parecer que o formulário está gritando com o usuário antes mesmo de começar a preenchê-lo.
• Não valide após cada caractere digitado.
  Essa abordagem não apenas aumenta o número de tentativas de validação desnecessárias, mas também frustra os usuários (porque os usuários provavelmente verão mensagens de erro antes de preencherem o campo). Idealmente, as mensagens de validação em linha devem aparecer em torno de 500 a 1.000 milissegundos depois que o usuário parar de digitar ou depois de passar para o próximo campo. Essa regra tem algumas exceções: é útil validar inline enquanto o usuário digita ao criar uma senha (para verificar se a senha atende aos requisitos de complexidade), ao criar um nome de usuário (para verificar se um nome está disponível) e ao digitar um mensagem com um limite de caracteres.

Acessibilidade

Usuários de todas as habilidades devem poder acessar e desfrutar de produtos digitais. Os designers devem se esforçar para incorporar ao máximo as necessidades de acessibilidade ao construir um produto. Aqui estão algumas coisas que você pode fazer para tornar seus formulários mais acessíveis.

Certifique-se de que o formulário tenha o contraste adequado

Seus usuários provavelmente irão interagir com seu formulário ao ar livre. Assegure-se de que é fácil de usar tanto no brilho do sol quanto em ambientes com pouca luz. Verifique a taxa de contraste dos campos e rótulos em seu formulário. O W3C recomenda as seguintes taxas de contraste para o corpo do texto:

• O texto pequeno deve ter uma taxa de contraste de pelo menos 4,5:1 em relação ao plano de fundo.
• O texto grande (em negrito de 14 pontos, normal de 18 pontos e superior) deve ter uma taxa de contraste de pelo menos 3:1 em relação ao plano de fundo.

Medir o contraste de cores pode parecer esmagador. Felizmente, algumas ferramentas simplificam o processo. Um deles é o Web AIM Color Contrast Checker, que ajuda os designers a medir os níveis de contraste.

Não confie apenas na cor para comunicar o status

O daltonismo (ou deficiência de visão de cores) afeta aproximadamente 1 em cada 12 homens (8%) e 1 em cada 200 mulheres no mundo. Embora existam muitos tipos de daltonismo, os dois mais comuns são protanomalia, ou sensibilidade reduzida à luz vermelha, e deuteranomalia, ou sensibilidade reduzida à luz verde. Ao exibir erros de validação ou mensagens de sucesso, não confie apenas na cor para comunicar o status (ou seja, tornando os campos de entrada verdes ou vermelhos). Como afirmam as diretrizes do W3C, a cor não deve ser usada como o único meio visual de transmitir informações, indicar uma ação, solicitar uma resposta ou distinguir um elemento visual. Os designers devem usar cores para destacar ou complementar o que já está visível. Apoie pessoas daltônicas fornecendo dicas visuais adicionais que as ajudam a entender a interface do usuário.

Permitir que os usuários controlem o tamanho da fonte

Permitir que os usuários aumentem o tamanho da fonte para melhorar a legibilidade. Dispositivos móveis e navegadores incluem recursos para permitir que os usuários ajustem o tamanho da fonte em todo o sistema. Além disso, certifique-se de que seu formulário tenha espaço suficiente para tamanhos de fonte grandes.

Teste suas decisões de design

Todos os pontos mencionados acima podem ser considerados como práticas recomendadas do setor. Mas só porque algo é chamado de “melhor prática” não significa que seja sempre a solução ideal para o seu formulário. Aplicativos e sites dependem muito do contexto em que são usados. Assim, é sempre essencial testar suas decisões de design; certifique-se de que o processo de preenchimento de um formulário seja tranquilo, que o fluxo não seja interrompido e que os usuários possam resolver quaisquer problemas que encontrem ao longo do caminho. Realize sessões de teste de usabilidade regularmente, colete todos os dados valiosos sobre as interações do usuário e aprenda com isso.

Conclusão

Os usuários podem hesitar em preencher formulários. Portanto, nosso objetivo como designers é tornar o processo de preenchimento de um formulário o mais fácil possível. Ao projetar um formulário, esforce-se para criar interações rápidas e sem atrito. Às vezes, uma pequena alteração — como escrever corretamente uma mensagem de erro — pode aumentar significativamente a usabilidade do formulário.

Este artigo faz parte da série de design UX patrocinada pela Adobe. O Adobe XD foi feito para um processo de design de UX rápido e fluido, pois permite que você vá da ideia ao protótipo mais rapidamente. Projete, prototipe e compartilhe - tudo em um aplicativo. Você pode conferir mais projetos inspiradores criados com o Adobe XD no Behance e também se inscrever no boletim informativo de design de experiência da Adobe para se manter atualizado e informado sobre as últimas tendências e insights para design de UX/UI.