Microvision y fidback

1) ¿Qué es la micro-ayuda?

Las microvisividades son ciclos cortos de «señal ↔ respuesta» que confirman que el sistema ha escuchado al usuario y avanza hacia el resultado.

1. Desencadenador (clic, deslizar, enfoque, evento del sistema).

2. Reglas (qué y cómo se cambia).

3. Fidbeck (visual/sonido/táctil/texto).

4. Ciclo/meta-reglas (repetición, caducidad, undo/redo).

Objetivo: reducir la incertidumbre y la carga cognitiva sin distraerse de la tarea.

2) Principios de diseño

Significado> efecto. El efecto explica «lo que ha pasado» y «lo que sigue».
Instantáneo. Primera respuesta ≤ 100 ms (botones/interruptores).
Es inequívoco. Estados distinguibles: hover/focus/pressed/disabled/loading.
Ahorros. Un mínimo de propiedades, de corta duración, sin "saluts'.
Consistencia. Las mismas acciones son las mismas señales.
Disponibilidad. Fidbeck es visto, escuchado y leído por un screenrider; hay una alternativa al movimiento/sonido.

3) Tiempos y curvas

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip: entrada 180-240 ms, salida 120-160 ms

Validación en línea: ≤ 100 ms después de perder el foco del campo

Curva predeterminada: 'cubic-bezier (0. 2, 0, 0. 2, 1)`; para pressed - acelerado 'cubic-bezier (0. 4, 0, 1, 1)`.

4) Catálogo de microempresas

4. 1 Botones e interruptores

Respuesta inmediata: «clic «/compresión visual + estado 'busy 'en una consulta de red.
Actualización optimista: cambiamos la IU de inmediato, retrocedemos en caso de error (con undo).
Debauns de doble clic: bloqueamos la repetición antes de la respuesta/timeout.

4. 2 Validación en línea de formularios

Validación en campos blur; los mensajes son breves y constructivos («mínimo 8 caracteres»).
Icono de estado + color + texto (no en uno).
Para contraseñas, un indicador instantáneo de «fuerza» (no interfiere con la entrada).

4. 3 Tostadas/pancartas/bares de aperitivos

Use para confirmaciones sin bloqueo.
Duración 2-5 s, pausa en hover/focus, botón Undo cuando corresponda.
No cierre contenido importante y CTA.

4. 4 Progreso y esqueletos

Si se conoce la longitud del proceso - barra de progreso; si no es skeleton en lugar de spinner.
Sin saltos layout: fix. las alturas de los bloques.

4. 5 Etiquetas/contadores

El contraste de los números ≥ 4. 5:1; máximo 99/999 con truncamiento '99 +'.
Las animaciones de incrementos son pasos cortos de 40-60 ms de batches, sin el «temblor» del diseño.

4. 6 Tooltip/Help

Aparición por hover/focus; accesibilidad a través de 'aria-describedby'.
Prohibición de información crítica sólo en tooltip.

5) Errores, estados vacíos, undo

Error: texto honesto, explicación de causa y acción («Repetir», «Cambiar mapa»).
Estado vacío: qué es y cómo empezar; ilustración silenciosa, contraste del texto AA/AAA.
Window Undo: 5-10 s para acciones reversibles (eliminación, cancelación de apuestas antes de la bala).

6) Fidbeck multimodal

Sonido: silencioso, corto, un patrón por tipo de evento (éxito/error/atención); desactivamos en la configuración.
Vibro/háptica: respuesta fácil a la prensa/éxito; respetamos 'prefers-reduced-motion' y las restricciones del sistema.
Visual: sólo 'transformación/opacity', sin sombras/blur pesadas en las matrices.

7) Accesibilidad (A11y)

': focus-visible' para teclado; anillo focal sin blur.
Screenrider: 'role = "status "/" alert' 'para tostadas; regiones vivas 'aria-live = «polite/assertive»'.
Alternativa al sonido/movimiento; 'prefers-reduced-motion: reducir'.
El contraste de texto e iconos es por WCAG (normal ≥ 4. 5:1).

8) Performance

Responda en ≤ 100 ms: respuesta visual a la red.
Animar 'transformación/opacity'; evite 'height/left/box-shadow' en muchos elementos.
Efectos de red - con prefetch y optimismo; los retraídas son idempotentes.

9) Tokens de micro-ayuda (sistema de diseño)

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10) Snippets de implementación

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11) Métricas y control de calidad

INP p75 <200 ms, proporción de Long Tasks <5%.
First User Feedback (respuesta klik→vizualnyy) ≤ 100 ms.
Porcentaje de acciones optimistas con un retroceso <3% (de lo contrario, desconfianza).
Encuestas UX: claridad de los mensajes de error, visibilidad de las confirmaciones.

el QA-cheque-hoja

• Cada interactivo tiene 'pressed/busy/disabled'.
• Los errores van acompañados de texto y acciones (Retry/Undo).
• Las tostadas están disponibles por SR y no se superponen al contenido clave.
• La validación en línea no interfiere con la entrada; los mensajes son específicos.
• Apoyado por 'prefers-reduced-motion'; el sonido/vibración son apagables.
• No hay saltos layout y estroboscópico; animaciones en 'transformación/opacity'.

12) Especificidad de iGaming

Apuesta/compra: instantánea 'pressed→busy', tostada 'Aceptada' con Undo (si el reglamento lo permite), llaves idempotent; con un retraso> 1 s - «Esperamos confirmación»....
Spin/Reveal: fiedback de prensa corta, arranque/parada suave sin parpadeo infinito; ganancia - aumento ≤ 500 ms + texto legible (AAA).
Factores de vivo: actualizaciones de batches, diff visual (flecha/grosor) sin «saltos».
Pagos/conclusiones: progreso paso a paso (KUS→Proverka→Vyplata), textos transparentes de las razones del rechazo.
Juego responsable: notificaciones sin distracciones; contraste superior, explícito CTA «Establecer un límite».

13) Anti-patrones

Esperar una respuesta de red antes de mostrar una respuesta a un clic.
«Color sin forma»: el estado difiere sólo en la sombra.
Pulsaciones/parpadeos infinitos, sonidos agudos sin interruptor.
Tooltip con contenido crítico que no está disponible desde el teclado.
Spinner en vacío> 1-2 s sin progreso/esqueleto.
Sombras delgadas/blur en cientos de elementos (maga en dispositivos débiles).

14) Documentación en el sistema de diseño

«Micro-tokens»: 'duration/easing', presets de tostadas/insignias/validadores.
«Patterns»: botones, formas, tostadas, progreso, errores inline, undo.
«A11y & Motion»: reglas para SR/HC/reduced-motion; ejemplos de ARIA.
"Do/Don 't': clips cortos con temporizaciones, números INP/First Feedback.

Resumen breve

La microvisividad es un lenguaje de confianza. Responda por ≤ de 100 ms, capture estados claros, use optimismo con un recorte seguro, no confíe sólo en el color y anime las propiedades ligeras. Respete la disponibilidad y el rendimiento: entonces el producto se siente vivo, honesto y confiable, especialmente en escenarios en tiempo real.