Lista de comprobación de la experiencia del usuario para los componentes de la interfaz de usuario
Pautas de marca
Esta lista de verificación está diseñada para ayudar a los diseñadores de UX a crear componentes que brinden una experiencia consistente, accesible y fácil de usar en todo el sistema de diseño digital de TxDOT. Se centra en principios de alto nivel que respaldan la facilidad de uso y el cumplimiento sin agregar complejidad innecesaria. Utilícelo como referencia rápida durante el diseño y la revisión para asegurarse de que cada componente cumple con los estándares básicos de UX.
Importante: Esta lista de verificación es de alto nivel y se aplica a todos los componentes del sistema de diseño digital. Los requisitos específicos de accesibilidad tienen prioridad sobre los enumerados aquí.
Propósito y claridad
- ¿El componente tiene un propósito único y claro?
- ¿El nombre del componente es descriptivo y coherente con la taxonomía del sistema de diseño?
- ¿El componente evita la complejidad innecesaria?
Accesibilidad (WCAG 2.1)
- Contraste de color: El texto y los elementos interactivos cumplen con la relación de contraste WCAG AA (4.5:1 para texto, 3:1 para texto grande y elementos gráficos).
- Navegación con teclado: El componente es totalmente operable a través del teclado (Tab, Enter, Space).
- Estados de enfoque: Indicadores de enfoque visibles para todos los elementos interactivos.
- Roles y sellos de ARIA: Roles semánticos correctos y nombres accesibles aplicados.
- Objetivos táctiles/clic: Mínimo 44 px por 44 px para elementos interactivos en dispositivos móviles y 24 px por 24 px en escritorio.
Interacción y retroalimentación
- ¿El componente proporciona información clara sobre las acciones del usuario (estado de desplazamiento, activo, deshabilitado)?
- ¿Se comunican claramente los estados de error y los estados de éxito?
- ¿Las animaciones o transiciones son sutiles y no bloquean la interacción?
Consistencia
- ¿El componente sigue las pautas de la marca TxDOT para tipografía, color y espaciado?
- ¿Los iconos y las imágenes son coherentes con el sistema de diseño?
- ¿Se alinea con los patrones de interacción establecidos?
Contenido
- ¿El texto es conciso, claro y está escrito en un lenguaje sencillo?
- ¿Son las etiquetas y las instrucciones contextualmente relevantes?
- ¿El componente evita la jerga o las abreviaturas sin explicación?
Rendimiento y viabilidad técnica
- ¿Está el componente optimizado para tiempos de carga rápidos (activos mínimos, sin scripts innecesarios)?
- ¿Se adapta bien a los diseños responsivos (móvil, tableta, escritorio)?
- ¿Evita las dependencias pesadas que podrían afectar al rendimiento?
Pruebas y validación
- ¿Se ha probado la usabilidad del componente con usuarios reales o escenarios representativos?
- ¿Pasa las comprobaciones de accesibilidad automatizadas (por ejemplo, Stark)?
- ¿Está documentado en el sistema de diseño con pautas de uso?