7

Placeholders estão presentes na maioria dos campos de entradas de texto de diversas aplicações. Mas, nem sempre observo um padrão ou até mesmo seu uso. Qual seria a melhor forma de aproveitar sua utilização, de forma gramatical e respeitando regras de User Experience?

Exemplos que geram dúvidas:

  • Qual termo correto para iniciar o texto: "Digite" ou "Insira"?
  • Quantidade de caracteres ou palavras?
  • O uso de reticências é aconselhado?
  • Qual tonalidade de cor utilizar?
1
  • acho que não existe um consenso sobre isso, o que tem nos exemplos especialmente, então sua pergunta seria meio baseada em opiniões, mas parece interessante o tema Commented 13/09/2021 às 13:56

4 Respostas 4

6

Heurísticas da usabilidade

Na área de UX, um dos nomes mais respeitados é do Jakob Nielsen, que escreveu as 10 heurísticas da experiência do usuário. Essas premissas são:

  1. Visibilidade do status do sistema
  2. Compatibilidade entre o sistema e o mundo real
  3. Controle e liberdade para o usuário
  4. Consistência e padronização
  5. Prevenção de erros
  6. Reconhecimento ao invés de memorização
  7. Eficiência e flexibilidade de uso
  8. Estética e design minimalista
  9. Ajude usuários a reconhecerem, diagnosticarem e recuperarem-se de erros
  10. Ajuda e documentação

É na hermenêutica dessas proposições que se aplica a boa UX nas diversas áreas da interação do usuário, como placeholders. É importante questionar cada componente em uma página, e sua importância, se é meramente estética ou de fato funcional. Por vezes a pura estética pode afetar a usabilidade, quando mal utilizada.

Não use um placeholder

O objetivo de um placeholder em um formulário é clarificar o que deve ser inserido em cada campo. Existem diversas formas de fazer isso, e usar um placeholder é uma delas. Segundo o Nielsen Norman Group, a agência referência de UX no mundo, testes com usuários mostram que placeholders mais atrapalham do que ajudam na usabilidade. Isso se dá pois geralmente os placeholders são usados para substituir labels, como no exemplo abaixo:

Os principais motivos pelos quais você não deveria fazer como no exemplo acima são:

  1. O placeholder some quando o texto é inserido, o que exige memória de curto prazo dos usuários
  2. Sem labels, o usuário não consegue conferir o formulário com o que escreveu
  3. Quando há um erro, o usuário não sabe qual é o campo para corrigir
  4. A cor padrão cinza dos placeholders tem pouco contraste nas cores de fundo mais comuns
  5. Usuários com problemas cognitivos ou motores tem mais dificuldade com placeholders
  6. Nem todos os leitores de tela sabem lidar com placeholders

Ainda segundo o Nielsen Norman Group, o melhor a se fazer é usar uma label e um hint, como no exemplo abaixo:

Os estudos de eye-tracking, que é observar o movimento dos olhos do usuário no design de interação, mostram que campos que tem coisas preenchidas (como um placeholder), são menos vistos pelos usuários.

Ainda quero usar placeholders

Se ainda sim você queira usar placeholders, mesmo com os motivos acima, vou responder às perguntas:

Para estar mais próximo do mundo real, e do que o usuário vai realmente fazer, usaria os verbos "digite" ou "escreva". A quantidade de caracteres respeitando o tamanho do campo no menor dispositivo, por exemplo, um celular. O uso de reticências pode indicar um truncamento, portanto, não vejo motivo para usá-lo. A tonalidade da cor deve ter um contraste com a cor de fundo do campo, então usaria um Contrast Checker, como esse.

Por fim, conduza seu estudo

O mais interessante do design de interação, é ver como seu público se comporta com diferentes versões da sua página. Conduza um teste A/B com placeholders, hints, labels e combinações para medir:

  1. Tempo que os usuários levam para completar o formulário
  2. Taxa de erros de validação
  3. Mapas de calor para ver onde os usuários se perdem (ou se acham) com o mouse
  4. E mais importante, a medida-chave do seu produto, como a taxa de conversão para um e-commerce
5

Basicamente vc tem que se focar no contexto de uso e na sua persona. Vc está fazendo algo super inclusivo e acessível para um site do Governo por exemplo, ou é apenas um "sisteminha" interno para o backoffice da sua empresa? Digo isso, pois são fatores que vão influenciar no "tom de voz" do texto, essas são técnicas normalmente aplicadas pelo UX Writing.

