whoiscarlo/agent-skills

Conversión y UX de Páginas de Aterrizaje

Reglas para páginas cuyo trabajo es lograr una sola acción: iniciar sesión, registrarse, dejar un correo electrónico, solicitar algo. Destilado de una colección de libros electrónicos de marketing, conversión y UX (UserTesting, UXPin, SmartBug, Usabilla y otros, aproximadamente de 2014 a 2016). Los números que citan son antiguos. El comportamiento que hay detrás no lo es.

Cada regla es una instrucción, una breve razón y un ejemplo. Para una revisión, comienza con la lista de verificación al final.

---

1. Propuesta de valor y sobre el pliegue

1. Pasa la prueba de los cinco segundos. Por qué: los visitantes deciden en pocos segundos si una página es para ellos. Si no pueden decir qué haces en ese tiempo, presionan Atrás. Ejemplo: muestra la página a alguien durante cinco segundos, escóndela y pregúntale "¿qué es esto y para quién es?" Si no puede responder, reescribe el titular antes de tocar cualquier otra cosa.

2. Escribe el titular sobre el resultado del visitante, no sobre ti. Por qué: una página que habla de "nosotros" obliga al lector a hacer la traducción. "Tú" y un resultado concreto lo hacen por ellos. Ejemplo: "Seleccionamos correos de marketing" se convierte en "Mira cómo 400 marcas escriben sus correos, ordenados y buscables".

3. Respalda el titular con dos o tres razones concretas para actuar. Por qué: el titular motiva; las razones convierten a las personas que están indecisas. Ejemplo: debajo del titular, tres líneas cortas: "Nuevas marcas cada semana", "Correos completos, no miniaturas", "Gratis para navegar".

4. Muestra lo real, no una foto de stock. Por qué: las imágenes genéricas se leen como relleno y hacen que la página parezca menos confiable. Una captura de pantalla del producto demuestra que existe. Ejemplo: reemplaza una foto de equipo sonriente con una cuadrícula real de correos archivados.

5. Deja que la primera pantalla presente la oferta, luego permite que la gente se desplace. Por qué: el héroe debe contener la propuesta de valor y la acción principal, pero amontonar cada característica sobre el pliegue crea desorden. La gente se desplaza cuando la jerarquía es clara. Ejemplo: el héroe contiene titular, subtítulo, un botón y una vista previa del producto. Las características, la prueba y las preguntas frecuentes viven debajo.

6. Diseña primero para la pantalla pequeña. Por qué: el diseño del móvil te obliga a jerarquizar el contenido. Lo que sobrevive en móvil es lo que importa, y la versión de escritorio crece a partir de ello de manera limpia. Ejemplo: haz un wireframe de la versión de 375px solo con titular, botón y una línea de prueba, luego ensancha hasta que haya demasiado espacio vacío y agrega el siguiente elemento.

7. Mantén el héroe rápido. Por qué: los retrasos de más de un segundo hacen que las personas se sientan fuera de control, y las páginas lentas pierden tanto visitantes como ranking de búsqueda. Ejemplo: una imagen de vista previa comprimida, sin video de reproducción automática, sin control deslizante.

