Qual é a melhor IU para inserir a data de nascimento? [fechadas]

Qual é o melhor método para selecionar a data de nascimento?

• 3 entradas de texto (mês / dia / ano) ou uma entrada de máscara. O usuário DEVE usar o teclado
• 3 caixas de seleção. O usuário pode usar teclado ou mouse.
• Um bom selecionador de datas .

Eu quero saber qual é a solução mais utilizável e livre de problemas, para que o usuário não fique confuso.

Para um usuário avançado, a entrada de texto é o melhor, se o usuário souber o formato da data, é muito rápido. Para um usuário não tão avançado, sugiro usar um selecionador de data. Como normalmente você também tem usuários avançados e não avançados, sugiro uma combinação de entrada de texto e selecionador de data.

Se seu objetivo é garantir que "o usuário não fique confuso", acho que essa é a melhor opção.

Eu não recomendaria um selecionador de data para data de nascimento . Primeiro você deve navegar até o ano (clique, clique, clique ...), depois para o mês (clique mais alguns) e, em seguida, localize e clique no pequeno número em uma grade.

Os selecionadores de data são úteis quando você não sabe a data exata de início, por exemplo, se você está planejando uma viagem para a segunda semana de fevereiro.

Embora esta seja uma questão muito antiga, é muito importante para obter uma entrada correta da data de nascimento, especialmente em um formulário de registro.

Acho que ninguém fez isso melhor do que as contas do Google se inscreverem:

Selecione o mês primeiro em uma caixa de seleção e digite manualmente a data e o ano. Simples.

Fácil de validar. Fácil para os usuários acertarem. Não é preciso rolar para trás os anos em uma caixa de seleção de 1900 até o ano atual. Não há necessidade de atualizar uma caixa de seleção de 'dia' com base na entrada do mês. Funciona muito bem na web. Funciona muito bem no celular. Funciona para todos os locais, por exemplo, 01/10/2014 - é 1º de outubro ou 10 de janeiro? Espero que veremos esse formato de seletor de aniversário com muito mais frequência no futuro.

Um selecionador de data é apenas uma solução ruim para todos. Muitos cliques! Na minha opinião, um selecionador de data só é útil quando saber o dia da semana é importante, por exemplo, reservar bilhetes.

Atualização 2/6/2016: Sou do Reino Unido, portanto estou mais familiarizado com os formatos de dia / mês / ano, em vez de mês / dia / ano. Porém, para os usuários que usarão o cursor para selecionar o mês, acredito que seja muito mais fácil selecionar primeiro a caixa do que inserir> selecionar caixa> inserir. A data do comentário é 2 de junho, não 6 de fevereiro;)

Conforme mencionado neste artigo de Jakob Nielsen , as listas suspensas devem ser evitadas para dados que são bem conhecidos do usuário :

Menus de dados conhecidos dos usuários, como mês e ano de nascimento. Essas informações são frequentemente conectadas aos dedos dos usuários e ter que selecionar essas opções em um menu quebra o paradigma padrão para inserir informações e pode até mesmo criar mais trabalho para os usuários.

A solução ideal é provavelmente algo assim:

• Fornece 3 caixas de texto separadas para dia, mês e ano (rotuladas apropriadamente)
• Classifique as caixas de texto de acordo com a cultura do usuário.
• As caixas de texto de dia e mês devem ser dimensionadas de forma que uma entrada de 2 dígitos seja assumida.
• A caixa de texto do ano deve ser dimensionada de forma que um ano de 4 dígitos seja assumido.
• Permita que o usuário insira um ano de 2 ou 4 dígitos. Suponha que um ano de 2 dígitos seja 1900 e atualize a caixa de texto para refletir isso no Blur (ou em uma etapa de confirmação seguinte).
• Permite que o usuário insira um número de mês OU nome de mês.

EDIT: Aqui está como implementamos nosso seletor DOB: Campo de entrada de texto mascarado com HTML5 regex para forçar o teclado numérico em dispositivos iOS.

http://www.huntercourse.com/usa/texas/

As datas de nascimento são diferentes de outras datas porque as pessoas costumam digitar sua data de nascimento específica.
Uma caixa de texto com um exemplo é clara, rápida e fácil de inserir:

 _______
|_______| (example: 31/3/1970)

