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


110

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.


Esse seletor de data jQuery parece funcionar no Firefox, mas não no IE7.
Richard Ev

1
talvez o site deles tenha um problema. O Datepicker funciona bem no IE6 / 7/8, FF, Opera e Safari. Talvez mais :)
Ionuț Staicu

11
month / day / yearé francamente estranho .
TRiG

3
Infelizmente, fui ensinado mês / dia / ano na escola quando era pequeno. Não faz sentido cientificamente.
Duncan Calvert

1
ISO 8601 para a vitória! year / month / day
Qqwy,

Respostas:


28

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.


116
O problema com a maioria dos selecionadores de data é que é doloroso voltar 30/40 anos ou mais.
UnkwnTech

3
Embora agora que olho para o que ele ofereceu, acho que não é tão ruim.
UnkwnTech

21
O seletor de data é, na verdade, uma experiência terrível para o usuário ao entrar no DOB, devido à necessidade de voltar vários anos, conforme mencionado pela Unkwntech. Além disso, um selecionador de data e hora coloca o valor do local de uma data específica em relação à estrutura do mês e da semana, o que não é necessário ao escolher um DOB.
Alex Czarto,

6
O datepicker do jQuery tem uma opção para mostrar menus suspensos de opções para mês e ano , tornando a seleção de uma data de nascimento muito mais rápida.
Carl G de

1
Aqui está um exemplo de uma entrada de texto mascarada com HTML5 regex para forçar o teclado numérico em dispositivos iOS: cde.boaterexam.com/washington/register
Alex Czarto

161

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

três listas suspensas para mês, dia, ano

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.


6
Votos positivos: Esta é exatamente a resposta que eu daria. O Datepicker é bom para situações do tipo 'Eu sei que é uma sexta-feira', mas para a data de nascimento não agrega valor.
slim

14
Downvoted: drop-downs são MUITO irritantes para os usuários, especialmente para este tipo de dados. Consulte Nielsen: useit.com/alertbox/20001112.html
Mauricio Scheffer

5
@mausch É por isso que antecipei minha resposta com "Se o seu objetivo é garantir que 'o usuário não ficará confuso'" FTA: "Os menus suspensos têm suas vantagens ... porque são um widget padrão ( mesmo que desagradável), os usuários sabem como lidar com um menu suspenso quando o encontram. "
Patrick McElhaney

1
@patrick, você está certo, os menus suspensos são muito padrão, mas uma caixa de texto simples é IMHO mais natural, pois é mais próxima da aparência de um formulário de papel. Meu ponto é que as pessoas têm "09/10/1975" profundamente embutido em seus cérebros a partir de todas as repetições, então deixe-as escrever exatamente isso.
Mauricio Scheffer

24
Então, você nasceu em 9 de outubro ou 10 de setembro? Não sei como resolver essa ambigüidade com uma caixa de texto simples.
Patrick McElhaney

140

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:

Inscrição na conta do Google

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;)


9
Por que essa não é a melhor resposta!
Boneco de neve

3
Uma coisa que eu diria para acrescentar a isso é permitir que o usuário digite o valor numérico do mês para selecionar um valor, quando essa lista suspensa for selecionada. Isso é o que a maioria dos usuários está acostumada a digitar por um mês, então ainda "funcionaria" para usuários de teclado.
Elezar de

2
Na verdade, quanto mais penso, não vejo nenhuma vantagem em fazer o mês ser uma lista suspensa. Por que não torná-lo um campo de texto também?
Elezar

4
Para evitar confundir mês e dia, principalmente.
Maciej Gurban

2
Embora aqueles de nós fora da América geralmente tenham o dia antes do mês.
jezmck

25

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/


A única coisa que eu modificaria em seu seletor DOB é colocar o "MM" "DD" "AAAA" como texto de espaço reservado em vez de uma dica.
Paul Pettengill

@Paul Usar texto de espaço reservado tem seus desafios de usabilidade. Embora inicialmente o tivéssemos, decidimos removê-lo após ler isto: nngroup.com/articles/form-design-placeholders
Alex Czarto

@AlexCzarto nice picker! (mas só para você saber, se você digitar algo como 31/02/1970 vai te dar a mensagem de erro errada)
Thiago Duarte

