Dicas e helpers da interface

1) Por que eles são necessários

• aparecem no contexto em que eles são realmente necessários,
• curtas e específicas, sem marketing,
• não bloqueiam o cenário principal e respeitam a disponibilidade.

2) Mapa das ferramentas e quando aplicá-las

Regra: Conteúdo crítico - no campo de visão e no texto da interface, não apenas na dica.

3) Pattern de acomodação e desencadeadores

Antes da ação: helper text/inline-hint («Senha ≥ 8 caracteres»).
No momento da ação: tooltip/coachmark no foco/hover/long-press.
Após a ação, um brinde/banner com a explicação do resultado e o link «Mais informações».
A intenção é «?», «i», «Mais», «Ctrl +/» (command palette).

4) Copiatagem

Um pensamento é uma frase. Comece com o verbo («Selecione»..., «Preencha»...).

Sem culpa, o filtro excluiu todas as gravações. Redefinir filtro?"

Números e factos em vez de avaliações: "Comissão 1. 5–2%».
O importante é que não prometa o tempo exato se não for garantido.

5) Disponibilidade (A11y)

Tooltip: 'role =' tooltip ', comunicação através de' ária-describedy 'com o desencadeador; disponível pelo teclado.
Blocos de informação: 'role =' status '(polite), erros' role = 'alert'.
Coachmark/Tour: foco de ordem, 'Esc' fecha, e o foco volta para a origem.
Contraste de texto ≥ AA; a dica não é o único hospedeiro de sentido.

html
<button id="kpi" aria-describedby="kpi-tip">RTP</button>
<div id = "kpi-tip" role = "tooltip" hidden> Return to Player - the share of bets returned to players in the long term. </div>
<script>
const b = document. getElementById('kpi'), t = document. getElementById('kpi-tip');
b. addEventListener('focus', ()=>t. hidden=false); b. addEventListener('blur', ()=>t. hidden=true);
b. addEventListener('mouseenter', ()=>t. hidden=false); b. addEventListener('mouseleave', ()=>t. hidden=true);
</script>

6) Gerenciamento de exibições e «higiene»

Deduplicação: não mostrar a mesma mensagem mais vezes N vezes por sessão.
Controle de frequência: cool-down 24 h para coachmark/tour; O usuário tem «Não lembrar».
As ferramentas não competem: não abrir tooltip sobre o coachmark e vice-versa.
Memória de progresso: os passos completos da turnê já não são oferecidos.

7) Helper textos para formulários

Escreva «como passar» a regra, não «o que você fez de errado».
Um exemplo de formato ao lado é 'DD. MM. YYYY`, `user@domain. tld`.
Para campos complexos, clique no botão Exemplo (abre uma pequena máscara/snippet).
A validação e o helper não são conflitantes: com o erro helper, torna-se um breve «como corrigir».

html
<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format: 22-34 characters, Latin letters and numbers only. </small>

8) Painel de comando e pesquisa de ação

Trigger: 'Ctrl +/',' Ctrl + K 'ou botão'.
No painel, ações com ícones e teclas quentes ("Apostar... — ⏎»).
Máquina de estar: ao selecionar uma ação, navegação instantânea/execução, Cancelar - «Esc».

9) AI-helper/copilote

Dicas sobre o formulário/termos ("O que é um vager? "), draft-preenchimento de campos com lista de alterações antes da aplicação.
Para os cenários sensíveis (pagamento/taxa) - apenas explicações e cheques de verificação, a decisão fica a cargo do usuário.
Ensine em sua própria documentação/FAQ; logue as perguntas para melhorar a estática.

10) Especificidades iGaming

Regras e limites: helpers visíveis ao lado dos botões Apostar, Cash, Definir limite. Linguagem clara e exemplos.
KYC/AML: Dicas escalonadas (documentos, prazos de verificação, o que acontece a seguir).
Torneios: «Como os pontos são atribuídos» (tooltip/inline-hint), link «Regras».
Pagamentos: helper sobre comissões/prazos e «Por que precisa de comprovação».
Jogo responsável: Dicas discretas, mas visíveis, «Definir limite diurno» (contraste AAA, sem efeito).

11) Performance e posicionamento

Animações leves 'opacity/trans' ≤ 180 ms, out mais rápido.
Posicionamento para origem, mudança de 4-8 px, auto-flip para bordas.
Não crie uma árvore DOM a partir de centenas de dicas - crie preguiçosamente com foco/hover.
Leve em conta 'preferers-reduced-motion': dicas estáticas em vez de shimmer.

12) Métricas e experiências

Dicas CTR (exibições → cliques em 100/Mais informações).
Redução de erros/falhas de formulário com controle de helpers vs.
Tempo até o primeiro sucesso depois de empty/turnê.
Ocultação/rejeição de dicas (sinal negativo - reescrever texto/momento de exibição).
Logs de pedidos populares no painel de comandos/AI-helper.

13) Sistema de design de tokens (exemplo)

json
{
"help": {
"maxWidth": 320,
"gap": 8,
"radius": 10,
"elev": 8,
"iconSize": 16,
"enterMs": 180,
"exitMs": 120,
"cooldownHours": 24
},
"tour": { "maxSteps": 5, "backdropOpacity": 0. 5, "escCloses": true },
"palette": { "hotkey": "Ctrl+K", "rowHeight": 40 },
"a11y": { "contrastAA": true, "useAriaLive": true }
}

css
.helper { display:flex; gap:8px; align-items:flex-start; max-width:320px; }
.helper__icon { width:16px; height:16px; opacity:.8; }
.tooltip { position:absolute; padding:8px 10px; border-radius:10px; box-shadow:var(--elev-2); }
.tooltip[data-show="true"] { animation: fadeIn. 18s cubic-bezier(.2,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }

14) Implementação: coachmark e «não lembrar»

html
<div id="cm1" class="coachmark" role="dialog" aria-labelledby="cm1-title" hidden>
<h3 id = "cm1-title "> New Fast Cashout </h3>
<p> Check out with one button directly from the coupon. </p>
<div class="row">
<button id = "cm1-ok "> Clear </button>
<button id = "cm1-skip"> Don't remind me </button>
</div>
</div>
<script>
const seen = localStorage. getItem('cm1-skip')==='1';
if(!seen) document. getElementById('cm1'). hidden=false;
document. getElementById('cm1-skip'). onclick=()=>{ localStorage. setItem('cm1-skip','1'); cm1. hidden=true; };
document. getElementById('cm1-ok'). onclick=()=> cm1. hidden=true;
</script>

15) Anti-pattern

Dicas que fecham o CTA ou bloqueiam o foco.
Informações críticas apenas em tooltip/hover.
Uma digressão de 10 passos sem «Perder mais tarde».
Dicas sutis/saltitantes, especialmente no dark modo.
«Brincadeiras» e metáforas culturais nos erros e limites.
Cores agressivas e som para um jogo responsável.

16) QA-folha de cheque

Disponibilidade

• Tooltip/coachmark estão disponíveis pelo teclado, 'Esc' fecha e o foco volta.
• Contraste ≥ AA, os textos não dependem apenas da cor.

Comportamento

• As dicas não se sobrepõem a itens importantes, posicionam-se à origem.
• Há uma deduplicação de exibições e «Não lembrar».
• Animações ≤ 180 ms, out mais rápido.

Sentido

• Texto específico e curto, CTA apropriado.
• As fórmulas/restrições fornecem exemplos.

Métricas

• CTR é filmado, tempo até o sucesso, proporção oculta.

17) Documentação em design

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
Tokens de tamanhos/tempos/tons, ÁRIA-hyde e exemplos de copiramento.
Modelos para cenários frequentes (KYC, limites, pagamentos, torneios, apostas).
Do/Don 't galeria com telas reais.

Resumo curto

Os Helpers são bons na hora, no contexto e sem mais dramaturgia. Dê-nos dicas curtas, acessíveis e verificáveis, respeite o foco e a frequência das exibições, fixe os tokens e pattern no sistema de design. É assim que os usuários erram menos e chegam mais rapidamente ao resultado - especialmente em cenários sensíveis.