Boas práticas para inputs de texto
Inputs de texto são componentes fundamentais na interação do usuário com a interface, por isso é importante construirmos da melhor forma.
Trabalhar com UI Design é pensar em todos os detalhes e em todas as interações do usuário com os componentes de nossa interface. Seja essa interface um site ou uma aplicação, quase sempre teremos campos de texto (inputs) onde os usuários passarão mensagens e/ou informações que necessitam de validação, e pensar em como esses campos serão construídos e interagirão com as informações ali passadas são importantíssimos para uma boa experiência.
E neste post vou tentar descontruir um input de texto para que fique mais fácil e claro o entendimento do conceito de um dos componentes mais importantes de uma interface, se não for o mais importante.
Descreva o input
Seja transparente com o usuário mostrando e dizendo o que aquele input faz realmente, seja claro e sem complicações. Uma imagem no campo para ilustrar e a propriedade placeholder
, no HTML, fará o usuário ter mais confiança no input em que ele está digitando.
See the Pen Input #1: Placeholder by Kevin Oliveira (@kvnol) on CodePen.
Tamanhos
Pensar no tamanho (largura/altura) de um input é importantíssimo, pois facilita a compreensão do conteúdo que ali será inserido, por parte do usuário, e não ocupa espaço desnecessário em sua interface. E, para ajudar nisso, a unidade de medida ch
deixa o espaço no seu input com base no font-size
que foi determinado no último escopo.
See the Pen Input #1: Sizes by Kevin Oliveira (@kvnol) on CodePen.
No exemplo acima, o input CVC (código de segurança) tem por padrão 3 caracteres e nada nos impede de determinar essa largura diretamente no CSS.
:focus
no input é importante
É comum vermos inputs com a propriedade outline
desabilitada quando o input está selecionado, muitas vezes pelo outline padrão do browser não possuir/combinar a mesma identidade visual da sua interface.
A propriedade outline
é importante para marcar visualmente seu input selecionado e assim, melhorar a acessibilidade de sua interface.
See the Pen Input #3: outline focus by Kevin Oliveira (@kvnol) on CodePen.
Pontos de toque
No design responsivo, o ponto de toque é extremamente importante, pensando tanto na altura do input quanto na altura da linha que distancia um input para o outro (como no exemplo abaixo). O ponto de toque ideal para mobile é de, pelo menos, 48 pixels de altura/largura, segundo a pesquisa da Google.
See the Pen Input #4: Pontos de toque by Kevin Oliveira (@kvnol) on CodePen.
Para finalizar, é importantíssimo pensarmos na acessibilidade e usabilidade antes mesmo do design ao construírmos inputs, sem muita viagem, pois eles são peças fundamentais que ligam o usuário à nossa interface.