Informe de Auditoría · Checkout Móvil
El botón de pago es invisible para tus clientes
Análisis UI/UX basado en capturas reales del flujo de checkout de ulpik.com. Se identificaron 7 problemas que explican por qué los usuarios no completan el pago en dispositivos móviles.
Scroll hasta el botón
~2400px
Estimado en móvil 390×844px
Problemas identificados
7
3 críticos · 2 altos · 2 medios
Espacio vacío post-botón
~300px
Bug de layout confirmado
Bloques antes del CTA
6
Header · Form · Pedido · Cupón · Pago · Legal
01
Capturas reales del problema
Imagen 1 (parte superior): El usuario llega y ve el header ilustrado, luego el formulario de facturación con 4 campos, el resumen del pedido y la sección de cupón con su propio botón "APLICAR CUPÓN". El CTA principal aún no es visible.
Imagen 2 (parte inferior): Solo después de scrollear por los 4 métodos de pago, el aviso legal y el checkbox de T&C, aparece el botón verde "REALIZAR EL PEDIDO". Debajo hay ~300px de espacio vacío antes del footer — posible bug de layout.
Captura 1 — Parte superior
Sin CTA visible
Captura 2 — Parte inferior
Botón + espacio vacío
02
Profundidad de scroll requerida
Elementos que el usuario debe pasar antes de ver el botón de pago
🖼️ Header ilustrado "Finaliza tu compra"~0px
📋 Formulario: Nombre, Cédula, Teléfono, Email~120px
🛒 Resumen de pedido + subtotal + total~520px
🏷️ Sección código de descuento + botón "APLICAR CUPÓN"~820px
💳 4 métodos de pago (Transferencia · Payphone · DataFast · Bitcoin)~1100px
📄 Aviso de privacidad + términos y condiciones (checkbox)~1800px
✅ REALIZAR EL PEDIDO — botón principal~2100px
⚠️ Espacio vacío ~300px (bug de layout)~2200px
03
Problemas identificados
1
Botón CTA al final de página sin sticky — no visible en viewport inicial
El botón "REALIZAR EL PEDIDO" aparece al final de todo el contenido. En un móvil estándar (390×844px), el usuario debe hacer scroll equivalente a ~5–6 pantallas completas. No existe ningún indicador visual que señale que hay un botón al final.
2
Gran espacio vacío (~300px) entre botón y footer — bug de layout confirmado
Confirmado en la captura 2: bloque en blanco de ~300px debajo del botón verde antes del footer. El usuario que llega al botón desconfía si es realmente el final de la página o si hay más contenido que no cargó.
3
Checkbox obligatorio sin validación visual clara — fricción de último momento
El checkbox "HE LEÍDO Y ESTOY DE ACUERDO CON LOS TÉRMINOS Y CONDICIONES" aparece justo antes del botón en mayúsculas pequeñas, sin estado de error visible. Si el usuario toca el botón sin marcarlo, la experiencia de fallo no está diseñada.
4
Botón "APLICAR CUPÓN" compite visualmente con el CTA principal
El botón "APLICAR CUPÓN" tiene estilo similar al CTA principal (borde, ancho completo, texto en mayúsculas). En la imagen 1 es el último elemento visible antes del scroll. Muchos usuarios pueden tocarlo creyendo que es el botón de pago.
5
Checkout de un solo paso sobrecargado — formulario + pago en la misma pantalla
Toda la pantalla de checkout en una sola página larga aumenta la carga cognitiva y la distancia de scroll hasta el CTA. El estándar de industria es flujo de 2–3 pasos con progresión visible (stepper).
6
Labels de formulario en all-caps pequeños — legibilidad reducida en móvil
Los labels "NOMBRE O RAZÓN SOCIAL", "CÉDULA/RUC/PASAPORTE" están en all-caps con tamaño pequeño. WCAG y Nielsen recomiendan sentence case con mínimo 14px para labels en móvil.
7
Total a pagar desaparece al hacer scroll — sin resumen anclado
El total "$480,00" está visible en la sección "Tu pedido" pero desaparece al scrollear. Al momento de confirmar el pago el usuario no ve el monto junto al botón, lo que genera desconfianza en el momento de decisión.
04
Análisis heurístico — Nielsen Norman
Visibilidad del estado del sistema
1/5
Consistencia y estándares
1.5/5
Diseño estético y minimalista
2/5
Prevención de errores
2.5/5
Reconocimiento vs recuerdo
2.5/5
Control y libertad del usuario
3/5
Ayuda al usuario ante errores
3/5
05
Comparativa — situación actual vs propuesta
Estado actual — problema
Finaliza tu compra · Pago seguro
🖼️ Ilustración header
Detalles de facturación
Nombre o Razón Social
Cédula / RUC / Pasaporte
Teléfono
Email
Tu pedido
Pack Búsqueda Fonética… $480,00
Total$480,00
⚠ Código de descuento
Código de cupón
APLICAR CUPÓN ← confunde al usuario
El botón "APLICAR CUPÓN" es el último elemento visible. Muchos usuarios creen que este es el botón de pago.
Método de pago
Transferencia Bancaria Directa
Payphone Visa/Mastercard
DataFast Diferido sin Intereses
Bitcoin
Tus datos se utilizarán para procesar tu pedido…
☐ HE LEÍDO Y ESTOY DE ACUERDO CON LOS TÉRMINOS *
REALIZAR EL PEDIDO
~300px espacio vacío (bug)
6 bloques de scroll antes del CTA · botón no sticky · espacio vacío post-botón · total desaparece
Propuesta — flujo en 2 pasos con sticky CTA
Paso 1 — Datos de facturación
Nombre o Razón Social
Cédula / RUC / Pasaporte
Teléfono
Email
Total a pagar: $480,00
Continuar al pago →
Paso 2 — Método de pago
Transferencia Bancaria
Payphone Visa/MC
DataFast Diferido
Bitcoin
☑ Acepto los Términos y Condiciones
Total a pagar: $480,00
Pagar $480,00 ✓
CTA siempre visible · total anclado · 2 pasos claros · sin scroll excesivo
06
Recomendaciones priorizadas
1. Implementar sticky CTA anclado al pie
Crítico
position: fixed; bottom: 0 con safe-area para notch. Altura mínima 52px. Incluir el monto total en el label: "Pagar $480,00". Fondo verde, texto contrastado.
1–2 días dev
2. Corregir espacio vacío post-botón
Crítico
Eliminar el bloque de ~300px vacíos entre el botón y el footer. Posible problema con padding/margin en el contenedor padre de WooCommerce/template.
2 horas dev
3. Diferenciar visualmente "Aplicar Cupón"
Crítico
Reducir a botón secundario pequeño o link de texto. El CTA principal debe ser el único elemento de peso visual dominante en la página.
1 día dev
4. Mostrar total junto al botón de pago
Alto
El monto "$480,00" debe estar visible junto al botón de acción. Genera confianza y reduce abandono en el momento de decisión.
1 día dev
5. Dividir checkout en 2 pasos con stepper
Alto
Paso 1: datos de facturación. Paso 2: método de pago + confirmación. Indicador de progreso visible. Reduce scroll drásticamente y mejora la tasa de conversión.
1 semana dev
6. Instrumentar con heatmaps y métricas
Medio
Implementar Hotjar o FullStory para medir: % scroll hasta el CTA, tasa de abandono en checkout, tiempo hasta primer toque del botón. Validar mejoras con datos reales post-fix.
1 semana
07
Roadmap de implementación
Semana 1
Correcciones críticas — impacto inmediato en conversión
Sticky CTA con monto visible al pie de pantalla
Corregir bug de espacio vacío post-botón
Cambiar "APLICAR CUPÓN" a botón secundario
Semana 2–3
Mejoras de experiencia — reducción de fricción
Dividir checkout en 2 pasos con stepper visual
Validación en tiempo real del checkbox T&C
Labels de formulario en sentence case 14px
Safe-area para notch iOS y barra Android
Semana 4+
Validación con datos — optimización continua
Instrumentación con Hotjar o FullStory
Test A/B sticky vs flujo 2 pasos
Resumen de pedido colapsable en móvil
Auditoría de accesibilidad WCAG 2.1 AA
