¿Campos de formulario más fáciles de usar para ingresar fecha / hora?

Definitivamente estoy de acuerdo con Rahul, que depende del contexto. Un widget de calendario es muy útil para retroceder o avanzar unos meses, pero no es tan bueno para elegir su fecha de nacimiento, ¡eso sería una pesadilla!

Personalmente, también odio esas fechas desplegables para elegir su fecha de nacimiento, ya que tienden a ser un dolor para alcanzar su selección objetivo, pero recientemente vi una ingeniosa en el flujo de registro en Kontain.com. Como puede ver a continuación, han presentado las opciones en una tabla en lugar de una lista (e hicieron lo mismo para el día y el año) y descubrí que es una mejora increíble. ¡Hurra!

Recuerde que la facilidad de uso es un producto de su audiencia y el dominio de su aplicación. Por ejemplo, si está creando un servicio como Kayak, se centrará en usuarios con conocimientos razonables de tecnología que utilizarán mucho los controles de fecha durante su experiencia con su aplicación. Por otro lado, Google y Amazon tienen audiencias más amplias y menos interacciones, por lo que tienen diferentes prioridades.

Con eso en mente, aquí hay algunas consideraciones:

• Control de calendario. Estos pueden ser muy útiles cuando desea comunicar metadatos adicionales sobre fechas, horas o períodos de tiempo al seleccionar una fecha. Por ejemplo, en un sitio de viajes, un usuario puede estar seleccionando una fecha para reservar un hotel. Puede usar el control de calendario para indicar qué fechas están completamente reservadas. Dado que el control del calendario se compara más estrechamente con su primo del mundo real, el calendario, estás haciendo un favor a los usuarios al incorporar interacciones con fechas y horas en su modelo mental. Sin embargo, hay casos de uso donde los controles de calendario se vuelven incómodos; Dado que el control se modela para mostrar un mes a la vez, está presionando el control para saltar entre meses en (a menudo) flechas o menús desplegables nuevamente. Eso puede ser limitante si está tratando de darle al usuario más libertad para elegir una fecha.

• Menús desplegables. A menudo verá tres seguidas: [Día] [Mes] [Año]. Funcionan bien cuando un usuario simplemente selecciona una fecha que ya conoce de antemano, como su fecha de nacimiento. No funcionan tan bien si le pide al usuario que repita una tarea que involucra fechas, ya que la mayoría de los usuarios usarán el mouse y, por lo tanto, tendrán que hacer clic una vez en cada menú desplegable para abrirlo, una vez en cada elemento para seleccionarlo, y posiblemente desplazarse hacia arriba y hacia abajo en una larga lista (para fechas de nacimiento, no es raro que el menú Año comience en 1920 y termine en 2009). Asegúrese de tener esto en cuenta si elige menús desplegables.

• Campos de entrada de texto sin formato. Como han respondido otros, lo bueno de los campos de entrada es que puede aceptar prácticamente cualquier cosa. En estos casos, recuerde los principios del diseño de formularios: no aplique el formato de su base de datos/backend al usuario final. Trate de ser lo más generoso posible al aceptar tantos formatos como sea posible. Use la validación del lado del cliente para señalar los problemas al usuario antes de que envíe el formulario (las fechas son muy fáciles de validar en Javascript al proporcionar la cadena que el usuario completó en la nueva función Date () y ver si recupera la fecha).

Mirando más allá de los controles, considere algunos principios de sentido común al tratar con las fechas:

• Compruebe si el usuario no cometió un error. Si está diseñando un sitio para adolescentes y alguien dice que nacieron en 1934, considere si esa debería ser una opción y si debería, si debe hacer una doble verificación con ellos para ver si realmente son 76. No para fines de validación de edad, pero como un servicio al usuario. Del mismo modo, si está diseñando un sitio de viajes, considere verificar si el usuario realmente tenía la intención de reservar unas vacaciones en Hawai en octubre de 2011, no este octubre.

