Cómo se estructura una página web

Algunas de las ventajas que tiene aplicar una buena estructura a una página son:

1. Permite una mejor visualización a los visitantes y una buena navegación.
2. Obedece a la forma en que las personas consultan la información de un sitio (de arriba a abajo o de izquierda a derecha).
3. Permite crear jerarquías de información (títulos, subtítulos, contenidos).
4. Hace más fácil ubicar aquello que se está buscando.
5. Genera interacción y conversiones.

Es importante mencionar que no existe una estructura única o predeterminada de una página web, al contrario, cada empresa o marca puede desarrollar su página con total libertad creativa. Sin embargo, sí existen algunas directrices que ayudarán a que tu mensaje llegue de manera clara a los visitantes de tu sitio.

A continuación revisaremos las tres secciones fundamentales que conforman la estructura de una página y los elementos que deben estar presentes en cada una de ellas.

Para ilustrar este apartado utilizaremos como ejemplo el sitio web de la Universidad del Valle de México, uno de nuestros clientes que ha sabido aprovechar el software especializado de Marketing Hub para todas sus campañas y seguimiento de clientes. 

Hemos elegido este sitio ya que su diseño ilustra a la perfección la estructura que debe tener una página web realmente atractiva.

1. Encabezado

El encabezado es la parte más importante de una página web porque es la carta de presentación de la marca y el primer acercamiento que tienen los visitantes al acceder. Este encabezado debe presentar la información más importante de forma clara. Diseñar un encabezado puede ser complicado, ya que se requiere el balance justo entre mostrar la mayor cantidad de información relevante de la manera más simple. 

Los elementos que deben estar presentes en un encabezado son:

Imagen de la marca

Puede ser un logotipo, el nombre de la compañía o ambos. Esto dependerá en gran medida de la interfaz de navegación; si usas un teléfono o móvil puedes emplear una versión reducida del logo para que no ocupe toda la pantalla o bien aprovechar las dimensiones y poner el nombre de tu empresa al centro. En una pantalla de escritorio generalmente aparecen del lado izquierdo.

Menú de opciones

Generalmente se presentan de forma breve y pueden ser desplegables. Debes evitar a toda costa que las opciones se superpongan, ya que hará difícil la interacción, sobre todo en pantallas táctiles.

Botones de acción

Estos pueden ser de muchos tipos, pero generalmente indican el idioma y la ubicación o funcionan como botones de suscripción o de prueba. En algunos casos se pueden incluir iconos para carritos de compra.

Veamos nuestro ejemplo:

Como puedes ver, el encabezado de la página incluye un menú desplegable indicado con un icono fácilmente reconocible, además de un botón de búsqueda y una cinta con acceso directo al chat y número de contacto.

Si bien esta estructura funciona para este sitio, existen algunas otras herramientas que pueden aparecer en este apartado, dependiendo de tus necesidades. Algunas de ellas son:

• Información relevante: en algunos casos es una buena idea colocar cintas de avisos con información importante cuando sabemos que nuestros visitantes la estarán buscando.
• Ofertas: especialmente útil en páginas de comercio electrónico, en donde se quiere informar al cliente que hay descuentos, envíos gratis o algún otro beneficio.
• Barra de búsqueda: si el menú es muy sintético puedes implementar un icono o una barra de búsqueda automática para que los visitantes encuentren exactamente lo que buscan en tu sitio, tal y como lo hizo la UVM en nuestro ejemplo.

Los encabezados pueden ser dinámicos y aparecer únicamente al entrar al sitio y desaparecer de la vista al momento de desplazarse hacia abajo, o puedes tener un encabezado fijo que permanecerá visible aunque el visitante haga scroll en la página. Si eliges que el encabezado permanezca fijo, deberás elegir cuidadosamente sus elementos para no saturar visualmente tu página.

2. Cuerpo

El cuerpo de una página web es donde estarán los contenidos. Una vez que el visitante entre al sitio o que acceda a una opción del menú y se desplace hacia abajo encontrará la información solicitada. 

