Diseño Web Orientado a Conversión: Qué Mueve de Verdad el Número

El diseño web orientado a conversión tiene un problema de imagen. Dices la frase en voz alta y la gente se imagina botones naranjas, cuentas atrás y un popup preguntando si estás seguro de querer marcharte. Eso no es diseño de conversión. Es diseño de coacción, y deja de funcionar en el segundo en que el visitante se da cuenta de lo que le estás haciendo.

Lo de verdad es mucho más silencioso. Va sobre todo de quitar motivos para dudar, que resulta ser a la vez un problema de diseño, uno de texto y uno de ingeniería con el mismo abrigo puesto. Por eso también se cae tan a menudo entre equipos: nadie es dueño de los tres.

El tema del color del botón

Quitemos esto de en medio primero. Sí, el contraste de la acción principal importa. No, no es ahí donde se esconde tu tasa de conversión. No hemos encontrado ni una sola vez una web donde el color del CTA fuera la restricción que ataba el resultado, y lo hemos buscado de verdad.

Lo que ata está más arriba. El visitante no entiende qué haces. O lo entiende y no cree que puedas hacerlo. O te cree y no encuentra el precio. O ha encontrado todo y no se ve capaz de rellenar once campos para continuar. Arregla esos cuatro en ese orden y el botón puede ser beige.

Nadie abandona un formulario porque el botón fuera del rojo equivocado. Abandona porque le pediste el tamaño de su empresa antes de decirle cuánto cuesta.

El test de los cinco segundos, bien hecho

Enséñale a alguien la parte de arriba de tu página durante cinco segundos, quítasela y hazle tres preguntas. Qué hace esta empresa. Para quién es. Qué quiere que haga ahora. Si no puede responder a las tres, nada más de la página importa todavía, y ningún pulido posterior lo va a rescatar.

Es un test brutal y la mayoría de los sitios lo suspende, casi siempre por lo mismo: el titular describe una aspiración en lugar de un servicio. Desbloqueamos tu potencial digital no le dice absolutamente nada a nadie. Webs en Next.js para equipos B2B en Madrid le dice todo lo que necesita. Es bastante menos divertido de escribir, que es más o menos la razón por la que funciona.

Anatomía de una página que convierte

1. 01Claridad. Qué es y para quién, en una línea. No un eslogan. Una frase que un desconocido podría repetirte con exactitud.
2. 02Prueba, de inmediato. Logotipos, un número, una cita real de una persona real con nombre. Antes de pedir nada, da un motivo para creerte.
3. 03Concreción. Capturas antes que ilustraciones. Entregables de verdad antes que soluciones a medida. Lo específico vende más que lo general absolutamente siempre.
4. 04Objeciones, resueltas en la página. Precio, plazos, para quién no es. Cada objeción sin responder se convierte en un motivo para cerrar la pestaña y pensárselo, y de pensárselo no vuelve casi nadie.
5. 05Una acción. No cuatro. Una página que lleva un reserva una llamada, un descarga la guía, una caja de newsletter y una burbuja de chat es una página sin ninguna acción encima.
6. 06El cierre, repetido. La misma acción, replanteada abajo para quien se ha leído la cosa entera.

Las cuatro fugas

En los últimos años de trabajo con clientes, las mismas cuatro fugas explican la mayoría de las conversiones perdidas. Más o menos por orden de lo que te cuestan.

• Velocidad. Un hero que tarda cuatro segundos con 4G ya ha perdido una parte de tu tráfico móvil antes de que el diseño llegue a verse. Esta fuga es invisible en la analítica, porque quien se marchó nunca llegó a registrarse como una sesión que alguien contara.
• Vaguedad. Si el visitante no consigue averiguar qué vendes, todo el esfuerzo que venga después de eso está desperdiciado.
• Precio escondido. Contacta para un presupuesto filtra a quien habría pagado junto con quien no. Un rango, un desde, incluso un honesto los proyectos suelen ir de 15.000 a 40.000 €, todos convierten mejor que el silencio.
• Peso del formulario. Cada campo te cuesta algo. Pide lo que necesitas para tener la primera conversación y párate ahí. El tamaño de la empresa puede esperar a que estéis hablando.

Cómo se vio esto en proyectos reales

En Integrity 1st Auto Care, un taller mecánico, todo el rediseño se construyó sobre lo único que ese sector esconde de forma fiable: el precio. Presupuestos por adelantado, costes transparentes, reserva en un solo toque. Las solicitudes de presupuesto subieron un 44%, y el botón, que conste, se quedó en el mismo rojo de siempre.

En la Complete Strength Training Guide, una venta de producto en una sola página, la palanca fue la secuencia. Puntos de dolor, luego prueba, luego las preguntas frecuentes, luego una acción decisiva. Sin navegación y sin ningún sitio al que irse a pasear. Tasa de conversión un 44% arriba.

En CO4 Workspaces todo se redujo al encuadre. El coworking se vende normalmente por precio y por escritorios. Nosotros lo vendimos por concentración, con los testimonios de los miembros persuadiendo en nuestro lugar. Solicitudes de visita un 38% arriba.

