Diseñando selectores de fecha (y II): checklist y ejemplos

Experiencia de usuario
20/7/2017
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

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.

swiss airlines datepicker large opt e1500550783555
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 pantalla 2017 07 20 a las 12.33.52 e1500552155432
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.

¿Quieres darnos tu impresión sobre este post?

Una respuesta a “Diseñando selectores de fecha (y II): checklist y ejemplos”

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.