tips patterns long form examples big best forms user-interface usability

forms - patterns - placeholder ux



¿Cuál es la mejor interfaz de usuario para ingresar la fecha de nacimiento? (24)

¿Cuál es el mejor método para el selector de 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 cuadros de selección. El usuario puede usar el teclado o el mouse.
  • Un buen datepicker .

Quiero saber cuál es la solución más útil y libre de problemas, por lo que el usuario no se confundirá en absoluto.

¿A quién no le gusta jQuery UI DatePicker?

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

Actualizar

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

  • Tema CSS - 23kb
  • jQuery UI - 71kb minificado
  • DatePicker - 38kb
  • Además de un par de imágenes (el próximo mes / mes anterior, que estoy bastante seguro de que son sprited)

Pero eso no es tan malo ...

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

Es posible que el tipo de usuarios que tenga o el tipo de sitio que esté ejecutando pueda indicar que su solución debe ser diferente a la "norma".

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

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

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 tipeado, y dejar en claro que ambos funcionan, eso sería excelente.

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

Menús de datos bien conocidos por los usuarios, como el mes y el año de su nacimiento. Dicha información a menudo 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 probablemente algo así como lo siguiente:

  • Proporcione 3 cuadros de texto separados por día, mes y año (rotulados apropiadamente)
  • Ordene los cuadros de texto de acuerdo con la cultura del usuario.
  • Los cuadros de texto de Día y Mes se deben dimensionar de modo que se asuma una entrada de 2 dígitos.
  • El cuadro de texto del año se debe dimensionar para que se asuma un año de 4 dígitos.
  • Permitir al usuario ingresar 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 el siguiente paso de confirmación).
  • Permitir al usuario ingresar 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 expresión regular HTML5 para forzar el teclado numérico en los dispositivos con iOS.

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

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

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

Creo que un selector de fechas solo hace el movimiento 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 ser la más eficiente para un usuario. Solo se requieren menos de 10 segundos para ingresar una fecha de nacimiento de esta manera, que es mucho más rápido que un selector de fecha: 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 a la siguiente.

Al menos bajo Macintosh (no sé sobre Windows), también puedes usar el teclado para acceder a la fecha dentro de los cuadros de selección: gracias a la tecla de tabulación, obtienes el foco en el elemento de formulario, luego presionas la tecla de flecha para desplegar la lista, luego escribe por ejemplo 1967 y llegas allí en un abrir y cerrar de ojos ...

Deberías echarle un vistazo a Datejs .

Datejs es una biblioteca de fecha 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 las cadenas, sino que las divide en dos.

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

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

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

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

y yearRange muestra fechas de DateTime.Now.Year - 100 a DateTime.Now.Year + 50

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

Había intentado datePicker con mi usuario, pero resultó ser una mala IU para ellos. Lo que termino basado en su solicitud es tener 3 cuadros de texto donde pueden escribir rápidamente [día] [mes] [año] :(

Las fechas de nacimiento son diferentes de otras fechas porque las personas suelen estar 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 el Reino Unido), esto podría ser propenso a errores para las personas que no prestan atención al ejemplo. Para evitar esto, podrías usar un
seleccione la lista para el mes y cuadros de texto para la fecha y el año .

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

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

Me preocupa la preponderancia de la solución en lugar de diseñar. El OP dijo: "Quiero saber cuál es la solución más útil y libre de 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 la construcción incorrecta e ilógica "UX / UI").

Use la entrada de texto. Use tres cajas separadas con la etiqueta 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 una cosa mala (no use el ingreso de texto para el año, pero el selector de fecha o listas para el mes y el día, por ejemplo).

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

Use la Navaja de Occam 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).

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

Si le preocupa el espacio, generalmente tengo solo el campo de texto con un pequeño icono 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 indica el formato correcto (es decir: "DD / MM / YYYY"). Cuando el usuario enfoca el campo de texto, ese texto desaparece para que pueda ingresar el suyo.

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

Pon ambos y haz que cada actualización sea la otra. Si el usuario elige la fecha del selector de fecha, es fácil corregir un error en el campo de texto o visualizar la elección que ingresó en el campo de texto en el selector de fecha.

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

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

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

Fácil de validar Fácil para que los usuarios hagan lo correcto. Sin desplazarse por los años en un cuadro de selección desde 1900 hasta el presente año. 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 entornos, por ejemplo, 01/10/2014 - ¿es el 1 de octubre o el 10 de enero? Espero que veamos este formato de selector de cumpleaños mucho más en el futuro.

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

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

Si se debe usar un selector de fechas o no, creo que depende de cuánto tiempo hayan pasado las fechas. Si por lo general están en el mes actual, y casi nunca tienen más de unos pocos meses, y usted sabe que Javascript estará presente, un marcador de fecha es bueno. Si las fechas no son recientes (por ejemplo, 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 de cientos de elementos es muy molesto para el usuario.

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 marcador de fecha para la fecha de nacimiento . Primero tiene que buscar el año (haga clic, haga clic, haga clic en ...), luego en el mes (haga clic en más), y luego busque y haga clic en el pequeño número en una cuadrícula.

Los marcadores de fecha son útiles cuando no sabes la fecha exacta de la parte superior de tu cabeza, por ejemplo, estás planeando un viaje para la segunda semana de febrero.

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

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

El calendario no debe aparecer si ingresas al presionar la pestaña, pero al hacer clic en un botón. Entonces ningún usuario experto está molesto por eso.

Yo preferiría un marcador de fecha (y un cuadro de entrada con formato documentado como un repliegue) para un sitio internacional.

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

puedes usar el complemento cxcalendar . Parece otro datepicker. pero puede elegir el año y el mes en seleccionar después de hacer clic en el título del año-mes.