Botones CTA y zonas de atención

1) El papel de la CTA y los principios

1. Un paso principal en la pantalla. Primary-CTA debe ser obvio y único.
2. Contexto → acción. Junto al CTA siempre hay una breve explicación de «qué va a pasar después».
3. Visibilidad sin agresión. Contraste ≥ AA, tamaño suficiente y texto legible - en lugar de efectos llamativos.
4. Secuencia. Los mismos CTA se comportan de la misma manera en todas las pantallas.
5. Seguridad. Las CTA de riesgo van acompañadas de confirmación o undo.

2) Jerarquía CTA

Primary - acción clave de la página («Hacer una apuesta», «Recargar», «Confirmar»). 1 piezas

Secondary es un paso alternativo o auxiliar («Más información», «Cambiar método»).
Tertiary son los botones de texto/fantasma (ghost) con el menor peso visual.
Destructive - estilo separado (color/icono de advertencia) + confirmación/undo.

Regla: si hay más de un CTA «fuerte» en la pantalla, es probable que se elija sin un objetivo. Rediseñe el flujo.

3) Copyright CTA

Verbo + objeto, 2-4 palabras: «Apostar», «Reponer saldo», «Establecer límite».
Concreción: «Sacar 2.000 ₴» es mejor que «Enviar».
Evite las dobles negaciones («No deshacer») y las metáforas vagas.
Para actividades de riesgo, el subtítulo es 1: «Sin confirmación, puede cancelar 5 segundos».

4) Dimensiones, forma, contraste

Zona de clic mínima: ≥ 44 × 44 px (tach), ≥ 32 × 32 px (desktop).
Altura del botón: 40-48 px; radio 10-12 px; dentro. sangría horizontal 16-20 px.
Contraste de texto a fondo: WCAG AA; no confíe sólo en el color: utilice el icono/etiqueta.
Cifras tabulares para sumas/oumf.: 'font-variant-numeric: tabular-nums;'.

5) Estados y retroalimentación

Hover/Focus/Active - Visible y distinguible (focus-ring no ocultar).
Busy (carga): respuesta instantánea ≤ 100 ms, spinner/esqueleto en lugar de «silencio».
Disabled: no sólo «gris» - explique por qué no está disponible (tooltip/inline-hint).
Undo/Conflm: para CTA destructivos, ya sea un modal de confirmación o un panel con Undo de 5-10 segundos.

html
<button class =" btn btn--primary" aria-busy = "false" id = "cta "> Bid </button>
<script>
const cta = document. getElementById('cta');
cta. addEventListener('click', async () => {
cta. setAttribute('aria-busy','true'); cta. disabled = true ;//instant try {
const r = await fetch('/api/bet', {method:'POST', headers:{'Idempotency-Key':crypto. randomUUID()}});
if(!r.ok) throw new Error();
//success toast/navigation
} catch {
//show reason and suggest Retry
} finally {
cta. disabled = false; cta. setAttribute('aria-busy','false');
}
});
</script>

6) Áreas de atención (escritorio) y áreas del pulgar (móvil)

Patrones de vista: F-pattern/Z-pattern, puntos «calientes»: arriba-izquierda (título), arriba-derecha (secundario), parte inferior de la pantalla (finalización).

• sobre la flexión para las pantallas cortas o en la parte inferior de la forma en la línea de la mirada,
• un panel «pegajoso» en la parte inferior del móvil (thumb-zone).
• «pulgares» móviles: más conveniente 1/3 inferior de la pantalla, margen derecho/izquierdo - depende de la mano dominante (por defecto, centro inferior/derecha).

html
<footer class = "sticky-cta" role = "region" aria-label = "Action">
<div class = "sum"> Bid: 200 ₴</div>
<button class =" btn btn--primary "> Confirm </button>
</footer>

<style>
.sticky-cta{position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
padding:12px 16px; background:var(--bg-elevated); box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sticky-cta. btn{flex:1}
</style>

7) Colocación y sangría

Separe el primary-CTA de los elementos secundarios con un espacio blanco (16-24 px).
No coloque dos primarios al lado - uno se convertirá en una opción «falsa».
En formas: CTA después del último campo; secundarias - izquierda/bajo CTA («Atrás», «Cancelar»).
En las tarjetas/azulejos: CTA en la parte inferior derecha; para listas largas - inline-CTA en cada tarjeta.

8) Animaciones y patrones de movimiento

Entrada/Salida: 120-180 ms, 'opacity/transformación' (sin sacudida layout).
Efecto de prensa: reducción a 96-98% + sombra → «clic se siente».
Para el «éxito»: una microanimación de cheques cortos ≤ 400 ms; para reducción de movimiento - icono estático.
Evite los interminables efectos parpadeantes (anti-pattern para un juego responsable).

