Tu página de inicio: qué va en la primera pantalla

La mayoría de los visitantes decide en pocos segundos si tu web merece su tiempo. La primera pantalla, lo que se ve antes de bajar por la página, tiene que responder cuatro preguntas rápido: qué es esto, si es para mí, si puedo confiar y qué hago ahora. En esta lección ves qué lleva esa pantalla y en qué orden, con cuatro ejemplos reales de nuestros diseños, y terminas con una prueba de cinco segundos que puedes hacer en tu propia página de inicio.

Lo que tiene que lograr la primera pantalla

Quien llega a tu página de inicio se hace en silencio cuatro preguntas. Si la primera pantalla las contesta, sigue leyendo. Si no, vuelve a los resultados de Google y abre el negocio siguiente.

1. Qué es esto. El título y la imagen deben mostrar a qué te dedicas, con las palabras que usaría un cliente.
2. Si es para mí. La página tiene que dejar claro a quién atiendes y dónde, para que la persona indicada se sienta bienvenida.
3. Si puedo confiar. Un dato, un número, una foto real o una calificación muestran que el negocio existe y trabaja bien.
4. Qué hago ahora. Un botón claro marca el paso siguiente: llamar, reservar, pedir una cotización o ver los trabajos.

Piensa en la primera pantalla como una promesa. El resto de la página existe para cumplirla. Si la promesa es vaga, ni siquiera una página excelente más abajo va a llegar a verse.

Qué significa por encima del pliegue

La expresión viene de los periódicos: la mitad superior de la portada era lo que se veía con el diario doblado en el quiosco. En una web, por encima del pliegue es lo que ves sin bajar por la página. La diferencia es que el pliegue no es fijo. Un celular muestra mucho menos que un monitor grande, así que tu primera pantalla tiene que funcionar en los dos.

Las investigaciones de usabilidad han visto que la gente le dedica a la primera pantalla la mayor parte de su atención, y también que sí baja por la página cuando esa pantalla le da un motivo. Entonces el objetivo no es meter todo arriba. El objetivo es que la primera pantalla sea clara y que despierte la curiosidad por lo que viene. Un pequeño truco ayuda: deja asomar un pedazo de la sección siguiente en el borde inferior, para que la página no parezca terminada antes de tiempo.

Diseña el mensaje clave para que entre en la pantalla de un celular. En las pantallas grandes, el espacio extra puede llevar una imagen más grande, nunca más desorden.

Las siete partes de una primera pantalla fuerte

1. Un título que dice a qué te dedicas

El mejor título le cuenta a un desconocido qué haces, para quién y dónde, en pocas palabras. Además puede tener algo de personalidad. La pantalla de Snowmelt Rafting Co. que ves abajo abre con una línea pequeña que nombra el río y el pueblo, después el título y una frase que explica en qué consisten los viajes. En pocos segundos el visitante conoce la actividad, el lugar y el tipo de experiencia.

2. Una frase clara junto a un título ingenioso

Los títulos cortos y poéticos se recuerdan, pero pueden esconder lo que vendes. La solución es poner al lado una frase simple. En la pantalla de Aster, el título es Sunlight, well kept. Suena bien, pero la frase que lo acompaña nombra los productos: paneles solares, una batería para el hogar y la instalación, todo con un mismo equipo. Si te gusta un título poético, súmale una línea clara. Si tu título ya es directo, usa la segunda línea para una prueba o un detalle.

3. Un botón principal

Elige lo que más quieres que haga un visitante y haz de ese botón el más visible de la pantalla. La pantalla de Heyday ofrece un botón negro lleno, Discover the Bluebird, y un enlace de texto más discreto al lado. El encabezado repite una segunda acción, Book a test ride, que va en la misma línea. Todo lo demás se queda fuera del camino. Cuando una pantalla tiene cinco botones del mismo peso, nadie toca ninguno.

4. Una imagen o un video reales

Muestra la cosa en sí: la bicicleta, el río, el plato, el equipo, el trabajo terminado. Una imagen que enseña lo que haces contesta la primera pregunta más rápido que cualquier frase. Evita las imágenes genéricas que podrían ser de cualquier negocio, y también las que tapan las palabras. En las próximas lecciones te explicamos cómo elegir fotos y cuándo conviene el video.

5. Una prueba rápida

Suma un dato que haga creíble la promesa. Puede ser un número, una calificación, los años que llevas en el negocio, una licencia, una garantía o una lista corta de lo que te distingue. Heyday muestra tres frases breves al pie de su primera pantalla, por ejemplo cómo se arman los cuadros y cuánto tiempo tiene el cliente para decidir. Snowmelt muestra, debajo de sus botones, una franja con datos del río: caudal, temperatura del agua y del aire, y el día de la temporada. Usa solo pruebas que sean ciertas y que puedas mostrar.

6. Un menú simple

