¿Cuál es la mejor interfaz de usuario para ingresar la fecha de nacimiento? [cerrado]

¿Cuál es el mejor método para seleccionar la fecha de nacimiento?

• 3 entradas de texto (mes / día / año) o una entrada de máscara. El usuario DEBE usar el teclado
• 3 cajas de selección. El usuario puede usar el teclado o el mouse.
• Un buen selector de fechas .

Quiero saber cuál es la solución más útil y sin problemas, para que el usuario no se confunda en absoluto.

Para un usuario avanzado, la entrada de texto es la mejor, si el usuario conoce el formato de fecha, es muy rápido. Para un usuario no tan avanzado, sugiero usar un selector de fechas. Dado que generalmente también tiene usuarios avanzados y no avanzados, sugiero una combinación de entrada de texto y selector de fecha.

Si su objetivo es asegurarse de que "el usuario no se confunda en absoluto", creo que esta es la mejor opción.

No recomendaría un selector de fecha para la fecha de nacimiento . Primero tienes que buscar el año (clic, clic, clic…), luego el mes (clic más), y luego buscar y hacer clic en el pequeño número en una cuadrícula.

Los selectores de fechas son útiles cuando no sabe la fecha exacta que tiene en la cabeza, por ejemplo, si está planeando un viaje para la segunda semana de febrero.

Si bien esta es una pregunta muy antigua, es muy importante para obtener una fecha de nacimiento correcta, especialmente en un formulario de registro.

Creo que nadie lo ha hecho mejor que el registro de cuentas de Google:

Seleccione primero el mes en un cuadro de selección y escriba manualmente la fecha y el año. Sencillo.

Fácil de validar. Es fácil para los usuarios hacerlo bien. No se permite retroceder los años en un cuadro de selección desde 1900 hasta el año actual. No es necesario actualizar un cuadro de selección de 'día' según la entrada del mes. Funciona muy bien en la web. Funciona muy bien en dispositivos móviles. Funciona para todos los lugares, por ejemplo, el 01/10/2014: ¿es el 1 de octubre o el 10 de enero? Espero que veamos mucho más este formato de selección de cumpleaños en el futuro.

Un selector de fechas es solo una mala solución en general. ¡Tantos clics! En mi opinión, un selector de fechas solo es útil cuando es importante saber el día de la semana, por ejemplo, reservar boletos.

Actualización 2/6/2016: Soy del Reino Unido, por lo que estoy más familiarizado con los formatos de día / mes / año, en lugar de mes / día / año. Sin embargo, los usuarios que usarán el cursor para seleccionar el mes, creo que es mucho más fácil tener el cuadro de selección primero, en lugar de ingresar> cuadro de selección> ingresar. La fecha de comentario es el 2 de junio, no el 6 de febrero;)

Como se menciona en este artículo de Jakob Nielsen , se deben evitar las listas desplegables para los datos que el usuario conoce bien :

Menús de datos bien conocidos por los usuarios, como el mes y año de su nacimiento. A menudo, dicha información está integrada en los dedos de los usuarios, y tener que seleccionar tales opciones de un menú rompe el paradigma estándar para ingresar información e incluso puede crear más trabajo para los usuarios.

La solución ideal es probable algo como lo siguiente:

• Proporcione 3 cuadros de texto separados para el día, mes y año (etiquetados apropiadamente)
• Ordene los cuadros de texto según la cultura del usuario.
• Los cuadros de texto de día y mes deben tener un tamaño que suponga una entrada de 2 dígitos.
• El cuadro de texto de año debe tener un tamaño que suponga un año de 4 dígitos.
• Permita que el usuario ingrese un año de 2 o 4 dígitos. Suponga que un año de 2 dígitos es 1900 y actualice el cuadro de texto para reflejar esto en Blur (o en un paso de confirmación siguiente).
• Permita que el usuario ingrese un número de mes O un nombre de mes.

EDITAR: Así es como implementamos nuestro selector de fecha de nacimiento: campo de entrada de texto enmascarado con expresiones regulares HTML5 para forzar el teclado numérico en dispositivos iOS.

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

Las fechas de nacimiento son diferentes de otras fechas porque las personas a menudo están acostumbradas a escribir su fecha de nacimiento específica.
Un cuadro de texto con un ejemplo es claro, rápido y fácil de ingresar:

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