Então se vc vai fazer um formulário para todo tipo de público, o texto deve ser inclusivo, sem termos técnicos ou em inglês, deve ter um font-size de 16px, e um contraste que atenda as normas da WCAG https://www.w3.org/WAI/standards-guidelines/wcag/

O HTML5, por padrão, já possui alguns "placeholders nativos" aplicados pelo user-agent que ajudam ao usuário a identificar como deve ser o conteúdo digitado no campo. Dica do @woss :)

inserir a descrição da imagem aqui

https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types


Qual termo correto para iniciar o texto: "Digite ou Insira"?

Depende. Nesse ponto o indicado é vc manter uma consistência, então se vc optar por usar "Digite", evite colocar o termo "Insira" em outros lugares.

Quantidade de caracteres ou palavras?

O texto deve ser instrutivo e objetivo. Se necessário vc pode sugerir um exemplo de texto de preenchimento. Ex:

inserir a descrição da imagem aqui

Evite usar o mesmo texto da Label como texto do Input. Ex:

inserir a descrição da imagem aqui

Evite tb campos de input sem uma label. Isso além de prejudicar a acessibilidade, tb pode confundir o usuário, pois a informação de preenchimento pode sumir no momento que o usuário faz o :focus ou começa a difitar.

inserir a descrição da imagem aqui

O uso de reticências é aconselhado?

Eu não indicaria. Os ... poda dar a entender que o texto está truncado, e parte dele não está exibido. Não vejo motivos para usar ... em um texto de placeholder.

Qual tonalidade de cor utilizar?

Qualquer uma que faça sentido com o seu style guide, mas que tenha um mínimo de contraste. O próprio DevTools tem ferramentas para verificar isso. E só lembrando que para trocar a cor do placeholder se usa a pseudo classe ::placeholder no CSS.

inserir a descrição da imagem aqui


Aqui tem um artigo do NN que pode te interessar:

https://www.nngroup.com/articles/form-design-placeholders/

3
  • 1
    +1 centavo: eu diria que as reticências poderia ter utilizada no placeholder de um <textarea>, dependendo de qual valor é esperado, para que o próprio valor do placeholder não fique extenso, mesmo mantendo a ideia de que o conteúdo do campo poderá ser extenso. "Como foram as suas férias?" poderia ter um placeholder como "Nas minhas férias eu viajei com minha família e..."
    – Woss
    Commented 13/09/2021 às 14:05
  • 1
    +1 centavo: acho válido citar casos em que o placeholder pode ser utilizado para reafirmar a formação de um campo, seja por utilização de separadores, como data, seja pela quantidade de dígitos, como o ano, que poderia ser 2 ou 4 dígitos, ou mesmo sobre a unidade utilizada, como uma altura que poderia ser em metros ou centímetros.
    – Woss
    Commented 13/09/2021 às 14:08
  • @Woss sim, acho que seria legal mesmo trazer uns exemplos de "placeholders" nativos. A maioria dos input type apresentam uma formatação pré-definida pelo user-agente justamente para indicar como deve ser o preenchimento. ;)
    – hugocsl
    Commented 13/09/2021 às 14:43
0

O #Placeholders é texto que será exibido como ajuda para o usuário, se a identificação do campo estiver bem definida, por exemplo: Nome ou Primeiro Nome, não faz muito sentido esse mesmo argumento ser usado como ajuda na caixa de texto. Do meu ponto de vista, será mais coerente você exibir para o usuário um exemplo do que deverá conter ali dentro, ex.:

<...>

<input id="firstNome" name="firstNome" type="text" placeholder="Ex.: Maurício"/>
        
<input id="lastNome" name="lastNome" type="text" placeholder="Ex.: Souza da Silva"/>
    
<...>

Dito isso, desconheço uma regra, além do bom senso de utilização, que seja imposta ao uso desse marcador.

Como dica, seja claro e objetivo, o placeholder é uma "ajuda", tenha em mente que ela deve ser breve e direta ao ponto.

-5

Pense como um usuário, pra você seria mais lógico [ DIGITE SEU NOME] ou [INSIRA SEU NOME] ?

Você pode deixar algo mais amigável, usando linguagens pessoais e não "ROBOTIZADAS" eu uso isso:

Ex: Campo Nome: "Seu Nome" Campo idade: "Sua Idade" Campo Endereço: "Seu Endereço"

Fica muito mais simples e mais fácil de entender...

você pode ver esse conteúdo também: https://kevinoliveira.com.br/blog/input-boas-praticas/

1
  • As it’s currently written, your answer is unclear. Please editar to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Comunidade Bot
    Commented 13/09/2021 às 13:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .