Como placeholders mal aplicados podem ser prejudiciais para seu formulário!

As descrições ou sugestões no contexto podem ajudar a esclarecer o que se passa dentro de cada campo de formulário e, portanto, melhorar as taxas de conclusão e conversão. Há muitas maneiras de fornecer sugestões. Uma implementação comum é inserir instruções dentro dos campos do formulário usando o Placeholder. Infelizmente, os testes de usuários continuamente mostram que os espaços reservados em campos de formulário muitas vezes prejudicam a usabilidade mais do que ajudam.

Labels e Placeholders

As labels indicam quais informações pertencem a um determinado campo de formulário e normalmente são posicionadas fora do campo do formulário.

O texto do placeholder, localizado dentro de um campo de formulário, é uma dica, descrição ou exemplo adicional das informações necessárias para um campo específico. Essas sugestões normalmente desaparecem quando o usuário digita no campo de texto.

Placeholders que substituem as labels

Alguns formulários substituem as labels pelo placeholder no campo para reduzir a desordem na página, ou para encurtar o comprimento do formulário. Embora esta abordagem seja baseada em boas intenções, ela tem muitas conseqüências negativas.

Abaixo estão 7 razões pelas quais os placeholders não devem ser usados como substituições para rótulos de campo.

O Placeholder desaparecendo incomoda a memória de curto prazo dos usuários. Se o usuário esquecer a dica, que as pessoas costumam fazer ao preencher formulários longos, ele deve excluir o que ele escreveu e, em alguns casos, clicar fora do campo para revelar o texto do espaço reservado novamente. Os usuários nem sempre estão focados na tarefa de preencher o formulário e por isso, sempre temos que tornar esse momento rápido e pouco desgastante. Em formulários simples, a tensão na memória é menos problemática do que com formas complexas ou raramente usadas. Embora, mesmo em um formulário de login simples sem rótulos, os usuários podem não se lembrar se tiverem a opção de digitar o nome de usuário ou o e-mail ou apenas o nome de usuário.

Sem labels, os usuários não podem verificar seu trabalho antes de enviar um formulário. A falta de rótulos torna impossível que os clientes olhem através do formulário e certifique-se de que suas respostas estão corretas. Da mesma forma, navegadores que autocomplete nos campos de formulário podem preencher informações incorretamente. Se não houver rótulos, ou se as instruções especiais não forem mais visíveis, os clientes devem revelar o texto do placeholder, excluindo o texto em cada campo, um por um, para verificar se ele corresponde à descrição. Realmente, porém, muitos nem sequer perceberão esse potencial de erro, e eles não farão o esforço de verificar novamente.

Quando as mensagens de erro ocorrem, as pessoas não sabem como corrigir o problema. Se o formulário foi preenchido, mas não há rótulos ou instruções visíveis fora dos campos do formulário, os usuários tem que retornar a cada campo para revelar a descrição para corrigir o erro.

O texto do placeholder que desaparece quando o cursor é colocado em um campo de formulário é irritante para os usuários que navegam com o teclado. As pessoas que usam a tecla Tab movem-se rapidamente de um campo para outro, e não param para estudar o próximo campo antes de abotoar.

Os campos com placeholder são menos visíveis. Estudos de eyetracking mostram que os olhos dos usuários são atraídos para campos vazios. No mínimo, os usuários gastarão mais tempo localizando um campo não vazio — um incômodo. Na pior das hipóteses, eles ignorarão completamente o campo — um potencial desastre para os negócios.

Os usuários podem confundir um espaço reservado para dados que foram preenchidos automaticamente. Quando já há texto no campo, as pessoas têm menos probabilidades de perceber que podem digitar lá. Alguns usuários assumem que o texto do placeholder é um valor padrão e ignoram completamente o campo.

Ocasionalmente, os usuários devem excluir o texto do espaço reservado manualmente. Às vezes, os espaços reservados não desaparecem quando os usuários movem seu foco de entrada para o campo. Se o marcador de posição permanecer no campo como texto editável, os usuários são forçados a selecionar e excluí-lo manualmente. Isso cria uma carga desnecessária para os usuários e aumenta o custo de interação de preencher o formulário.

Placeholders Adaptáveis

Recentemente, os placeholders adaptáveis tem sido mais utilizados e eles atenuam algumas desvantagens dos placeholders tradicionais. E com o Material Design ele chegou no mainstream.

Neste padrão, os rótulos são colocados dentro do campo de formulário como espaços reservados até o campo se tornar ativo e o usuário move o foco de entrada para o campo. Nesse ponto, o marcador do marcador de posição se move para o topo do campo. Como resultado, o espaço reservado adaptativo (também conhecido como a etiqueta do flutuador) é sempre visível, no centro do campo de formulário ou acima do texto que o usuário inseriu.

Existem duas vantagens principais para essa abordagem:

Pode economizar espaço em dispositivos móveis, ao não exigir espaço vertical extra para colocar o rótulo acima do campo.

O rótulo visível serve como um auxílio de memória enquanto as pessoas estão na fase de digitação. Isso, portanto, aborda os pontos 1 à 4 da lista de problemas acima.

No entanto, os problemas 5 e 6 acima são ainda um problema: os campos com texto neles são menos visíveis e os usuários podem pensar que já existe um valor padrão inserido no campo.

Em última análise, os placeholders adaptativos oferecem uma melhor experiência de usuário do que label com placeholder. Mas se você tiver o espaço da tela, colocar o rótulo e dica fora do campo ainda é o melhor caminho a seguir, para proporcionar uma boa usabilidade.

Conclusão

Com base em tudo isso, devemos sempre pensar no que objetivo dos nosso formulário e sempre que possível tentar reduzir o esforço necessário na conclusão da tarefa.

Apesar de esteticamente os campos com palceholder substituindo a label do campo ou mesmo utilizando o placeholder adaptável, se possível tente priorizar a hierarquia de informação para que diversos níveis de usuários possem entender o resultado de forma coerente e conclusiva sem gerar duvidas ou acabar ignorando campos essenciais para a conclusão da tarefa.

Like what you read? Give Guilherme Gonzalez a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.