Campos de formulário mais amigáveis ​​para inserir data / hora?

Definitivamente, concordo com Rahul, que depende do contexto. Um widget de calendário é super útil para voltar ou avançar alguns meses, mas não tão bom para escolher sua data de nascimento - isso seria um pesadelo!

Pessoalmente, eu odeio essas datas suspensas para escolher sua data de nascimento, pois elas costumam ser uma dor para atingir sua seleção de alvos, mas eu vi uma bem bacana recentemente no fluxo de inscrição no Kontain.com. Como você pode ver abaixo, eles colocaram as opções em uma tabela em vez de em uma lista (e fizeram o mesmo por dia e ano) e eu achei isso uma melhoria incrível. Yay!

Lembre-se de que a facilidade de uso é um produto do seu público e do domínio do seu aplicativo. Por exemplo, se você estiver criando um serviço como o Kayak, focará em usuários razoavelmente experientes em tecnologia que usarão muito os controles de data durante a experiência com seu aplicativo. Por outro lado, o Google e a Amazon têm públicos mais amplos e menos interações, portanto, têm prioridades diferentes.

Com isso em mente, aqui estão algumas considerações:

• Controle de calendário. Isso pode ser muito útil quando você deseja comunicar metadados adicionais sobre datas, horários ou períodos de tempo enquanto seleciona uma data. Por exemplo, em um site de viagens, um usuário pode selecionar uma data para reservar um hotel. Você pode usar o controle de calendário para indicar quais datas estão totalmente reservadas. Como o controle do calendário se compara mais com o primo do mundo real, o calendário, você está fazendo um favor aos usuários, trazendo interações com datas e horas para o modelo mental. No entanto, existem casos de uso em que os controles do calendário se tornam estranhos; como o controle é modelado para exibir um mês de cada vez, você está pressionando o controle para pular entre meses em (geralmente) setas ou menus suspensos novamente. Isso pode ser limitador se você estiver tentando dar ao usuário mais liberdade para escolher uma data.

• Menus suspensos. Frequentemente, você verá três em sequência: [Dia] [Mês] [Ano]. Eles funcionam bem quando um usuário está apenas selecionando uma data que já conhece com antecedência, como a data de nascimento. Eles não funcionam tão bem se você está pedindo ao usuário que repita uma tarefa que envolve datas, pois a maioria dos usuários usa o mouse e, portanto, precisa clicar uma vez em cada menu suspenso para abri-lo, uma vez em cada item para selecioná-lo e possivelmente role para cima e para baixo em uma lista longa (para datas de nascimento, não é incomum que o menu Ano comece em 1920 e termine em 2009). Lembre-se de levar isso em conta se escolher menus suspensos.

• campos de entrada de texto sem formatação. Como outros responderam, o interessante dos campos de entrada é que você pode aceitar praticamente qualquer coisa. Nesses casos, lembre-se dos princípios de design de formulário: não imponha a formatação do banco de dados/back-end ao usuário final. Tente ser o mais generoso possível ao aceitar o maior número possível de formatos. Use a validação do cliente para apontar problemas para o usuário antes que ele envie o formulário (as datas são muito fáceis de validar em Javascript, fornecendo a string que o usuário preencheu para a nova função Date () e verificando se você recebe uma data de volta).

Olhando além dos controles, considere alguns princípios de bom senso ao lidar com datas:

• Verifique se o usuário não cometeu um erro. Se você estiver projetando um site para adolescentes e alguém disser que nasceu em 1934, considere se isso deveria ser uma opção e, se deveria, verifique novamente com eles para ver se eles realmente têm 76 anos. Não para fins de validação de idade, mas como um serviço para o usuário. Da mesma forma, se você estiver criando um site de viagens, verifique se o usuário realmente pretendia reservar férias no Havaí em outubro de 2011, e não em outubro.

