Guideline UX y estándares de interfaz

1) Principios

La claridad es anterior a la belleza. El significado y la acción son evidentes en 1-2 segundos.
Un objetivo en la pantalla. Todo lo demás es secundario u oculto.
Secuencia. Los mismos patrones = las mismas expectativas.
Disponibilidad predeterminada. Contraste, enfoque, teclado, voz.
Contextualidad. Pistas y textos - exactamente donde se necesita.
Localización-primero. Longitudes de líneas, formatos, cultura - en el diseño originalmente.
Reversibilidad. Cualquier acción de riesgo se puede cancelar/confirmar.
Medida. Cada regla es con una métrica (conversión de paso, tiempo, errores).

2) Rejilla, sangría y ritmo

Cuadrícula: 4/8-pt paso; columnas: 12 (escritorio), 6 (tablet), 4 (móvil).
Sangría interna de los componentes: múltiplos de 4; externo - 8/ 12/16/24.
Ritmo vertical: título → subtítulo → contenido → acciones (CTA).
Límites y divisores: ahorros; preferir el «aire» y la jerarquía de la tipografía.

3) Tipografía

Escala de clavos: 12/14/ 16/20/24/32/40 (cuerpo 16).
Altura de fila: 1. 4–1. 6 para el texto, 1. 2–1. 3 para los titulares.
Longitud de línea: 45-75 caracteres (escritorio), 35-55 (móvil).
Selección: negrita para acentos semánticos; caps - sólo en las marcas.
Legibilidad en voz alta: los textos deben sonar naturales.

4) Color y contraste

Semántica: 'éxito/info/warning/error/neutral'.
Contraste: mínimo WCAG 2. 1 AA (texto/fondo ≥ 4. 5:1; ≥ importante 3:1).
El color ≠ la única señal. Agregue un icono/texto/formulario.
Anillo de enfoque: siempre visible (no desactivar en CSS).

5) Navegación y arquitectura de la información

Ruta de usuario: "¿Dónde estoy? ¿Qué hay aquí? Qué sigue" - Obviamente.
Jerarquía de menú: ≤ 2 niveles en la navegación principal.
Migas de pan: para secciones profundas.
Búsqueda: disponible globalmente en directorios complejos; tecla de acceso rápido '/'.
Estados de navegación: la ficha/página activa se realza con tokens.

6) Componentes y patrones

Utilizamos componentes del sistema de diseño (sin «autopartes»).
Una primary-CTA por pantalla; el resto son secondary/tertiary.
Estados: default/hover/focus/active/disabled/loading - son obligatorios en cada interactivo.
Estados vacíos: contexto + valor + CTA (+ enlace secundario).
Alertas compartidas: una página-alerta por pantalla + pistas inline locales.

7) Formularios, validación y errores

El sello es obligatorio. Placeholder es un ejemplo de formato, no de reemplazo.
Validación en línea en blur, errores sumarios en submit.
Mensaje de error: que no es así + cómo corregir + limitación/formato.
Auto-scroll y enfoque al primer error; 'aria-invalid', 'aria-describedby'.
Máscaras y formatos: sugieren, pero no rompen la entrada (el paist es posible).
Seguridad de datos: no perdemos nada al reiniciar/error.

8) Estados y fidbeck

Éxito: brindis 2-4 s, tono neutro-positivo, CTA «qué sigue».
Info/notice: banner/tultip suave, no bloquea el flujo.
Warning/Error/Crítico: jerarquía visual/semántica; crítico - modalka/banner con acción explícita.
Descarga: skeleton> spinner; estimación del tiempo de espera> 3 p.

9) Contenido y microcopia

Regla de las tres respuestas: qué pasa → por qué → qué hacer a continuación.
CTA: verbo acción + objeto («Guardar cambios», «Pasar la verificación»).
Números/fechas/monedas: formatos locales.
Tono: amistoso; en pasos estresantes (pago/seguridad) - neutral.

10) Accesibilidad (A11y)

Navegación completa desde el teclado; el orden lógico de los tabúes.
Roles y 'aria-' para interactivos, regiones en vivo para tostadas/estados.
Contrastes, anillos focales, tamaños interactivos ≥ 44 × 44 px.
Alternativas de texto en iconos/imágenes; tablas con 'th '/' scope'.
Verificaciones: automáticas (linter/escáner) + scripts de screenrider manuales.

11) Localización e internacionalización

Todas las líneas están en claves i18n con contexto.
Prueba de «lenguas largas» (DE/TR), modos RTL.
Números/monedas/tiempos - utilidades de formato.
Tone-map: grado de formalidad/emoción según los escenarios (onboarding/pagos/seguridad).

12) Responsividad y adaptación

Breakpoints: 360 / 768 / 1024/1280 +.
Mobile-first: el camino crítico está disponible con una sola mano, CTA en la zona del pulgar.
Gestos y teclado: los gestos se duplican con los botones; en desktop - hotkei.
Densidad: en el escritorio - «aire», en el móvil - el ahorro de la vertical sin comprometer la clicability.

