Se um formulário pede uma data e os teus visitantes desistem em vez de a preencher, tens um problema no campo de data. Parece simples. Escolher uma data. Escrever uma hora. Mas pequenas escolhas de design sobre como pedes esses dados explicam uma quantidade surpreendente de abandono de formulários.
Os campos de data e hora parecem simples do ponto de vista de um designer. O desafio é que os visitantes interagem com eles de forma diferente, consoante a data que procuram, o dispositivo que usam e se precisam de percorrer meses ou escrever números. Acerta no desenho do campo e as pessoas avançam pelo formulário sem fricção. Erra e abandonam antes de tentarem.
Porque é que os campos de data e hora importam para a taxa de conclusão do teu formulário
Os campos de data são pontos de decisão. Um visitante que preenche um formulário de reservas precisa de escolher a data de uma marcação. Alguém que se inscreve num evento precisa de introduzir o ano de nascimento. Um cliente que configura uma encomenda recorrente precisa de escolher uma data de início. Em cada caso, o custo de interação desse único campo pode decidir se acabam ou se saem.
Pega na marcação de consultas. A investigação mostra que os seletores de data funcionam bem quando os visitantes escolhem datas num futuro próximo. Esse mesmo seletor de data torna-se uma frustração quando o visitante preenche a data de nascimento e precisa de recuar 40 anos. O modelo de interação que parece fácil para o mês que vem parece avariado para 1985.
Os campos de hora criam um problema semelhante. Um visitante que tenta marcar às 2:30 PM não devia precisar de tocar em listas pendentes para horas, minutos e AM/PM em separado. A forma como estruturas esses campos afeta diretamente se alguém faz a marcação ou fecha o navegador.
Campos de texto ou seletores de data: escolher a interação certa
A escolha entre um campo de texto e um seletor de data em calendário não é universal. Depende do tipo de data que estás a pedir.
Usa caixas de texto para datas muito distantes no passado ou no futuro
Quando alguém introduz a data de nascimento, procura uma data que pode estar 30, 40 ou 50 anos no passado. Um seletor de data em calendário obriga-o a clicar por dezenas de meses para lá chegar. Três caixas de texto separadas, com as etiquetas Dia, Mês e Ano, funcionam melhor. O visitante escreve depressa em cada campo, passando automaticamente de uma caixa para a seguinte. Oito a dez toques de teclado e está feito. Um seletor de data para a mesma ação exige muitos mais toques ou cliques.
Se usares uma única caixa de texto em vez de três separadas, mostra claramente o formato esperado com uma etiqueta como "MM/DD/YYYY" ou "DD/MM/YYYY", consoante a tua região. Não uses um placeholder que desaparece quando o utilizador clica. Uma etiqueta fica visível e diz-lhe o que queres.
Usa seletores de data para datas num futuro próximo
Um seletor de data em calendário faz sentido quando alguém marca uma consulta para a semana que vem ou escolhe uma data de viagem para o mês que vem. O seletor mostra o mês atual por predefinição e a pessoa clica ou toca na data que quer. A metáfora visual do calendário corresponde à forma como as pessoas já pensam no agendamento.
A regra essencial: define o calendário no mês atual para datas futuras. Não obrigues a clicar por meses para encontrar o certo. E se há datas indisponíveis, mostra no próprio seletor quais são. Datas a cinzento ou desativadas evitam a frustração de escolher uma data só para ver um erro de "não disponível" depois do envio.
Boas práticas para seletores de data: fazê-los funcionar para os teus visitantes
Um seletor de data só é tão útil quanto a forma como os visitantes conseguem interagir com ele. Regras que importam:
Suporta a introdução manual de texto ao lado do seletor
Nem toda a gente quer usar a interface do calendário. Alguns visitantes preferem escrever a data diretamente. Permite sempre a introdução por teclado. Se alguém escreve "3/15/2026", aceita sem o forçar a usar o seletor. Não exijas caracteres especiais. Aceita "3-15-2026" ou "3 15 2026" da mesma forma. Uma formatação flexível tira fricção.
Usa os tipos de campo HTML5 no telemóvel
Os dispositivos móveis têm seletores de data e de hora nativos incorporados no sistema operativo. Usa type="date" ou type="time" no campo do formulário HTML. Num telemóvel com iOS, isto ativa a roda de datas do iOS. No Android, mostra o seletor de datas da plataforma. Os visitantes esperam esta interação no telemóvel e o seletor nativo está otimizado para uso móvel.
Limita o intervalo de datas para evitar deslizes sem fim
Se pedes uma data futura, limita o seletor a mostrar meses nos próximos 2-3 anos, e não nos próximos 50. Se pedes uma data histórica, define um ponto de partida razoável. Para "data de nascimento", usa por predefinição 30 ou 50 anos atrás, e não 100 anos atrás.
Mostra contexto para as datas indisponíveis
Se algumas datas não podem ser escolhidas (porque esses horários já estão reservados ou porque o tempo impede o serviço), marca essas datas de forma diferente no seletor. Põe-nas a cinzento, desativa-as ou mostra um indicador visual. Isto evita o beco sem saída em que alguém escolhe uma data só para ver uma mensagem de erro a dizer que não está disponível.
Desenho do campo de hora: ajudar os visitantes a escolher o momento certo
Os campos de hora têm os seus próprios desafios. Um visitante que escolhe a hora de uma marcação não devia precisar de escolher horas, minutos e AM/PM em listas pendentes separadas. Combina-os de forma inteligente.
Oferece a hora em intervalos de 30 minutos
A maioria dos sistemas de agendamento não precisa de granularidade ao minuto. Intervalos de trinta minutos cobrem marcações, consultas e reservas. Oferece horas como 9:00 AM, 9:30 AM, 10:00 AM, e assim por diante. Isto reduz o número de opções sem perder funcionalidade.
Mostra a hora num formato que os visitantes já usam
Para públicos dos EUA, usa o formato de 12 horas com AM/PM. Para contextos internacionais ou agendamento por turnos, o formato de 24 horas pode fazer sentido. Sê consistente em todo o formulário. Nunca mudes de formato a meio de um único formulário.
Pré-seleciona uma hora predefinida ou mostra a hora atual
Um campo de hora nunca deve estar completamente vazio. Ou pré-selecionas uma hora de marcação comum (como 10:00 AM) ou mostras a hora atual. Isto dá aos visitantes um ponto de partida e mostra-lhes o formato que esperas.
Considerações para telemóvel nos campos de data e hora
Os formulários em telemóvel têm restrições diferentes das do computador. O espaço é limitado. As áreas de toque têm de ser maiores. Os teclados cobrem metade do ecrã.
Usa seletores nativos do telemóvel sempre que possível
Os campos de data e hora do HTML5 ativam o seletor do sistema operativo no telemóvel. Isto é mais rápido e mais familiar para os utilizadores do que um seletor personalizado que tu desenhes. A roda de datas do iOS e o seletor de datas do Android já estão otimizados para a interação móvel.
Faz as áreas de toque grandes o suficiente para tocar
Se construíres um seletor personalizado, garante que os botões e as datas têm pelo menos 44 píxeis por 44 píxeis. Os pequenos quadrados de calendário que funcionam bem no computador tornam-se impossíveis de tocar num telemóvel.
Evita o envio automático
Não envies automaticamente o formulário nem saltes para o campo seguinte no momento em que uma data é escolhida. Deixa os visitantes confirmar a escolha e avançar por conta própria. O envio automático pode prender os utilizadores numa data ou hora errada e frustrá-los.
Mensagens de erro e validação: guiar os utilizadores até à data certa
Mesmo com um bom design, os visitantes por vezes escolhem datas inválidas. Introduzem uma data de regresso antes da data de partida. Escolhem uma data que já está reservada. Escrevem "13/45" por engano. O teu tratamento de erros decide se corrigem o problema ou abandonam o formulário.
Valida em tempo real
Não esperes até o formulário ser enviado para dizer aos visitantes que a data está errada. Valida enquanto escrevem ou escolhem. Se alguém escolhe uma data de regresso antes da data de partida, diz-lhe logo. Se uma data está indisponível, avisa de imediato para poderem escolher outra.
Escreve mensagens de erro que expliquem o que correu mal
Um mau erro diz "Data inválida". Um erro útil diz "Introduz uma data no formato MM/DD/YYYY" ou "Essa data está indisponível. Escolhe outra."
Nomeia o problema específico e sugere a solução. A tua mensagem de erro não é um castigo. É uma orientação útil.
Evita seleções logicamente impossíveis
Se pedes uma data de partida e uma data de regresso, desativa as datas de regresso anteriores à data de partida escolhida. Se pedes uma marcação, desativa as datas que já estão totalmente reservadas. Torna as escolhas impossíveis indisponíveis, em vez de pedires aos visitantes que escolham e depois as rejeitares.
Padrões do mundo real: o que funciona em diferentes casos de uso
O melhor desenho do campo de data depende do tipo específico de formulário. Aqui ficam os padrões mais comuns.
Formulários de reservas e marcações
Usa um seletor de data em calendário. Define por predefinição o mês atual ou o próximo mês disponível. Mostra as datas indisponíveis. Aceita a introdução manual da data como alternativa.
Campos de data de nascimento
Usa três caixas de texto (Dia, Mês, Ano) ou um único campo de texto com formatação flexível. Evita seletores de data, porque a data fica tão atrás no passado que o seletor se torna difícil de usar.
Data de início de encomendas recorrentes ou subscrições
Usa um seletor de data simples, com a próxima data disponível por predefinição. A maioria dos visitantes aceita a predefinição ou escolhe uma data no mês seguinte.
Escolha da hora de um evento
Se o teu evento tem uma data fixa mas os visitantes escolhem um horário, usa um seletor de hora simples com intervalos de 30 minutos ou de uma hora. Mostra que horários estão disponíveis e quais estão cheios.