Lançado através do HTML5 em 2014, o atributo placeholder veio para facilitar o preenchimento de formulários, no entanto, quando utilizado em substituição ao label, pode provocar sérios problemas na experiência do usuário como a redução da acessibilidade e usabilidade.

Diferenciando o placeholder de um label em formulários

Livro Trabalhe 4 Horas por semana erguido por uma mão

Label: [elemento] representa o rótulo ou etiqueta, como em sua tradução literal, de um determinado campo na interface.

Placeholder: [atributo] representa uma dica rápida (uma palavra ou uma frase curta) com objetivo de auxiliar o usuário no preenchimento do campo enquanto o mesmo ainda está vazio.

Perceba que o placeholder é um atributo que deixa de aparecer quando o campo é preenchido, diferentemente do label que permanece visível a todo momento na interface.

Esse detalhe por si só é suficiente para entendermos que placeholders não substituem labels. Ainda assim, segue um bom exemplo para consolidarmos o entendimento:

Sentindo com a ausência de labels na prática

Imagine você se deparando com a seguinte interface:

DESCRICAO

Pergunta: o telefone comercial a ser atualizado se refere à qual dos campos na imagem acima?

[ retorne sua atenção à imagem e pense na resposta ]

Você provavelmente está em dúvida entre os 2 últimos campos, correto?

[ retorne novamente à imagem e decida ]

Acredito que a maioria de nós atualizaríamos o 3º ou 4º campo em razão de seus preenchimentos com números no formato de telefones.

Podemos ainda estar mais suscetíveis a atualizar o 3º campo ao invés do 4º em razão de seus números sugerirem mais um telefone fixo (comercial), que um telefone móvel (celular pessoal) como no último campo. Concorda?

No entanto, o mais interessante dessa experiência é perceber que uma interface na ausência de labels, ainda que conte com placeholders, pode nos trazer grandes problemas na experiência do usuário.

Para nos certificarmos disso, temos abaixo o formulário codificado e funcional seguindo a mesma estrutura: sem labels, com placeholders e um preenchimento inicial já realizado, aguardando pela alteração do telefone comercial.

Para que você sinta essa experiência, tente atualizar o telefone comercial e clique em atualizar, quando o preenchimento estiver correto você será alertado:

Atualizar dados
Atenção: devido à mudanças na política de uso, seu telefone comercial precisa ser atualizado:





Telefones deverão seguir o formato: (xx) xxxx-xxxx


Perceba que somente ao apagar os valores já preenchidos em cada campo você terá acesso ao placeholder (afinal, esta é sua natureza) e por consequência identificará o que cada item realmente representa. Deveria ser bem mais fácil, concorda?

E como no exemplo, podemos encontrar valores já preenchidos que não coincidem com a realidade do campo e ainda assim, passarmos desapercebidos pela situação.

E o problema vai além…

O uso de placeholders em substituição aos labels também reduzem significativamente a acessibilidade e usabilidade de interfaces à uma gama de usuários que dependem de recursos e facilidades para sua interação.

Alguns exemplos clássicos:

  • leitores de telas varrerão a interface informando os dados já preenchidos em cada campo sem a orientação real ao que o campo se refere (incorrendo num problema muito similar ao exemplo citado anteriormente);
  • placeholders são exibidos em cinza claro, por padrão, fornecendo contraste insuficiente a muitos usuários com baixa sensibilidade ou acuidade visual;
  • a falta de labels diminui o espaçamento entre os campos, reduz as áreas de clique e por consequência, dificultam os acessos aos campos corretos.

Há um artigo da Smashing Magazine que defende a não utilização do placeholder e explica os motivos em detalhes (acessar artigo).

Quero simplificar e usar somente um!

Atualmente, por razões estéticas e até minimalistas, é muito comum ver interfaces utilizando somente um desses recursos.

No entanto, é importante salientar que se utilizando das boas práticas, você verá majoritariamente o label na interface, ainda que em certos momentos ele se pareça muito com um placeholder.

O recurso é utilizado de forma que o label assuma inicialmente a posição do placeholder, isto é, estará posicionado dentro do campo até o momento em que o mesmo esteja em foco ou receba algum valor. Neste caso, o label sobe à sua posição original.

Veja que o Google utiliza desse recurso em seu Material Design:

DESCRICAO


É uma forma digamos híbrida de aproveitar a simplicidade em utilizar um único elemento, a facilidade de uso enquanto a orientação vem no mesmo local onde se preenche e a consistência em se manter a identificação do campo visível a todo momento.

Conclusão

Placeholders e labels possuem objetivos diferentes mas complementares e portanto, um não substitui o outro. Sempre que possível, aproveite dos benefícios de ambos em sua interface e caso opte em utilizar somente um, dê preferência ao label.

Referências e leituras complementares