Breaking

Post Top Ad

Your Ad Spot

lunes, 4 de noviembre de 2019

6 pasos para diseñar el selector de fecha y hora correcto

Los recolectores de fecha y hora a menudo se consideran un elemento infalible para la selección de fecha y hora: consistente, genérico y predecible. La mayoría de las personas los usan como su guía universalmente aceptada para la entrada de fecha y hora. Sin embargo, hay situaciones en las que los recolectores de fecha y hora son útiles, y luego hay situaciones en las que interfieren con la experiencia del usuario del sitio. Por lo tanto, debe considerar cuidadosamente si su sitio requiere un selector de fecha y hora o no. Debe incluirlo solo si proporcionará información a sus usuarios de forma rápida y sencilla. También debe colocarlo frente a su interfaz, ya que alentará a los visitantes a usarlo. Sin embargo, es bastante difícil encontrar un selector de fecha que se adapte a su interfaz. Pero si se requiere un selector de fecha y hora, es bastante tedioso especificar una fecha y, con mayor frecuencia, produce páginas de resultados cero o resultados irrelevantes. Algunos cambios menores harían el diseño mucho más manejable. Entonces, aquí hay seis consejos esenciales para crear el selector de fecha y hora adecuado para su sitio web.

1. Agregar valores numéricos:

Al diseñar un selector de fecha y hora, lo primero que debe considerar es algún tipo de entrada de fecha y hora. Debe usar tres entradas numéricas separadas para la fecha y un mínimo de dos entradas numéricas para la entrada de tiempo. Estas entradas deben estar separadas por “-” o “/” y también puede usar un menú desplegable para el día, mes y año e incluso para horas y minutos. Sin embargo, tocar y desplazarse no son la experiencia más fluida o perfecta. Debe hacer una selección rápida de fecha y hora, probablemente dentro de dos toques (uno para abrir el calendario o la configuración de la horay otros para elegir un día o una hora). Para resolver este problema, puede diseñar un formato que cambie automáticamente el mes y el año mientras el usuario comienza a escribir el valor numérico para determinar el día. Además, debemos asegurarnos de que la entrada numérica sea lo suficientemente confiable como para administrar todos los casos límite. También debe usar algún tipo de marcador de posición o etiqueta para indicar el formato del selector de fecha y hora. Debe asegurarse de que cuando los usuarios activen el campo de entrada, aparezca la sugerencia de formato de fecha.
Al diseñar un selector de fecha, debe considerar invertir tiempo para crear una entrada numérica adecuada. Puede proporcionar sugerencias como "ahora", "hace un año", "ayer", "hoy", "5 días a octubre", etc. Según la aplicación que esté diseñando, puede decidir proporcionar una fecha flexible o predefinida opciones. Por supuesto, debe comunicar la entrada a sus usuarios de manera destacada. Si bien la entrada numérica es una entrada invaluable para determinar la fecha, siempre debe tener algunas fechas predeterminadas dentro de las seis semanas. Esto ayudará a aquellos clientes confundidos que intentan reservar un viaje rápido de fin de semana pero que no tienen fechas exactas. En tales casos, el calendario sería una excelente opción para mostrar todas las opciones disponibles. Además, es bueno considerar la ubicación de sus clientes al sugerir fechas para evitar reservas incorrectas.

2. Establecer valores predeterminados:

