Product Craft Bible
Referral & sharing flows
Inicio Contenido y Marketing Referral & sharing flows
Contenido y Marketing

Referral & sharing flows

8 reglas Sean Ellis · Dropbox referral case (atribución cruzada) · Andrew Chen "How to design a referral program"Andrew Chen "How to design a referral program" · ReferralCandy "Best time to ask"Voucherify "Referral UX best practices" · NN/g "Affiliate programs" (cada clic extra reduce la completitud)Voucherify (estados Expected/Pending/Successful) · NN/g heuristica #1 (visibilidad del estado del sistema)
85

Referral & sharing flows

8 reglas
728

Comunica 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"
Preferir
Invita y ambos ganan espacio
Para ti
+500 MB
+
Para tu amigo
+500 MB
Evitar
El beneficio del amigo no se menciona hasta después del click.
729

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"
Preferir
Primera sincronización completada
Tus archivos están a salvo
Te gusto? Comparte con un amigo
Ambos ganan 500 MB de espacio extra.
Invitar →
Evitar
Bienvenido a la app
Invita a 5 amigos para desbloquear funciones
730

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)
Preferir
Tu link de invitación
WhatsApp
Correo
SMS
Evitar
Email del amigo
731

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)
Preferir
Mis invitaciones
MC
Maria C.
Invitada el 12 jun
Acreditado +$20
JL
Jorge L.
Se registro hace 2 días
Pendiente
SR
Sofia R.
Invitada el 15 jun
Pendiente
Evitar
Tu recompensa esta en proceso
732

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) · Voucherify
Preferir
Invita a un amigo
Tu credito se activa cuando tu amigo complete su primera compra. Valido 90 días.
Evitar
Las condiciones solo aparecen en el email de "tu credito ha vencido".
733

No 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"
Preferir
Tus recompensas
4 de 10
Máximo 10 recompensas por cuenta
Se acredita solo cuando tu amigo completa su primera acción
Evitar
Invita a todos tus contactos
Emails masivos en nombre del usuario
734

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)
Preferir
Tu mensaje (editable)
Hola, uso Producto para organizar mi semana y ha sido genial app.io/r/ana-4f2k
Evitar
Te invito a unirte a Producto.
Solo lectura: el usuario no puede anadir contexto
735

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.

WCAG 2.2 SC 4.1.2 & 2.5.3 (W3C) · W3C ARIA WG issue #1012 · Deque "Accessible ARIA buttons"
Preferir
Lector: "Compartir por WhatsApp, botón"
Evitar
Lector: "botón" (sin contexto, sin foco)