O teu visitante percorre o formulário em dois segundos, antes de escrever um único carácter. Lê o tamanho dos campos, o espaçamento, a disposição. Um campo de código postal tão largo como o formulário inteiro grita confusão. Uma área de texto de uma só linha para feedback detalhado passa a mensagem de que não esperas grande coisa.
A largura do teu campo diz ao utilizador quanto texto esperas que ele escreva. Uma caixa de texto minúscula sinaliza "dá-me o teu nome". Uma área de texto alta sinaliza "conta-me a tua história". Se errares isto, estás a pedir confusão, esforço de escrita e abandono do formulário.
O teu formulário tem dois tipos de campos de texto: o campo de uma linha e a área de texto de várias linhas. Parecem diferentes, comportam-se de forma diferente e resolvem problemas diferentes. Escolher o certo não é complicado, mas conta para a forma como os utilizadores veem o teu formulário e para o preencherem ou não.
O que é um campo de texto
Um campo de texto é uma caixa de uma linha onde os utilizadores escrevem texto curto. Não passa para uma nova linha quando chegas ao limite. Não suporta vários parágrafos. Carregas em Enter e o formulário envia (ou passa ao campo seguinte). Foi pensado para dados curtos e limitados.
Um campo de texto impõe um contrato mental com o utilizador. Estás a pedir algo rápido. Um nome. Um email. Um código postal. Uma data. Uma única informação.
O que é uma área de texto
Uma área de texto é uma caixa de texto de várias linhas que se expande à medida que os utilizadores escrevem. Carregas em Enter e tens uma nova linha de texto. Desliza na vertical quando o conteúdo excede a área visível. Sinaliza ao utilizador que esperas mais do que algumas palavras. Aqui, os parágrafos são bem-vindos. Esperam-se ideias detalhadas.
Uma área de texto remove a restrição. O utilizador sabe que pode escrever o que precisar, sem espremer a resposta numa única linha.
Quando usar um campo de texto de uma linha
Usa um campo de texto quando a resposta esperada cabe numa linha e o utilizador pode responder em poucas palavras ou menos.
Informações de contacto
Nome, email, número de telefone. Estes campos são sempre campos de uma linha. O utilizador espera escrever um nome e seguir em frente, e não abrir um editor de texto para o número de telefone.
Identificadores curtos
Nome de utilizador, número de conta, código postal, palavra-passe. Estes têm comprimentos definidos ou espera-se que sejam breves. Um campo de uma linha faz sentido.
Campos de localização e logística
Cidade, distrito, país, rua (primeira linha). São normalmente entradas de uma linha. Podes dividir a morada em vários campos de uma linha em vez de uma área de texto grande.
Pesquisa e filtros
Caixas de pesquisa. Filtros de produtos. Intervalos de datas. Estes esperam uma introdução rápida, e não um parágrafo. Os campos de uma linha parecem certos.
Datas e números
Qualquer campo em que o utilizador introduz uma data, hora, quantidade ou preço específicos. Campo de uma linha. Por vezes queres um tipo de campo especializado para datas (como um seletor de datas), mas o modelo de interação continua a ser de uma linha.
Quando usar uma área de texto
Usa uma área de texto quando esperas que o utilizador escreva mais de uma frase ou quando a resposta é naturalmente mais comprida do que uma linha.
Comentários e feedback
Se perguntas "Que feedback tens?", o utilizador está a pensar em parágrafos, e não em palavras soltas. Uma área de texto sinaliza que há espaço para a ideia completa. Não vai sentir-se apertado.
Formulários de mensagem e de pedido de informação
Quando um visitante preenche um formulário de contacto com um campo de mensagem, precisa de espaço para explicar a situação. A quantidade de texto varia muito. Uma área de texto acomoda tanto uma pergunta rápida de duas frases como um pedido detalhado de dois parágrafos.
Campos de descrição e detalhes
Descrições de produtos, resumos de projetos, requisitos de serviços. Qualquer campo que peça ao utilizador contexto ou detalhe. Uma área de texto convida a esse detalhe.
Notas e instruções especiais
Um campo que diz "Acrescenta pedidos especiais" ou "Notas para a entrega" precisa muitas vezes de uma área de texto, porque não consegues prever se o utilizador tem duas palavras ou dois parágrafos para acrescentar.
O princípio do tamanho: a largura do campo sugere o comprimento esperado
O tamanho do teu campo envia uma mensagem antes de o utilizador escrever um único carácter. Um campo de código postal que ocupa a largura toda do formulário cria confusão. O utilizador vê todo aquele espaço e pensa "percebi mal o que me estão a pedir?"
Usa esta regra: o tamanho visual do campo deve corresponder ao comprimento esperado da resposta.
Campos de texto curtos
Para um código postal, faz o campo estreito. Talvez 80 a 120 píxeis de largura no computador. Esta pista visual diz ao utilizador "escreve cinco dígitos, e não um parágrafo".
Para um campo de nome, usa uma largura média. Talvez 200 a 300 píxeis. Comprido o suficiente para "Alexander Thompson", mas não tão largo que convide a uma biografia.
Áreas de texto
As áreas de texto expandem-se na horizontal e na vertical. Uma área de texto com quatro linhas de altura sinaliza uma resposta maior do que uma com duas linhas de altura. Faz a tua área de texto corresponder ao esforço esperado.
Se esperas algumas frases, começa com três a cinco linhas visíveis. Se pedes feedback detalhado, começa com seis a oito linhas. Os utilizadores podem redimensionar o campo se precisarem de mais espaço, mas o tamanho inicial define a expectativa.
Regras de design para campos de texto
Junta sempre uma etiqueta
Nunca uses texto de placeholder como substituto de uma etiqueta visível. O placeholder desaparece quando o utilizador começa a escrever, prejudica a acessibilidade e deixa-o a adivinhar o que o campo queria. Usa uma etiqueta clara por cima ou ao lado do campo e usa o placeholder apenas como dica suave.
Mau exemplo: um campo sem etiqueta, só com texto cinzento de placeholder a dizer "Escreve o teu nome".
Bom exemplo: uma etiqueta que diz "Nome" por cima do campo, com um placeholder opcional como "John Doe".
Sinaliza claramente os campos obrigatórios
Marca os campos obrigatórios com um asterisco (*) ou com a palavra "(obrigatório)" entre parênteses. Não deixes os utilizadores a adivinhar se um campo é opcional.
Valida cedo, recupera com elegância
Se um utilizador introduz um endereço de email inválido ou um número de telefone mal formatado, não apagues o que escreveu. Mostra uma mensagem de erro que explique o problema de forma específica e mantém o que já escreveu, para poder corrigir em vez de escrever tudo de novo.
Suporta o tipo de entrada esperado
Para email, usa type="email" para os utilizadores de telemóvel terem um teclado otimizado para email. Para telefone, usa type="tel". Para números, usa type="number". Estes tipos de campo especializados melhoram a experiência no telemóvel sem te darem trabalho extra.
Regras de design para áreas de texto
Deixa a área de texto crescer com o conteúdo
Se um utilizador está a escrever uma mensagem longa e a área de texto continua com tamanho fixo, tem de deslizar dentro do campo enquanto escreve. Isto estraga a experiência de escrita. Usa CSS ou JavaScript para a área de texto se expandir automaticamente à medida que o utilizador acrescenta linhas. Escreve com naturalidade, o campo cresce e não há deslizes dentro do próprio campo.
Mostra claramente o tamanho inicial
Uma área de texto deve ter altura visível suficiente para sinalizar que esperas mais do que uma linha. Mostra pelo menos três a cinco linhas de espaço vazio para os utilizadores perceberem que não é uma resposta de uma linha.
Define um limite razoável de caracteres, se for preciso
Algumas áreas de texto têm limites. Um formulário de apoio ao cliente pode limitar o feedback a 5000 caracteres. Se tens um limite, mostra a contagem de caracteres restantes enquanto o utilizador escreve. Deixa-o ver quanto espaço lhe resta, sem o descobrir quando bate na parede.
Usa uma fonte monoespaçada para código ou texto técnico
Se a área de texto é para excertos de código ou dados técnicos, usa uma fonte monoespaçada para o espaçamento e o alinhamento contarem visualmente. Para texto normal, como mensagens ou feedback, usa a fonte sem serifa predefinida que combina com a tua marca.
Erros comuns nos campos de texto
Dar a todos os campos de texto a mesma largura
Se todos os campos do teu formulário têm a mesma largura, perdes a pista visual sobre o comprimento esperado. Um campo de código postal não deve ser tão largo como um campo de nome. Deixa o tamanho comunicar a expectativa.
Usar placeholder em vez de etiquetas
Isto já foi referido acima, mas é crítico. O texto de placeholder ajuda como dica, e não como etiqueta. Um utilizador com leitor de ecrã não vai ver o placeholder. Um utilizador que preencheu alguns campos e voltou atrás vai esquecer-se do que o campo queria.
Não mostrar os erros de validação no contexto
Se o utilizador escreve um email inválido e a mensagem de erro aparece no topo do formulário enquanto o campo de email está em baixo, tem de deslizar para encontrar o problema. Mantém as mensagens de erro perto do campo que as causou, a cores (vermelho ou laranja) e com um ícone que sinalize "algo está errado".
Não permitir desfazer ao limpar
Se o utilizador limpa um campo por engano ou se o formulário tem um botão "Limpar" que apaga tudo, garante que pode desfazer essa ação. Um único toque num botão não deve destruir cinco minutos de preenchimento do formulário.
Erros comuns nas áreas de texto
Áreas de texto de tamanho fixo que não se expandem
Uma área de texto que mantém o mesmo tamanho enquanto o conteúdo transborda e exige deslizar obriga o utilizador a escrever numa janela minúscula. A experiência parece avariada. Faz a área de texto expandir-se com o conteúdo.
Sem indicação clara de um limite de caracteres
Se a tua área de texto tem um comprimento máximo, o utilizador deve saber antes de o atingir. Mostra um contador de caracteres que se atualiza enquanto escreve. "500 caracteres restantes" ou "2 de 5000 caracteres" diz-lhe de imediato quanto espaço tem.
Começar demasiado pequena
Uma área de texto com apenas uma linha de altura não comunica "quero o teu feedback detalhado". Parece ainda um campo de uma linha. Começa com pelo menos três a quatro linhas visíveis para o utilizador perceber que pode escrever mais.
Exemplos: campo de texto ou área de texto em contexto
Um formulário de contacto
Campo de nome: campo de texto de uma linha. Largo o suficiente para um nome comprido, mas estreito o suficiente para sinalizar "só o teu nome".
Campo de email: campo de texto de uma linha com type="email".
Campo de telefone: campo de texto de uma linha com type="tel".
Campo de mensagem: área de texto, alta o suficiente para alguns parágrafos.
Um formulário de opinião sobre um produto
O teu nome: campo de uma linha.
O teu email: campo de uma linha com type="email".
Avaliação (1 a 5 estrelas): um tipo de campo especializado, mas não uma área de texto.
A tua opinião: área de texto.
Recomendaria a outras pessoas: uma caixa de seleção, e não um campo de texto.
Um formulário de checkout
Nome próprio, apelido, email, telefone: todos campos de uma linha.
Morada de envio (rua, cidade, distrito, código postal): normalmente vários campos de uma linha, e não uma área de texto para a morada completa.
Instruções especiais de entrega: área de texto. O utilizador pode ter uma frase ou três frases, consoante as suas necessidades.
Formulários WEMASY: criar campos de texto e áreas de texto
O criador de formulários do WEMASY inclui campos de texto e áreas de texto. Quando acrescentas um campo ao formulário, escolhes o tipo de campo consoante o que estás a pedir.
Num formulário de contacto no WEMASY, acrescentarias um campo de texto para o nome e o email do visitante e depois uma área de texto para a mensagem. O WEMASY trata automaticamente do estilo para que os teus campos de texto e áreas de texto combinem com as cores e a tipografia da tua marca. Tu focas-te em fazer as perguntas certas. O criador de formulários trata da disposição e do comportamento dos campos.
Se precisares de um tipo de campo especializado (como um seletor de datas ou validação de email), o WEMASY também o suporta. O tamanho, o comportamento e a validação do campo trabalham em conjunto para guiar o utilizador até à conclusão.