user-interface - sistema - user interface design pdf
Los mejores controles de GUI para describir un rango de tiempo (10)
A menos que haya un control de tiempo más avanzado en su kit de herramientas GUI, dos controles de calendario que representan inicio y fin son los más directos. Además, debe decidir cómo desea usar la información. Por ejemplo, si utilizó una fecha de inicio y un intervalo para incrementar esa fecha, cambiar la fecha de inicio no cambiaría el significado del intervalo. Realmente depende de lo que quieres hacer.
Necesito que los usuarios finales especifiquen un intervalo de tiempo, que se almacenen y utilicen internamente como fecha / hora de inicio y fecha / hora de finalización. El rango podría ser minutos o podría ser días.
¿Alguien ha descubierto un control interactivo que pueda manejar esto elegantemente?
La mayoría de los toolkits GUI tienen un control de calendario, por lo que podría especificar "inicio" con un calendario para el día y un campo de texto para el tiempo ... y lo mismo para "final".
También podría reemplazar los controles "finales" por un solo campo de texto o control deslizante que simplemente describa cuántos segundos / minutos / horas después del inicio "final" es.
Lo que no me gusta de estas ideas es cuánto clic, tipeo y más clics se requieren para describir un concepto tan simple. También tengo que darle una palmada a la mano del usuario si se escribe una hora que no es reconocible como una hora.
¿Hay una implementación más limpia que estoy pasando por alto?
El diseño de la interfaz de usuario depende en gran medida de la aplicación. "Lo mejor" implica algún tipo de métrica que pueda medir soluciones. En el diseño de la interfaz de usuario, una métrica de este tipo puede ser "de inicio a muchos clics / pulsaciones de teclas para completar la tarea". donde un número más pequeño es mejor. Entonces, una vez que haya definido su métrica, podrá comenzar a clasificar las soluciones en buenas, mejores y mejores.
También desea reducir la carga cognitiva para el usuario. Si el usuario tiene que ingresar el último día en el que se puede intercambiar un producto según una política de devolución de 90 días, solicitar la fecha de inicio y final los obligaría a hacer la fecha matemática, lo cual no es divertido. En este ejemplo, una fecha de inicio con un "delta" de x días representaría una carga menor para el usuario.
Dependiendo de su aplicación, podría considerar y acercarse al selector de rango de tiempo de Google Finance en sus gráficos: http://finance.google.com/finance?q=.dji
No hay una respuesta única, depende del contexto. Para muchos lugares, buenos controles de texto son suficientes. Por supuesto, estas cosas todavía pueden ayudar al apoyar el pegado y algunas acciones de aumento / disminución. Quizás incluso pueda validar el valor.
Luego hay lugares que necesitan algo más. El calendario puede ser realmente útil para ingresar fechas y algún tipo de control deslizante podría usarse por tiempo. (El calendario de Lotus Notes tiene un control deslizante).
Mi consejo es:
Piensa lo que necesitas. No coloque widgets complicados en un cuadro de diálogo menos utilizado.
Si necesita estos lindos widgets útiles, verifique si están listos en la biblioteca que está utilizando y tómese un tiempo para ver cómo otros los han hecho.
Siempre tenga los controles de texto con soporte para pegar.
Observe lo que la gente está haciendo con su control de rango de tiempo. Luego, escríbalo para que sea más adecuado para hacer lo que la gente quiere lograr con él. Por ejemplo, deje fechas pasadas si ingresar fechas futuras solo tiene sentido.
Jonathan Leighton ha hecho una buena cita con un elemento de entrada en jquery que he encontrado muy bueno para ingresar las fechas. Esto es beneficioso de manera que el usuario puede ingresar la fecha haciendo clic o escribirla directamente. El usuario también obtiene directamente la pista sobre escribirlo en el cuadro. Si combina esto con algún tipo de línea de tiempo -objeto, en realidad puede ir muy lejos. ¡Solo evite hacer elementos de UI que sean confusos o enojados!
Tiendo a buscar patrones de diseño comunes para inspirarme cuando estoy considerando problemas como este.
La Biblioteca de patrones de Yahoo ofrece algunas soluciones potenciales .
El sitio de patrones de interfaz de usuario también ofrece algunas sugerencias , y vale la pena echarle un vistazo.
Para una buena medida, aquí hay otra solución en la biblioteca de patrones de Welie .
Otra fuente de inspiración podría ser otros sitios y aplicaciones. Por ejemplo, piense en todos los casos de uso donde se requiere registrar duraciones de tiempo corto y largo. Como ejemplo, registro de TimeSheet de la empresa, software de registro de kilometraje de automóviles de la empresa, software de grabación de tareas, aplicaciones de cronómetro, aplicaciones de calendario, etc. Luego, vea cómo han manejado los controles de GUI para capturar intervalos de tiempo.
No he encontrado personalmente una solución favorita para elegir la fecha y la hora. Pero, creo que me gustaría algo como esto.
- El usuario hace clic para mostrar el calendario emergente
- Popup muestra 2 calendarios lado a lado (fecha / hora de inicio y fecha / hora de finalización)
- El Calendario 1 muestra la fecha de hoy, y el otro también muestra la fecha de hoy.
- Los controles de calendario permiten la navegación habitual y la selección del día mes año.
- Debajo de cada calendario hay un cuadro hh: mm, que por defecto es la hora actual.
- El usuario puede editar el valor en este cuadro de tiempo usando las flechas arriba o abajo o escribiendo.
- Alternativamente, muestre un reloj analógico debajo de cada calendario. Se requieren 2 clics de ratón para establecer la hora (haga clic en 1 por hora y haga clic en 2 por minutos).
Espero que esto ayude
Una de las formas en que he visto trabajar muy bien es usando un diagrama de Gantt:
http://en.wikipedia.org/wiki/Gantt_chart
Puede crear un solo gráfico de líneas y luego puede escalarlo a lo largo de meses, días, horas y minutos, dependiendo de qué tan amplio o acercado haga el control. El problema es que no conozco ningún control por el momento que haga solo una línea, por lo que puede necesitar crear una personalizada. Posiblemente podría buscar un control de diagrama de Gantt y simplemente hacer una tarea / elemento.
Vea el control de fecha de VisualHint . Se puede configurar de muchas maneras, incluido un intervalo de tiempo. Esto le permitiría usar una instancia de control para mostrar la hora de inicio y otra para establecer el intervalo de tiempo hasta que se complete el período. El control también es compatible con un marco base extensible por lo que es posible combinar el inicio / finalización o el inicio / lapso en un único control.
Soy fanático de un viejo control que vi usar WAY en los 90 con Inventor (y más tarde Open Inventor) en máquinas SGI (y luego en PC, etc.): una esfera infinita.
Algunas capturas de pantalla, un poco pequeñas, están aquí . Por supuesto, se ha hecho en una variedad de plataformas desde, incluyendo cosas similares en el iPhone .
Creo que un selector de fecha / hora funcionaría bien con dos diales, cada uno representando un orden de magnitud de fecha / hora. En el arte ASCII, con cada dial entre [corchetes] podría verse así:
[20 Oct | 21 OCT | 22 Oct ] [11:15 .. 11:30 .. 11:45..]
o con 3:
[20 Oct | 21 OCT | 22 Oct ] [11 .. 12 .. 1pm] [12:31 .. 12:32 .. 12:33]
Hay una serie de variaciones que puede probar (vertical / horizontal, fecha / hora, fecha / hora / minuto, etc.).
Los diales, aunque algo raramente usados, son un dispositivo natural para que los humanos interactúen, y su opción de rotación infinita (a diferencia de una diapositiva que siempre debe detenerse) se adapta bien a las fechas / horas.
FWIW
Aquí también hay algunas soluciones: http://quince.infragistics.com/html/PatternView.aspx?name=Date+Time+Range+Input
Esto llega tarde, y no es un control per se. Leí esta idea en un blog que ya no puedo encontrar (de hecho, encontré esta publicación al intentar encontrarla). La idea es usar la metáfora de un reloj de pared. Esto es lo que implementé por gusto. No es un control funcional. Podría usar algo como esto como punto de partida para capturar tiempos de forma natural. Tres clics como máximo, dos la mayoría del tiempo. Solo los diales se acercan.
http://www.viridium.ro/clock-sample/
Use un navegador compatible con HTML5; es decir, Chrome.