Landing / Marketing patterns

El heroe de una landing debe responder de inmediato tres preguntas: que es el producto, para quien es y que beneficio entrega. Los visitantes deciden quedarse o irse en los primeros segundos; si el heroe no responde, abandonan sin leer más abajo. NN/g lo formula sin ambiguedad: para ganar varios minutos de atención del usuario hay que comunicar la propuesta de valor dentro de los primeros 10 segundos. El analisis de Liu, White y Dumais (Microsoft Research) sobre más de 205,000 páginas web con más de 2,000 millones de dwell times muestra que la curva de abandono es más pronunciada en ese intervalo inicial que en cualquier otro momento de la visita.

Cada landing debe tener un único CTA primario dominante. Cuando varios CTAs compiten con igual peso visual se activa la sobrecarga de elección: el visitante evalua opciones, el esfuerzo cognitivo se dispara y la respuesta más fácil es no hacer nada. El CTA primario puede repetirse en distintos puntos de la página, pero siempre con el mismo destino y la misma acción; los enlaces secundarios (precios, demo, contacto) deben quedar visualmente subordinados. La idea de que "un solo CTA convierte 266% más" circula como estadistica zombie sin fuente primaria localizable, así que se trata como criterio de diseño, no como dato duro: lo sólido es el principio de jerarquía única, no esa cifra.

Cuando una landing no tiene jerarquía visual clara, los usuarios escanean en patrón F: leen el inicio de las primeras líneas y abandonan el lado derecho y el contenido inferior. NN/g (eyetracking) lo describe como malo para usuarios y negocio: se saltan contenido importante solo porque cae a la derecha. El antidoto es el patrón layer-cake, el modo de escaneo más eficiente: subencabezados frecuentes con poco texto intermedio, listas con bullets y énfasis tipografico que crean puntos de anclaje. Bloques de párrafos continuos de igual peso fuerzan el patrón F; subencabezados con una o dos líneas de apoyo cada uno inducen el layer-cake y suben la comprensión.

Los visitantes llegan a una landing con escepticismo activo: NN/g documenta que esperan ser decepcionados y juzgan la credibilidad antes de actuar. La prueba social (estrellas, número de reseñas, logos de clientes, conteo de usuarios) reduce la fricción justo cuando se decide convertir, así que su lugar es inmediatamente adyacente al CTA primario, no en el footer. Una credencial solitaria de "500k usuarios" perdida al fondo no cumple la misma función que la misma cifra colocada bajo el botón. El orden importa: CTA con una fila de prueba social pegada debajo gana sobre CTA arriba seguido de ocho secciones de features y testimonios recien al final.

No existe una longitud universalmente óptima para una landing. La regla funcional es: a mayor precio percibido, mayor riesgo o marca más desconocida, más contenido necesita el visitante para justificar la decisión. Un lead magnet gratuito convierte con un heroe y un CTA; un SaaS B2B enterprise necesita features, precios, FAQ, testimonios y garantía para responder objeciones. El problema nunca es la longitud sino la relevancia y claridad de cada sección. Unbounce reporta que páginas escritas a nivel de lectura de 5 a 7 grado convierten alrededor de 11.1%, más que las de nivel 8 a 9, pero ese número es dato de Unbounce sobre su propia plataforma, no estudio independiente, así que se toma como criterio: lo verificable es que claridad y nivel de lectura accesible importan, no la cifra exacta.

La performance no es solo una metrica técnica: tiene impacto medible en conversión e ingresos. Mejorar LCP (Largest Contentful Paint), INP (Interaction to Next Paint) y CLS (Cumulative Layout Shift) correlaciona con incrementos de conversión en multiples industrias, según los case studies publicados por web.dev. Vodafone Italia mejoro su LCP 31% y subio 8% sus ventas; Lazada triplico su LCP y gano 16.9% de conversión móvil; Redbus llevo su CLS de 1.65 a 0 y reporto 80 a 100% más de conversión móvil. En el A/B test controlado de Rakuten 24, las páginas con buen LCP rindieron 53.37% más revenue por visitante y 33.13% más conversión. Una landing que tarda más de 3 segundos pierde una porción sustancial de visitantes antes de mostrar el heroe.

El visitante que llega desde un anuncio trae una expectativa formada por el copy y el visual del ad. Si la landing no refleja de inmediato el mismo lenguaje, oferta e imagen, se rompe el "scent" (rastro de información popularizado por Bryan Eisenberg): el usuario duda que este en el lugar correcto y abandona. La coherencia debe cubrir headline, subhead, imagen del heroe y CTA, no solo el título. Un anuncio de "50% off en plan Pro" debe aterrizar en una landing que repita esa oferta y ese plan con el mismo color de acento, no en una homepage genérica que obligue al visitante a buscar de nuevo aquello que ya le prometieron.

En móvil, un CTA que no alcanza un tamaño de toque comodo provoca errores y frustración que reducen la conversión, y el CTA primario es el elemento de mayor consecuencia de la página. WCAG 2.2 fija dos umbrales: SC 2.5.8 (AA) exige un mínimo absoluto de 24x24 CSS px, y SC 2.5.5 (AAA) recomienda 44x44 CSS px como buena practica. NN/g, sobre investigación de tamaño de objetivo tactil, recomienda al menos 1cm x 1cm para selección rápida y precisa, con tamaños mayores para acciones primarias. Además del área, hay que reservar al menos 8px de separación de otros elementos interactivos para evitar toques accidentales. Un botón con padding mínimo sobre texto de 12px deja un blanco de toque de apenas ~24px, difícil de acertar con el pulgar.