Si observa la entrada del selector de fecha y hora, se encontrará con decisiones pequeñas pero esenciales sobre su diseño de interacción. Algunos diseñadores a menudo se encuentran con la opción de colocar valores predeterminados en el campo de entrada o dejarlo en blanco o mostrar un ejemplo de entrada correcta. Más adelante decidir los valores predeterminados y la visibilidad de los valores de entrada es bastante difícil. Aunque no se ha probado ni se ha detectado ninguna preferencia, establecer valores aleatorios para los usuarios no es la mejor opción, ya que obligará a los usuarios a cambiar los valores de aparentemente aleatorios a los que desean elegir. Sin embargo, si es probable que sus usuarios reserven ofertas de última hora en su sitio web (como transporte u hotel), entonces un día actual ("hoy") o una hora actual ("ahora") sería una buena opción, especialmente a tiempo. contenido sensible
Una vez que el usuario ha elegido las fechas o el intervalo de tiempo pero ha actualizado la página de forma accidental o deliberada, puede conservar la selección o volver a los valores predeterminados. Si el visitante ha actualizado la página de forma inesperada, no estará contento de ver que se pierde su entrada y tener que volver a escribirla. Sin embargo, si deliberadamente actualizaran la página, verían fechas predefinidas. En ambos casos, no estarán contentos de ver que se pierden sus aportes. Por lo tanto, es mejor guardar la entrada y proporcionar un enlace notable de "Nueva búsqueda" o "Restablecer" junto a la entrada de fecha y hora. En lugar de eliminar la entrada de su usuario, tendrá una opción para eliminar la entrada anterior. Este también es un mini paso a paso que podría ser útil y, por lo tanto, las fechas podrían no cambiar significativamente. Si está seguro de que es probable que sus usuarios elijan fechas, entonces es una buena idea establecer fechas.

3. Crear una superposición de calendario:

No necesita ser creativo para diseñar una superposición de calendario clara. Por lo general, la superposición de calendario aparece debajo del campo de entrada de fecha, como un pequeño panel en un escritorio o como una vista de pantalla completa en pantallas estrechas. Los días se organizan en filas, agrupados como semana junto con un menú desplegable para navegar meses y años. Una superposición de calendario podría contener varios niveles de navegación y detalles, como cuándo debe comenzar la fila de la semana o si debe contener la entrada del año o no. Todo esto solo depende de su audiencia y la aplicación de su sitio web. Si tiene un sitio web de transporte público, un servicio de comida o un televisor con una entrada anual no tiene sentido. Además, si tiene un sitio web de alquiler de autos, no tiene sentido mostrar la entrada del mes.
Otra complejidad ocurre al mostrar un día de la semana si las personas desean reservar una cita. A veces, también querrá mostrar los precios o la disponibilidad (como reservar un vuelo). Además, es posible que desee agregar un intervalo de fechas y un intervalo de tiempo exacto. En tales casos, debe incluir la selección de intervalo de tiempo con la selección de fecha o indicar una conexión entre la fecha de inicio y finalización. Por lo tanto, vale la pena invertir tiempo en agregar detalles a su calendario para que sea útil para sus usuarios seleccionar la fecha y la hora rápidamente. Si la disponibilidad importa, es bueno separar las fechas disponibles y no disponibles de forma codificada por colores para que se pueda distinguir fácilmente. Además, si hay diferentes precios para diferentes fechas, es mejor mostrarlos en el calendario. Si sus clientes están más interesados ​​en los fines de semana o días festivos, es mejor mostrarlos también. Además, es mejor indicar y restringir la selección en el calendario en sí para que los clientes obtengan una pista de inmediato.

4. Incluir saltos de fecha:

Si es probable que sus clientes busquen una opción de rango de fecha bastante corto, puede agregar una navegación rápida "siguiente" y "anterior" al lado de la entrada de fecha. Por ejemplo, al reservar un viaje de fin de semana, un cliente querrá irse el jueves por la noche o el viernes temprano, lo que sea más barato. Por lo tanto, en lugar de hacer que sus clientes vuelvan a escribir o seleccionar una fecha en el calendario, un solo toque proporcionaría un resultado esperado. Google Flights utiliza esta función para que su selector de fechas sea eficiente. Ser capaz de saltar entre meses y años podría ser útil. Junto con esto, un mini paso a paso es una excelente mejora para el selector de fecha y hora. Sin embargo, no es un reemplazo para la superposición de calendario, ya que tocar demasiado puede volverse tedioso. En las sesiones de usabilidad, tocar por décima vez podría poner a prueba la paciencia de sus clientes. Finalmente,
Por lo tanto, primero debe estudiar el alcance del rango de entrada de fecha y el propósito del calendario. Por ejemplo, si la fecha de reserva es en el futuro, es mejor proporcionar una entrada numérica en el selector de fechas. Por otro lado, si el rango de entrada de fecha es corto, puede considerar agregar un mini paso a paso para saltos rápidos. Idealmente, debe proporcionar los tres (una superposición de calendario, un mini paso a paso y una entrada numérica) para que los clientes tengan opciones confiables. Si hay algunas opciones para mostrar la hora, entonces probablemente no necesite un selector de fecha. Debería considerar mostrar opciones predefinidas como botones, enlaces o un control deslizante en lugar de usar una superposición de calendario. Además, su selector de fecha no aparecerá a menos que esté a la vista. Por lo tanto, el selector de fecha y hora se debe indicar pulsando o haciendo clic en el icono del selector de fecha o en un campo de entrada.

