En un teléfono, la prueba social tiene que compartir una pantalla pequeña con lo que el comprador vino a hacer, así que las reglas son más estrictas que en escritorio: un elemento visible a la vez, corto, colocado lejos de los botones de añadir al carrito y de pagar, y que se pueda cerrar con un toque. El widget de Provedly sigue esas reglas por defecto, y este artículo explica el razonamiento de cada una para que puedas ajustar la configuración sabiendo lo que ganas y lo que pierdes.
La restricción. Una página de producto en escritorio tiene espacio en las esquinas para un aviso, espacio arriba para una barra y espacio junto al botón de compra para un contador, todo a la vez. Un teléfono no. La pantalla mide unos cientos de píxeles de ancho, el pulgar cubre el tercio inferior, y un elemento fijo arriba o abajo ocupa una parte importante de lo que queda.
Por eso, cada elemento de prueba social en móvil compite directamente con tu propio contenido. La pregunta de diseño no es "cuánta prueba social podemos mostrar", sino "qué es lo mínimo que sigue funcionando".
Regla 1: nunca apiles
Los widgets de escritorio a veces muestran dos o tres avisos apilados en una esquina. En un teléfono, eso es un muro. Provedly muestra un aviso cada vez, y el siguiente espera al intervalo, que es de 30 segundos por defecto. Si además usas una barra, mantenla en el borde opuesto al aviso para que nunca se solapen.
Si usas una barra de cuenta regresiva durante una oferta, plantéate bajar el límite de avisos en móvil mientras dure, para que la página no quede encajonada entre dos elementos en movimiento. La segmentación por dispositivo te permite aplicar a móvil una configuración distinta de la de escritorio; el ajuste es por widget.
Regla 2: que sea corto
Un aviso de escritorio puede llevar una imagen de producto, un nombre, una ciudad, un título de producto, una hora y la marca de verificado. En móvil, ese mismo aviso ocupa tres líneas y tapa más página de la que debería.
En móvil, deja el aviso en lo esencial: "Alguien en Austin compró" y el título del producto, la hora y la marca de "Compra verificada". La marca se queda porque es lo importante; enlaza a la página de verificación pública, y un comprador que la toque debería ver las fuentes, los conteos y la última compra verificada, no una versión recortada. Si en una tienda Shopify los nombres aparecen como "Alguien", es por el programa Protected Customer Data; /es/blog/shopify-someone-protected-customer-data lo explica.
Para las barras, escribe un texto específico para móvil. "30 % de descuento en toda la tienda, termina en 06:14:22" cabe en un teléfono. "Nuestra mayor oferta del año termina en 06:14:22, usa el código AUTUMN en el checkout" no, y la barra o bien ocupará dos líneas o bien cortará justo la parte importante.
Regla 3: no estorbes a los botones
En una página de producto en móvil, el botón de añadir al carrito suele estar o en el flujo del contenido o fijado en la parte inferior de la pantalla. Un aviso que aparece encima, aunque sea durante seis segundos, es un obstáculo justo en el peor momento.
Si tu tema fija el botón en la parte inferior, coloca el aviso de forma que deje libre esa barra en lugar de taparla. El borde superior es una ubicación alternativa que evita por completo la zona del pulgar, a cambio de quedar más cerca de la navegación.
En el checkout la respuesta es más sencilla: exclúyelo. /es/blog/social-proof-on-checkout-page explica por qué.
Regla 4: un toque para cerrar, y que se recuerde
Un aviso que el comprador no puede cerrar es un secuestro. Cada aviso necesita un control de cierre lo bastante grande para acertarle con el pulgar, y cerrar uno debería significar que no aparecen más avisos durante el resto de la sesión. El límite por sesión (5 por defecto) es un techo; el cierre es un suelo que controla el comprador.
Las barras necesitan el mismo control de cierre, y una barra cerrada debería seguir cerrada durante la sesión en lugar de reaparecer en la siguiente carga de página.
Regla 5: respeta las señales del propio dispositivo
- Movimiento reducido. Si el sistema operativo tiene activado el movimiento reducido, un fundido es más amable que un deslizamiento.
- Scroll. Un aviso que aparece mientras el usuario está haciendo scroll tiene más probabilidades de recibir un toque accidental. El retraso inicial de 3 segundos es en parte para esto; le da tiempo a la página a asentarse.
- Orientación. Los teléfonos en horizontal tienen todavía menos espacio vertical, así que se aplican las mismas reglas de móvil.
Ajustes que vale la pena cambiar para móvil
| Ajuste | Valor por defecto en escritorio | Sugerencia para móvil |
|---|---|---|
| Retraso inicial | 3 s | De 3 a 5 s |
| Tiempo visible | 6 s | De 5 a 6 s |
| Intervalo entre avisos | 30 s | 45 s o más |
| Límite por sesión | 5 | 2 o 3 |
| Ubicación | Esquina inferior | Lejos de cualquier barra de botones fija |
| Contador en vivo | Visible cuando supera el mínimo | Visible, pero integrado en lugar de flotante |
Son sugerencias, no reglas, y la forma honesta de decidirlas es una prueba. /es/blog/ab-testing-social-proof-honestly describe una división que mide pedidos completados en lugar de clics en avisos, algo especialmente importante en móvil, donde los toques accidentales inflan las cifras de interacción.
Rendimiento en redes móviles. El script pesa unos 6 KB comprimido con gzip, se carga de forma asíncrona y se renderiza en un Shadow DOM, así que no bloquea la página ni choca con el CSS de tu tema. Con una conexión lenta, puede que el widget simplemente no se haya cargado cuando un visitante que rebota rápido se va, y en ese caso no se muestra nada y no se cuenta ninguna impresión. Ese es el modo de fallo correcto. /es/blog/theme-app-embed-vs-script-tag explica cómo se carga el script en Shopify en concreto.
Qué no hacer en móvil.
- Avisos a todo lo ancho que tapan el contenido.
- Avisos apilados.
- Una barra y un aviso en el mismo borde.
- Avisos sin control de cierre.
- Volver a mostrar un elemento cerrado en la siguiente página.
- Un contador que flota sobre el botón de añadir al carrito.
- Cualquiera de lo anterior en el checkout.
Preguntas frecuentes
¿Puedo desactivar el widget por completo en móvil?
Sí. La segmentación por dispositivo te permite mostrar un widget solo en escritorio, solo en móvil o en ambos. Algunas tiendas con diseños móviles muy ajustados usan avisos en escritorio y solo el contador en móvil.
¿La marca de "Compra verificada" sigue cabiendo en un aviso en móvil?
Sí. Es el único elemento que nunca se recorta, porque es el enlace a la página de verificación.
¿El aviso tapará la barra fija de añadir al carrito de Shopify?
No debería. Coloca el aviso de forma que deje libre esa barra, o ponlo en el borde superior, y compruébalo en un teléfono real antes de publicar.
Fija un límite bajo para móvil, comprueba la ubicación en un teléfono real y luego pruébalo; el plan Free en /es/pricing basta para empezar.