[Fuentes: Inbound Marketing's Most Wanted 33 Website Design Crimes; Lead Generation Techniques for High Conversions and Great UX; The Elements of Successful UX Design; Timeless UX Design Trends: Responsive and Adaptive; Responsive Web Design Best Practices]

---

2. Llamadas a la acción

1. Dale a una página de aterrizaje un solo objetivo y un CTA principal. Por qué: cada acción adicional compite con la que deseas. Una página que pide ver un video, leer seis testimonios y luego llenar un formulario los pierde en el camino. Ejemplo: un botón "Abrir el archivo", repetido arriba y abajo, y nada más estilizado como botón.

2. Etiqueta el botón con lo que sucede a continuación. Por qué: "Enviar" y "Haz clic aquí" describen el mecanismo, no la recompensa. Un verbo más el objeto hace obvio el objetivo de la página. Ejemplo: "Enviar" se convierte en "Solicitar esta marca"; "Iniciar sesión" se convierte en "Abrir el archivo".

3. Di lo que el visitante obtiene antes de que se comprometa. Por qué: la gente pregunta "¿a cambio de qué estoy dando mi correo?" Responde con texto y, cuando sea posible, una imagen del resultado. Ejemplo: junto a un botón con contenido restringido, una línea como "Gratis. Inicia sesión con Google. Toma diez segundos." y una vista previa del archivo detrás.

4. Haz que el CTA destaque mediante contraste, no estridencia. Por qué: un botón saturado en una página calmada atrae la mirada. Un color chillón que choca con la marca abarata todo el sitio. Ejemplo: mantén la interfaz circundante desaturada y da solo al botón principal el color más fuerte de la marca.

5. Solo los botones deben parecer botones. Por qué: el texto enmarcado o los botones falsos que no hacen nada desperdician clics y enseñan a la gente a desconfiar del resto de la página. Ejemplo: no pongas una píldora con borde alrededor de "400+ marcas"; estilízalo como una etiqueta o texto simple.

6. Haz que los objetivos táctiles sean grandes y estén bien espaciados. Por qué: los dedos son menos precisos que los cursores. Los objetivos pequeños o abarrotados causan toques equivocados y dobles toques. Ejemplo: al menos 44 por 44 puntos para el botón principal, con espacio claro desde el enlace más cercano.

7. No ocultes nada importante detrás de un hover. Por qué: las pantallas táctiles no tienen hover. La información que solo aparece al pasar el ratón es invisible para los usuarios de teléfonos. Ejemplo: muestra la nota "lo que obtienes" debajo del botón, no en un tooltip.

8. Ofrece un camino más suave para las personas que no están listas. Por qué: la mayoría de los visitantes no están listos para la acción principal en su primera visita. Una opción secundaria de menor compromiso evita que se vayan con las manos vacías, pero debe seguir siendo visualmente secundaria. Ejemplo: un enlace de texto "o recibe un correo cuando lleguen nuevas marcas" debajo del botón principal.

[Fuentes: 33 Website Design Crimes; The Elements of Successful UX Design; Designing Better UX with UI Patterns; Responsive Web Design Best Practices; Timeless UX Design Trends: Responsive and Adaptive]

---

3. Captura de leads y formularios de registro

1. Pide solo lo que usarás ahora mismo. Por qué: cada campo reduce la tasa de finalización. En una prueba, reducir un formulario de 11 campos a 4 aumentó los registros en más del 100% sin caída en la calidad de los leads. Ejemplo: un formulario de "solicitar la siguiente marca" necesita un nombre de marca y un correo electrónico. Ni nombre, ni empresa, ni teléfono.

2. Elimina los campos que confunden. Por qué: un campo ambiguo puede hundir un formulario. Un caso famoso eliminó un único campo opcional de "Empresa" que la gente malinterpretaba y obtuvo millones en ingresos. Ejemplo: si agregas "Sitio web" a la solicitud de marca, la gente puede no saber si te refieres a su sitio o al de la marca. Elimínalo o etiquétalo exactamente.

3. Recoge más después, no todo de una vez. Por qué: preguntar un poco en cada visita (perfilado progresivo) obtiene más finalizaciones y datos más limpios que un formulario largo que la gente llena con basura. Ejemplo: la primera solicitud pide solo correo electrónico; un correo posterior pregunta "¿en qué industria trabajas?"

4. Acepta entrada en cualquier formato razonable. Por qué: rechazar "Nike.com" porque querías "Nike" castiga al usuario por tu analizador. Límpialo en el servidor. Ejemplo: recorta espacios, elimina "www." y ".com", coincide sin distinción de mayúsculas/minúsculas.

5. Coloca el formulario junto al valor que desbloquea. Por qué: un formulario que se coloca justo después del contenido útil convierte mucho mejor que un cuadro genérico en la barra lateral que la gente ha aprendido a ignorar. Ejemplo: coloca "¿Falta una marca? Solicítala" justo debajo de la vista previa del archivo, no en el pie de página.

6. Mantén inicio de sesión y registro visualmente distintos. Por qué: cuando los dos formularios están apilados, muchos visitantes nuevos comienzan a llenar el equivocado. Ejemplo: un botón "Continuar con Google" que maneja ambos casos, o dos paneles claramente separados.

7. Proporciona un interruptor de mostrar contraseña y un enlace visible de "olvidé mi contraseña". Por qué: las contraseñas mal escritas en móvil empujan a la gente a correos de restablecimiento que los sacan del flujo. Ejemplo: un ícono de ojo en el campo de contraseña; el enlace de restablecimiento justo debajo.

8. Confirma el éxito en la página, en palabras simples. Por qué: la gente necesita saber que el formulario funcionó y qué sucede después. Ejemplo: "Entendido. Te enviaremos un correo cuando Glossier esté en el archivo."

9. Explica qué haces con el correo en una línea corta. Por qué: la preocupación por la privacidad es una razón común por la que la gente se detiene en el último campo. El lenguaje simple supera un enlace a texto legal. Ejemplo: "Un correo cuando tu marca sea añadida. Sin boletín a menos que lo solicites."

[Fuentes: 3 Common UX Mistakes Killing Good Design; 33 Website Design Crimes; The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX; Designing a Checkout Flow That Converts (form rules only)]

---

4. Prueba social y confianza

1. Usa números reales cuando los tengas. Por qué: la gente confía más en números concretos que en adjetivos. Ejemplo: "2.140 correos de 312 marcas" supera a "una biblioteca enorme".

2. Atribuye cada testimonio a una persona real. Por qué: un nombre, cargo y foto hacen que una cita sea relatable. Una cita anónima se lee como inventada. Ejemplo: "Me ahorró horas en nuestra serie de bienvenida." Priya S., especialista en ciclo de vida en una marca DTC, con foto de perfil.

3. Muestra logotipos reconocibles discretamente. Por qué: la credibilidad por asociación funciona, pero los logotipos coloridos compiten con el CTA. Ejemplo: una fila única de logotipos de marcas en escala de grises justo debajo del héroe.

4. Coloca la prueba donde surge la duda. Por qué: un testimonio a mitad de la página, junto a la afirmación que respalda, hace más que un muro de citas al final. Ejemplo: después de "correos completos, no miniaturas", una cita de alguien que usó la vista de tamaño completo.

5. Prueba la prueba social en lugar de asumir que ayuda. Por qué: los contadores de suscriptores a veces reducen la conversión, especialmente cuando el número es pequeño. Ejemplo: prueba A/B el héroe con y sin "Únete a 800 especialistas en marketing".

6. Gana confianza con pulcritud y honestidad. Por qué: la calidad visual es lo primero que la gente usa para juzgar la credibilidad. Errores tipográficos, botones rotos y alineación desordenada se leen como "no es legítimo". Ejemplo: revisa cada cadena de texto, haz clic en cada enlace antes del lanzamiento.

7. Nunca uses patrones oscuros. Por qué: trucos como suscripciones ocultas o enlaces de cancelación difíciles de encontrar ganan una vez y pierden al usuario para siempre. Ejemplo: una casilla sin marcar, claramente etiquetada "Enviar también el resumen semanal", nunca una pre-marcada oculta en letra pequeña.

8. Sé transparente sobre el costo y los términos. Por qué: la gente prefiere ver el precio temprano, y las afirmaciones de "gratis" que resultan condicionales destruyen la confianza. Ejemplo: si navegar es gratuito pero las descargas son de pago, dilo en la página de aterrizaje, no después del inicio de sesión.

[Fuentes: The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX]

---

5. Flujo de página y estructura

1. Traza el camino antes de diseñar la página. Por qué: sin un "¿qué hacen después?" planificado, las páginas se convierten en callejones sin salida. Ejemplo: escríbelo: llegan, leen titular, ven vista previa, hacen clic en "Abrir el archivo", inician sesión, entran al archivo.

2. Elimina la navegación principal de las páginas de aterrizaje de un solo objetivo. Por qué: cada enlace de navegación es una salida de la oferta. Ejemplo: logotipo más un CTA en el encabezado, sin menú "Blog / Acerca de / Precios".

3. Nunca pongas una página de presentación delante de la página real. Por qué: añade un paso y no le dice nada al visitante. Ejemplo: sin puerta de "Entrar al sitio". La página de aterrizaje es la puerta de entrada.

4. Haz que cada página termine con un siguiente paso. Por qué: una página que simplemente se detiene deja al visitante buscando. Si no pueden encontrar a dónde ir en pocos segundos, se van. Ejemplo: las preguntas frecuentes terminan con el mismo CTA que el héroe.

5. Escribe para escaneadores. Por qué: la mayoría de las personas leen solo encabezados, subtítulos y primeras oraciones. Ejemplo: párrafos cortos, subtítulos claros, listas con viñetas para las características.

6. Agrupa y espacia el contenido para reducir la carga cognitiva. Por qué: el espacio en blanco mejora la comprensión, y agrupar elementos relacionados permite absorber más sin eliminar nada. Ejemplo: agrupa las características en tres tarjetas en lugar de nueve líneas sueltas.

7. Usa patrones familiares a menos que tengas pruebas de que el tuyo es mejor. Por qué: los patrones reconocibles permiten actuar sin pensar. Romperlos obliga a aprender y causa errores. Ejemplo: coloca el inicio de sesión en la parte superior derecha, no en un gesto oculto. Si tu regla para un patrón necesita "a menos que" o "excepto", ese es el momento de reconsiderarlo.

8. Etiqueta los enlaces por lo que hay detrás de ellos. Por qué: las etiquetas claras dan "olor a información". Las etiquetas llamativas lo ocultan. Ejemplo: "Explorar marcas", no "Lo bueno".

9. Cumple con la accesibilidad básica. Por qué: es buena UX para todos, incluyendo personas bajo el sol brillante o con un teléfono lento. Ejemplo: contraste de texto de al menos 4.5:1, texto del cuerpo de al menos 16px, altura de línea alrededor de 1.5, etiquetas reales en los campos del formulario.

10. Diseña los estados vacíos y de espera a propósito. Por qué: una pantalla en blanco después de iniciar sesión parece rota. Un estado vacío o de carga claro le dice a la gente qué esperar y los mantiene sintiéndose en control. Ejemplo: "Cargando 2.140 correos..." con una cuadrícula esqueleto, no una página blanca.

[Fuentes: 33 Website Design Crimes; 3 Common UX Mistakes Killing Good Design; Designing Better UX with UI Patterns; The Elements of Successful UX Design; Responsive Web Design Best Practices; Idiot Buttons: The Placebo in UX Design]

---

6. Los crímenes de diseño a evitar

Una lista rápida de los errores que más a menudo hunden una página. Cada línea dice qué hacer en su lugar.

• Controles deslizantes y carruseles. Muy pocas personas hacen clic en diapositivas después de la primera, y ralentizan la página. Muestra una imagen fuerte en su lugar.
• Video o sonido de reproducción automática. Sobresalta a la gente y se van. Usa un botón de reproducción y deja que ellos elijan.
• Fotos de stock cursis. Parecen sospechosas en una página que pide datos. Usa fotos reales del producto.
• Varios CTA competidores en una página de aterrizaje. Elige uno.
• Botones "Enviar" por defecto. Renómbralos a la acción.
• Formularios más largos de lo que vale la oferta. Reduce al mínimo.
• Desorden. Cada bloque debe ganarse su lugar. Elimina hasta que duela.
• Muros de texto. Divide en encabezados, párrafos cortos y viñetas.
• Texto de bajo contraste o diminuto. Gris claro sobre blanco falla en legibilidad.
• CTA no relacionados con el contenido de la página. Una oferta global en la barra lateral que no coincide con la página convierte mal. Haz coincidir la oferta con la página.
• Hablar de ti mismo. Cambia "nosotros" por "tú" y el resultado del visitante.
• Ignorar el móvil hasta el final. Diseña primero para móvil.
• Enlaces con etiquetas vagas. "Haz clic aquí" no dice nada. Usa "Ver el archivo".
• Animaciones lentas o innecesarias. Molestan y retrasan. Mantenlas rápidas (bajo 300 ms) o elimínalas.
• Páginas sin un siguiente paso claro. Siempre termina con una acción.
• Suponer que la gente entenderá tu interfaz. Prueba con usuarios reales.

[Fuentes: 33 Website Design Crimes; Idiot Buttons: The Placebo in UX Design]

---

7. Cómo medir y probar cambios

1. Elige una métrica primaria antes de empezar. Por qué: sin una sola métrica, cada cambio puede parecer una mejora en algo. Definirla antes evita el sesgo de confirmación. Ejemplo: "Tasa de clics en el botón de registro" en lugar de "compromiso" o "qué tan buena se ve".

2. Prueba los cambios uno a la vez. Por qué: cambiar varios elementos a la vez significa que nunca sabes qué causó la diferencia. Ejemplo: prueba el titular esta semana y el color del botón la próxima, no ambos a la vez.

3. Ejecuta la prueba el tiempo suficiente. Por qué: las variaciones de fin de semana, los días festivos y el tráfico bajo distorsionan resultados cortos. Ejemplo: al menos una semana completa o hasta que la prueba alcance significancia estadística, lo que sea más largo.

4. No detengas una prueba cuando te gusta el resultado. Por qué: la tentación de llamar "ganador" a la variación A después de tres horas de datos es grande. Espera. Ejemplo: usa una calculadora de significancia en línea o un conjunto de reglas fijo (p. ej., 95% de confianza, al menos 100 conversiones por variación).

5. Mira la métrica de impacto secundario. Por qué: un cambio que aumenta los clics en el botón pero reduce la calidad general del registro (gente que se da de baja al día siguiente) es una pérdida. Ejemplo: rastrea la tasa de finalización de registro y los inicios de sesión de la semana siguiente, no solo los clics en el CTA.

6. Separa pruebas de hipótesis de informes. Por qué: cuando los informes semanales se convierten en excusas para pivotar, los números pierden significado. Escribe la hipótesis antes de comenzar. Ejemplo: nota: "Creo que un titular más corto aumentará los registros en un 10%." Después: "El titular más corto obtuvo un 4%, no significativo."

7. No te engañes a ti mismo con una muestra pequeña. Por qué: 5 conversiones sobre 100 visitantes parece 5%, pero 5 sobre 200 es 2.5%. La diferencia puede ser ruido. Ejemplo: espera al menos 100 eventos de conversión en total antes de declarar un ganador.

8. Los cambios cualitativos también cuentan. Por qué: a veces una encuesta de satisfacción o una sesión de prueba de usuario atrapa un problema que las métricas cuantitativas pasan por alto. Ejemplo: después de un rediseño, ejecuta una prueba de cinco segundos y pregunta "¿qué ofrece esta página?" Compara las respuestas.

[Fuentes: Lead Generation Techniques for High Conversions and Great UX; 33 Website Design Crimes; Idiot Buttons: The Placebo in UX Design]

---

Lista de verificación para revisión

Marca cada ítem como aprobado o necesita trabajo. Si algún ítem necesita trabajo, la página no está lista.

• El titular pasa la prueba de cinco segundos.
• El titular habla del resultado del visitante.
• Hay dos o tres razones concretas para actuar debajo del titular.
• La imagen del héroe es una captura de pantalla real del producto o una demostración.
• El héroe carga en menos de un segundo.
• Solo hay un CTA principal en la página.
• El botón principal dice lo que sucede después.
• El CTA principal contrasta con el fondo y otros elementos.
• Solo los botones parecen botones.
• El formulario pide solo los campos mínimos.
• Todos los campos están claramente etiquetados.
• El formulario está colocado cerca del valor que desbloquea.
• Hay un indicador claro de éxito en el formulario.
• Se explica el uso del correo electrónico en una línea.
• Los testimonios están atribuidos a personas reales.
• Los logotipos de marcas son reconocibles y están en escala de grises (o no compiten con el CTA).
• La página no usa patrones oscuros.
• Los costos y términos están claros antes del registro.
• No hay navegación principal en la página de aterrizaje (excepto logotipo y CTA).
• La página termina con un siguiente paso claro.
• El texto es escaneable (encabezados, listas, párrafos cortos).
• El contraste es de al menos 4.5:1 y el texto es legible.
• No hay controles deslizantes, videos de reproducción automática ni fotos de stock.
• Los estados vacío y de carga están diseñados.
• La métrica de éxito está definida antes de cualquier cambio.
• Las pruebas se ejecutan una variable a la vez y por el tiempo suficiente.

---

Este conjunto de reglas fue compilado de las siguientes fuentes (2014–2016): 33 Website Design Crimes (Inbound Marketing), Lead Generation Techniques for High Conversions and Great UX, The Elements of Successful UX Design, Designing Better UX with UI Patterns, Responsive Web Design Best Practices, Timeless UX Design Trends: Responsive and Adaptive, 3 Common UX Mistakes Killing Good Design, Idiot Buttons: The Placebo in UX Design, Designing a Checkout Flow That Converts.