Estructura de una home que funciona: secciones, orden y recorridos

En el estudio tenemos una costumbre al empezar cualquier home: antes de abrir Figma, escribimos en una hoja las preguntas que se hace un visitante desde que llega hasta que decide escribir, en el orden en que se las hace. «¿Esto es lo que busco?», «¿Son buenos?», «¿Cómo trabajan?», «¿Cuánto me va a costar?», «¿Puedo fiarme?», «¿Cómo empiezo?». Cuando esa lista está clara, la estructura de la home casi se escribe sola: cada sección responde a una pregunta, y el orden de las secciones es el orden de las preguntas.

La mayoría de páginas de inicio que revisamos están ordenadas de otra manera: según lo que la empresa quiere contar. Primero la historia de la casa, luego la misión, luego los valores, luego, por fin, lo que hacen. Es comprensible, porque para quien tiene un negocio todo eso es importante. Pero quien llega a la web está en otro punto: necesita entender primero si estás en su camino.

Esta guía propone una estructura de base, explica por qué funciona y muestra cómo adaptarla a distintos negocios.

01Qué trabajo hace una home (y cuál no)

Una página de inicio hace tres trabajos a la vez:

1. 01Orientar. Que el visitante entienda en segundos dónde ha llegado y qué puede encontrar.
2. 02Convencer. Que acumule las razones suficientes para confiar y querer saber más.
3. 03Repartir. Que cada persona encuentre el camino hacia la página que necesita: un servicio concreto, la tienda, la carta, el contacto.

El tercer trabajo es el que más se olvida. La home es el cruce de caminos de la web, y en ella coinciden personas con intenciones muy distintas: alguien que ya te conoce y busca el teléfono, alguien que compara tres empresas, alguien que quiere trabajar contigo, un periodista que busca datos. Una home que solo convence, y no reparte, obliga a todos a recorrer el mismo discurso.

También conviene recordar que la home no es la única puerta. Buena parte del tráfico de Google entra directamente en páginas interiores (un servicio, un artículo, una ficha de producto). Eso libera a la home de tener que explicarlo todo: puede presentar y enlazar, y dejar el detalle a las páginas que lo desarrollan. Cómo se organiza ese conjunto lo explicamos en arquitectura de la información.

02Una estructura de base que funciona

Esta es la secuencia que usamos como punto de partida para webs de servicios, la más habitual entre nuestros clientes. No es una plantilla para copiar, sino un orden lógico que luego se adapta.

Algunos matices de esta secuencia:

• →La confianza va muy arriba. Una línea con «4,9 en Google · 25 años · 300 proyectos» justo debajo del hero hace un trabajo enorme con muy poco espacio.
• →Los servicios se presentan, no se explican. Cada tarjeta lleva un título claro, una frase y un enlace. La explicación completa vive en su página; cómo diseñarla lo contamos en cómo diseñar una página de servicios.
• →El proceso calma. Contar los pasos («Llamada de 20 minutos → Propuesta en 48 h → Arranque») reduce la incertidumbre de quien nunca ha contratado algo así.
• →La prueba social, cerca de la decisión. Los testimonios rinden más cuando aparecen después de los resultados y antes de la llamada final. En testimonios y prueba social hay más sobre cómo escribirlos y presentarlos.

Clave: el orden de las secciones es el orden de las preguntas de tu cliente. Cuando cada bloque responde a la duda que deja el anterior, la home se recorre sola.

03Los recorridos: tres caminos que deben estar claros

Además de la secuencia de arriba abajo, una home tiene que dejar claros los atajos. Recomendamos identificar los tres recorridos más habituales y comprobar que cada uno se puede iniciar desde la primera pantalla o desde el menú, sin depender del scroll.

1. 01El recorrido de decisión rápida. Quien ya te conoce y quiere actuar: llamar, reservar, comprar. Necesita la acción principal visible en el hero y en la cabecera.
2. 02El recorrido de exploración. Quien compara y quiere entender tu oferta: entra a servicios, productos o proyectos. Necesita tarjetas claras con enlaces.
3. 03El recorrido de confianza. Quien necesita saber quién eres antes de nada: equipo, trayectoria, opiniones. Necesita una vía directa a la página sobre la empresa y a los casos.

