Consejos y ayudantes de interfaz

1) Por qué los necesitan

• aparecen en un contexto en el que realmente se necesitan,
• corto y específico, sin comercialización,
• no bloquean el escenario principal y respetan la disponibilidad.

2) Mapa de herramientas y cuándo aplicarlas

Regla: el contenido crítico está a la vista y en el texto de la interfaz, no sólo en la pista.

3) Patrones de colocación y disparadores

Antes de la acción: helper text/inline-hint («Contraseña ≥ 8 caracteres»).
En el momento de la acción: tooltip/coachmark cuando se enfoca/hover/long-press.
Después de la acción: un brindis/pancarta con la explicación del resultado y el enlace «Más».
Por intención: proyección por '?', 'i', 'Más', 'Ctrl +/' (comando palette).

4) Copyright

Un pensamiento es una frase. Comience con el verbo («Seleccionar»..., «Rellenar»...).

Sin culpa: "El filtro eliminó todos los registros. ¿Restablecer el filtro?"

Números y hechos en lugar de estimaciones: "Comisión 1. 5–2%».
Importante: no prometa un tiempo exacto a menos que esté garantizado.

5) Disponibilidad (A11y)

Tooltip: 'role = «tooltip»', comunicación a través de 'aria-describedby' con el disparador; disponible por teclado.
Los bloques de información son: 'role =' status '(polite), los errores son' role = 'alert'.
Coachmark/Tour: Enfoque en orden, 'Amb' cierra, devuelve el foco a la fuente.
Contraste de texto ≥ AA; la pista no es el único medio de significado.

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) Gestión de espectáculos e «higiene»

Deduplicación: no mostrar el mismo mensaje con más frecuencia N veces por sesión.
Control de frecuencia: cool-down 24 h para coachmark/tour; el usuario tiene un «No se asemeja».
Las herramientas no compiten: no abrir la herramienta encima del coachmark y viceversa.
Memoria de progreso: ya no se ofrecen los pasos completos del recorrido.

7) Textos de ayuda a las formas

Escribe «cómo pasar» la regla, no «qué hiciste mal».
Formato de ejemplo al lado: 'DD. MM. YYYY`, `user@domain. tld`.
Para campos complejos, el botón «Ejemplo» (abre un pequeño snappet/máscara).
La validación y el helper no entran en conflicto: en caso de error, el helper se transforma en un breve «cómo corregir».

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) Paleta de comandos y búsqueda por acción

Desencadenador: 'Ctrl +/',' Ctrl + K 'o botón'.
En la paleta: acciones con iconos y teclas calientes ("Apuesta... — ⏎»).
State Machine: al seleccionar una acción - Navegación/ejecución instantánea, «Cancelar» - 'Amb'.

9) AI-helper/copiloto

Pistas de forma/términos ("¿Qué es un vager? "), rellenar draft campos con una lista de cambios antes de aplicar.
Para escenarios sensibles (pago/apuesta) - sólo explicaciones y hojas de comprobación, la solución queda para el usuario.
Forme en su propia documentación/FAQ; lógica las preguntas para mejorar la estática.

10) Especificidad de iGaming

Reglas y límites: helpers notables junto a los botones «Apostar», «Hacer una apuesta», «Poner un límite». Lenguaje claro y ejemplos.
KYC/AML: pistas por etapas (documentos, plazos de verificación, lo que viene después).
Torneos: en la tarjeta - «Cómo se otorgan los puntos» (tooltip/inline-hint), enlace «Reglas».
Pagos: ayuda sobre comisiones/plazos y «Por qué se necesita verificación».
Juego responsable: pistas discretas pero visibles de «Establece un límite diario» (contraste AAA, sin parpadeo).

11) Performance y posicionamiento

Animaciones fáciles 'opacity/transformación' ≤ 180 ms, fuera más rápido.
Posicionamiento a la fuente, cambio 4-8 px, auto-flip en los bordes.
No cree un árbol DOM a partir de cientos de pistas - montar perezosamente por foco/hover.
Tenga en cuenta 'prefers-reduced-motion': consejos estáticos en lugar de shimmer.

12) Métricas y experimentos

Consejos CTR (impresiones → clics en STA/« Más »).
Reducción de errores/fallos en formularios con control de helpers vs.
Tiempo hasta el primer éxito después de empty/tour.
Ocultar/rechazar pistas (señal negativa - reescribir el texto/momento de la exhibición).
Registros de consultas populares en la paleta de comandos/AI-helper.

13) Tokens del sistema de diseño (ejemplo)

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) Implementación: coachmark y «no recordar»

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-patrones

Pistas que cierran el CTA o superponen el foco.
Información crítica sólo en tooltip/hover.
Un recorrido de más de 10 pasos sin «Saltar más tarde».
Pistas parpadeantes/saltantes, especialmente en modo oscuro.
«Chistes» y metáforas culturales en errores y límites.
Colores agresivos y sonido para un juego responsable.

16) QA-check-list

Disponibilidad

• Tooltip/coachmark están disponibles a través del teclado, 'Amb' cierra, el enfoque vuelve.
• Contraste ≥ AA, los textos no dependen sólo del color.

Comport

• Las pistas no superponen elementos importantes, se posicionan en la fuente.
• Hay una deduplicación de las proyecciones y «No se parezca».
• Animaciones ≤ 180 ms, fuera más rápido.

• El texto es específico y breve, CTA es apropiado.
• En las fórmulas/limitaciones se dan ejemplos.

Mé

• CTR son filmados, tiempo antes del éxito, proporción de ocultos.

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

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
Fichas de tamaño/tiempo/tonos, ARIA-hyde y ejemplos de redacción.
Plantillas para escenarios frecuentes (KYC, límites, pagos, torneos, apuestas).
Do/Don 't-gallery con pantallas reales.

Resumen breve

Los helperos son buenos cuando están a tiempo, en contexto y sin demasiada dramaturgia. Hagamos pistas cortas, accesibles y verificables, respete el enfoque y la frecuencia de las impresiones, fije los tokens y patrones en el sistema de diseño. Por lo tanto, es menos probable que los usuarios se equivoquen y lleguen más rápido al resultado, especialmente en escenarios sensibles de iGaming.