Como otimizar formulários para dispositivos móveis

Video: Adaptando para dispositivos móveis

Os formulários são usados ​​em sites para coletar informações dos usuários. Sites usam esta informação para completar transações e registros, ou para completar outras tarefas, como a apresentação de uma reivindicação de seguro online.

Ao se aproximar de design do formulário para dispositivos móveis, mantendo a experiência móvel física em mente é importante. Se você fizer seu formulário lento para carregar ou muito complicada, os visitantes vão provavelmente abandonar a forma no meio, ou até mesmo antes de começar.

Manter essas melhores práticas em mente ao projetar seus formulários-friendly móveis:

• Mantenha os formulários curto e doce. Faça suas formas fácil de concluir, minimizando o número de campos obrigatórios. Ter um campo para “Nome” em vez de dois campos para o primeiro e último nome é um bom exemplo de uma maneira fácil de fazer o seu campo de formulário mais curto.

  Pedir muito e você pode acabar com nada.

• Quando eles não podem ser curto, criar formulários de várias páginas. Se você deve ter uma forma longa, dividi-lo em várias páginas, apresentam apenas alguns campos acima da dobra em cada página ( “acima da dobra” significa antes que você tem que começar a rolar para baixo da tela), e incluem clara Seguinte botões para que os visitantes não têm para rolar excessivamente. Uma barra de progresso também pode ajudar a manter os usuários comprometidos com multipage formas móveis.

• Faça o botão Enviar eo tamanho do dedo campos do formulário. Seus usuários móveis são o preenchimento de formulários com as pontas dos dedos, para que seus campos e botões precisa ser grande o suficiente para fazer a interação torneira fácil. No tamanho padrão existe que funciona melhor para cada dispositivo móvel, mas a criação de botões e campos de formulário que são 44 pixels de largura por 44 pixels de altura é geralmente uma regra segura de ouro.

• Minimizar digitação usando menus drop-down, botões de rádio e respostas selecionadas automaticamente. Qualquer coisa que você pode fazer para limitar a quantidade de digitação exigida vai ajudar a acelerar o processo e melhorar a satisfação do cliente. Por exemplo, se o formulário pede um estado, permitir que os usuários selecionar seu estado a partir de um menu drop-down para que eles não tem que digitá-lo.

• Faça o que você está pedindo clara. Acima de cada campo, especifique claramente exatamente o que você deseja que o usuário colocar no campo de formulário. Se você está perguntando para um aniversário, por exemplo, esclarecer se a forma quer que o ano de nascimento inserida como dois ou quatro dígitos. Veja um exemplo de Progressive.

  
  Mostrar aos usuários como eles devem inserir informações data de nascimento.
  
  
  
  

  Se você está pedindo um pedaço de informação que requer uma explicação adicional, incluindo um botão que oferece mais informações quando aproveitado (muitas vezes chamado de tooltip) Pode ajudar a experiência do usuário. Aqui é uma forma usando uma dica de ferramenta para explicar o que CCV significa.

  
  Um botão dica explica o requisito de campo de formulário.

• Claramente especificar quais campos são obrigatórios. Se o formulário tem mais de um campo, certifique-se de que seus usuários saibam exatamente quais campos são de preenchimento obrigatório e que eles podem pular. Colocando um asterisco (*) ao lado de campos de formulários exigidos é uma convenção comum. Se todos os campos do formulário são necessários, colocar um asterisco ao lado de todos os seus campos. Não presuma que os visitantes vão entender que eles são todos necessários.

• Permitir log-in usando um provedor de terceiros como o Google ou Amazon.com. Às vezes, um formulário de inscrição pode se tornar uma barreira à entrada de um usuário de primeira vez. Permitindo que seus clientes para entrar usando um provedor de terceiros que eles já estão conectados a pode acelerar o processo e eliminar a barreira de inscrição.

  Confira um exemplo de integração de terceiros que permite aos usuários de primeira vez para entrar usando suas informações de conta Google. Isto é muito mais fácil para o usuário do que digitar as informações de registro em um formulário.

  
  Porque HubSpot Sidekick tem autenticação de terceiros opcional, os usuários móveis de primeira viagem pode ignorar o formulário e registrar com as informações da conta Google.

  De terceiros log-in também é uma ótima maneira de obter clientes através do formulário de compra. Ao permitir que os usuários façam login e pagar usando um serviço para o qual eles já têm informações de cartão de crédito armazenado, tais como Amazon.com, você permite que seu cliente para pular um formulário de autorização de cartão de crédito com diversos campos.

  Video: GXportal - Como criar um site otimizado para dispositivos móveis?

  
  Um exemplo de integração de terceiros.

• Mantenha o foco no formulário e minimizar outros conteúdos na página. Quando os visitantes desembarcaram em uma página web com um formulário, eles estão em uma conversão página, e você deseja que o conteúdo da página para fazer tudo ao seu alcance para manter o ritmo de conversão indo. Você deseja obter o visitante interagir com o formulário e tocar no botão apresentar o mais rapidamente possível.

  Adicionando um monte de conteúdo em cima ou ao lado de sua forma pode acabar sendo uma distração de conversão que pode retardar ou completamente descarrilar o processo de formulário de submissão. Para minimizar a distração, tente incluir apenas o conteúdo explicativo que ajuda o usuário preencher o formulário. Se você quiser incluir conteúdo que não é explicativo, mantê-lo conciso e diretamente relacionado à forma - assim como o exemplo de BruceClay.com.

  
  Mantenha a linguagem em formas para o ponto para aumentar a conversão.

• Visualmente validar quando uma linha formulário for preenchido corretamente. Os usuários móveis não ama o preenchimento de formulários pela primeira vez, e eles realmente não amo ter que voltar e preenchê-los uma segunda vez porque o formulário tem erros.

  Utilizando pistas visuais para deixar o seu usuário saiba terem completado cada linha do formulário corretamente - ou mal - pode economizar tempo e limitar frustração. Uma marca de seleção verde ao lado do campo é uma ótima maneira de indicar claramente que o campo foi concluída da maneira certa, e um X vermelho funciona bem para se comunicar quando algo está errado. Se algo está errado com a linha, certifique-se de explicar claramente como o usuário pode corrigir o erro.

  
  Use pistas visuais e verbais para que os usuários saibam se eles completaram cada linha do formulário corretamente.