04Cómo varía la home según el tipo de negocio

La estructura de base cambia bastante según cómo decide el cliente. Cuanto más rápida y emocional es la decisión, más corta y visual es la home; cuanto más racional y costosa, más argumentos necesita.

05Cómo construir la tuya en seis pasos

1. 01Escribe las preguntas de tu cliente en el orden en que se las hace. Pide ayuda a quien atiende el teléfono o el mostrador; sabe exactamente qué preguntan.
2. 02Asigna una sección a cada pregunta y descarta las secciones que no responden a ninguna.
3. 03Decide la acción principal y dónde se repite: hero, cabecera y llamada final, como mínimo.
4. 04Identifica los tres recorridos y comprueba que cada uno tiene su atajo.
5. 05Haz un wireframe con textos reales y léelo de arriba abajo como si fueras tu cliente. Si alguna sección te hace pensar «ya lo sé», sobra o está mal colocada.
6. 06Ajusta para el móvil: en una columna, el orden manda todavía más, porque no hay laterales que ayuden.

06Lo que cabe mejor en otras páginas

Ordenar una home también es decidir qué se va a otro sitio. Hay contenidos valiosos que, en la página de inicio, ocupan sitio sin responder a ninguna pregunta del visitante en ese momento. Estos son los que solemos trasladar:

• →Misión, visión y valores en formato declaración. Tienen su lugar natural en la página sobre la empresa, contados con ejemplos. En la home rinde más una frase que los resuma a través de lo que haces.
• →Carruseles con varios mensajes. Elegir un mensaje para el hero y dar a los demás su propia sección hace que todos se lean.
• →El feed de noticias o del blog completo. Tres artículos destacados al final, como mucho, si el blog es una parte importante de tu estrategia; si no, un enlace en el menú basta.
• →Listados largos de servicios o productos. La home presenta categorías y las páginas de categoría muestran el detalle.
• →Textos de SEO escritos para el buscador. Google entiende de qué trata una home bien escrita para personas; los párrafos de relleno con palabras clave restan claridad a todos.

La cabecera también es parte de la home

Cuando la home es larga, la cabecera trabaja como un mando a distancia. Una cabecera fija y compacta, con el logo, cinco o seis enlaces y la acción principal en forma de botón, permite actuar desde cualquier punto del scroll. En móvil, donde el menú se pliega, conviene que la acción principal (llamar, reservar, pedir cita) quede visible fuera del menú, en la propia barra o en un botón flotante discreto en la parte inferior, al alcance del pulgar.

07Medir y ajustar después de publicar

Una estructura es una hipótesis hasta que la usa gente real. Tras el lanzamiento, tres datos nos dicen casi todo:

• →Profundidad de scroll: qué porcentaje de visitas llega a cada sección. Si la mayoría se queda en la segunda, quizá la tercera no responde a lo que esperaban.
• →Clics por sección: qué tarjetas, botones y enlaces se pulsan. A veces el enlace más usado de la home es uno que habíamos colocado abajo del todo, y merece subir.
• →Salidas hacia páginas interiores: a qué páginas se va la gente desde la home. Es el mapa real de lo que buscan.

Los mapas de calor y las grabaciones de sesión completan ese cuadro con matices que los números no dan; en mapas de calor y grabaciones explicamos cómo usarlos respetando la privacidad. En nuestros proyectos solemos hacer el primer ajuste de estructura entre uno y tres meses después de publicar, con datos suficientes para decidir y antes de que las costumbres se asienten.

08Una home que acompaña

Una buena página de inicio se parece a un buen recepcionista: te saluda, entiende rápidamente qué necesitas, te cuenta lo justo para que te sientas en buenas manos y te indica la puerta correcta. No te recita la historia de la empresa nada más entrar, pero te la cuenta encantado si se la pides.

En SIMA trabajamos la estructura de la home al inicio de cada proyecto de diseño web y experiencia digital, con las preguntas de tus clientes sobre la mesa antes de dibujar nada. Si quieres repensar la tuya, escríbenos y empezamos por esa lista de preguntas.