El botón de llamada a la acción: redactarlo y colocarlo

Un visitante convencido todavía tiene que actuar: llamar, reservar, pedir un presupuesto, pasar por la tienda. El botón de llamada a la acción es donde ocurre. Mal nombrado, demasiado pequeño o imposible de encontrar, deja ir a clientes que ya se habían decidido.

Así se elige, se redacta, se dimensiona y se coloca.

Un objetivo principal por página

Antes de escribir el botón, decide la acción que más cuenta para tu negocio. Cambia de un oficio a otro:

• Un restaurante quiere reservas: «Reservar una mesa».
• Un fontanero quiere llamadas: «Llamar ahora».
• Una panadería quiere visitas: «Ver el camino».
• Una consulta quiere citas: «Pedir cita».
• Un fotógrafo quiere peticiones: «Preguntar mi disponibilidad».

Esa acción se convierte en el botón principal, el más visible de la página. Las demás, como seguir tu cuenta de Instagram o descargar un folleto, toman una forma más discreta. El Nielsen Norman Group recomienda una jerarquía visual clara para las tareas prioritarias de una página de inicio (2024). Tres botones del mismo peso se hacen la competencia, y el visitante duda.

Un texto que nombra la acción

El texto del botón dice lo que va a pasar, con un verbo y su complemento: «Reservar una mesa», «Pedir un presupuesto», «Llamar al taller». Evita «Saber más», «Haz clic aquí» o un «Enviar» a secas.

Un texto vago debilita lo que los expertos en usabilidad llaman el olor de la información: el visitante ya no adivina lo que encontrará después del clic. También molesta a las personas ciegas, cuyo lector de pantalla anuncia a menudo los enlaces fuera de contexto (Nielsen Norman Group, 2015).

El Nielsen Norman Group resume en cuatro palabras las cualidades de un buen texto (2019):

• Específico: dice exactamente lo que hay detrás.
• Sincero: la página que se abre cumple la promesa. Si «Reservar» lleva a un simple formulario de petición, escribe «Pedir una reserva».
• Sustancial: tiene sentido solo, sin el párrafo de alrededor.
• Sucinto: las palabras importantes primero.

Junto al botón, una frase corta puede despejar la última duda: «Respuesta en 24 horas», «Sin compromiso», «Cancelación gratuita hasta la víspera». Siempre que sea verdad.

Teléfono y correo, en los que se puede hacer clic

Un número de teléfono escrito en texto simple obliga a copiarlo. Enlazado con el prefijo «tel:», lanza la llamada con un toque en un móvil (MDN). En el enlace, escribe el número en formato internacional, el prefijo del país seguido del número sin su cero inicial (web.dev). El texto mostrado sigue legible en el formato local.

El correo sigue el mismo principio con el prefijo «mailto:», que abre la aplicación de correo del visitante (MDN). Muestra también la dirección en texto plano: en un ordenador, no todo el mundo tiene una aplicación de correo instalada, y algunos prefieren copiarla.

Dos reflejos:

• Muestra el número en el botón: «Llamar a la consulta» seguido del número. El visitante sabe lo que marca.
• Prueba el enlace desde tu propio teléfono, después de cada cambio de número.

Una zona lo bastante grande para un pulgar

Un botón demasiado pequeño hace fallar, sobre todo caminando. Las pautas de accesibilidad web (WCAG 2.2) fijan referencias, medidas en píxeles CSS, la unidad de medida de las páginas web:

El criterio 2.5.8 exime a los enlaces colocados dentro de una frase; tu botón principal está sujeto a él. Para un control importante, el W3C invita a apuntar al umbral más exigente, y el Nielsen Norman Group aconseja una zona más grande que la media para la acción principal. Deja también espacio entre dos botones vecinos, como «Llamar» e «Itinerario»: si no, se pulsa uno queriendo el otro.

Dónde colocarlo

Arriba, primero. En un estudio de seguimiento ocular con 120 participantes, el 57 % del tiempo pasado mirando una página se pasaba en la primera pantalla, y el 74 % en las dos primeras (Nielsen Norman Group, 2018). El botón principal va, pues, justo debajo del título, visible sin desplazarse, en móvil como en ordenador.

Luego ahí donde se toma la decisión:

• Después de los precios, cuando el visitante acaba de comprobar que puede permitírselo.
• Después de las preguntas frecuentes, cuando sus últimas dudas se han despejado.
• Abajo de la página, para quienes lo leen todo.

Repetir el mismo botón, con el mismo texto, no es redundante: cada visitante se detiene en un lugar distinto. En el móvil, no lo escondas nunca en un menú.

Después del clic

El botón solo es la mitad del camino. La página de llegada debe cumplir la promesa: la herramienta de reservas se abre en el establecimiento correcto, el formulario solo pide lo estrictamente necesario, y un mensaje confirma que la petición se ha enviado. Una vez al mes, haz tú mismo el recorrido, de la primera pantalla a la confirmación.

En los sitios compuestos por 29webs, el botón de llamada a la acción lleva adonde quieras: una dirección https, por ejemplo tu herramienta de reservas, un correo, un número de teléfono o un ancla de la página. El bloque de contacto reúne la dirección, los horarios y enlaces que llaman, escriben un correo o abren WhatsApp con un toque.

En resumen: una acción principal por página, un verbo que la nombra, un número que se llama con un toque, un botón lo bastante grande para un pulgar, colocado donde el visitante decide: arriba, y luego después de cada argumento.