• En la mayoría de los casos, las selecciones de tiempo específicas no son necesarias y probablemente no se correspondan con el modelo mental del usuario. Cuando planifique un evento, la granularidad máxima que probablemente necesite es en intervalos de 5 minutos. Ofrezca un control que permita a los usuarios seleccionar 12:00, 12:05, 12:10, etc. en lugar de 60 opciones por cada minuto. La granularidad que elija puede tener un gran efecto en la usabilidad del control particular que elija usar (como los menús desplegables).

• Mire siempre más allá de los controles estándar y en el ámbito de los gráficos de información como una opción. Por lo general, su implementación será complicada y costosa, pero pueden valer la pena si la selección de fecha/hora es una característica central. Por ejemplo, hipmunk.com tiene una representación visual fantástica de los horarios de vuelo (leída, no como entrada) que podría ser aún mejor si fuera interactiva. En estos casos, recuerde considerar las expectativas de su audiencia.

Mantenga el formulario libre de ingreso de datos cuando sea posible

¡Los programadores son flojos! Deje que la computadora funcione un poco y considere ni siquiera tener un campo de fecha específico para la entrada de fecha inicial. Google Calendar, cuando crea un nuevo evento, simplemente le permite decir:

• 4 de julio: cena en casa de Joe

GC luego lo resuelve todo por usted (incluido dónde) y, en función de la configuración regional de su perfil de usuario, será inteligente sobre lo que significa 4/7: Cena en casa de Joe. Para su posterior edición, el control de calendario del GC es agradable y fácil de usar. Considere lo siguiente y lo fácil que sería para los usuarios:

1. siguiente jue
2. en 4 horas
3. en 2 semanas

Y ... SHOCK HORROR ¿qué pasa si el usuario no sabe? No he visto tanto, pero ¿por qué esta no es una entrada de fecha aceptable para algunas circunstancias:

• En unos 3 días

Sé que esto da miedo :) Pero Tog On Software Design , Bruce Tognazzini (autor original de Apple Human Interface Guidelines) describe que la implementación de la experiencia del usuario es un poco mágica truco: 'una ilusión': parece fácil, pero debajo, todo tipo de locura está sucediendo.

Obtendría el software para poner un recordatorio automático 1d antes de decir 'oye, por ahora quieres hacer cosas'

Además, use el contexto tanto como sea posible:

• antes del cumpleaños de Joe

... si tiene contactos o un gráfico social, esto debería ser fácil de resolver; si no, pregunta.

Considere más de un mes

Cuando tenga intervalos de fechas, considere que los límites de los meses son una verdadera molestia para las vistas de calendario que muestran solo un mes. iCal en la Mac es ordenado de esta manera porque puede mostrar cualquier cantidad de meses para que pueda verificar fácilmente qué significan las fechas exactas de 'entre 2 y 3 semanas a partir de ahora'.

Normalmente solo uso un cuadro de texto normal y le agrego el Jquery UI Datepicker.

Cuando el usuario enfoca el cuadro de texto con pestañas o haciendo clic o lo que sea, el control de calendario aparece temporalmente debajo de él - sin molestar el ingreso de texto:

El usuario puede simplemente escribir una fecha en cualquier formato analizable o usar el mouse con la ventana emergente del calendario. Al seleccionar una fecha con el mouse, simplemente la escribirá en el cuadro de texto en el formato preferido del sitio para el usuario y cerrará la ventana emergente.

Para la entrada de tiempo, encontré algo similar hecho por alguien que olvidé pero con las (12 o 24) horas apareciendo en un widget tabular, seleccionando una hora y luego aparecen algunas opciones de minutos como 0, 15, 30 y 45. Como antes, simplemente escribiendo la hora funciona bien, ignorando la ventana emergente.

Además, un control de calendario se puede ajustar para mostrar más de un mes a la vez, generalmente tengo que mostrar 2-3 meses uno al lado del otro, dependiendo del contexto de la fecha. Sin embargo, la entrada de la fecha en mi caso generalmente gira en torno al trimestre actual. Una entrada de fecha de nacimiento no funcionaría tan bien como alguien ya señaló ^^

Una alternativa común a múltiples menús desplegables o widgets es el formato estándar de texto de ayuda. A veces lo verá dentro del campo de texto como el valor predeterminado y, a veces, a la derecha/debajo del campo. El texto predeterminado diría algo como "MM/DD/AAAA" o "dd-mm-aaaa". Aquí hay un ejemplo del formulario de registro de Google:

