Botones y llamados a la acción que reciben clics

Una web puede ser preciosa y no traer ningún cliente si nadie sabe qué hacer a continuación. Un llamado a la acción, que muchas veces se abrevia CTA, es el paso que le pides a un visitante: llamar, reservar, pedir una cotización, comprar, visitarte. Casi siempre toma la forma de un botón. En esta lección ves cómo elegir la acción que importa en cada página, cómo escribir el texto de un botón para que reciba clics, cómo diseñarlo y ubicarlo, y cómo calmar las pequeñas dudas que frenan a la gente en el último segundo.

Qué es un llamado a la acción

Un llamado a la acción es una invitación con un paso siguiente claro. Puede ser un botón como Reservar mesa, un enlace como Ver los precios, un número de teléfono, una dirección de correo o un formulario corto. Importa porque los visitantes casi nunca adivinan. Si el camino no es evidente, la mayoría se va sin recorrerlo, incluso cuando le gustó lo que vio.

Cada página de tu sitio debería llevar a algún lado. La página de inicio puede llevar a un servicio, el servicio a un pedido de cotización, y la página de contacto a una llamada. Piensa en tu web como un conjunto de caminos cortos que terminan todos en una forma de comunicarse contigo o de comprarte.

Elige una acción principal para cada página

Cuantas más opciones ofrece una página, menos clics recibe cada una. Decide qué es lo que más quieres que haga el visitante en cada página y haz que esa acción sea la protagonista. Puedes permitir una segunda opción más discreta, pero no más.

• Restaurante. Principal: Reservar mesa. Secundaria: Ver el menú.
• Plomero o electricista. Principal: Pedir cotización. Secundaria: Llamar ahora.
• Tienda. Principal: Comprar. Secundaria: Ver las novedades.
• Consultor. Principal: Agendar una llamada. Secundaria: Ver cómo trabajo.
• Excursiones u hospedaje. Principal: Ver fechas. Secundaria: Ver qué incluye.
• Arquitecto o fotógrafo. Principal: Iniciar una conversación. Secundaria: Ver los trabajos.

La pantalla de Halden que ves abajo sigue esta regla. Ofrece dos botones, pero no son iguales. El botón negro lleno, Write to the studio, es la acción principal. El botón con borde, See the houses again, es la segunda opción, más discreta, para quien quiere mirar una vez más antes de escribir.

Escribe un texto de botón que diga qué pasa

Un buen texto de botón contesta la pregunta: qué va a pasar cuando haga clic. Los mejores empiezan con un verbo y dicen el resultado en pocas palabras.

• Claros. Reservar mesa, Pedir cotización, Llamar ahora, Cómo llegar, Ver el menú, Agendar una cita.
• Vagos. Enviar, Haz clic aquí, Más información, Entrar, Ir. No dicen nada del resultado, y Enviar suena a trámite.

Usa las palabras que usan tus clientes, mantén el texto entre dos y cinco palabras y haz que coincida con la promesa de la página. Si el título habla de reservar, el botón no debería decir Contáctanos. Muchos negocios descubren que redactar en primera persona, como Reservar mi visita, se siente natural, y otros prefieren la segunda persona. Las dos pueden funcionar: elige un estilo y úsalo en todas partes.

Mira la sección final de Snowmelt Rafting Co. que aparece abajo. Después de una línea corta, The water is running. Come get in it, el botón dice Book a run. No hay nada que descifrar: el texto dice la acción y su objeto. Ese mismo botón está además en el encabezado, para que el visitante que ya quiere reservar no tenga que volver hacia arriba.

Escribe la línea que va antes del botón

Un botón funciona mejor cuando la frase que está encima da un motivo para hacer clic. Piénsala como una pequeña propuesta: el beneficio y después la acción. En lugar de un simple Contáctanos, un plomero podría escribir: ¿Hay agua en el piso? Cuéntanos qué pasa y te decimos en cuánto tiempo podemos ir, seguido de un botón que diga Pedir una visita. La frase nombra el problema y el botón nombra la solución.

Los enlaces dentro de los párrafos también pueden ser llamados a la acción. Haz que su texto sea descriptivo, como Ver los precios de reparación, y nunca Haz clic aquí. Un enlace debería tener sentido aun leído solo, lo que además ayuda a quienes usan lectores de pantalla.

Haz que los botones parezcan botones

La gente debería reconocer un botón en menos de un segundo. Algunas decisiones de diseño lo logran.

• Relleno y contraste. Un color sólido que resalte del fondo funciona mejor. El texto de adentro tiene que leerse con facilidad. Las pautas de accesibilidad llamadas WCAG piden una relación de contraste de al menos 4.5 a 1 para el texto común.
• Un color para las acciones. Reserva tu color de acento para los botones y los enlaces. Cuando el color significa que se puede tocar, los visitantes lo aprenden en segundos. El color exacto importa menos que cuánto se diferencia del resto de la página.
• Tamaño y espacio. Haz el botón principal lo bastante grande para tocarlo en un celular y deja espacio vacío a su alrededor.
• Principal y secundario. Dale a la acción principal un aspecto lleno y a la segunda opción un borde o un enlace simple.
• La misma forma en todas partes. Las esquinas, la altura y la letra deben coincidir en todas las páginas.
• Botones de verdad. Construye los botones como botones o enlaces reales, no como imágenes de botones, para que funcionen con el teclado y con los lectores de pantalla.

