Hay que reconocer que a nivel de usabilidad, un time picker no tiene tanto sentido como usar un date picker, sin embargo, quería ver  las distintas implementaciones que hay por internet.

Hay que tener en cuenta, que normalmente lo que se quiere es que una persona ponga la hora y los minutos, y si a caso, si es AM o PM (cuando no se usa un formato de 24 horas). Por lo general, y en mi opinión, un text input de los de toda la vida junto con una función en javascript que valide que lo que ha metido el usuario es un tiempo correcto (p.ej: hh:mm), en general, es más que suficiente.

Bueno, vayamos a ver los distintos time pickers que me he encontrado:

NoGray Time Picker

En el número 1, bonito donde los haya, y el único que realmente me ha gustado, situo a NoGray Time Picker. Debo reconocer que es de los pocos que me he encontrado que mejora el diseño de la web sin empeorar la usabilidad. Como datos de interés, diré que este time-picker utiliza mooTools por debajo.

Como cabe esperar, al hacer click en las manecillas del reloj, éstas se mueven, permitiéndonos así seleccionar la hora

Aquí podeis ver un ejemplo de este time-picker funcionando

Time Picker jQuery plugin

Time Picker es un plugin de jQuery, que básicamente está formado por tres select, uno para la hora, otro para los minutos y otro para saber si es por la mañana o por la tarde. Recomiendo el uso de este plugin, siempre y cuando se quiera que el usuario introduzca una hora en intervalos de 10 o 15 minutos, con el fin de no degradar la usabilidad.

Podeis ver que es el plugin no tiene mucho misterio

Fancy Time Picker

Por otra parte tenemos a Fancy Time Picker, que si bien no es de los que más me desagradan, muy usable muy usable no es, porque sale una tabla con muchos números y creo que al final en vez de ayudar al usuario, lo que hace es colapsarlo.

La demo de Fancy Time Picker la podeis ver en este enlace.

Clock Pick

Clock Pick es otro time picker de los que aparece a poco que se indague en vuestro buscador de confianza. Se trata de una extensión de jQuery, y la verdad es que a mi parecer, también empeora la usabilidad, incluso más que en el caso anterior.

A continuación teneis una captura de pantalla:

De todos modos, creo que hasta que no se prueba un ejemplo real, no se aprecia hasta que punto se degrada la usabilidad. Os animo a ir a esta página de ejemplo, y que valoreis vosotros mismos.

jQuery.ptTimeSelect

ptTimeSelect es otro plugin de jQuery que trata de realizar un seleccionador de horas. El problema que yo le veo es lo de siempre, demasiado lío visual para simplemente seleccionar horas y minutos.

Seguro que alguno pensará:

- “Oye, que si que tienen sentido los números. ¿No ves que estan agrupados por horas y minutos, y puedes seleccionar AM o PM?”

- ” Sí, tienes razon, tienen sentido” – contestaré yo – “¿Pero no es verdad que has tardado como 3 segundos en encontrárselo? Enseñaselo a tu madre y preguntale si entiende algo…”

Pues eso, que demasiado  lio para seleccionar una hora.

jQuery TimePickr

Finalmente, para terminar con la lista, tenemos otro plugin de jQuery llamado Time Pickr. Reconozco que el plugin es ingenioso, en el sentido de usar un menú de navegación para seleccionar la hora, sin embargo, me parece liar demasiado las cosas, y no se hasta que punto puede ayudar a un usuario a poner una hora. Creo que es complicarlo un poco, en cualquier caso, cada cual que se forme su opinión.

Conclusión

Yo en el caso de elegir algún time-picker para cualquiera de mis proyectos, creo que me quedo con los dos primeros ejemplos  (No Gray Time Picker ó bien jQuery Time Picker), el resto los descarto. La reflexión que yo hago es, ¿realmente son necesarios sistemas tán “sofisticados” para permitirle al usuario seleccionar una hora? La idea de usar uno de estos pickers debe ser la de ayudar al usuario, facilitarle su trabajo, y creo que algunos de ellos lo complican aún más.

Yo creo que la clave para saber si el nivel de usabilidad es o no bueno, es preguntarte a ti mismo:

¿Entendería mi madre/padre/abuelo/abuela a la primera cómo funciona esto?

• Si la respuesta es, sí, inmediatamente, ahí lo tienes
• Si la respuesta es que sí, después de unos segundos… no acaba de ser usable.
• Si la respuesta es no, obviamente no es usable.

Trackback URL

javascript, picker, time picker