Mejor manera para que los usuarios seleccionen un rango de fechas
En mi aplicación, los usuarios seleccionan un rango de fechas para el que se requieren resultados. La interfaz de usuario se parece a esto:
A mis usuarios no les gusta esto, porque el selector de fecha requiere que seleccionen una fecha específica. Esto es mucho más preciso de lo que requieren: la mayoría de los resultados compilados por el sistema tienen resultados solo mensuales o trimestrales. Algunos son solo anuales.
Las dos ideas que se me ocurren son estas:
A la izquierda, simplemente use un cuadro combinado para seleccionar fechas válidas. El problema con este enfoque es que en algún momento los resultados serán diarios y el rango de fechas válido se remonta a la década de 1860. Eso suma demasiados elementos para manejar en un cuadro combinado.
A la derecha, usando un trío de comoboxes para seleccionar la fecha. Esto tiene algunas ventajas. Si los resultados van a ser mensuales, podría deshabilitar el combo de día; Si los resultados van a ser trimestrales, también podría restringir los elementos disponibles en el combo de mes. Pero, parece que este diseño requiere un montón de clics para usar.
¿Cuál es un diseño alternativo para UX que permite a los usuarios seleccionar fechas "útiles" con mayor facilidad?
Mi pila de tecnología es C #, WinForms, .NET 3.5
Actualización 1 de octubre
- Los rangos de fechas seleccionados por mis usuarios suelen ser largos, de varios años a varias décadas, y arrojan resultados escasos durante un largo período.
- Los únicos valores predeterminados comunes que se han identificado son "Lo antes posible" para la fecha de inicio y "Hasta hoy " como la fecha de finalización.
Muchas buenas ideas en las respuestas hasta la fecha, gracias a todos.
Actualización 2 de octubre
- Algunas de las respuestas a continuación (y supongo que muchos de los lectores) suponen que necesito el rango de fechas para la generación del informe. En realidad, esta parte particular de mi aplicación es más un motor de consulta. Si este detalle inspira nuevas ideas, por favor responda.
En general, los usuarios son bastante precisos y rápidos al ingresar fechas como cadenas en un cuadro de texto, siempre que su validación no sea innecesariamente exigente y proporcione una corrección automática y valores predeterminados decentes para los subcampos (por ejemplo, aceptando 2-9-04 como así como 02/09/2004). Los controles de calendario son excelentes para proporcionar una opción cuando el usuario no está seguro de la fecha (por ejemplo, para los casos en que el usuario está pensando "miércoles la próxima semana"), pero no debería ser la única forma de ingresar fechas. Los menús desplegables separados para cada subcampo lo hacen lento para el usuario.
Si tiene acceso a los registros de consultas, estudíelos para tener una mejor idea de qué tipo de fechas están usando los usuarios. Si bien es posible que deba admitir fechas arbitrarias hasta 1860, es posible que solo necesite optimizar el diseño para una pequeña cantidad de fechas o patrones de fechas.
Aquí hay algunas posibilidades:
Por defecto. Posiblemente, la mayoría de sus consultas son predecibles solo desde la página en la que se encuentra el usuario (por ejemplo, para el último mes o el último trimestre o el último año, dependiendo de la página/ventana). Por defecto, su rango de inicio a estos valores para cada página y los usuarios casi nunca tendrán que ingresar nada.
Lista de rangos de fechas típicos. Si unos pocos rangos de fechas constituyen la gran mayoría de sus consultas (por ejemplo, cada mes del año pasado), enumérelas en un cuadro de lista o lista de botones de radio. El último sería "Personalizado", que habilita un par de cuadros de texto con controles de calendario para la entrada de fechas específicas por parte del usuario.
Desplegable para entradas comunes. Si hay una lista predecible relativamente pequeña de los valores Desde y Hasta, proporcione un cuadro combinado Desde y Hasta que acepte cualquier fecha escrita por el usuario pero con una lista desplegable de las fechas más comunes Desde y Hasta (por ejemplo, al comienzo de cada trimestre en el último año para el campo De).
Cuadro de texto único. Si la mayoría de los rangos de fechas son meses completos, trimestres y años, proporcione dos métodos para ingresar rangos de fechas. El valor predeterminado tiene un único cuadro de texto con la etiqueta "Mes, trimestre o año"; que acepta entradas como "Sep" (predeterminado en septiembre más reciente), "6/09", "3T06" y "1933". Estudie los materiales escritos por el usuario para ver qué tipo de cadenas anticipar. El método no predeterminado proporciona cuadros de texto independientes desde-hasta para fechas arbitrarias.
Micro-gramáticas. Si son principalmente sus usuarios expertos los que se quejan de la entrada de la fecha, considere la posibilidad de admitir micro-gramáticas para los cuadros de texto Desde y Hasta, donde el usuario puede ingresar una fecha exacta u otros atajos de sintaxis (por ejemplo, "Último trimestre" o "LQ "En el cuadro Inicio se interpreta como todo del último trimestre completado). Ver Recopilación de datos de manera eficiente con microgramáticas de cuadros de texto
¿Por qué no considerar un control deslizante de la línea de tiempo, con los puntos de referencia más recientes para seleccionar?
Si tiene informes de 1860, ¿con qué frecuencia deben regresar?
| Report XYZ, Jan 12, 1983 |
<--- Earlier \/ Later --->
|------------------------------||----------------------------------|
^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^
¿Algo así podría permitirles elegirlo visualmente? Con la burbuja encima de la lista, debería facilitarles ver lo que tienen. Anterior/posterior, un botón/pestaña se detiene para mover el año o similar. El control deslizante es accesible por teclado.
Use dos calendarios y atenúe los días que no se pueden seleccionar. Brindará a sus usuarios la ventaja de los calendarios (poder ver un mes entero a la vez, saltar hacia adelante y hacia atrás en el tiempo fácilmente, y poder seleccionar cualquier fecha que deseen) con la restricción de solo ciertas fechas válidas. Cuando un usuario hace clic en una fecha atenuada, déle su opinión sobre por qué esa fecha no es válida o use una leyenda.
Hipmunk.com hace un gran trabajo simplificando esto. Tienen dos calendarios a la vista en todo momento, y las fechas antes de hoy están atenuadas (es tan obvio por qué en este caso que no necesitan especificar por qué, pero es posible que tenga que hacerlo). Al hacer clic en una fecha, se selecciona la fecha de inicio, y al hacer clic nuevamente se selecciona la fecha de finalización. Observe cómo también tienen campos de fecha para que pueda escribir si lo desea, y los campos se resaltan al hacer clic para indicar qué fecha seleccionará. Es poco convencional y todavía no "no me hagas pensar", pero es una excelente manera de combinar estos controles con elegancia sin agregar un montón de widgets ricos. Echale un vistazo:
Una cosa que Hipmunk aún podría hacer IMO es resaltar los días entre su partida y su regreso, solo como un detalle visual adicional. En este momento, tus ojos todavía tienen que analizar el espacio entre las dos fechas como "oh, claro, cada fila desde esta fecha hasta esa fecha es donde estaré lejos".
(Bonificación increíble: intente especificar una fecha de salida después de la fecha de regreso)
En realidad, esto es de un software basado en la web que uso en el trabajo, pero la idea puede traducirse bastante fácilmente a WinForms.
Genero informes de diferentes rangos de fechas todo el tiempo con este control. Los cuadros de texto no están enmascarados, y son bastante indulgentes con los valores que se pueden convertir en fechas, por lo que puedo enviar mensajes de texto con diferentes intervalos de fechas sin problemas. Una vez que salga del campo, la fecha se formatea en un formato de fecha "apropiado". Si no puede calcular la fecha, el texto se vuelve rojo y tiene un pequeño símbolo de error al lado (como si escribo una fecha ambigua, como 1109).
Si necesito hacer algo específico, puedo hacer clic en el botón de calendario a la derecha del cuadro de texto para ver el calendario (por ejemplo, si necesito ver informes de la tercera semana de marzo de 2009, no necesito saber las fechas la parte superior de mi cabeza).
Prefiero este estilo, porque me toma apenas un segundo completar los rangos de fechas, es solo 010109 tab 030109 tab y luego voy al siguiente conjunto de detalles.
Arriba, control vacío. Fecha media de mensajes de texto gratuitos. Abajo, fecha formateada y control de calendario.
En cuanto a su tercera opción, tengo un software que tengo que usar que usa ese estilo, y lo odio, especialmente porque tengo que usar el mouse. También me gustaría señalar que las fechas que se muestran son las fechas predeterminadas cuando cargo la página, por lo que, de manera predeterminada, me gustaría buscar elementos mayores que el futuro, pero menores que el presente. A ENORME desventaja de esto es que los años están codificados en las listas desplegables: tuvimos que esperar hasta febrero de 2010 para que se agregue 2010 para poder buscar cualquier cosa reciente.
Si sabe de antemano que una consulta en particular solo tiene resultados trimestrales, puede cambiar un poco su diseño e ir con una selección y elección de año como esta:
Y podría deshabilitar los trimestres del año actual que aún no se han generado.
No leí todas las respuestas. Quizás alguien ya sugirió comenzar con los controles que la mayoría de los usuarios necesitan la mayor parte del tiempo y luego revelar progresivamente controles adicionales. Por ejemplo, haga clic en un enlace para revelar controles para el día y el mes, para varios intervalos de fechas no superpuestos, etc.
O esto:
Aquí está mi solución.
, 
Estoy enamorado del diseño utilizado en el plugin bootstrap-daterangepicker jquery.
Básicamente, tiene rangos predeterminados y los campos predeterminados de - a con marcadores de fecha que resaltan el rango seleccionado. 
Campo de rango de fechas desplazable: 5 pasos de interacción como imagen .Png con comentarios en ruso.
Si es necesario, puedo hacer la instrucción completa de interacción y áreas funcionales en inglés y página de demostración.
Aquí es cómo resolví un problema similar ... podría cambiar los 30 días/60 días/90 días para alertar a los informes más comunes generados (anual/trimestral/mensual). La función de rango de fechas abre una información sobre herramientas con capacidades de rango de fechas para aquellos usuarios que buscan específicamente un rango de fechas, pero no obliga a un usuario a ingresar fechas para generar resultados. 
Me gusta cómo se implementa en la aplicación Google Calendar (MIUI). Hay dos hiladores para elegir la fecha y la hora. Así es como se ve:
Cuando configura la fecha y hora en el primer selector, el segundo se establece automáticamente en +1 hora.
¿Qué pasa con el jquery ui selector de rango de fechas:
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/
puede rellenar previamente algunos valores predeterminados y configurarlo para que el año y el mes puedan desplegarse en lugar de solo tener las flechas <> por mes.
Podría mostrar un selector de calendario de aspecto normal, pero si el usuario seleccionó el mes de la barra de título, eso automáticamente completaría las fechas de inicio y finalización como el inicio y el final del mes. Del mismo modo para el año.
El usuario podría anular la fecha de finalización si quisiera un rango ligeramente diferente.
Sin embargo, no estoy seguro de cómo mostrarías un cuarto.
Dos pensamientos:
¿Puede presentar diferentes selectores de fechas para diferentes tipos de informes (por ejemplo, dijo que algunos eran anuales, en cuyo caso no necesita más que el año, que podría ser un simple campo de texto).
¿La fecha de inicio/finalización es la forma en que los usuarios piensan acerca de los informes? En varios proyectos, he trabajado en las personas que quieren informes que piensen en términos de una fecha y un período de tiempo en lugar de dos fechas. Entonces, para los informes trimestrales, es posible que quieran 4 años a partir del tercer trimestre de 1980.