Pon los botones donde se toman las decisiones

Un botón debe aparecer en el momento en que el visitante está listo, y ese momento es distinto para cada persona. Por eso ofreces la acción varias veces, con calma.

• En la primera pantalla. Para quien ya sabe lo que quiere.
• En el encabezado. Un botón que se queda a la vista, como en el ejemplo de Snowmelt de arriba.
• Después de tus pruebas. Justo después de reseñas, resultados o una lista de lo que incluye, cuando la confianza es más alta.
• Después de cada sección importante. Una línea corta y luego la acción.
• Al final de la página. Una invitación de cierre para quienes leyeron todo.
• En el celular. Un botón al alcance del pulgar, como una barra fija abajo con Llamar o Reservar, siempre que no tape el contenido.

Repite la misma acción principal, no acciones distintas. Diez botones diferentes en una página son puro ruido. La sección final de Heliora que ves abajo muestra un cierre simple: una etiqueta pequeña, una pregunta al lector, un párrafo corto y un botón, Talk to Our Team, sobre una imagen tranquila.

Calma las dudas junto al botón

Justo antes del clic aparecen pequeñas dudas. ¿Me van a presionar para comprar? ¿Me van a llenar de correo basura? ¿Es este el lugar correcto? Una línea de texto corta junto al botón puede contestarlas. En la sección final de Aster que ves abajo, el botón dice Book my visit y, al pie de la sección, una línea dice A drawing, a number and no pressure. La línea le cuenta al visitante qué recibe y que nadie lo va a presionar.

La buena tranquilidad es concreta y verdadera. Estos son algunos ejemplos.

• Sin compromiso, primero recibirás una cotización
• Nunca compartiremos tu correo
• Cancelación gratis hasta 24 horas antes
• Respondemos antes de que termine el siguiente día hábil

Promete solo lo que de verdad vas a cumplir. Una tranquilidad falsa es peor que ninguna.

Llamadas, indicaciones y mensajes

A muchos clientes les gusta más hablar, pedir indicaciones o mandar un mensaje rápido que llenar un formulario. Ofrece estas opciones como acciones claras.

• Llamar. Haz que el número de teléfono sea un enlace, para que un toque en el celular inicie la llamada.
• Indicaciones. Haz que la dirección sea un enlace que abra un mapa.
• Correo. Un enlace que abre un mensaje hacia la dirección de tu negocio.
• Mensajes. Si tus clientes prefieren escribir por una aplicación de mensajería, un botón para eso puede traer a gente que nunca llamaría.

Muestra tus horarios cerca del botón de llamar, para que nadie llame en un momento en que no puedes atender.

Prueba y mejora, un cambio por vez

No necesitas herramientas especiales para empezar. Mira cuántas llamadas, mensajes de formulario o reservas trae tu sitio cada mes. Después cambia una sola cosa, como el texto del botón principal o su posición, y espera unas semanas. Si los números mejoran, quédate con el cambio. Si no, vuelve atrás. Cambia una sola cosa por vez, porque de lo contrario no sabrás qué funcionó, y ten paciencia, porque unos pocos días de datos dicen muy poco. Una serie posterior de Start From Zero explica cómo leer esos números.

Errores que cuestan clics

• Demasiados llamados a la acción. Cinco botones del mismo peso, y nadie hace clic.
• Textos vagos. Enviar y Más información no le dicen nada al visitante.
• Botones que se esconden. Un botón gris pálido en una página blanca.
• Solo un enlace en el pie. Un Contáctanos escondido abajo del todo.
• Pedir demasiado muy pronto. Comprar ahora en la primera visita a un servicio que necesita confianza.
• Una promesa que no coincide. La página promete una cotización gratis y el botón dice Suscribirse.
• Ningún paso después del clic. Un formulario que termina en una página en blanco deja al visitante con dudas.
• Ventanas emergentes que tapan el botón. Un aviso que bloquea la acción principal en un celular.

Una auditoría de botones de diez minutos

Abre tu sitio y anota todos los botones y llamados a la acción que encuentres en la página de inicio. Después repasa esta lista con cada uno.

1. ¿El texto dice qué pasa cuando hago clic?
2. ¿Es claramente la acción principal, o compite con otro botón?
3. ¿Lo veo en un segundo, desde un brazo de distancia?
4. ¿El texto se lee bien sobre el color del botón?
5. ¿Es lo bastante grande para tocarlo con el pulgar, con espacio alrededor?
6. ¿La página que lo rodea da un motivo para hacer clic?
7. ¿Hay una línea corta que baje la duda, y es verdadera?
8. ¿Lleva al lugar correcto, y ese lugar facilita el paso siguiente?

Arregla primero los peores problemas, que suelen ser los textos vagos y los botones que se confunden con la página. Después pídele a un amigo que encuentre sin ayuda cómo reservar o llamar. Donde dude, tus botones necesitan trabajo.

Cómo resuelve Good Sites Only los llamados a la acción

Los formularios de contacto están incluidos en todos los sitios que hacemos, junto con el hosting y la versión para celular. Tus textos se escriben para ti los días 1 y 2, y revisas la maqueta los días 3 y 4, con una ronda de cambios. Ese es el momento de pedir otro texto o otro lugar para un botón. El sitio sale en línea el día 7. Cuando estés listo, empieza tu sitio.

Preguntas frecuentes