En este apartado puedes ser tan breve o extenso como quieras. Aunque los visitantes siempre agradecerán la simplicidad. Si tu marca o empresa tiene mucha información por compartir puedes emplear los materiales audiovisuales o elementos móviles o interactivos para hacer más amena la visita.

Veamos nuestro ejemplo:

Como puedes ver, en el cuerpo de la página se han incluido diversas imágenes, textos, herramientas de navegación y objetos dinámicos. Otros elementos que pueden formar parte de una página web son:

• Banners: te permiten incluir anuncios o avisos de forma más desarrollada que en un encabezado, ya sea con promociones, noticias o información de interés. Estos pueden ser móviles e interactivos o automáticos.
• Herramientas de navegación: en algunos sitios vale la pena usar índices para que los usuarios encuentren rápidamente el contenido que buscan. En nuestro ejemplo, la página cuenta con una barra que indica en qué posición de la página se encuentra actualmente el visitante.
• Textos: este recurso sirve para ofrecer datos, información y contenidos relevantes a las personas, como blogs y descripciones de productos.
• Multimedia: con estos recursos se puede ampliar o sustituir la presentación escrita de información. Las imágenes, videos y audios deben aparecer en este apartado.
• Mosaicos: como hemos visto, el diseño de una página es libre. Hay algunos diseñadores que usan mosaicos u otras formas y estilos de visualización para captar la atención de sus visitantes.
• Elementos emergentes: son fundamentales a la hora de diseñar un sitio. No querrás que un formulario o un aviso de privacidad oculte tu encabezado, por lo que es deseable que las ventanas emergentes aparezcan sobre el cuerpo de tu página o en la parte inferior.

3. Pie de página 

El pie de página o footer generalmente se reserva para presentar información que no es fundamental para los visitantes, pero es indispensable que esté presente. Es por ello que se deja al último y suele aparecer en un formato más discreto.

Así como el encabezado, un pie de página permanece inmutable, conservando sus mismas opciones y datos en todas las páginas del sitio. En este apartado podemos encontrar:

Legales

La información legal es uno de los elementos más importantes que en muchos casos es obligatorio presentar a los visitantes. Sin embargo, no a todas las personas les interesa. Es por ello que debe aparecer en el pie de la página, para no entorpecer la navegación del visitante y para que sea fácil de encontrar para quienes es relevante.

La información legal incluye los avisos de privacidad, los términos y condiciones de uso y de servicios, las responsabilidades adquiridas y, de ser necesario, el llamado a los derechos de autor del sitio.

Datos de contacto

Los datos de contacto suelen aparecer en el pie de la página por los mismos motivos que los avisos legales: para ser localizados fácilmente por el visitante. El pie de página puede contener número telefónico, íconos de redes sociales o incluso una opción de servicio y atención al cliente.

Colaboradores o patrocinadores

En muchos casos las empresas no trabajan solas. Al adjuntar el sello, logotipo o nombre de las organizaciones con las que colaboran con tu marca, das mayor credibilidad a la empresa y generas confianza en el visitante.

También es correcto añadir logos de certificaciones o reconocimientos oficiales. 

Menú alterno

Existe información de tu empresa que no se incluye en el menú principal porque no está dirigida a los usuarios comunes, sino que se dirige a otras empresas, proveedores, colaboradores o especialistas. Es por ello que los pies de página suelen tener un menú alterno con opciones únicas.

En este apartado suelen incluirse aspectos administrativos como puede ser información para el personal, códigos de ética, manuales de operación, lineamientos para proveedores, kits de prensa, entre otros. Si hay algunos sitios emparentados con tu página, como blogs o tiendas, es el lugar perfecto para ponerlos.

Veamos cómo UVM presenta estos datos en su pie de página:

Recuerda que estas estructuras son flexibles, por lo que puedes ajustarlas dependiendo de tus necesidades con el fin de comunicar tus ideas del mejor modo a tus clientes. 

Entonces, recordemos:

Ten en mente que el diseño de tus páginas es casi tan importante como el contenido de tu sitio. En HubSpot también contamos con CMS Hub, un software que te acompañará a crear tu sitio web sin esfuerzo para crear experiencias de navegación únicas.