• Na maioria dos casos, seleções de tempo específicas não são necessárias e provavelmente não são mapeadas para o modelo mental do usuário. Ao planejar um evento, a granularidade máxima que você provavelmente precisará é em intervalos de 5 minutos. Ofereça um controle que permita aos usuários selecionar 12:00, 12:05, 12:10 etc. em vez de 60 opções para cada minuto. A granularidade que você decide pode ter um grande efeito na usabilidade do controle específico que você escolhe usar (como menus suspensos).

• Sempre olhe além dos controles padrão e entre no campo dos gráficos de informações como uma opção. Geralmente, essas tarefas serão complicadas e caras de implementar, mas podem valer a pena se a seleção de data/hora for um recurso essencial. Por exemplo, o hipmunk.com tem uma representação visual fantástica dos horários dos voos (lidos, não como entrada) que poderiam ser ainda melhores se fossem interativos. Nesses casos, lembre-se de considerar as expectativas do seu público.

Mantenha a forma livre de entrada de dados quando possível

Programadores são preguiçosos! Deixe o computador trabalhar um pouco e considere nem ter um campo de data específico para a entrada inicial da data. O Google Agenda, ao criar um novo evento, simplesmente permite que você diga:

• 4 de julho: jantar na casa de Joe

A GC então descobre tudo para você (incluindo onde) e, com base no local do seu perfil de usuário, será inteligente sobre o que significa 4/7: Dinner na casa de Joe. Para edição subseqüente, o controle de calendário do GC é agradável e fácil de usar. Considere o seguinte e quão fácil isso seria para os usuários:

1. próximo qui
2. em 4 horas
3. em 2 semanas

E ... CHOQUE HORROR o que acontece se o usuário não souber ?? Eu não vi isso muito, mas por que isso não é uma entrada de data aceitável para algumas circunstâncias:

• Em cerca de 3 dias

Eu sei que isso é assustador :) Mas Tog On Software Design , Bruce Tognazzini (autor original de Apple Human Interface Guidelines)) descreve a implementação da experiência do usuário é um pouco como uma mágica truque: 'uma ilusão': parece fácil, mas por baixo está acontecendo todo tipo de insanidade.

Gostaria que o software colocasse um lembrete automático 1d antes de dizer 'ei, agora você queria fazer outras coisas'

Além disso, use o contexto tanto quanto possível:

• antes do aniversário de Joe

... se você tiver contatos ou um gráfico social, será fácil descobrir isso; se não, pergunte.

Considere mais de um mês

Ao ter períodos, considere que os limites do mês são um aborrecimento real para as exibições de calendário que mostram apenas um mês. O iCal no Mac é elegante desta maneira, porque você pode mostrar qualquer número de meses para verificar facilmente o que significam as datas exatas de 'entre duas e três semanas a partir de agora'.

Normalmente, uso apenas uma caixa de texto comum e adiciono o Datepicker da interface do usuário do Jquery.

Quando o usuário focaliza a caixa de texto com uma guia ou clique ou o que for, o controle do calendário aparece temporariamente abaixo dela - sem perturbar a entrada de texto:

O usuário pode simplesmente digitar uma data em qualquer formato analisável ou usar o mouse com o pop-up do calendário. Selecionar uma data com o mouse simplesmente digita-a na caixa de texto no formato preferido do site para o usuário e fecha o pop-up.

Para entrada de tempo, encontrei algo semelhante feito por alguém que esqueci, mas com as (12 ou 24) horas aparecendo em um widget tabular, selecionando uma hora e, em seguida, aparece algumas opções de minutos, como 0, 15, 30 e 45. Como antes, apenas digitar o horário funciona muito bem, ignorando o pop-up.

Além disso, um controle de calendário pode ser ajustado para exibir mais de um mês por vez. Normalmente, eu mostro 2-3 meses um ao lado do outro - dependendo do contexto da data. A entrada de data no meu caso geralmente gira em torno do trimestre atual. Uma entrada na data de nascimento não funcionaria tão bem quanto alguém já apontou ^^

Uma alternativa comum a vários menus suspensos ou widgets é o texto de ajuda da formatação padrão. Às vezes, você o vê dentro do campo de texto como o valor padrão e, às vezes, à direita/abaixo do campo. O texto padrão diria algo como "MM/DD/AAAA" ou "dd-mm-aaaa". Aqui está um exemplo do formulário de inscrição do Google:

