Una página de aterrizaje para un código QR casi siempre se abre en un teléfono, en manos de alguien que está de pie, con prisa y, a menudo, con datos móviles. Diseña para ese momento: una sola página, un solo objetivo, carga rápida, botones grandes y una primera pantalla que cumpla exactamente lo que prometía el texto junto al código. Si lo haces bien, el escaneo se convierte en una consulta de carta, un registro, un pago o una descarga; si lo haces mal, la gente cierra la pestaña en segundos.
Empieza por el momento del escaneo
Antes de escribir una sola línea de diseño, imagina a la persona que escanea. Suele estar fuera de casa: en una cafetería, en una parada de autobús, en un pasillo de una tienda, en un stand de un congreso. Puede tener las manos ocupadas, puede haber poca luz y su teléfono puede estar conectado a la red móvil en lugar de a una red Wi-Fi. No está sentado ante un escritorio con tiempo para navegar.
Esto cambia todas las decisiones de diseño. Una página que se ve bien en un portátil con conexión rápida puede parecer rota en un teléfono que carga sobre una red lenta. Un diseño con diez enlaces y una ventana emergente de boletín funciona para quien visita desde el escritorio con un ratón; frustra a alguien que escaneó un código en un cartel y quiere una sola cosa, y la quiere ya.
De ahí se deducen dos consecuencias prácticas. Primera: trata el teléfono como el dispositivo por defecto, no como una versión reducida de la experiencia de escritorio. Segunda: trata la atención como el recurso más escaso de la página. Cada segundo de carga y cada elemento adicional compiten con la paciencia del visitante.
Cumple la promesa impresa junto al código
Las palabras impresas junto a un código QR crean una expectativa: "Escanea para ver la carta", "Escanea para obtener tu descuento", "Escanea para instalar la app". La primera pantalla que ve el visitante debe confirmar esa promesa de inmediato, en la primera pantalla, sin hacer scroll.
Si el código dice "carta" y la página abre en la portada de la marca, con una imagen grande y un banner de "Bienvenidos a nuestro restaurante", el visitante tiene que ir buscando la carta. Muchos no se molestarán. Lo mismo vale para cualquier campaña: la página de aterrizaje debe continuar la frase que empezó el cartel.
En concreto:
- Coloca el elemento prometido —carta, formulario, cupón, vídeo, instrucciones de Wi-Fi— en lo más alto de la página.
- Repite la redacción de la campaña como titular de la página. Si la pegatina dice "Escanea para ver las ofertas de hoy", el titular puede ser "Ofertas de hoy".
- Evita pantallas intermedias, páginas de bienvenida, muros de descarga de apps o páginas de "elige tu país" antes del contenido. Cada una es una oportunidad para que el visitante se rinda.
Esto también importa para la confianza. Una discrepancia entre la promesa impresa y la página genera desconfianza, y la gente es razonablemente cautelosa con adónde llevan los códigos QR.
Haz que la página cargue rápido
La velocidad es el mayor factor técnico. Alguien que hace cola no esperará a una página pesada. Como regla orientativa, no como garantía: busca que el contenido principal sea visible en un par de segundos con una conexión móvil típica, y considera que todo lo que supere unos cinco segundos arriesga perder al visitante.
Cómo conseguirlo:
- Comprime y dimensiona correctamente las imágenes. Una foto recién salida de la cámara puede pesar varios megabytes; redimensionada y comprimida, esa misma imagen puede ocupar una pequeña fracción. Usa formatos de imagen modernos cuando tu herramienta lo permita.
- Carga solo lo que necesita la primera pantalla. Scripts diferidos, etiquetas de analítica, fuentes incrustadas y widgets de terceros añaden peso. Audítalos y elimina lo que la página no necesita de verdad.
- Evita el vídeo con reproducción automática y las imágenes de fondo grandes. Consumen datos móviles, que algunos visitantes pagan por gigabyte.
- Mantén la página lo bastante simple para renderizarse sin esperar a JavaScript. El HTML y el CSS sencillos cargan y se muestran rápido; los frameworks pesados de cliente suelen mostrar una pantalla en blanco hasta que terminan los scripts.
- Usa la caché del navegador y, cuando esté disponible, una red de distribución de contenidos, para que las visitas repetidas y las de visitantes lejanos carguen más rápido.
Una disciplina útil: prueba la página con las herramientas de desarrollo del navegador limitadas a una configuración tipo "3G lento". Si el contenido aparece rápido ahí, parecerá instantáneo en la mayoría de conexiones reales.
Una página, un objetivo
Un código QR es una invitación de un solo propósito. La página de aterrizaje debe tener una única acción principal, y todo lo que haya en ella debe apoyarla.
Decide cuál es el objetivo antes de construir: ver la carta, rellenar un formulario, reclamar un cupón, seguir pasos de configuración, dejar una opinión, descargar un archivo. Luego diseña a partir de ese objetivo:
- Enuncia el objetivo en el titular.
- Haz que el botón principal sea el elemento más visible de la primera pantalla.
- Elimina o degrada todo lo demás. Un pie de página con seis enlaces, un muro de cookies, una fila de "mira nuestros otros productos" y un widget de chat roban atención a la acción.
Si la página realmente necesita una acción secundaria —por ejemplo, "descargar la app" como alternativa a "usar la versión web"— mantenla visualmente más discreta que la principal. Dos botones igual de llamativos producen duda, y la duda produce abandonos.
Diseña para los pulgares: objetivos táctiles y disposición
Los teléfonos se manejan con el pulgar, a menudo con una sola mano. Eso condiciona la disposición:
- Haz los objetivos táctiles grandes. Una orientación habitual es al menos unos 44 por 44 puntos (unos 9 mm en pantalla) para botones y enlaces, con espacio entre ellos para que el pulgar no pulse dos cosas a la vez.
- Coloca el botón principal donde el pulgar llegue con comodidad: la parte inferior y central de la pantalla funciona mejor que un enlace minúsculo arriba del todo.
- Usa una disposición de una sola columna. Las cuadrículas de varias columnas pensadas para escritorio quedan apretadas y difíciles de tocar con precisión en una pantalla estrecha.
- Asegúrate de que el texto sea legible sin hacer zoom. Un texto de cuerpo de unos 16 píxeles o más es una base razonable; un texto más pequeño en un teléfono a plena luz del día cuesta de leer.
- Deja aire. Las páginas saturadas parecen de baja calidad y se recorren visualmente con más dificultad.
- Comprueba que la página funcione tanto en vertical como, si aplica, en horizontal, y que respete la configuración de tamaño de fuente del dispositivo del visitante.
Formularios cortos, solo campos necesarios
Si el objetivo es un formulario —registro, opinión, participación en un sorteo, solicitud de contacto— hazlo tan corto como lo permita el objetivo. Cada campo adicional cuesta envíos completados.
- Pide solo lo que vayas a usar de verdad. Si nunca vas a llamar al visitante, no pidas el número de teléfono.
- Usa los tipos de teclado adecuados: teclado numérico para campos de cantidad, teclado de correo para el email. Es un pequeño cambio de marcado que reduce notablemente los errores de tecleo.
- Muestra las etiquetas de los campos encima de estos, no como texto de relleno que desaparece al empezar a escribir.
- Valida mientras el visitante escribe o al enviar, con mensajes de error claros y específicos ("Introduce una dirección de correo válida", no "Error").
- Si el formulario tiene que ser largo, agrúpalo en unos pocos pasos claros y muestra el progreso. Pero antes pregúntate si puede ser más corto.
- Tras el envío, muestra una confirmación clara en la propia página. El silencio tras pulsar el botón de enviar es el fallo evitable más común.
Idioma, accesibilidad y claridad
Elige el idioma de la página igual que elegiste la ubicación del código. Si el código QR está en un cartel de un país o un local concreto, la página debe abrirse en el idioma de ese público. La traducción automática del navegador existe, pero no es instantánea, no siempre es precisa y añade fricción. Si atiendes a un público mixto, ofrece un selector de idioma visible arriba en lugar de confiar en la detección automática.
La accesibilidad ayuda a todo el mundo, no solo a quienes usan tecnologías de asistencia:
- Usa texto real, no imágenes con texto, para que los lectores de pantalla y el zoom del navegador funcionen.
- Da a cada imagen un texto alternativo con significado.
- Garantiza un contraste suficiente entre texto y fondo, sobre todo a la intemperie, donde las pantallas compiten con la luz del sol.
- Mantén la página navegable con teclado y compatible con lectores de pantalla: encabezados correctos, campos de formulario etiquetados, texto de enlaces descriptivo.
- No transmitas significado solo con el color.
El lenguaje llano también es accesibilidad. Frases cortas, redacción concreta e instrucciones claras sirven a un visitante que lee deprisa en una pantalla pequeña.
Privacidad, recogida de datos y confianza
Si la página recoge algo —una dirección de correo, un nombre, una subida de fotos, la ubicación para un localizador de tiendas— dilo con claridad. Un aviso breve y legible junto al formulario ("Usamos tu correo solo para enviarte el recibo; consulta nuestra política de privacidad") genera confianza y, en muchas jurisdicciones, lo exigen las normas de protección de datos. Enlaza a la política completa, pero pon el resumen en lenguaje llano justo donde se recogen los datos, no enterrado en el pie de página.
Dos puntos de confianza más, propios de los códigos QR:
- Usa HTTPS. Los navegadores marcan las páginas no seguras, y ese aviso es especialmente dañino cuando el visitante llegó escaneando un código físico.
- Mantén estable la URL de destino. Si tienes que cambiar adónde apunta un código impreso, usa una redirección que controles en lugar de reimprimir el material, y mantén la redirección rápida.
Sé además comedido con los scripts de seguimiento. Ralentizan la página y recogen más de lo que muchas campañas necesitan. Recoge solo lo que sirva al visitante y al propósito declarado de la campaña.
Prueba en un teléfono real y con conexión lenta
Las vistas previas de escritorio mienten. Antes de imprimir nada, prueba en un teléfono real:
- Escanea el código impreso con al menos dos teléfonos distintos —un Android y un iPhone si es posible—, porque las cámaras y los navegadores se comportan de forma diferente.
- Prueba con datos móviles, no solo con el Wi-Fi de la oficina. Desactiva el Wi-Fi o usa las herramientas de limitación de red del navegador para simular una conexión lenta.
- Recorre el proceso completo: escanear, aterrizar, leer, pulsar el botón principal, completar el formulario, ver la confirmación. Verifica que cada paso funciona.
- Comprueba la página a la intemperie o con luz intensa si encaja con el lugar donde se colocará el código.
- Pide a alguien ajeno al proyecto que lo pruebe y observa dónde duda.
Lista de comprobación previa y errores comunes
Antes de que el código QR salga a la calle, repasa esta lista:
- La primera pantalla muestra el contenido prometido sin hacer scroll.
- La página carga en unos segundos con una conexión lenta simulada.
- El botón principal es grande, está al alcance del pulgar y es evidente.
- El formulario tiene solo los campos necesarios, los teclados correctos y una confirmación clara.
- El texto se lee sin zoom; el contraste es suficiente.
- No hay ventanas emergentes, muros de instalación de apps ni muros de cookies bloqueando el contenido.
- El idioma de la página coincide con el público del lugar del código.
- HTTPS está activado; el aviso de privacidad aparece donde se recogen datos.
- Has probado escaneando el código impreso con teléfonos reales, con datos móviles.
- Controlas la URL de destino (idealmente mediante una redirección) para poder corregir problemas después de imprimir.
Errores comunes que conviene evitar:
- Enlazar a una página solo para escritorio. Una página pensada para pantalla ancha que obliga a pellizcar la pantalla para leer es el error más frecuente y más grave con los códigos QR.
- Enlazar a la portada en lugar del contenido concreto. El visitante tiene que navegar hasta él solo, y muchos no lo harán.
- Páginas pesadas: fotos sin comprimir, vídeo con reproducción automática, varios scripts de terceros.
- Ventanas emergentes y pantallas intermedias antes del contenido.
- Formularios largos que piden información que no necesitas.
- Una discrepancia promesa/código: el cartel dice una cosa y la página muestra otra.
- No probar nunca el código impreso, solo la URL en un navegador de escritorio.
Conclusión
Una página de aterrizaje para códigos QR triunfa al respetar el momento del escaneo: un teléfono, una persona, un objetivo, paciencia limitada. Cumple la promesa impresa en la primera pantalla, carga rápido, diseña para los pulgares, mantén los formularios cortos, sé honesto con los datos y prueba en un teléfono real con conexión lenta antes de imprimir el código. Cuando generes un código QR —por ejemplo con una herramienta gratuita como QRCodeMax.Vip— trata la página de destino como la mitad del proyecto, no como una ocurrencia tardía: el código consigue el escaneo, pero la página es lo que consigue el resultado.