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.