Una persona intenta elegir una fecha para visitar un espacio de trabajo, pero el calendario muestra días grises sin explicación y dos campos titulados Desde y Hasta. Al cambiar de mes pierde la selección anterior. Estas dificultades pertenecen al diseño del control, incluso antes de enviar el formulario. Un selector útil permite reconocer qué dato se pide, recorrer las opciones y corregir una elección. Para evaluarlo conviene observar su funcionamiento con teclado, pantalla estrecha y fechas que estén fuera del intervalo admitido.
Da contexto a cada dato temporal
Usa etiquetas como Fecha de visita y Hora de inicio cuando describan con precisión lo solicitado. Un título genérico como Seleccionar no explica qué cambia el control. Mantén la etiqueta visible mientras se completa el campo y coloca cerca las instrucciones necesarias. Si pides un intervalo, distingue inicio y final y muestra la relación entre ambos. La zona horaria también debe quedar identificada junto a las horas. Evita números ambiguos en los resúmenes: escribir el mes con letras puede ayudar a distinguir día y mes cuando el público utiliza convenciones de fecha diferentes.
Elige controles adecuados y revisa los formatos
Los campos nativos de fecha aprovechan controles del navegador, cuya apariencia puede variar entre dispositivos. Su valor interno utiliza un formato normalizado aunque la presentación visible responda a la configuración local. Por eso las instrucciones deben corresponder a lo que la persona realmente ve. Prueba seleccionar, escribir cuando el control lo permita, borrar y volver a completar. Para un grupo pequeño de horas definidas, una lista comprensible puede resultar más sencilla que un reloj interactivo. Un calendario personalizado necesita justificar su complejidad y ofrecer una interacción completa; parecer más elaborado no demuestra que facilite la tarea.
Distingue selección, foco y opciones no disponibles
El día elegido, el día actual y el control que recibe el foco son estados diferentes. Deben poder reconocerse sin depender únicamente de variaciones de color. Explica las restricciones conocidas antes de obligar a recorrer muchas opciones deshabilitadas. Si faltan datos para mostrar horas, indica qué selección previa se necesita. Si no hay opciones, presenta ese estado con texto comprensible. Comprueba que los controles de mes tengan nombres claros y que el calendario no deje el foco perdido al actualizarse. Cuando la interfaz usa una ventana superpuesta, abrirla y cerrarla también forma parte de la prueba.
Valida sin borrar el trabajo de la persona
Prueba campos vacíos, fechas fuera del rango y un final anterior al inicio. El mensaje debe identificar el dato que necesita corrección y explicar la regla aplicable. Mantén las elecciones válidas para que no sea necesario comenzar otra vez. Recorre el formulario con teclado y verifica que el orden sea previsible y el foco permanezca visible. Amplía el texto y comprueba que etiquetas, controles y errores sigan relacionados. La revisión debe incluir el componente funcionando en navegadores previstos, porque una captura de diseño no muestra cómo se introduce, modifica o comunica una fecha.
DE LA LECTURA A LA ACCIÓN
Para aplicar hoy
- Relaciona cada campo con una etiqueta, una referencia temporal y reglas comprensibles.
- Distingue visualmente la selección, el foco y los estados no disponibles.
- Prueba introducción, corrección y navegación con teclado en el componente real.
Fuentes y referencias
Documentación para profundizar. Los ejemplos de esta guía son didácticos.