5. Proporcionar flexibilidad:

Si sus clientes están confundidos y no tienen una fecha exacta en mente, un selector de fecha debería ser el último recurso. Más a menudo, un par de sugerencias generales y predeterminadas junto con filtros funcionarían mejor que navegar por años y meses. En tal caso, aún podría ofrecer a sus usuarios una vista detallada del calendario, utilizando códigos de color y visualizacióntodas las opciones a la vez, por ejemplo, para mostrar los mejores precios. Google Flight utiliza este enfoque al mostrar fechas flexibles seleccionadas. Sin embargo, la opción se cae a pantallas estrechas. Por otro lado, Dohop utiliza fechas flexibles junto con ubicaciones flexibles como su característica principal. Destacan prominentemente ambas características una vez que sus usuarios comienzan a escribir la fecha o el destino. En lugar del precio, tienen una vista de calendario que destaca la disponibilidad de vuelos indirectos y directos, además de mostrar los días de vuelo sin conexiones.
Para que su selector de fechas sea más útil para los usuarios, puede codificar con color el fondo mientras muestra los precios altos y bajos utilizando colores contrastantes. En caso de accesibilidad, es útil considerar la paleta de colores al elegir los colores para el fondo. Este diseño es bastante útil para que los usuarios utilicen un selector de fecha. Además, debe describir el significado del color en la parte inferior para que no haya confusión. Si está diseñando un selector de fecha para el transporte, será útil proporcionar una opción entre "ida" y "ida y vuelta" en la parte superior de la superposición del calendario. Además, dar fechas flexibles para meses específicos no es suficiente, podría ir un paso más allá e incluir rangos de fechas más generales como primavera, invierno, verano y otoño.

6. Incluya un control deslizante:

Al igual que cualquier otra entrada, los datos de fecha y hora se pueden navegar utilizando el mando de un control deslizante. El control deslizante puede usarse para una entrada de valor único o especificar un rango de fechas. A menudo aparece en la interfaz en la que el cliente puede establecer un rango predefinido de fechas. Pero un control deslizante también trae el problema de seleccionar una entrada precisa. Cuanto más denso o, cuanto más amplio sea el rango seleccionable a través del control deslizante, más difícil será usarlo. En una prueba de usabilidad, un control deslizante hace que los clientes muevan la perilla muy lentamente y con cuidado. Por lo tanto, no es fácil de usar al elegir rangos de fecha y hora en pantallas estrechas.
Los controles deslizantes funcionan mejor cuando el rango no está definido pero es flexible, o si no tiene muchas opciones para elegir. Desafortunadamente, un selector de fecha no funciona de esta manera ya que los clientes tienen que ajustar y refinar con bastante frecuencia. Por lo tanto, la entrada numérica sería mucho más rápida que deslizar para seleccionar un número para la fecha y la hora. Solo en algunos casos, parecen ser útiles.
Por lo tanto, el primer paso para diseñar un selector de fecha y hora será determinar si necesita uno para la aplicación de su sitio web. Una vez que se decida, puede seleccionar los diseños que ayuden a sus usuarios a elegir la fecha y la hora más rápido . Estos consejos podrían ayudarlo a crear un selector de fecha y hora que coincida con su interfaz y mejore la usabilidad de su sitio web. Para que su selector de fecha y hora sea más útil, puede incluir detalles más relevantes, como precios o disponibilidad. Además, el campo de entrada depende de lo que prefieran los clientes, así que asegúrese de incluir el que agilice la selección.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas