Olá, Web Developers!
Há um bom tempo que temos visto formulários com labels flutuantes em vários lugares. A ideia era de trazer algo diferente e melhorar a experiência do usuário. Será que melhorou mesmo?
Curso
UX/UI - Introdução
Conhecer o curso
Nesse artigo eu vou listar as vantagens e as desvantagens que considero pertinentes.
Vantagens
Algumas das vantagens de utilizá-los:
Os formulários ficam menores:
Nós enxergamos os elementos no navegador por blocos. Na imagem abaixo, enxergamos quatro blocos: dois labels e dois inputs.
Já na imagem abaixo, percebemos apenas dois blocos. Isso passa a impressão de um formulário menor.
Já foram realizados testes com esses estilos de formulários e, no segundo estilo, os usuários realmente pensaram estar preenchendo um formulário com metade do número de campos.
Sem problemas com alinhamento:
Essa não é uma vantagem tão grande. Qualquer CSS bem feito resolve.
Mas, realmente, não precisamos ficar nos preocupando com o alinhamento dos elementos e labels, o que já dá uma pequena facilitada.
Separação entre campos:
Quando temos campos como os da imagem abaixo, precisamos dar um espaço em branco ou separar com uma linha para que o usuário saiba qual campo determinado label pertence.
Nesta imagem sabemos que senha pertence ao campo de baixo porque temos apenas dois campos. Agora, já imaginou um formulário maior? É preciso deixar um espaço bom para podermos perceber melhor a separação e agrupamento de elementos.
Já na imagem abaixo, não precisamos nos preocupar com separação e agrupamento. Mesmo que a gente diminua os espaços entre os inputs, saberemos qual input cada label pertence.
Leitura mais rápida:
Como o label estará dentro dos inputs, e também poderemos diminuir os espaços em branco, como visto no item anterior, a leitura será mais rápida. Isso porque os olhos do usuário precisam passar pelas linhas em branco e pensar na ligação entre elementos quando eles estão separados.
Desvantagens
Agora eu listarei algumas desvantagens.
Nada de labels compridos!
Você tem que pensar bem no que escrever no label para que ele seja bem curto e direto. Do contrário, seu texto pode acabar sendo cortado em dispositivos com telas menores.
No exemplo acima, ao invés de Há quanto tempo trabalha com desenvolvimento?, poderíamos escrever algo como Tempo de experiência, mas nem sempre vamos conseguir deixar claro o que queremos.
Campos preenchidos podem dificultar a leitura:
Quando preenchemos um campo, o label diminui de tamanho, dando espaço ao valor preenchido.
Dependendo do novo tamanho da fonte do label, pode dificultar a leitura, caso o usuário queira revisar os campos do formulário. Lembre-se que podemos ter usuário com problemas de visão usando dispositivos com telas pequenas.
Formação
Desenvolvedor PHP Júnior
Conhecer a formação
Labels dentro do input podem ser confundidos com campos preenchidos:
Sim, isso é um problema que também pode acontecer com placeholders. O usuário pode simplesmente passar o olho e pensar que aquele campo já está preenchido.
Mesmo que a gente os deixe com uma cor diferente, é sempre bom considerar essa possibilidade, ademais, diferentes usuários, diferentes formas de visualizar e entender o contexto.
Sem consistência de localização:
Não temos uma consistência de localização dos labels quando precisamos de campos que não sejam de texto, como combo boxes, radio buttons e checkboxes.
Concluindo
E você? Usa em seus formulários? É a favor ou contra? Compartilhe com a gente aí nos comentários! :)