Deve ser compatível com formatação flexível, como 01/01/1970 ou 20/07/70.

Se você tiver que apoiar culturas diferentes com convenções de datas diferentes (por exemplo, EUA e Reino Unido), isso pode estar sujeito a erros para as pessoas que não seguem o exemplo. Para evitar isso, você pode usar uma
lista de seleção para mês e caixas de texto para data e ano .

 _________   __   ____
|March  |V| |__| |____|

Isso remove a ambigüidade entre a ordem do dia e do mês, mas é um pouco mais complicado de usar.

Você deveria dar uma olhada no Datejs .

Datejs é uma biblioteca de datas JavaScript de código aberto.

Abrangente, mas simples, furtivo e rápido. Datejs passou em todos os testes e está pronto para atacar. Datejs não apenas analisa strings, ele as divide em duas partes.

Estou preocupado com a preponderância de soluções em vez de design. O OP disse, "Eu quero saber qual é a solução mais utilizável e sem problemas, para que o usuário não fique confuso." Portanto, seja jQuery ou JavaScript ou C # ou FORTRAN, o design é importante - e é o design UX, não o design de IU que importa aqui. (Outro apelo para evitar a construção incorreta e ilógica "UX / UI").

Use a entrada de texto. Use três caixas separadas rotuladas como Dia, Mês e Ano (ou Mês, Dia e Ano). Deixe os usuários digitarem as datas. Misturar texto e listas na mesma interação é uma coisa ruim (não use entrada de texto para o ano, mas selecionador de data ou listas para mês e dia, por exemplo).

Use um único campo de texto que use dicas de formato no campo, por exemplo, [dia / mês / ano] Não exija formatos muito rígidos. Se um usuário digitar JUN no lugar em que você espera um mês, use junho no back end. Se um usuário digitar 6 no lugar em que você espera um mês, use junho no back end. Se um usuário digitar 06 no lugar em que você espera um mês, use junho no back-end.

Use a Navalha de Occam como um guia (na verdade, na maioria das vezes os dados serão precisos o suficiente). Reduza o atrito cognitivo (não faça os usuários pensarem).

Eu também recomendaria a combinação de DatePicker e campos

Veja esta demonstração , onde o selecionador de data reflete a data inserida nos campos pelo usuário.
No entanto, é baseado em um DatePicker usando Prototype e Scriptaculous . Menciono isso para fins de ilustração.

