Placeholder

Um conteúdo temporário que ocupa espaço ou dá uma dica antes de o conteúdo real existir.

Hard

O que é

Placeholder tem, na verdade, dois usos. No formulário, ele é o texto-dica que aparece dentro do campo antes de a pessoa digitar, como DD/MM/AAAA ou busque por tema. Já no fluxo de design, ele é o elemento de marcação que ocupa o lugar de algo que ainda não existe, como um retângulo cinza no lugar da imagem ou um lorem ipsum no lugar do texto.

O limite do placeholder em formulário é que ele some no instante em que a pessoa começa a digitar. Por causa disso, quem pausa, erra ou precisa conferir o formato fica sem a dica justamente na hora em que mais precisaria dela, e é por esse motivo que ele nunca deveria ser a única forma de comunicar o que o campo pede.

No design, o placeholder cumpre um papel diferente, porque permite avaliar layout, espaço e proporção antes de o conteúdo final ficar pronto. Vale pensar nele como andaime, e não como acabamento, já que ele existe pra ser substituído.

Em uma frase

Tira o placeholder de rótulo e bota um label fixo por cima, que some quando a pessoa digita.

A pergunta que ele responde

Posso usar aquele texto cinza dentro do campo como rótulo, ou isso vai dar problema?

Quando usar

Faz sentido pra dar um exemplo de formato dentro do campo, ou pra preencher o layout num wireframe antes de o conteúdo real existir.

Como não usar

O que atrapalha é usar placeholder no lugar do label, jogar um requisito crítico só nele, ou deixar o contraste tão baixo que a pessoa nem consegue ler a dica.

Na prática

Pense num time que descobre que vinha usando o placeholder como rótulo do campo. Ao começar a digitar, a pessoa perdia a referência do que era pra preencher ali, então o time volta com o label fixo por cima, resolvendo o problema.

Não confunda com

Vale separar placeholder de label, porque o label é o nome permanente do campo, que fica sempre visível, enquanto o placeholder é uma dica temporária dentro do campo, que some assim que a pessoa começa a digitar. Usar placeholder no lugar do label é um erro bem comum, e que acaba quebrando a acessibilidade.

D

Em inglês

Placeholder

Pronúncia

pleis-rôu-der

Também chamado de

placeholder, texto de exemplo, conteúdo provisório

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre placeholders em formulários