El menú ayuda a quienes ya saben lo que buscan. Déjalo en unas cuatro a seis opciones, ponles nombres claros como Servicios, Nosotros y Contacto, y haz que el logo lleve de vuelta al inicio. Si tu acción principal importa, ponla también en el encabezado, como botón. En un celular, el menú se esconde detrás de un icono, algo que veremos en la próxima lección.

7. Algo para hacer de inmediato

En algunos negocios, la mejor primera pantalla no tiene un botón sino una pequeña herramienta. La de Solvia pide un código postal y una compañía de energía, y ofrece un botón que dice Calculate your impact. El visitante empieza a hacer algo en los primeros cinco segundos, y el resultado le da un motivo para seguir. Las calculadoras, los formularios de cotización y los selectores de reserva sirven cuando el paso siguiente es una elección concreta.

Qué poner primero según el tipo de negocio

Son puntos de partida, no reglas. Compáralos con lo que preguntan tus propios clientes.

• Restaurante o cafetería. Una foto de un plato, tus horarios y los botones Reservar mesa y Ver el menú.
• Plomero, electricista u otro oficio. Un teléfono que se pueda tocar, la zona donde trabajas, un botón para pedir cotización y una línea sobre tu licencia.
• Dentista o clínica. Una foto amable, un botón para pedir cita, la zona donde atiendes y los seguros que aceptas.
• Fotógrafo o diseñador. Tu mejor imagen, una línea sobre tu estilo y los botones Ver mi trabajo y Consultar fechas.
• Tienda. El producto que más se vende, una línea sobre los envíos y un botón Comprar.
• Consultor o coach. A quién ayudas, el resultado que logras y un botón para agendar una llamada.
• Hospedaje o empresa de excursiones. El lugar, la temporada y un botón para ver fechas.

Qué dejar afuera de la primera pantalla

• Carruseles que rotan. Esconden la mayoría de sus mensajes y es fácil perdérselos. Elige un solo mensaje.
• Bienvenido a nuestra web. No dice nada. Empieza por lo que haces.
• Lemas vagos. Frases como Calidad y excelencia podrían ser de cualquiera.
• Muchos botones. Una acción principal y, como mucho, una segunda opción más discreta.
• Ventanas emergentes al entrar. Deja que la gente vea la página antes de pedirle algo.
• Sonido que arranca solo. Sorprende, y muchos se van.
• Texto sobre una imagen cargada. Si cuesta leer las palabras, oscurece la imagen que tienen detrás o muévelas.
• Un logo enorme. Un encabezado gigante empuja tu mensaje debajo del pliegue.

Escribe tu primera pantalla en cuatro líneas

Antes de pensar en el diseño, escribe estas cuatro líneas en un papel.

1. El título. A qué te dedicas, para quién y dónde.
2. La línea de apoyo. Un detalle o una prueba que vuelva concreto el título.
3. El botón. La acción principal, escrita con un verbo: Pedir cotización, Reservar mesa, Ver fechas.
4. La prueba. Un dato real: tu calificación de Google con la cantidad de reseñas, tus años en el negocio o una garantía que de verdad ofreces.

Va un ejemplo inventado. Un plomero familiar de Tampa podría escribir: título, Reparaciones de plomería familiar en Tampa, el mismo día. Línea de apoyo, Con licencia y seguro, y con el precio explicado antes de empezar. Botón, Pedir cotización. Prueba, tu calificación real en estrellas y la cantidad de reseñas de Google. Son cuatro líneas, y un desconocido sabe qué haces, dónde, por qué confiar y qué hacer. Las palabras se pulen después, y más adelante hay una lección que trata a fondo cómo escribir la página de inicio.

La prueba de los cinco segundos

Estás demasiado cerca de tu propio sitio para juzgarlo, así que préstate unos ojos ajenos.

1. Elige a una persona que no conozca bien tu negocio.
2. Muéstrale tu primera pantalla durante cinco segundos y luego tápala o gira la pantalla.
3. Hazle tres preguntas: a qué se dedica este negocio, para quién es y qué tocaría.
4. Anota sus palabras tal cual, y prueba con tres o cuatro personas.
5. Si la mayoría no sabe contestar, cambia primero el título o la imagen, porque son los que hacen casi todo el trabajo.

Repite la prueba en un celular, porque allí la primera pantalla contiene menos.

Cómo arma Good Sites Only la primera pantalla

Cada diseño que hacemos abre con una primera pantalla pensada para un tipo de negocio, así que la distribución, la tipografía y la imagen ya van con tu rubro. Los textos se escriben para ti los días 1 y 2, incluidos el título y la línea de apoyo, y ves la maqueta los días 3 y 4, con una ronda de cambios. La versión para celular, los formularios de contacto, la configuración de SEO y el hosting están incluidos. Cuando estés listo, empieza tu sitio.

Preguntas frecuentes