Esto debería admitir un formato flexible como 1/1/1970 o 20/07/70.

Si tiene que apoyar diferentes culturas con diferentes convenciones de fechas (por ejemplo, EE. UU. Y Reino Unido), esto podría ser propenso a errores para las personas que no prestan atención al ejemplo. Para evitar esto, puede usar una
lista de selección para el mes y cuadros de texto para la fecha y el año .

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

Esto elimina la ambigüedad entre el orden de día y mes, pero es un poco más complicado de usar.

Deberías echar un vistazo a Datejs .

Datejs es una biblioteca de fechas de JavaScript de código abierto.

Completo, pero simple, sigiloso y rápido. Datejs ha pasado todas las pruebas y está listo para atacar. Datejs no solo analiza cadenas, las corta limpiamente en dos.

Me preocupa la preponderancia de solucionar en lugar de diseñar. El OP dijo: "Quiero saber cuál es la solución más útil y sin problemas, para que el usuario no se confunda en absoluto". Entonces, ya sea jQuery o JavaScript o C # o FORTRAN, el diseño es importante, y es el diseño UX, no el diseño de la interfaz de usuario lo que importa aquí. (Otro motivo para evitar el constructo incorrecto e ilógico "UX / UI").

Utilice la entrada de texto. Use tres casillas separadas etiquetadas como Día, Mes y Año (o Mes, Día y Año). Permita que los usuarios escriban las fechas. Mezclar texto y listas en la misma interacción es algo malo (no use la entrada de texto para el año sino el selector de fechas o listas para el mes y el día, por ejemplo).

Utilice un solo campo de texto que utilice sugerencias de formato en el campo, por ejemplo, [día / mes / año] No requiera formatos demasiado rígidos. Si un usuario escribe JUN en el lugar donde espera un mes, use June en el back-end. Si un usuario escribe 6 en el lugar donde espera un mes, utilice junio en el back-end. Si un usuario escribe 06 en el lugar donde espera un mes, utilice junio en el back-end.

Use Occam's Razor como guía (de hecho, la mayoría de las veces los datos serán lo suficientemente precisos). Reduzca la fricción cognitiva (no haga pensar a los usuarios).

También recomendaría la combinación de DatePicker y campos

Vea esta demostración , donde el selector de fecha refleja la fecha ingresada en los campos por el usuario.
Sin embargo, se basa en un DatePicker que usa Prototype y Scriptaculous . Lo menciono con fines ilustrativos.