Eu tentei datePicker com meu usuário, mas acabou sendo uma IU ruim para eles. O que acabo por basear no pedido deles é ter 3 caixas de texto onde eles podem digitar rapidamente [dia] [mês] [ano] :(

Coloque ambos e faça com que cada um atualize o outro. Se o usuário escolhe a data no selecionador de data, é fácil corrigir um pequeno clique errado no campo de texto ou visualizar a escolha digitada no campo de texto do selecionador de data.

Por que você não testa todos os três e escolhe aquele que tem o melhor desempenho? Este parece ser um bom candidato para o Otimizador de website do Google testar.

Pode ser que o tipo de usuário que você tem ou o tipo de site que você está executando pode determinar que sua solução seja diferente da "norma".

Eu normalmente uso ambos - um selecionador de data que preenche um campo de texto no formato correto. Os usuários avançados podem editar o campo de texto diretamente, os usuários que gostam do mouse podem escolher usando o selecionador de data.

Se você está preocupado com o espaço, geralmente tenho apenas o campo de texto com um pequeno ícone de calendário ao lado dele. Se você clicar no ícone de calendário, o selecionador de data aparecerá como um pop-up.

Também acho uma boa prática preencher previamente o campo de texto com texto que indique o formato correto (por exemplo: "DD / MM / AAAA"). Quando o usuário focaliza o campo de texto, esse texto desaparece para que ele possa inserir o seu próprio.

Como talvez uma das pessoas mais velhas aqui, e nascida no final do mês, considero os menus suspensos para datas de nascimento frustrantes. Normalmente, tenho que rolar para baixo em dois menus suspensos, e isso é estranho. Prefiro digitar.

Se você puder ter um controle projetado para aceitar menus suspensos ou ser digitado, e deixar claro que ambos funcionam, isso seria excelente.

Se devo usar um selecionador de data ou não, eu acho que depende de há quanto tempo as datas são. Se eles estiverem normalmente no mês atual, e quase nunca mais do que alguns meses, e você souber que o Javascript estará disponível, um selecionador de data é bom. Se as datas não forem recentes (digamos, uma data de nascimento), acho que esta é a melhor opção:

http://img411.imageshack.us/img411/6328/mockupg.png

Observe que isso é diferente da resposta de Patrick McElhaney, pois o ano é uma caixa de texto, não uma lista suspensa . Selecionar um número em uma caixa suspensa com centenas de elementos é muito irritante para o usuário.

Acho que um selecionador de data apenas torna mais complicado inserir a data de nascimento de alguém.

Como já mencionado, uma combinação de listas suspensas para dias e meses com uma caixa de texto para o ano parece a mais eficiente para um usuário. Leva menos de 10 segundos para inserir uma data de nascimento desta forma, o que é muito mais rápido do que um selecionador de data: graças à tecla tab (que todos os usuários devem aprender a usar para preencher um formulário), é rápido ir de um formulário elemento para o próximo.

Pelo menos no Macintosh (não sei sobre o Windows), você também pode usar o teclado para acessar a data dentro das caixas de seleção: graças à tecla tab, você obtém o foco sobre o elemento do formulário e, em seguida, pressiona a tecla de seta para abrir a lista, digite, por exemplo, 1967 e você chegará lá em um piscar de olhos ...

Eu preferiria um selecionador de data (e uma caixa de entrada com formato documentado como alternativa) para um site internacional.

Os formatos de data variam e às vezes são difíceis de ler se você já estiver acostumado com eles. Pena que muitas pessoas não se sentem confortáveis ​​com ISO 8601. :-(

Eu sugeriria usar um menu suspenso para cada campo, certificando-se de rotular cada um como dia, mês e ano. Um selecionador de data também pode ajudar, mas se o usuário não tiver o JavaScript habilitado, ele não funcionará.

Eu pegaria um DatePicker. É o único componente que permite que usuários experientes o inseram manualmente e orienta os novatos a inserir uma data com muita facilidade.

O calendário não deve aparecer se você entrar pressionando a guia, mas clicando em um botão. Portanto, nenhum usuário especialista se incomoda com isso.

Quem você não usa o jQuery UI DatePicker?

É configurável para atender praticamente a todas as necessidades. A única desvantagem é que se você o incluir com a IU do jQuery, ele ocupará um espaço um tanto grande.

Atualizar

Alguns dos tamanhos de arquivo parecem ter mudado, então eles são atualizados abaixo. Lembre-se de que esses números estarão corretos apenas na hora em que foram atualizados pela última vez. As coisas podem ter mudado desde então.

• Tema CSS - 23kb
• jQuery UI - 71kb reduzido
• DatePicker - 38kb
• Mais algumas imagens (mês que vem / mês anterior, que tenho certeza que são animadas)

Mas isso não é tão ruim ...

O seletor de data e hora JQueryUI é a melhor opção, pois permite que os usuários profissionais insiram seu próprio valor na caixa de texto ou podem escolhê-lo no seletor.

Configurar o seletor para permitir a entrada fácil de aniversários ou datas futuras também é muito fácil:

$ ('# datepicker'). datepicker ({
    changeMonth: true,
    changeYear: true,
    yearRange: '-100: +50'
});

isso mostra algo assim (não posso postar uma foto porque sou um novo usuário: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

e yearRange mostra datas de DateTime.Now.Year - 100 a DateTime.Now.Year + 50

encontrei isso em: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Acabei de descobrir um plugin no JSFiddle. Duas alternativas possíveis: 1 entrada única OU 3 entradas, mas parece uma única ... (use a tecla Tab para ir para a próxima entrada)

[link] http://jsfiddle.net/davidelrizzo/c8ASE/ Parece interessante!

Acho que você pode tentar o plugin birthdaypicker ,

você pode usar o plugin cxcalendar . Parece outro selecionador de data. mas você pode escolher o ano e o mês na seleção após clicar no título ano-mês.

Criei três menus suspensos para a seleção da Data de Nascimento e o número de dias muda dinamicamente com base na seleção de ano e mês. http://jsfiddle.net/ravitejagunda/FH4VB/10/

daysInMonth = new Date(year,month,1,-1).getDate();