Microvisão e Fidbeck

1) O que é microimplência

Microvisão - ciclos curtos de «sinal ↔ resposta» que confirmam que o sistema ouviu o usuário e está indo para o resultado.

1. Desencadeador (clique, swipe, foco, evento de sistema).

2. Regras (o que e como é alterado).

3. Fidbeck (visual/som/tátil/texto).

4. Ciclo/meta-regras (repetição, vencimento, undo/redo).

O objetivo é reduzir a incerteza e a carga cognitiva sem afastar a tarefa.

2) Princípios de design

Sentido> efeito. O efeito explica «o que aconteceu» e «o que aconteceu».
É instantâneo. Primeira resposta ≤ 100 ms (botões/botões).
É inequívoco. Estados diferentes: hover/focus/pressed/disabled/loading.
Poupança. Um mínimo de propriedades, curtas durações, sem «salgadinhos».
Consistência. As mesmas acções são os mesmos sinais.
Disponibilidade. Fidbek vê, ouve e lê-lo com uma tela de tela; há uma alternativa ao movimento/som.

3) Timing e curvas

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip: entrada 180-240 ms, saída 120-160 ms

Validação Inline: ≤ 100 ms após a perda do foco do campo

A curva padrão é 'cubic-bezier (0. 2, 0, 0. 2, 1)`; para pressed - acelerado 'cubic-bezier (0. 4, 0, 1, 1)`.

4) Catálogo de microvisões

4. 1 Botões e botões

Resposta imediata: «clicar »/« capturar» visualmente + «busy» em uma consulta de rede.
Atualização otimista: Alterando a UI imediatamente, revertendo no erro (com undo).
Debouns duplos cliques: bloqueie a repetição até a resposta/timeout.

4. 2 Inline-validação de formulários

Validação em blur campos; as mensagens são curtas e construtivas («mínimo de 8 caracteres»).
Ícone de status + cor + texto (não com uma cor).
Para senhas, é um instantâneo de força (não impede a digitação).

4. 3 Brindes/banners/snecbares

Use para confirmações não bloqueadoras.
Duração de 2-5 c, pausa para hover/focus, botão Undo onde apropriado.
Não feche conteúdo importante e CTA.

4. 4 Progresso e esqueletos

Se o processo for conhecido como Progressbar; se não, skeleton em vez de spinner.
Sem corrida de layout: fix. a altura dos blocos.

4. 5 Crachás/contadores

Contraste de número ≥ 4. 5:1; no máximo 99/999 com truncamento de '99 +'.
As animações do engenho são passos curtos de 40-60 ms batches, sem «tremer» layout.

4. 6 Tooltip/Help

Aparecer por hover/focus; disponibilidade através de 'ária-describedy'.
A proibição de informações críticas somente em tooltip.

5) Erros, estados vazios, undo

Erro: texto honesto, explicação de causa e ação («Repetir», «Editar mapa»).
Estado vazio: o que é e como começar; ilustração abreviada, contraste do texto AA/AAA.
Undo window: 5-10 s para reversíveis (remoção, cancelamento da taxa para bala).

6) Fidbec multimodal

Som: silencioso, curto, um pattern por tipo de evento (sucesso/erro/atenção); desligar nas configurações.
Vibro/haptica: fácil resposta à imprensa/sucesso; respeitamos as limitações do sistema.
Visual: Somente 'trans/opacity', sem blur/sombras pesadas nas matrizes.

7) Disponibilidade (A11y)

': focus-visível' para o teclado; Um anel de foco sem blur.
Ecrã: 'role =' status '/' alert 'para brindes; regiões vivas 'ária-live =' polite/assertiva '.
Alternativa ao som/movimento; 'prefers-reduced-motion: reuse'.
O contraste de texto e ícone é WCAG (normal ≥ 4. 5:1).

8) Performance

Reage por ≤ 100 ms, resposta visual até a rede.
Anime 'transform/opacity'; evite 'height/left/box-shadow' em vários itens.
Efeitos de rede - com prefetch e otimismo; Os retraias são idimpotentes.

9) Tocos de microimplência (sistema de design)

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 implementação

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 e controle de qualidade

INP p75 <200 ms, participação Long Tasks <5%.
O First User Feedback (resposta klik→vizualnyy) ≤ 100 ms.
Proporção de ações otimistas com retrocesso <3% (senão, desconfiança).
Sondagens UX: mensagem de erro, visibilidade de confirmação.

Folha de cheque QA

• Cada interatividade tem 'pressed/busy/disabled'.
• Os erros são acompanhados de texto e ação (Retry/Undo).
• Os brindes estão disponíveis por SR e não sobrepõem o conteúdo-chave.
• A validação do Inline não impede a introdução; as mensagens são específicas.
• Apoiado por 'preferers-reduced-motion'; o som/vibra é desligável.
• Sem saltos de layout ou de linha; Animação em 'aplicar/opacity'.

12) Especificidades iGaming

Aposta/compra: instantâneo 'pressed→busy', brinde «Aceito» com Undo (se o regulamento permitir), chaves idempotent; em atraso> 1 c - «Aguardando confirmação»....
Spin/Reveal: porta-vozes curtos, início suave/pare sem piscar sem fim; ganho - sobe ≤ 500 ms + texto de leitura (AAA).
Coeficientes Live: atualizações com batches, diff visual (seta/espessura) sem «salto».
Pagamentos/conclusões: progresso passo a passo (KUS→Proverka→Vyplata), textos transparentes sobre as causas da rejeição.
Jogo responsável: notificações sem distrações; contraste superior, CTA explícito «Definir limite».

13) Anti-pattern

Esperar pela resposta da rede antes de mostrar a resposta ao clique.
«Cor sem forma»: O estado é apenas um tom.
Pulsações sem fim/piscar, ruídos acentuados sem interruptor.
O Tooltip com conteúdo crítico não disponível do teclado.
Spinner no vazio> 1-2 s sem progresso/skeleton.
Sombras finas/blur em centenas de elementos (uma liga em dispositivos fracos).

14) Documentação em design

«Micro-tocens»: 'duration/easing', pré-brindes/crachás/validadores.
«Patterns»: botões, formulários, brindes, progresso, inline-erros, undo.
«A11y & Motion»: regras para SR/HC/reduced-motion; exemplos do ARIA.
«Do/Don 't»: clipes curtos com timing, números INP/First Feedback.

Resumo curto

A microvisão é uma linguagem de confiança. Dê uma resposta por ≤ de 100 ms, registre os estados compreensíveis, use otimismo com retração segura, não se baseie apenas na cor e anime as propriedades leves. Respeite a disponibilidade e a produtividade - o produto é sentido vivo, honesto e confiável, especialmente em cenários em tempo real.