Esto le da al usuario un control total sobre qué ingresar, y solo usa un campo de texto. Una desventaja de este enfoque es la necesidad de una validación adicional del lado del cliente para asegurarse de que hayan seguido la convención de fecha adecuada.

La primera pregunta es cuántos campos de entrada de fecha tiene en la aplicación y con qué frecuencia se usan.

Si tiene que ingresar su día de nacimiento cuando se registra y eso es todo, bueno, probablemente no debería ser una alta prioridad para usted.

Pero si tiene muchas fechas, hay algunos puntos a considerar de los que nadie más habló aún:

1. Debe cuidar el formato de fecha preferido del usuario (no estoy en los EE. UU., Quiero que mis fechas estén en formato DD/MM/AAAA, esas fechas de EE. UU. Con el mes al principio me son difíciles de leer y tipo).

2. Además, tenga en cuenta los otros controles alrededor del campo de fecha, si se trata de una página creada para que el usuario interactúe con él con el mouse, debe tener un selector de fecha que solo pueda usar el mouse, por otro lado, si tiene campos de texto alrededor de la fecha en que el usuario probablemente esté en "modo de escritura" y forzar la interacción que requiere el mouse (como múltiples menús desplegables) puede ser molesto.

Y finalmente, sus usuarios no son mis usuarios, debe probarlo, dar a la mitad de los usuarios un campo de texto y la mitad de un control de calendario gráfico, medir cuántos usuarios completan cada formulario y cuánto tiempo le toma a cada grupo en promedio completar el formulario .

Si es lo suficientemente importante como para obsesionarse con esto aquí, es lo suficientemente importante como para probarlo.

Mis dos centavos: soy ciego y creo que lo mejor es: ¡3 cuadros combinados! Una alternativa podría ser 2 cuadros combinados para meses y días y un texto de entrada para el año, pero debería hacer un control en este campo ... Si pensara como programador, preferiría un solo texto de entrada, pero si cree que en su sitio podría ser un "usuario novato" Creo que lo mejor es la primera opción :)

En cuanto a la velocidad y facilidad de uso, nada supera a la simple entrada numérica, p. 2010-09-21. Utilice un cuadro de texto único pero (aparte del común "/" y "-") también acepte pestañas para moverse de un campo al siguiente uno. Al presionar "[tab]" se debe insertar un separador. Como separador, prefiero el guión, porque separa los campos más claramente.

No obligue a las personas a escribir ceros a la izquierda.

No usaría la entrada de texto como los meses abreviados como sugirió Bevan porque tardan más en ingresar. Además, ¿cómo abrevias? ¿Tres cartas? Cuatro? Como dije en mi respuesta a Bevan, es especialmente una mala idea si estás trabajando con una audiencia internacional; "Septiembre" puede no ser "Sept" en el idioma de su usuario.

Hablando de audiencias internacionales: no todos usan el orden MM-DD-AAAA (de hecho, fuera de los EE. UU. Casi nadie lo hace). Puede indicar el pedido requerido debajo del cuadro de texto. Una forma de evitar la ambigüedad de fechas como 5-06-201 es usar el formato ISO 8601 AAAA-MM-DD.

Proporcione una entrada de texto donde el usuario pueda escribir la fecha junto con una pista de qué formato puede usar, pero luego acepte cualquier formato inequívoco, independientemente de los separadores o el número de dígitos. Cuando el usuario escribe algo diferente al formato estándar, actualícelo inmediatamente al formato estándar para que el usuario vea exactamente cómo está interpretando la fecha de una manera inequívoca. También es bueno agregar un ícono de calendario para dar a los usuarios que desean una opción de selección de un calendario: los usuarios que desean escribir una fecha no tienen que usarla.

Estaba haciendo un poco de investigación sobre esto. Las aplicaciones de calendario son un buen lugar para comenzar. Mi diseño favorito es la fecha con hora a la derecha. No me gusta el calendario de Google Fecha - Hora - Hora - Formato de fecha, pero el selector de fecha y el menú desplegable se ejecutan con bastante claridad.

(No pude publicar la imagen, pero te animo a que lo revises)