Campos de Texto (Input) em UI Design

Introdução

Não existe uma regra rígida sobre onde utilizá-los, pois são necessários em quase todas as interações que exigem dados do usuário, tais como:

• Páginas de login e cadastro (signup);

• Campos de busca;

• Inserção de datas, valores numéricos ou textos extensos.

Anatomia

Um campo de texto bem projetado é composto por vários elementos, alguns obrigatórios e outros opcionais, que auxiliam na clareza e usabilidade:

1. Container: O espaço físico que delimita onde o texto será inserido.

2. Label (Rótulo): Identifica o que deve ser digitado. É crucial em formulários longos para que o usuário não esqueça o propósito do campo após começar a escrever.

3. Placeholder: Texto temporário que indica o tipo de informação esperada (ex: "exemplo@email.com").

4. Leading Icon: Ícone à esquerda, usado para indicar a intenção do campo (ex: uma lupa para busca).

5. Trailing Icon: Ícone à direita, geralmente usado para ações como limpar o campo ou alternar a visibilidade de uma senha.

6. Supporting Text (Texto de Apoio): Fornece instruções específicas, como requisitos de caracteres para senhas, ou exibe mensagens de erro.

7. Input Text e Carrot (Caret): O texto digitado pelo usuário e a barra pulsante que indica a posição atual da digitação.

Estados

Para uma boa experiência do usuário (UX), o campo de texto deve reagir visualmente às interações. Os principais estados são:

1. Default (Padrão): O estado inicial e inativo do campo.

2. Hover: Quando o usuário passa o mouse sobre o campo, geralmente indicado por uma mudança na cor da borda.

3. Focus (Ativo): Quando o campo está pronto para receber digitação. É vital que este estado seja visualmente distinto (com bordas coloridas ou sombras) para auxiliar na acessibilidade, especialmente para quem navega via teclado.

4. Disabled (Desativado): O campo fica acinzentado e não permite interação, geralmente por alguma condição não atendida.

5. Error (Erro): Indicado geralmente pela cor vermelha e, idealmente, acompanhado de um ícone, garantindo que pessoas com deficiências visuais (como daltonismo) identifiquem o problema.

Variações

Os campos de texto podem variar conforme a necessidade do sistema:

• Prefixos e Sufixos: Informações fixas que não mudam (ex: "R$" ou ".com").

• Máscaras de Senha: Ocultam os caracteres digitados por segurança.

• Text Area: Campos expansíveis para textos longos.

• Tags/Tokens: Quando o sistema transforma uma entrada (como um e-mail) em um bloco visual após o "Enter".

Diferentes empresas adotam estilos variados: o Notion utiliza labels claros; a Superlist integra botões de ação dentro do próprio input; e o Material Design da Google popularizou o "floating label", onde o placeholder se transforma em um rótulo menor ao ser clicado.