Tres proyectos, tres palancas completamente distintas, y ninguna de ellas un color.

El texto es la herramienta de diseño con más apalancamiento

A los diseñadores no nos hace especial ilusión oír esto, y somos diseñadores. Pero en una página cuyo trabajo es convertir, las palabras hacen casi todo el esfuerzo y la maquetación sobre todo se aparta de su camino. Puedes dedicar tres semanas a la animación del hero o una tarde al titular. Gana la tarde, y no por poco.

El patrón que funciona es aburridamente constante. Di la cosa concreta. No transforma tu flujo de trabajo, sino reduce la aprobación de facturas de seis días a uno. No confían en nosotros los líderes del sector, sino los cuatro logotipos y el número. La concreción se lee como competencia, porque solo quien ha hecho el trabajo de verdad conoce los detalles lo bastante bien como para citarlos.

• Escribe la etiqueta del botón como el resultado, no como el mecanismo. Quiero mi presupuesto gana a Enviar. Es un cambio mínimo y es gratis.
• Pon la objeción con tus propias palabras antes de que el visitante llegue a ella. Sí, esto cuesta más que una plantilla, y te explico por qué esa es justo la idea. Nombrarla la desactiva.
• Borra el primer párrafo. Casi todas las páginas tienen una frase de calentamiento antes de decir nada real. Bórrala y la página se afila, siempre, sin excepción.
• Léelo en voz alta. Si te daría vergüenza decírselo a un cliente a la cara, no pinta nada en la página.

El móvil es la prueba de verdad

Entre la mitad y tres cuartas partes de la gente que decide si contactarte lo está haciendo desde el móvil. Muchas veces con una sola mano. Muchas veces mientras hace otra cosa completamente distinta. Y casi todas las webs se siguen diseñando en un monitor de 27 pulgadas y se revisan en móvil justo al final, que es exactamente al revés.

Lo que se rompe en móvil normalmente no es la maquetación. Las retículas responsive resolvieron eso hace una década. Es la secuencia. Una página de escritorio se puede permitir un hero, luego tres columnas de detalle de apoyo y luego la prueba. Apila eso en vertical y tu visitante recorre seis pantallas de detalle antes de llegar a un solo motivo para creerte. La prueba tiene que subir en la página.

El otro asesino en móvil son los campos de formulario. Cada campo cuesta más o menos el doble en un teléfono que en un escritorio, porque escribir es peor y el teclado te tapa media pantalla mientras lo haces. Si tu formulario tiene un desplegable de cómo nos has conocido, te está costando solicitudes para responder una pregunta que podrías hacer directamente en la llamada.

Diseña primero la versión móvil y la de escritorio se vuelve fácil. Hazlo al revés y el móvil se convierte en un apaño por el que pides disculpas.

Probar sin engañarte

Dos cosas que merece la pena decir aquí, porque es donde las buenas intenciones se mueren de forma fiable.

Primera: la mayoría de los sitios sencillamente no tiene tráfico para un test A/B honesto. Si recibes 800 visitas al mes, un test necesita varios meses para alcanzar significancia, y para entonces habrás cambiado otras cuatro cosas y el resultado no significa nada. Por debajo de unas 1.000 conversiones al mes, usa criterio, feedback cualitativo y grabaciones de sesión, y sé honesto contigo mismo respecto a que lo que estás usando es criterio.

Segunda: mira qué pasa después de la conversión. Un formulario que duplica sus envíos quitando las preguntas de cualificación no ha ayudado a nadie si la mitad de los contactos nuevos no encajan y tu equipo comercial se pasa ahora la semana diciendo que no. Nosotros medimos solicitudes cualificadas y no envíos brutos, porque el número bruto es el más fácil de manipular y el menos útil de tener.

Cualquier métrica que puedas mejorar bajando tus estándares no es una métrica. Es un espejo.

Por dónde empezar el lunes

Haz el test de los cinco segundos con tu propia home y con alguien de fuera de la empresa. Después mide tu tiempo de carga en un móvil real y no en una simulación de escritorio. Después cuenta los campos de tu formulario principal y borra los que no necesitas para una primera conversación. Con eso tienes casi todo.

Y luego haz lo mismo con la página que no diseña nadie: la que ve la gente después de convertir. Una pantalla de gracias que pone te contactaremos desperdicia el momento de máxima atención que vas a tener nunca con esa persona. Dile exactamente qué pasa ahora, quién le va a escribir y cuándo. Dale algo que leer mientras espera. No cuesta nada y reduce de forma medible cuántos de ellos se van a pedir presupuesto a dos competidores entretanto.

La misma lógica vale para el correo automático que llega detrás. Casi todos se escribieron una vez, por quien montó el formulario, y no se han vuelto a mirar desde entonces. Ve y lee el tuyo. Forma parte del diseño, lo trates así o no.

Es una mañana de trabajo y te va a decir más que un mes de mapas de calor. Si resulta que la respuesta es estructural, así diseñamos orientados a conversión. Y si no tienes claro si eso significa reconstruir del todo o algo más pequeño, escribimos sobre cómo saberlo.