Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Diseñando selectores de fecha (y II): checklist y ejemplos

Ayer os hice una pequeña introducción al diseño de selectores de fecha, hoy os voy a traer una checklist para diseñarlos y unos ejemplos que os puedan servir de ayuda para diseñar los vuestros.
Selector de fechas de Swiss. Imagen de Smashing Magazine
Checklist de selectores de fecha
Aquí os voy a poner el completo checklist que ha elaborado Vitaly Friedman en su artículo para diseñar selectores de fechas:
Preguntas generales
- Decidir si estás diseñando un selector de fecha, un selector de rangos de fecha o un selector de fecha y hora.
- ¿El cambio entre la entrada por teclado y el overlay del calendario es continuo con activación automática del siguiente paso?
- ¿Es un selector de fecha el patrón de diseño correcto en primer lugar? ¿Sería más rápido otras opciones por defecto como un menú desplegable, el selector de fecha nativo del SO o un interfaz conversacional?
- ¿Cómo evitamos mostrar fechas no disponibles o sin ningún resultado?
- Considera técnicas de localización, por ejemplo seleccionar el mes con un menú desplegable en el idioma del usuario y el día y el año mediante un dispositivo de entrada.
Diseño de los campos de entrada
- ¿Debe el usuario poder escribir la fecha o sólo seleccionar la fecha de un overlay con un calendario?
- Si metemos la fecha mediante un dispositivo de entrada, ¿está preparada la interfaz para soportar varios tipos de separadores y de formatos? ¿Es accesible mediante teclado?
- ¿Permitimos fechas “inteligentes”? ¿Permitimos cosas como “mañana”, “la semana que viene”, “en julio” como entrada?
- ¿El selector de fecha debe de tener valores por defecto? Si es así, ¿cuáles deben ser esos valor por defecto?
- ¿Debemos mantener que le muestre el formato de entrada al usuario mientras lo está tecleando?
- ¿Mantenemos los campos rellenados después de refrescar la página y añadimos un enlace de “Borrar todo” o no?
- ¿Debemos añadir una navegación rápida que salte entre día, mes y año en el campo de texto y en el overlay de calendario?
Diseño del overlay del calendario
- Idealmente cualquier fecha debería de poder ser accesible en máximo tres gestos.
- ¿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?
- ¿Cuántas semanas, meses o días mostrarás en una vista dada?
- ¿Cómo incorporamos las opciones de localización? Por ejemplo, la semana es de lunes a domingo o de domingo a sábado.
- ¿Cómo indicamos la fecha actual en el overlay del calendario?
- ¿Debemos incluir algún tipo de navegación rápida de “anterior, actual, siguiente”?
- Imagina o investiga los datos que son importantes para tus usuarios y muéstralos, pueden ser precios, disponibilidad, fiestas. Márcalos mediante puntos de colores o diferentes colores de fondo.
- ¿Estás seguro que el overlay del calendario desaparece cuando el usuario pulsa fuera de él? ¿Tienes un botón de cerrar también?
- ¿Es posible tecleando “Escape” ir al campo numérico?
- ¿Debe poder el usuario borrar la selección mediante un botón que se lo permita?
Diseño de un selector de rango de fechas
- Idealmente, cualquier rango de fechas debería poderse seleccionar con seis gestos.
- ¿Se visualiza inmediatamente el rango seleccionado conectando ambas fechas y mostrando un cambio de color?
- ¿Se anuncia el rango seleccionado por un lector de pantalla como cuando se selecciona?
- ¿Hemos considerado diseñar un selector de fechas flexibles?
- ¿Usamos atajos de teclado para navegar más rápidamente entre días, meses y años?
Diseño de un selector de hora
- La opción más sencilla es una barra deslizante para los días y un ordenamiento horizontal para las horas.
- ¿Qué es más útil seleccionar primero el día o la hora? Si seleccionas primero la hora, puedes descartar los días que no la tengan disponible.
- Considera añadir los espacios de tiempo más usados y sugiere atajos a las selecciones más comunes.
Ejemplos
Selector de día y hora para una guía de TV
Captura de la guía de TV de HD+
Vitaly pone como ejemplo de selector de día y hora el de HD+ (proveedor de canales por satélite alemán) como podemos ver el usuario puede elegir entre mostrar la linea de tiempo horizontales o verticales, el día que quiere ver la programación y en qué franja horaria (mañana, tarde, tarde-noche o noche)
Selector de fechas con varios formatos de entrada pero sin validación
Vitaly pone como ejemplo de un selector de fechas que permite varios formatos de entrada pero sin validación de estos el de planificador de viajes a Zurich ZVV, lo que no es bueno como se muestra en el vídeo de ejemplo.
Selector de fechas con varios formatos de entrada
Vitaly pone como ejemplo de buen selector de fechas con varios formatos de entrada y validación a NSB, un planificador de viajes noruego.
Os dejo con un enlace al video de uso del selector de NSB que ha hecho Vitaly.
Selector de fechas de Airbnb
Vitaly pone como otro ejemplo a Airbnb, que usa elementos para destacar en que fechas hay mas alojamientos disponibles, además de incluir atajos de teclado para que el usuario navegue más rápidamente por él.
Os dejo con un video de uso del selector de fechas de Airbnb:
En el artículo de Vitaly tenéis muchos más ejemplos que os animo a que los estudiéis y espero que os sirvan como casos de uso. Ya que los selectores de fecha son un elemento de diseño importante en una gran variedad de productos digitales relacionados con el turismo, los viajes o el ocio.
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.
[…] Solución para fechas: la mejor solución a un desplegable en el caso de las fechas es un calendario (como ya escribimos sobre ellos, os enlazo la primera parte y la segunda parte). […]