Olá desenvolvedores, hoje iremos falar sobre o placeholder e sua importância em uma aplicação. Depois de uma sequência de tutoriais que nos exigiu foco e concentração extremas, nada como a leveza do HTML. Mas não se engane, o assunto embora leve, é também importante. E você já saberá o porquê.

O placeholder é um atributo do HTML que cumpre a função de fornecer ao usuário uma dica que descreve o valor esperado em um dado campo de entrada. Esta dica deverá ser apresentada ao usuário antes que ele entre com o valor e deverá ainda, ser curta e objetiva. E agora você deve estar querendo saber quais campos podem receber o placeholder? São eles, o texto, pesquisa, url, telefone, e-mail e senha.

IMPORTÂNCIA DO PLACEHOLDER

Mas porque uma simples dica é tão importante? Bom para responder a essa pergunta vamos começar distinguindo-o do label.

O placeholder é um atributo de grande ajuda em formulários, por favor, não o utilize para substituir o label, uma vez que este é utilizado como um rótulo para um campo de um formulário. O placeholder deve ser entendido como complementar ao label. É considerada uma má prática utilizá-lo no lugar do label, visto que pode acarretar em problemas de acessibilidade, pois alguns leitores de tela podem não apresentar a informação corretamente.

O comportamento padrão do placeholder é desaparecer assim que o usuário começa a digitar no campo. Em alguns casos isso pode confundir o usuário, se a única informação sobre o que deve ser preenchido no campo é o placeholder. Por algum motivo ele pode esquecer o que deveria inserir no campo. Assim, junto ao placeholder recomenda-se utilizar também o label.

Arrisco a dizer que o placeholder tem em um sistema a mesma importância do feedback para o usuário.  A simplicidade, a praticidade e a objetividade juntamente com uma boa experiência de navegação, são elementos essenciais em um sistema. E para conseguir tudo isso é preciso estar atento aos detalhes, por menor que ele seja, por mais insignificante que ele pareça.

E como mencionado em “PROJETO JSP: ADICIONANDO ÍCONES” quando adicionávamos ícones em nosso sistema, “para desenvolver uma aplicação é preciso levar em consideração como o usuário irá interagir com ela e como facilitar essa interação. Assim como em que tipo de experiência ele terá ao interagir com o seu sistema”.

ADICONANDO PLACEHOLDER

Tendo deixado claro a importância e o porquê de utilizarmos os placeholders, vamos ao nosso projeto para verificarmos onde podemos torná-lo mais amigável para o usuário adicionando essas dicas.

A título de exemplo no HTML da página cadastroUsuario.jsp, insira por exemplo, no campo de nomes o atributo como exemplificado na imagem.

E este procedimento deverá ser repetido para todos os campos, se estes forem ou de texto, pesquisa, url, telefone, e-mail ou senha. Veja abaixo o exemplo de como fica a interface para o usuário.

EM POUCAS PALAVRAS

E assim um simples placeholder nos ensinou um pouco mais sobre desenvolver pensando no usuário. Sobre não apenas pensar em uma solução, mas na melhor solução que irá exigir menos do usuário e entregar mais. São detalhes que talvez o usuário nem perceberá a presença, mas a ausência será com certeza sentida. Eu fico por aqui e nós nos vemos no próximo tutorial.