Isso fornece ao usuário controle total do que inserir e usa apenas um campo de texto. Uma desvantagem dessa abordagem é a necessidade de validação adicional do lado do cliente para garantir que eles sigam a convenção de data adequada.

A primeira pergunta é quantos campos de entrada de data você possui no aplicativo e com que frequência eles são usados.

Se você precisar digitar seu dia de nascimento quando se inscrever e for isso, bem, provavelmente não deve ser uma alta prioridade para você.

Mas se você tem muitas datas, há alguns pontos a serem considerados: ninguém mais falou ainda:

1. Você precisa cuidar do formato de data preferido do usuário (não estou nos EUA, quero que minhas datas estejam no formato DD/MM/AAAA, é difícil ler e escrever essas datas nos EUA com o mês no início. tipo).

2. Além disso, considere os outros controles em torno do campo de data, se for uma página criada para que o usuário interaja com ela com o mouse, você deverá ter um seletor de datas que possa ser usuário apenas com o mouse, por outro lado, se você tiver campos de texto por volta da data em que o usuário provavelmente está no "modo de digitação" e forçar a interação que requer o mouse (como vários menus suspensos) pode ser irritante.

E, finalmente, seus usuários não são meus, você deve testá-lo, fornecer a metade dos usuários um campo de texto e meio controle de calendário gráfico, medir quantos usuários preenchem cada formulário e quanto tempo leva em média cada grupo para preencher o formulário .

Se é importante o suficiente para ficar obcecado com isso aqui, é importante o suficiente para testá-lo.

Meus dois centavos: sou cego e acho que a melhor coisa é: caixa de combinação 3! Uma alternativa pode ser uma caixa de combinação 2 por meses e dias e um texto de entrada para o ano, mas você deve fazer um controle nesse campo ... Se eu pensar como programador, prefiro um único texto de entrada, mas se você acha que no seu site poderia ser um "usuário noob" Eu acho que a melhor coisa é a primeira opção :)

Quanto à velocidade e facilidade de uso, nada supera a entrada numérica simples, por ex. 21-09-201. Use um caixa de texto única mas (além do comum "/" e "-") também aceita tabulações para passar de um campo para o próximo 1. Pressionar "[tab]" deve inserir um separador. Como separador, prefiro o traço, porque ele separa os campos mais claramente.

Não force as pessoas a digitar zeros à esquerda.

Eu não usaria entrada de texto como meses abreviados como Bevan sugeriu, porque eles demoram mais para entrar. Além disso, como você abrevia? Três letras? Quatro? Como eu disse na minha resposta a Bevan, é especialmente ruim se você estiver trabalhando com uma audiência internacional; "Setembro" pode não ser "Setembro" no idioma do usuário.

Falando sobre o público internacional: nem todo mundo usa a ordem MM-DD-AAAA (de fato, fora dos EUA quase ninguém o faz). Você pode indicar o pedido necessário abaixo da caixa de texto. Uma maneira de evitar a ambiguidade de datas como 5-06-201 é usar o formato ISO 8601 AAAA-MM-DD.

Forneça uma entrada de texto onde o usuário possa digitar a data, juntamente com uma dica de qual formato ele pode usar, mas aceite qualquer formato inequívoco, independentemente dos separadores ou número de dígitos. Quando o usuário digitar algo diferente do formato padrão, atualize-o imediatamente para o formato padrão, para que ele veja exatamente como você está interpretando a data de maneira inequívoca. Adicionar um ícone de calendário para dar aos usuários que desejam uma opção de seleção de um calendário também é bom - os usuários que desejam digitar uma data não precisam usá-la.

Eu estava apenas fazendo uma pesquisa sobre isso. Os aplicativos de calendário são um bom lugar para começar. Meu layout favorito é a data com hora à direita. Não gosto do formato do Google Agenda Data - Hora - Hora - Data, mas o seletor de datas e o menu suspenso são executados com muita clareza.

(Não pude postar a imagem, mas incentivamos você a conferir)