Diseñando selectores de fechas (I)

Seleccionar una fecha es una acción esencial en cualquier producto digital, desde elegir una fecha para un viaje, elegir nuestro cumpleaños o seleccionar un rango de fechas para unas vacaciones.

Imagen de Bill Ward

Un calendario es un patrón de diseño conocido por todos y universal que puede ser un selector muy válido para la mayoría de las situaciones, pero puede haber otro tipo de situaciones donde no sea la mejor opción.

En Smashing Magazine, Vitaly Friedman ha escrito un artículo muy completo sobre selectores de fechas y que os recomiendo, ya que tiene gran cantidad de ejemplos para una diversidad de casos diferentes de uso. Os voy a hacer un resumen en dos partes pero aún así os animo a que leáis el artículo original.

Consideraciones en un selector de fecha

Antes de diseñar cualquier cosa, nos dice Friedman que debemos responder una serie de preguntas:

• ¿Estamos diseñando un selector de fecha, un selector de rangos de fecha o un selector de fecha y hora?
• ¿Puede el usuario ser capaz de escribir la fecha en el campo o sólo seleccionarla mediante el selector de fecha?
• ¿Debe aparecer un overlay con el selector de fecha cuando se pulse en el campo, cuando se pulse en el icono de calendario o en ambos casos?
• ¿Debe tener el selector de fecha valores por defecto? Si es así, ¿cuáles?
• ¿Debemos incluir algún tipo de interacción de siguiente, actual, atrás? Si es que sí, ¿cómo lo diseñamos para los días, los meses y los años?
• ¿Debemos mejorar la experiencia mostrando valores de precio, disponibilidad…?
• En pantallas pequeñas, ¿el selector de rangos de fechas debe desaparecer después de elegir dos fechas o después de darle el usuario a continuar?
• ¿La semana empieza en lunes o en domingo?
• ¿Cómo evitamos las fechas no disponibles o que no devuelvan ningún resultado?
• ¿Es un selector de fecha el patrón correcto para seleccionar la fecha en primer lugar?

Pueden parecer demasiadas preguntas pero si queremos hacer un buen trabajo de diseño es necesario responderlas todas, ya que dependiendo de la respuesta nos decantaremos por una solución de diseño u otra.

Entrada escrita de la fecha

Cuando una fecha deba ser introducida mediante el teclado debemos dejarle claro al usuario el formato en el que debe introducirla, porque si es un sitio internacional nos podemos encontrar con usuarios que usen una variedad de formatos (DD/MM/AA, MM/DD/AA, AA/MM/DD, escrita con letras…) dependiendo del formato que usen en su país de origen o al que estén acostumbrados. Por lo que hay que señalar correctamente el formato (o formatos) que entiende el selector para que el usuario no cometa errores de una manera clara y concisa.

Valores por defecto

Los valores por defecto cuando se trata de seleccionar una fecha con antelación, debe ser la fecha actual (si es un selector de fecha y hora lo mismo, la fecha y hora actuales). En el caso de una guía de TV en pantalla, por ejemplo se puede hacer una línea temporal para que el usuario vaya navegando por la programación comenzando por la fecha y la hora actuales.

Para no alargar demasiado el artículo, me dejo para mañana la checklist sobre selectores de fecha y comentaros los ejemplos de diversos casos de uso que hace Vitaly Friedman en su artículo.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.