Se nascesse em 5 de junho de 2001, eu digitaria meu DOB como "050601", que sua sugestão interpretaria como 6 de maio de 1901. Se você tiver caixas de texto, está contando com o usuário para localizar a ordem de data MMDD e inserir seu informações de forma adequada, se você fornecer uma lista suspensa para o mês, o usuário será forçado a notar a colocação fora de ordem do mês.
thelem

Se você dimensionar a caixa de texto do mês para 2 dígitos, como você permite que o usuário insira o número do mês OU o nome do mês?
Jin Wang,

11

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.


5

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.


6
O plugin parece ótimo, mas 25 KB para um problema simples parece um pouco demais ...
Noel Abrahams

Discordo de Noel. Datas são a coisa mais complicada que os programadores costumam encontrar, especialmente em fusos horários e culturas (que é para o que Datejs foi projetado).
Rustavore

1
@Gitninja - isso é meio espantalho. Ela não disse que é muito para um encontro (o que é extremamente complexo) mas para um "problema simples", presumo o problema da "data de nascimento". Como há uma grande quantidade de bibliotecas e métodos javascript que uma solução pode ser alcançada sem 25 KB, eu concordaria.
Kerry Jones

Se adicionar 25kb ao meu formulário significa que não preciso usar menus suspensos, então que assim seja
ladieu

4

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).


Usar três caixas de texto separadas significa que, em um celular, preciso clicar em cada uma para que o teclado numérico apareça. O resto da sua ideia é bom - todas devem ser caixas de texto.
PKHunter 01 de


3

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] :(


2

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.


não consigo colocar os dois, não caberia no design :) Só preciso de um deles.
Ionuț Staicu

Uma vez que o selecionador de data precisa de javascript, use javascript para mostrá-lo somente quando necessário. Defina a posição como absoluta para que flutue sobre todos os outros elementos.
cerca de

Normalmente, você apenas coloca o campo de texto e anexa o ícone próximo a ele que exibe o selecionador de data.
Tuminoid

2

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".


1

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.


1

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.


Isso não é realmente um problema porque a maioria dos navegadores, quando o widget suspenso está focado, suporta digitação para obter rapidamente o valor correto
thepeer

@thepeer: Mas eles não se parecem com isso. Não há o que John Norman ("Design of Everyday Things") chamou de um recurso para digitar.
David Thornley

1

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.


1
Não há necessidade de que o dia seja uma caixa suspensa. Inserir e validar um número entre 1 - 31 é trivial.
Alex Czarto,

1

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 ...


0

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. :-(


0

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á.


Por ser um site cheio de javascript, não há chance de NADA funcionar sem JS. Portanto, este tipo de preocupação é inútil agora :)
Ionuț Staicu

E se um usuário com deficiência visual quiser usar o seu site?
Philip Morton

1
Se você usar nomes de meses e anos de quatro dígitos, será auto-rotulado, pois não haverá qualquer sobreposição entre os conjuntos de valores.
Dave Sherohman

1
Downvoted: drop-downs são MUITO irritantes para os usuários, especialmente para este tipo de dados. Consulte Nielsen: useit.com/alertbox/20001112.html
Mauricio Scheffer

0

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.


0

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 ...


Não se preocupe, você pode cortar css bastante. Eu queria apenas saber qual é o melhor método;)
Ionuț Staicu

68k ... isso está errado, assim como o tema css 28k ...
redsquare

@redsquare provavelmente mudou desde que eu postei isso. Sinta-se à vontade para editar minha resposta. Obrigado por me avisar também.
alex

para o selecionador de data, apenas o ui js personalizado total é 38k minimizado, com gzip isso é consideravelmente menor
redsquare

Eu recomendo evitar o jQuery datepicker para datas de nascimento. Já tentei usá-lo, recebemos muitas reclamações de clientes. Primeiro, era muito difícil voltar mais do que alguns anos. (30 anos requer 360 cliques com configurações padrão). Se você adicionar a seleção de ano, muitos usuários apenas clicarão no dia primeiro, o que oculta o seletor de data sem forçar a escolha do ano. E então o usuário voltava e mudava apenas o ano, não clicava na data, o que não registraria a mudança de ano. Experiência horrível.
Andrei

0

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/


0

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!




0

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.

insira a descrição da imagem aqui


Isso tem todos os desafios de UX discutidos acima.
PKHunter 01 de

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.