9) A11y y teclado

'role =' button '' no es necesario con '<button>' nativo.
Focus-ring visible; El orden Amb es lógico. Enter/Space activan CTA.
'aria-busy' al cargar; para el estado, utilice la región en vivo 'role =' status '.
El texto del botón está disponible SR; los iconos son con' aria-hidden =» true»' y no es el único portador de significado.

10) Métricas y experimentos

CTR CTA, Conversion after click, Time-to-Click desde la aparición hasta la pulsación.
Scroll-depth → click: la proporción de clics que sucedieron «por encima de la flexión »/» por debajo de la flexión».
Zonas Heatmap (desktop/amb); Thumb-reach (amb).
Cancel/Undo rate para CTAs de riesgo.
A/B: texto, color/contraste, tamaño, ubicación, panel «pegajoso» vs colocación estática.

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

json
{
"cta": {
"height": { "sm": 40, "md": 44, "lg": 48 },
"radius": 12,
"px": { "sm": 14, "md": 16, "lg": 20 },
"gap": 8,
"icon": 18,
"focusRing": { "width": 2, "offset": 2 },
"motion": { "pressMs": 90, "hoverMs": 160, "inMs": 160, "outMs": 120 }
},
"sticky": { "enabled": true, "shadow": "0 -8px 24px rgba(0,0,0,.12)" },
"a11y": { "contrastAA": true, "tabularNums": true }
}

css
.btn{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.btn--primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn--ghost{background:transparent; border:1px solid var(--border); color:var(--fg)}
.btn[aria-busy="true"]{pointer-events:none; opacity:.85}
.btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}

12) Patrones para iGaming

Hacer una apuesta (Primary): junto a mostrar la cantidad y el factor; con retraso> 3 s - «Esperamos confirmación»... + seguro Retry.
Depósito: sticky-CTA en la parte inferior. pantalla («Recargar»), secundaria - «Cambiar método»; comisiones visibles/plazos cercanos.
Cashout: CTA se fija en la pantalla del partido/cupón; siempre muestra la suma actual del cachout; confirmación antes de la ejecución.
Establecer un límite: CTA no agresivo; cerca - «Entrará en vigor a través de».... Contraste AAA, sin parpadeos.
Torneos: CTA «Únete» en la tarjeta del torneo + secundaria «Reglas/Premios».

13) Antipatternas

Dos primary-CTA cerca («Apostar» y «Comprar bonificación») son la competencia cognitiva.
Disabled «grises» sin explicación.
Infinitas animaciones de atención y tregua.
Botón que cambia las marcas y aleja el enfoque.
El CTA está por debajo de la gran «decoración» que sale por la flexión.
Icono en lugar de texto (sin etiqueta) en lugares críticos.

14) Análisis de Snippets

js function trackCTA(name, meta={}) {
window. dataLayer?.push({ event:'cta_click', name,...meta });
}
//example document. querySelector('#deposit'). addEventListener('click', ()=>{
trackCTA('deposit_click', { placement:'sticky_footer', amount:getAmount() });
});

15) QA-check-list

Significado y jerarquía

• Hay exactamente una primary-CTA en la pantalla; las secundarias no chocan en peso.
• El texto de la CTA es claro, sin dobles negaciones; Lo que sucederá a continuación.

Disponibilidad

• El enfoque-anillo ve; Enter/Space funciona; 'aria-busy' cuando se descarga.
• Contraste de texto/fondo ≥ AA; el icono no es el único portador de significado.

la Conducta

• Respuesta instantánea ≤ 100 ms; estado busy y Retry en caso de fallas.
• Para los de riesgo - confirmación o undo.
• Sticky-CTA se adhiere correctamente en el móvil, no superpone contenido.

Ubicación

• CTA en la zona del pulgar (amb) o en la línea de la mirada (desktop).
• Sangría suficiente (16-24 px) de los elementos adyacentes.

Mé

• Se filman CTR, Conversion after click, Time-to-Click, Undo-rate.
• Hay experimentos sobre texto/color/tamaño/ubicación.

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

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Señales de tamaño/contraste/animaciones, ejemplos de redacción.
Los patrones son: «Uno primario por pantalla», «Sticky on mobile», «Confinamiento/Undo por riesgo».
Do/Don 't-gallery con pantallas reales y mapas térmicos.

Resumen breve

El CTA funciona cuando tiene un objetivo, un lugar y un significado: un paso principal, un texto claro, un contraste suficiente, una ubicación segura en la zona de atención/pulgar y una retroalimentación honesta. Fije esto en el sistema de diseño, mida el comportamiento - y los clics se convierten en acciones seguras y conscientes sin errores ni irritaciones.