Probé datePicker con mi usuario pero resultó ser una mala interfaz de usuario para ellos. Lo que termino basándome en su solicitud es tener 3 cuadros de texto donde puedan escribir rápidamente [día] [mes] [año] :(

Pon ambos y haz que cada uno actualice el otro. Si el usuario elige la fecha del selector de fecha, es fácil corregir un pequeño error de clic en el campo de texto o visualizar la elección que ingresó en el campo de texto del selector de fecha.

¿Por qué no pruebas los tres y eliges el que mejor funciona? Esto parece un buen candidato para probar el Optimizador de sitios web de Google .

Puede ser que el tipo de usuarios que tiene o el tipo de sitio que está ejecutando dicte que su solución debe ser diferente a la "norma".

Normalmente uso ambos: un selector de fecha que llena un campo de texto en el formato correcto. Los usuarios avanzados pueden editar el campo de texto directamente, los usuarios felices del mouse pueden elegir usando el selector de fechas.

Si está preocupado por el espacio, generalmente tengo solo el campo de texto con un pequeño ícono de calendario al lado. Si hace clic en el icono del calendario, aparece el selector de fecha como una ventana emergente.

También me parece una buena práctica rellenar previamente el campo de texto con texto que indique el formato correcto (es decir: "DD / MM / AAAA"). Cuando el usuario enfoca el campo de texto, ese texto desaparece para que pueda ingresar el suyo.

Como quizás una de las personas mayores aquí, y nacida a finales de mes, encuentro que los menús desplegables para las fechas de nacimiento son frustrantes. Normalmente tengo que desplazarme hacia abajo en dos menús desplegables, y eso es incómodo. Prefiero escribirlo.

Si puede tener un control diseñado para que pueda aceptar menús desplegables o ser tecleado, y dejar en claro que ambos funcionan, sería excelente.

Si usar un selector de fechas o no, creo que depende de cuánto tiempo hayan pasado las fechas. Si normalmente están en el mes actual, y casi nunca tienen más de unos pocos meses, y sabe que Javascript estará disponible, un selector de fechas es bueno. Si las fechas no son recientes (digamos, una fecha de nacimiento), creo que esta es la mejor opción:

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

Tenga en cuenta que esto es diferente de la respuesta de Patrick McElhaney en que el año es un cuadro de texto, no un menú desplegable . Seleccionar un número de un cuadro desplegable que tenga cientos de elementos es muy molesto para el usuario.

Creo que un selector de fecha simplemente hace que el movimiento sea más complicado para ingresar la fecha de nacimiento.

Como ya se mencionó, una combinación de listas desplegables para días y meses con un cuadro de texto para el año parece lo más eficiente para un usuario. Se necesitan menos de 10 segundos para ingresar una fecha de nacimiento de esta manera, que es mucho más rápido que un selector de fechas: gracias a la tecla de tabulación (que todos los usuarios deben aprender a usar para completar un formulario), es rápido pasar de un formulario elemento al siguiente.

Al menos en Macintosh (no sé sobre Windows), también puede usar el teclado para acceder a la fecha dentro de los cuadros de selección: gracias a la tecla de tabulación, obtiene el foco en el elemento del formulario, luego presiona la tecla de flecha para desplegar la lista, luego escriba, por ejemplo, 1967 y llegará en un abrir y cerrar de ojos ...

Preferiría un selector de fechas (y un cuadro de entrada con formato documentado como alternativa) para un sitio internacional.

Los formatos de fecha varían y, a veces, son difíciles de leer si ahora está acostumbrado. Lástima que muchas personas no se sientan cómodas con ISO 8601. :-(

Sugeriría usar un menú desplegable para cada campo, asegurándose de etiquetar cada uno como día, mes y año. Un selector de fecha también puede ayudar, pero si el usuario no tiene habilitado JavaScript, no funcionará.

Tomaría un DatePicker. Es el único componente que permite a los usuarios expertos ingresarlo manualmente y guía a los principiantes a ingresar una fecha muy fácilmente.

El calendario no debería aparecer si ingresa presionando la pestaña, sino haciendo clic en un botón. Así que ningún usuario experto se molesta por ello.

¿Quién no usa jQuery UI DatePicker?

Es configurable para adaptarse a prácticamente cualquier necesidad. El único inconveniente es que si lo incluye con jQuery UI, tiene una huella algo grande.

Actualizar

Parece que algunos de los tamaños de archivo han cambiado, por lo que se actualizan a continuación. Tenga en cuenta que estos números solo serán correctos para la última vez que se actualizaron. Las cosas pueden haber cambiado desde entonces.

• Tema CSS - 23kb
• Interfaz de usuario de jQuery - 71kb minificado
• DatePicker - 38kb
• Más un par de imágenes (el próximo mes / mes anterior, que estoy bastante seguro de que están animadas)

Pero eso no está tan mal ...

El selector de fecha y hora de JQueryUI es la mejor opción, ya que permite a los usuarios profesionales ingresar su propio valor en el cuadro de texto o pueden elegirlo del selector.

Configurar el selector para permitir la entrada fácil de cumpleaños o fechas futuras también es bastante fácil:

$ ('# selector de fecha'). selector de fecha ({
    changeMonth: verdadero,
    changeYear: cierto,
    yearRange: '-100: +50'
});

esto muestra algo como esto (no puedo publicar una foto porque soy un nuevo usuario: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

y yearRange muestra fechas desde DateTime.Now.Year - 100 hasta DateTime.Now.Year + 50

Encontré esto en: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Acabo de descubrir un complemento en JSFiddle. Dos posibles alternativas: 1 entrada única O 3 entradas, pero parece una sola ... (use la tecla Tab para ir a la siguiente entrada)

[enlace] http://jsfiddle.net/davidelrizzo/c8ASE/ ¡Parece interesante!

Creo que puedes probar el plugin birthdaypicker ,

puede utilizar el complemento cxcalendar . Parece otro selector de fechas. pero puede elegir el año y el mes en seleccionar después de hacer clic en el título año-mes.

Creé tres menús desplegables para la selección de Fecha de nacimiento y el número de días cambia dinámicamente según la selección de año y mes. http://jsfiddle.net/ravitejagunda/FH4VB/10/

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