La elección de fechas (en adelante, por simplicidad, usaré la palabra calendario) se usa a menudo en los sitios. Reserva de hoteles, vuelos, autos, compra de boletos. Es un tema tan trillado que parece no tener sentido escribir al respecto.

Pero ... no hace mucho tiempo, me enfrentaba a la tarea de diseñar un calendario para seleccionar períodos. El rango de selección de fechas varió de 2 días a varios meses.

El público objetivo es bastante heterogéneo: edad de 35 a 60 años, conocimientos informáticos desde principiantes hasta usuarios seguros.

Objetivo: hacer el formato de selección de fecha más conveniente que sea comprensible para el público objetivo.
Antes de diseñar, los competidores fueron estudiados y probados, se leyeron varios artículos sobre un tema determinado.

Quiero compartir las conclusiones y ejemplos hechos como resultado del trabajo. No habrá descubrimientos para alguien, pero espero que alguien encuentre algo nuevo y útil para él.

La presencia del botón "Finalizar" (Confirmar, Seleccionar, Aceptar ...) en el cuerpo del calendario

Las personas no siempre vienen al sitio con fechas claras en sus cabezas.

Pueden indicar un período, reflejar, cambiar fechas (inicio, finalización, período completo). La mayoría de los sitios ocultan el calendario inmediatamente después de seleccionar una fecha. www.booking.com , www.aeroflot.ru como ejemplo. Este comportamiento del sistema molestó a los usuarios en una situación en la que se eligió accidentalmente la fecha incorrecta o aún no se ha tomado una decisión final. “Hacer clic de manera incorrecta” es especialmente cierto para las personas mayores, con visión deficiente, apuradas o incapaces de concentrarse. Las razones de este diseño son comprensibles: menos clics, menos carga.

Pero no siempre sabemos quién y cómo interactuará con la interfaz. En qué condiciones se ubicará.

Para esta situación, la solución Google Flights es conveniente. Camine las fechas en el pensamiento que desee, el calendario será visible hasta que haga clic en el botón "Finalizar". Convenientemente, existe una sensación de control y comprensión de la interfaz.

Mostrar resultados de búsqueda sin clics adicionales

Dicha función está bien implementada en el sitio www.trivago.ru . Entro en los parámetros necesarios y los resultados ya están cargados.

Destacado visual de las fechas de inicio y finalización.

Los usuarios dejaron buenas críticas sobre la disponibilidad de dichos consejos. La diferencia visual entre las fechas de inicio y finalización sirvió de anclaje original y facilitó el trabajo con el calendario.

Algunos sitios carecían de indicadores de fechas actuales.

No quiere decir que este error fatal, que afecta en gran medida la facilidad de interacción, pero 6 de cada 10 personas evaluadas notaron que realmente carecen de ese indicador como una especie de "ancla" que muestra la relación entre las fechas seleccionadas y actuales.

Tiempos de ejemplo : www.airbnb.ru

Está claro qué fechas se pueden seleccionar y cuáles no. Fecha actual no resaltada



Ejemplo dos : www.ozon.travel/flight/

Otra solución: las fechas inaccesibles no se indican en el calendario. La fecha actual es la primera, sin dejar dudas de dónde comenzar la búsqueda.



Ejemplo tres : www.booking.com

Fechas actuales, disponibles e inaccesibles visualmente comprensibles

Capacidad para restablecer rápidamente las fechas seleccionadas

Útil si el usuario ha decidido cambiar completamente la solicitud. Para una limpieza rápida, algunos usuarios actualizan la página. Y hay situaciones en las que el usuario elige las fechas, pero actualiza la página por accidente.

Si el usuario se actualiza accidentalmente, es poco probable que se deleite con la necesidad de completar todo nuevamente. Si se actualizó intencionalmente, verá las fechas guardadas y comenzará a generar nuevas.

Para resolver estos problemas, puede colocar un enlace destacado "Restablecer" o "Nueva búsqueda" al lado de ingresar la fecha en algún lugar a la vista.

Esto le permitirá borrar rápidamente los resultados de búsqueda, si es necesario, y guardar datos en caso de una actualización accidental.

www.google.com/flights

Campos prellenados

En algunos sitios probados, el campo "Fecha" ya se ha completado.

En algunos casos, solo había una fecha de inicio, en algunos, una fecha de inicio y finalización. Este comportamiento de la interfaz causó descontento entre los probados y confundidos. Por supuesto, cada caso debe considerarse individualmente.

Por ejemplo, la compra de boletos de tren o aéreos, las reservas de hotel pueden realizarse con mucha anticipación. Entonces la fecha actual es inapropiada.

Al reservar entradas, por ejemplo, para el cine, este enfoque puede estar justificado.

Los siguientes son ejemplos de campos rellenados previamente. ¿Es conveniente? Vale la pena pensarlo.

Ejemplo uno : www.rzd.ru



Ejemplo dos : www.trivago.ru



Ejemplo tres : www.rentalcars.com

Rellenar automáticamente la fecha "Volver"

Otro "chip" común con un signo menos. Al ingresar la fecha “Allí”, la fecha “Atrás” se sustituye automáticamente. Esto suele ser al día siguiente.

Este comportamiento de la interfaz también causó insatisfacción con su imprevisibilidad y su excesiva independencia.

Vale la pena pensar en qué casos ayudar y en qué dejar que las personas tomen sus propias decisiones.

Como ejemplo para probar sitios: www.booking.com , www.trivago.ru

Ideas para una nota:

Finalmente, buenas ideas que no eran necesarias para el desarrollo, pero que permanecieron en la alcancía.

Indicación de costo inmediatamente en el calendario

www.google.com/flights

Al elegir las fechas de ida y vuelta, se calcula el costo total del vuelo. Los vuelos más baratos se destacan en un color separado. Es conveniente si la tarea es encontrar la opción más barata o comparar precios.

Opciones para mostrar / cambiar entre meses

Cuando necesite mostrar varios meses a la vez, puede espiar ideas y pensar en una solución conveniente.

Idea Times : www.rentalcars.com



Idea dos : www.ozon.travel/flight/



Idea tres : www.swiss.com

Separación visual de fines de semana de lunes a viernes.

La pregunta más fácil: ¿comenzar la semana los lunes o domingos? Depende del servicio prestado y del público objetivo. Si los clientes solicitan sus servicios con más frecuencia los fines de semana, resalte los fines de semana y posiblemente los días festivos.

www.skyscanner.net

Mini podómetro para transiciones rápidas

Para planificar viajes cortos, etc. No es necesario abrir un calendario. Aquí puedes mostrar los resultados de búsqueda.

Debe recordarse que los mini-steppers son una buena mejora al elegir fechas, pero no debe reemplazarlos con una ventana emergente completa con un calendario.

Que elegir Primero examine el propósito de los rangos de entrada de calendario y fecha. Si las fechas van mucho al pasado o al futuro (por ejemplo, para reservar unas vacaciones), entonces una ventana emergente con un calendario es una buena opción.

Si el intervalo de fechas es bastante corto (menos de seis semanas, por ejemplo, al reservar una cita médica), asegúrese de considerar agregar un mini paso a paso para una configuración más rápida.

Uno : www.bahn.de



Dos : www.google.com/flights



En realidad todo. Como siempre, cualquier opinión es aceptada, las críticas son bienvenidas, ¡por ejemplos adicionales de buenas decisiones de gratitud!