13) Tema oscuro

El contraste de WCAG se mantiene; evitar el «negro puro» para el fondo (gris oscuro).
Brillo/sombras - atenuado; el anillo focal es contrastado.
Ilustraciones y logotipos - con versiones invertidas.
Política de transición: guardamos la selección del usuario (system/light/dark).

14) Animaciones y movimiento

Duración: 120-200 ms (pequeño), 200-300 ms (transiciones).
Las funciones de aceleración son naturales (cubic-bezier con una ligera desaceleración).
Las animaciones no deben bloquear el flujo y deteriorar la legibilidad.
Respetar 'prefers-reduced-motion'.

15) Performance

LCP ≤ 2. 5 s, TTI/TBT en la zona verde; spliting de código; descarga perezosa de los medios de comunicación.
Virtualización de listas largas; caché de datos.
Skeleton para la percepción de la velocidad; minimizar el «junk» del diseño.

16) Seguridad y privacidad en IU

Explicaciones claras de las razones de las solicitudes (cámara, KYC, geo).
Plazos/comisiones/límites transparentes; sin «instantáneamente», si los retrasos son posibles.
Datos confidenciales - enmascaramiento, explícito «mostrar/ocultar».
Confirmaciones para acciones irreversibles; registro de actividad/notificación de inicio de sesión.

17) Métricas de calidad UX

Conversión de paso y tiempo hasta que se complete.
Error rate por campos/pasos y Tiempo-a-Fijar.
CTR por CTA y repetibilidad de scripts.
Drop-off después del error/después de cargar> N segundos.
Solicitudes de apoyo por temas (antes/después de los cambios).
A11y-defectos en la liberación (el objetivo es 0 crítico).

18) Hojas de cheques

Pantalla antes de la versión

• Un objetivo principal y uno primario-CTA.
• La navegación y el estado «donde estoy» son evidentes.
• El contenido es breve: 1-2 sugerencias por bloque.
• Estados: loading/empty/error/success están cubiertos.
• A11y: contraste AA, enfoque visible, 'aria-' en los interactivos.
• Localización: longitudes de cadena/formatos/RTL verificados.
• Performance: no hay bloques «pesados» sin necesidad.

Formulario antes de

• Las etiquetas y los formatos de ejemplo están presentes.
• Validación en línea + resumen en submit.
• Skroll al primer error, enfoque en el campo.
• Comunicaciones: qué/cómo/por qué; sin códigos 500/400 para el usuario.
• Los datos no se pierden por errores/reinicio.

19) Anti-patrones

«OK» como CTA en los pasos semánticos.
Playsholder en lugar del sello.
El color como única señal de estado.
Spinners sin estimación de tiempo y sin alternativa.
Ventanas modales sin trapo focal y cierre CES.
Mezcla de estilos/iconos, duplicación de componentes fuera del sistema de diseño.
Humor/emoji en escenarios críticos (pago/seguridad).

20) Ejemplos de «antes/después»

Error de formulario

Antes: «Error 400»

Después de: "Formato de fecha incorrecto. Use DD. MM. EL GGG"

Estado

Antes: «Aquí está vacío»

Después: "Aquí aparecerá el historial de operaciones después de la primera reposición. [Depositar fondos en la cuenta]"

Mensaje

Antes: «Listo»

Después de: "Pago aceptado. Balance actualizado. [Ver historia]"

Navegación

Antes: no está claro dónde está el usuario

Después: pestaña activa + migas de pan + encabezado de página explícito

21) Plantillas de rugido de diseño

Marco de pantalla

Título → breve descripción → contenido/lista → fidback/estados → acciones.

Marco de formulario

Título → sugerencia → campo (etiqueta + ayuda + error) → CTA → acciones secundarias → notas (comisiones/plazos).

Plantilla de microcopía

Encabezado (ops.)

1-2 frases: contexto + siguiente paso

CTA: acción + objeto

Línea secundaria: ayuda/reglas

22) Procesos y mantenimiento de normas

Definición de Don (UX): diseño + textos + estados + A11y + i18n + métricas.
Rugido UX en PR: lista de cheques de las secciones 18-21.
Documentación: cada ficha añade/actualiza el hyde en wiki/Storybook.
Auditoría trimestral: contenido, A11y, rendimiento, consistencia.

Parche final

Un objetivo, un CTA principal.
Los estados y el fidbeck están diseñados de antemano.
A11y y localización - desde cero, no «después».
Menos colores - más semántica y ritmo.
Medir: conversiones, errores, tiempos, comunicaciones.
Todo a través de un sistema de diseño: las mismas reglas → las mismas expectativas → UX predecible.

Puedo complementar este hyde con plantillas listas para sus escenarios clave (registro/CUS, depósito/retiro, bonos/torneos) y recoger las listas de cheques bajo su proceso de rugido.