Diseño web B2B
¿Qué debe mostrar la página de inicio de un sitio B2B en los primeros cinco segundos?
Equipo Artisma
Agencia de Marketing B2B
La empresa invirtió en un stand para la expo más importante de su sector. Durante tres días, los vendedores repartieron tarjetas con un código QR que llevaba a la página de inicio del sitio. La semana siguiente, el director revisa la analítica: cientos de visitas desde celulares en las fechas de la expo, un tiempo de permanencia de unos cuantos segundos y ningún formulario enviado. Al abrir el sitio en su propio teléfono entiende lo que pasó: la primera pantalla muestra un video de fondo que tarda en cargar, el lema «Comprometidos con la excelencia» y un aviso de cookies que tapa la mitad inferior. Nada indica qué fabrica la empresa ni cómo pedir una cotización, y los visitantes que escanearon el código con interés se fueron antes de averiguarlo.
En los primeros cinco segundos, tu página de inicio debe dejar claro qué haces, para quién y cuál es el siguiente paso, con una primera pantalla que cargue rápido y se lea bien en el celular.
La primera pantalla decide si el visitante sigue en tu sitio o regresa a los resultados de búsqueda
La página de inicio recibe a visitantes que llegan por caminos distintos: el prospecto que escribió el nombre de tu empresa después de una reunión, el que te encontró en Google, el que escaneó un código en una expo o el que abrió un enlace que le reenvió un colega. Todos toman la misma decisión en los primeros segundos: seguir o irse. Y la toman con lo que cabe en la primera pantalla, la porción visible antes de desplazarse hacia abajo.
En esta serie ya revisamos qué tipo de sitio conviene, qué necesita el comprador industrial y qué secciones completan un sitio B2B. Este artículo se concentra en un solo punto del recorrido, el más breve y el que más pesa: lo que el visitante ve al llegar a tu página de inicio.
Escanear antes de leer: cómo recorre el visitante la primera pantalla
En la primera visita, el ojo salta al titular, al elemento visual más grande y a los botones, y con esos tres datos el visitante se forma una idea de tu empresa. Si esa idea coincide con lo que buscaba, sigue; si no logra formarla, regresa. Por eso cada elemento de la primera pantalla compite por esos segundos, y cualquier elemento sin una respuesta útil le quita tiempo a los que la dan.
Las tres respuestas que la primera pantalla debe dar antes de que el visitante decida irse
En Artisma resumimos la tarea de la primera pantalla en tres preguntas que el visitante debe poder contestar en los primeros cinco segundos: quién eres, qué haces y cuál es el siguiente paso.
Qué haces, dicho con las palabras de tu comprador
El titular es el elemento con más peso de la página. Debe decir qué ofreces en términos que tu comprador reconozca, con el producto o servicio concreto y, si cabe, el resultado que obtiene. «Soluciones integrales de calidad» podría pertenecer a cualquier empresa; «Fabricamos empaque de plástico a la medida para la industria alimentaria» le dice al visitante en una línea si está en el lugar correcto. Los lemas de marca tienen su espacio más abajo, cuando el visitante ya sabe con quién habla.
Para quién lo haces: la línea que filtra al visitante correcto
Debajo del titular, un subtítulo breve precisa a quién atiendes: industrias, tamaño de empresa, región o tipo de proyecto. Esa línea cumple dos funciones. Al comprador correcto le confirma que el sitio le habla a él, y al visitante que no encaja le ahorra una llamada que tampoco le convenía a tu equipo. Un elemento de confianza cercano, como los logotipos de algunos clientes, tu trayectoria o una certificación relevante, refuerza la respuesta sin ocupar mucho espacio.
Cuál es el siguiente paso: un llamado a la acción principal y uno secundario
La primera pantalla necesita un botón principal visible que lleve a la acción que más le conviene a tu venta: solicitar una cotización, agendar una llamada o escribir por WhatsApp. Un segundo botón, con menos peso visual, atiende al visitante que todavía no está listo, por ejemplo para ver productos o conocer casos. Más de dos botones en la misma pantalla dispersan la atención, y un texto genérico como «Saber más» deja al visitante sin saber qué obtendrá al hacer clic.
Los elementos que se roban esos cinco segundos
Muchas páginas de inicio fallan por exceso. Estos son los elementos que con más frecuencia ocupan la primera pantalla sin responder ninguna de las tres preguntas.
Carruseles, videos de fondo y lemas abstractos
Los carruseles reparten la primera pantalla entre varios mensajes que rotan solos, y el visitante rara vez espera a ver el segundo. Los videos de fondo pesan, tardan en cargar en una conexión móvil y suelen cubrirse con un texto difícil de leer. Los lemas abstractos, como «Innovación que impulsa tu futuro», ocupan el lugar del titular sin decir qué vendes. Los tres son decisiones estéticas que se pagan con claridad.
Largest Contentful Paint: el tiempo que tarda en aparecer lo más importante
Los cinco segundos empiezan a contar desde el clic, y si la primera pantalla tarda en aparecer, el visitante gasta su paciencia frente a una pantalla en blanco. Google mide este momento con una de sus métricas de experiencia, el Largest Contentful Paint, que registra cuánto tarda en mostrarse el elemento más grande de la pantalla, casi siempre la imagen principal o el titular, y considera bueno un resultado de 2.5 segundos o menos. Una imagen principal en formato WebP y del tamaño correcto, en lugar de una fotografía de varios megabytes, suele ser el ajuste que más mejora esa cifra.
Avisos de cookies, ventanas emergentes y chats que cubren el contenido
Un aviso de cookies que ocupa media pantalla, una ventana emergente que pide el correo antes de que el visitante sepa qué haces o un chat que se abre solo sobre el titular bloquean justo lo que el visitante vino a ver. El aviso de cookies puede ser una barra discreta, la invitación a suscribirse puede esperar a que el visitante muestre interés y el asistente virtual puede presentarse con un botón que el visitante abre cuando quiera.
En el celular, la primera pantalla es más pequeña y suele ser la primera que ve tu comprador
Muchos compradores B2B revisan por primera vez el sitio de un proveedor desde su teléfono: entre juntas, en un traslado o en la propia expo. En una pantalla vertical cabe menos: un titular corto, una línea de subtítulo y un botón. Si el diseño se pensó solo para escritorio, en el celular el titular se parte en seis renglones, la imagen empuja el botón fuera de la vista y las tres respuestas quedan debajo, donde muchos visitantes ya no llegan.
Jerarquía vertical: qué conservar y qué recortar en la versión móvil
La versión móvil de la primera pantalla conserva el titular, el subtítulo y el botón principal, en ese orden, y deja para después todo lo demás. Conviene escribir un titular que funcione en pocas líneas, usar una imagen que acompañe sin empujar el texto y mantener el botón al alcance del pulgar. La prueba es sencilla: abre tu sitio en un teléfono y comprueba si las tres respuestas caben en la pantalla sin desplazarte.
Cómo comprobar si tu página de inicio pasa la prueba de los cinco segundos
La primera pantalla se puede evaluar con métodos sencillos que tu equipo aplica en una tarde:
Muestra la página durante cinco segundos a alguien ajeno a tu empresa, ciérrala y pídele que diga qué vendes, para quién y qué haría después.
Revisa en Google Analytics el porcentaje de interacciones y el tiempo medio de interacción de la página de inicio, por separado en celular y en escritorio.
Usa un mapa de calor para ver hasta dónde se desplazan los visitantes y en qué elementos hacen clic.
Mide la velocidad de tu página de inicio en PageSpeed Insights, con atención especial al resultado en móvil.
Compara los clics del botón principal con las visitas a la página de inicio para saber cuántos visitantes avanzan.
Si la persona de la primera prueba no logra responder las tres preguntas, el problema está en el mensaje. Si las responde y aun así los datos muestran abandono, conviene revisar la velocidad, los obstáculos visuales y la versión móvil.
En Artisma trabajamos la primera pantalla con lo que llamamos redacción con intención: cada palabra tiene un objetivo, y en los primeros cinco segundos el visitante entiende quién eres, qué haces y cuál es el siguiente paso. Los llamados a la acción llevan a WhatsApp, al correo o a una cita, y el análisis de visitantes queda activo desde el lanzamiento para medir lo que ocurre en esa primera pantalla. En nuestro sitio puedes analizar tu página web en menos de 30 segundos y ver cómo califican su velocidad en el celular y sus canales de contacto.
Preguntas frecuentes
¿Debo poner mis productos en la primera pantalla de la página de inicio?
Si tu empresa tiene una línea principal o pocas líneas, mencionarlas en el titular o en el subtítulo ayuda a que el visitante se ubique. Si tienes muchas, nombra la categoría general en la primera pantalla y presenta las líneas en el bloque siguiente, con un acceso directo a cada una.
¿Un video en la página de inicio ayuda o estorba?
Ayuda cuando muestra algo que una fotografía no alcanza a transmitir, como un proceso o una máquina en operación, y se reproduce cuando el visitante lo decide. Como fondo automático de la primera pantalla suele estorbar, porque retrasa la carga y compite con el titular. Una buena alternativa es una imagen fija con un botón para ver el video.
¿Cada cuánto conviene revisar la primera pantalla?
Cada vez que cambie tu oferta principal, lances una campaña que lleve tráfico a la página de inicio o los datos muestren que la interacción cae. Aun sin cambios, una revisión trimestral de la analítica y una prueba de cinco segundos con alguien nuevo te dicen si el mensaje sigue claro.
Si mandas tráfico a tu página de inicio desde una expo, una campaña o la firma de correo de tus vendedores y desconoces qué ve el visitante en sus primeros cinco segundos, vale la pena revisarlo antes de la siguiente inversión. Analiza tu página web en https://www.artismamkt.com y te mostramos qué responde hoy tu primera pantalla y qué cambiaríamos para que el visitante correcto dé el siguiente paso.