Referral & sharing flows
Referral & sharing flows
8 reglasComunica el beneficio doble cara, explicito y simetrico, antes de pedir nada
El programa debe mostrar de inmediato y en paralelo que recibe quien invita y que recibe quien acepta, antes de cualquier explicación de pasos o condiciones. El modelo asimetrico (solo gana el referidor) introduce fricción social: el usuario siente que esta vendiendo a su red por beneficio propio. Cuando ambas partes ganan, la barrera emocional desaparece. La formula visual canonica "Tu +500 MB / Tu amigo +500 MB" condensa la propuesta en una línea escaneable. Dropbox lanzo en 2008 un programa doble de almacenamiento extra y crecio de 100.000 a 4 millones de usuarios en 15 meses (3.900%), con el 35% de los signups atribuidos a referidos en su pico (cifras reportadas por Dropbox/Sean Ellis, verificadas por atribución cruzada).
Sean Ellis · Dropbox referral case (atribución cruzada) · Andrew Chen "How to design a referral program"Pide compartir tras un momento de valor, nunca en el onboarding ni el checkout
El prompt de referidos debe aparecer en puntos de alta satisfacción: tras completar una acción clave, recibir un resultado positivo o alcanzar un hito. Un usuario que aún no ha experimentado el producto no puede recomendar con credibilidad, y pedir durante el checkout interrumpe una transacción activa. El entusiasmo post-logro es el estado emocional más favorable para la acción social: Dropbox solo mostraba el prompt después de que el usuario ya había sincronizado archivos, es decir, tras vivir el "aha moment". La ventana óptima es de 1 a 3 días post-compra o post-activación, cuando la satisfacción esta en su pico.
Andrew Chen "How to design a referral program" · ReferralCandy "Best time to ask"Ofrece un link copiable con feedback de confirmación: el usuario no escribe nada
El flujo de compartir debe entregar un link único copiable con estado de confirmación visible ("Copiado"), canales nativos contextuales al dispositivo y un mensaje pre-redactado. Cada paso adicional reduce la tasa de conversión: el mínimo viable es un botón "Copiar link" que cambia a "Copiado" por dos segundos, más iconos de WhatsApp, correo o SMS según el dispositivo. En móvil, la Web Share API o los deep links nativos eliminan el cambio de app. Forzar al usuario a teclear la dirección de email del amigo en un formulario sin link propio anade fricción innecesaria y rompe el patrón mental de compartir.
Voucherify "Referral UX best practices" · NN/g "Affiliate programs" (cada clic extra reduce la completitud)Muestra el estado de cada referido y el credito en tiempo real
El programa debe ofrecer una vista de seguimiento donde el usuario vea invitaciones enviadas, amigos que se registraron, amigos que cumplieron el requisito y recompensas acreditadas o pendientes, actualizada en tiempo real o casi. La opacidad genera ansiedad y desconfianza: "se registro mi amigo?, por que no recibi el credito?". Un panel de seguimiento convierte el programa en una experiencia con progreso visible, lo que sostiene la participación. Usa nomenclatura clara por estado (Pendiente, Completado, Acreditado, Vencido) con chips de color, nunca códigos internos ni un genérico "tu recompensa esta en proceso" sin fecha ni detalle por invitado.
Voucherify (estados Expected/Pending/Successful) · NN/g heuristica #1 (visibilidad del estado del sistema)Se honesto sobre las condiciones de acreditación junto al CTA, no enterradas
Las condiciones de activación de la recompensa (compra mínima, plan requerido, fecha de vencimiento, geografias excluidas) deben ser visibles en el mismo punto donde se invita, no solo en los términos al final. Descubrir condiciones inesperadas después de compartir dana la confianza en la marca más que no haber tenido programa. Si el credito requiere que el amigo complete una compra o se mantenga suscrito 30 días, eso debe aparecer como nota o resumen junto al CTA. La transparencia upfront filtra a quienes de otro modo compartirian y luego reclamarian, y protege la relación de largo plazo por encima del clic inmediato.
NN/g "Affiliate programs" (la confianza es la propuesta de largo plazo) · VoucherifyNo disenes incentivos que conviertan al usuario en spammer de su red
Un programa de referidos no debe premiar el volumen masivo de invitaciones sin fricción de calidad. Cuando el incentivo es grande y no exige conversión del amigo, los usuarios envian a desconocidos, cosechan emails o crean cuentas falsas: se deteriora la reputación del remitente, se saturan bandejas y se generan leads de baja calidad. Recompensa conversiones reales, no envios, y limita el número de incentivos por cuenta. Evita el widget "invita a todos tus contactos" que importa la agenda completa y dispara correos masivos en nombre del usuario con un click. La FTC exige además divulgación clara cuando la recomendación es inducida por dinero.
FTC endorsement guides (2019) · deceptive.design · Andrew Chen "How to design a referral program"Permite editar el mensaje de invitación para darle contexto personal
El mensaje pre-redactado que acompana al link debe ser editable antes de enviarlo. El texto por defecto incluye contexto del producto y el beneficio para el destinatario, pero el usuario debe poder personalizarlo sin restricciones de longitud que lo rompan. Un mensaje genérico ("te invito a unirte a X") tiene menor tasa de apertura que uno con el nombre del remitente y un contexto relevante; los usuarios que pueden editar adaptan el tono al canal (distinto en WhatsApp que en LinkedIn). La edición también aumenta la sensación de agencia: el usuario siente que recomienda, no que ejecuta una campana de marketing. El link queda fijo al final, fuera de edición accidental.
Voucherify · Andrew Chen · Mailchimp benchmarks (personalización +26% apertura, dato de proveedor)Haz los botones de share operables por teclado y anunciables por lector de pantalla
Todo el flujo de referidos debe ser operable por teclado, compatible con lectores de pantalla (WCAG 2.2 AA) y llevar aria-label descriptivo en cada control. Los botones de share con solo icono son una trampa frecuente: el lector anuncia "botón" sin contexto de acción. Cada canal necesita un <button aria-label="Compartir por WhatsApp"> con el SVG marcado aria-hidden="true", foco visible (outline 2px) e inclusión en el tab order del modal, que además debe gestionar focus trap y devolver el foco al trigger al cerrar. El contraste mínimo es 3:1 para iconos (1.4.11) y 4.5:1 para texto (1.4.3). Un <div onclick> con un <img> no tiene rol, nombre ni foco por teclado.
- R-728 Comunica el beneficio doble cara, explicito y simetrico, antes de pedir nada
- R-729 Pide compartir tras un momento de valor, nunca en el onboarding ni el checkout
- R-730 Ofrece un link copiable con feedback de confirmación: el usuario no escribe nada
- R-731 Muestra el estado de cada referido y el credito en tiempo real
- R-732 Se honesto sobre las condiciones de acreditación junto al CTA, no enterradas
- R-733 No disenes incentivos que conviertan al usuario en spammer de su red
- R-734 Permite editar el mensaje de invitación para darle contexto personal
- R-735 Haz los botones de share operables por teclado y anunciables por lector de pantalla