, ,
Por · 6 Febrero, 2019

Al momento de crear un sitio web debemos tener en cuenta la importancia de su concepción antes de iniciar su desarrollo. Pero más allá de concebir nuestro sitio web a través de sketch, wireframes ó mockups, debemos tener en cuenta cual es la estructura de un sitio web y como todas las secciones, menús, formularios entre otros elementos, se integran para formar un sólido proyecto web.
Independientemente de la herramienta que utilices para el desarrollo de tu sitio web (CMS, desarrollo desde 0, CMS propietario, plantillas paginas web) todos los sitios web en su markup o estructura, cuentan con las mismas etiquetas las cuales definen el comienzo y el fin de una sección, permitiendo al navegador entender la estructura de un sitio web y facilitar la navegación por el mismo. Hoy te contaré cuales son esos elementos y secciones que componen un sitio web y muchas variaciones que puedes llegar a tener en tu contenido para optimizarlo y mejorar la experiencia de usuario.

La primera impresión: Home page

Se denomina home page a la página de inicio de un sitio web y sin restar importancia a las demás páginas, la home page es uno de los elementos más importantes en la estructura de un sitio web, teniendo en cuenta que es la primera página que nuestros usuarios podrán visualizar entendiendo la estructura de la información y la navegación en la web. Es imperativo cuides cada pequeño aspecto de la home page y tengas especial cuidado a la estructura de una página web como lo es la página de inicio.

Elementos que componen la estructura de un sitio web - Gradiweb
Estructura de una página web – Organización y componentes

Los componentes de una página web pueden variar de acuerdo a las necesidades de comunicación que tengas, pero siempre habrán algunos componentes “fijos” en los cuales podrás tener diferente tipo de información, pero su ubicación es vital para tener claridad en la navegación web.

El Header – Primer elemento en la estructura de una página web

El header es uno de los elementos más importantes de tu sitio web dado que nos permite representar un grupo de ayudas introductorias o de navegación que permitirán a los visitantes tener una buena experiencia de usuario.

Elementos que componen la estructura de un sitio web
En el header de nuestro sitio web podremos tener diferentes elementos de encabezado pero te recomendamos tener:

Logo – Identifica tu marca y regresa a casa:

Es uno de los elementos de una página web más comunes. Básicamente se trata de la representación gráfica que identifica a tu empresa o marca. Este logo puedes posicionarlo en cualquier parte de tu header, pero siempre teniendo cuidado al diseño. Por otro lado, el hecho de que el logo se encuentre siempre fijo en el header de tu pagina, garantiza una facil identificacion de tu marca y el sitio web, lo anterior siendo un elemento clave para la recordación de marca. Otro aspecto importante del logo en tu sitio web, es que por convención, siempre el logo ubicado en tu header irá acompañado de un link que nos llevará de regreso a casa o a la home page; esto siendo un elemento fundamental en la navegación y experiencia de usuario, un usuario que siempre busca una forma fácil e intuitiva de interactuar con tu sitio web.

Menú – Comunica tus páginas y conecta tus ideas :

En la estructura de un sitio web toma mucha importancia el menú y si lo piensas cuando vas a navegar en un sitio web y este cuenta con una estructura y jerarquía de navegación clara, podrás encontrar toda la información que buscas. Ten mucho cuidado en el detalle, crea un menu desplegable html que permita a tus usuarios entender la jerarquía y navegación, maneja un diseño limpio, cuida los colores, la ubicación y cada uno de esos pequeños detalles que permiten una limpia navegación en la web. Recuerda que en un sitio web puedes tener más de un menú de navegación ubicados en cualquier parte del sitio, pero siempre el menu ubicado en el header, será considerado como el menú principal, teniendo en cuenta que es un menú de referencia que siempre estará siendo utilizado por los usuarios para navegar en tu sitio web.

Menú de idiomas – Comunica asertivamente la estructura de la información:

Otro de los elementos que puedes pensar en agregar a la estructura de un sitio web dentro del header, es un menú de idiomas, el cual permitirá a tus usuarios seleccionar el idioma en el cual quieren visualizar el sitio web. Para realizar esta traducción dependiendo el lenguaje o CMS con el cual estés desarrollando el sitio, podrás encontrar varias opciones. Por ejemplo si utilizas un CMS como wordpress podrás utilizar un plugin como Polylang, si utilizas lenguajes como Ruby con su framework Rails podrás hacerlo a través de GEMS o configurando su módulo l18n, todo depende del lenguaje la funcionalidad que requieras para tu sitio.

Redes sociales – Comunica con el mundo:

La mayoría de negocios con presencia en internet cuenta con redes sociales que soportan toda su actividad con los clientes, promociones, noticias, entre otros. Es importante que nuestros visitantes puedan encontrar en la navegación web, algunos CTA’S(call to action) que les permitan dirigirse a nuestras cuentas oficiales en redes. En este caso en la estructura de un sitio web en el header, puedes plantearte a insertar esta sección.

Elementos que componen la estructura de un sitio web
Información de contacto :

Deja a la mano de tus visitantes tus números, correo electrónico, información de contacto, opciones para registrar sus datos en la plataforma y acceder a contenidos “premium” (Login), un CTA para cotizar y todos los elementos que consideres pertinentes. En varias partes de una página web, podrás dejar esta información, pero podrías considerar el header dentro de tus opciones imprescindibles, teniendo en cuenta que puedes diseñar un header fijo que siempre acompañe el scroll y navegación de tus usuarios, siempre estarás invitando a la acción a tus visitantes teniendo esta información en un lugar muy visible. De la misma forma propende a utilizar colores y animaciones que llamen la atención de tus usuarios y te puedan generar conversiones traducidas en llamadas, solicitudes de cotización, registró en la plataforma y acciones que le generen valor a tu negocio.

Elementos que componen la estructura de un sitio web

Algunas secciones en la estructura de un sitio web

La navegación web es un elemento muy importante y para brindar una buena experiencia de usuario debes analizar muy bien cada uno de esos componentes de una página web que te permiten ofrecer información y un valor agregado para tus visitantes. Revisemos algunas de estas secciones y componentes.

Slider o Carrusel de imágenes

El slider es un carrusel de imágenes que por lo general encontramos justo después del header de nuestra página web. Este slider puede estar compuesto por una o más imágenes, con un CTA(Call To Action), invitando a los usuarios a cualquier otra sección en la estructura de una página web. Te recomiendo no crear sliders con más de tres imágenes, dado que esto puede disminuir la velocidad de carga del sitio web y por experiencia, sabemos que el usuario no permanece en esta sección la cantidad de tiempo necesaria para ver todas las imágenes.

Servicios:

Una de las secciones más importantes en la estructura de un sitio web, teniendo en cuenta que allí viven y brillan con luz propia todos los productos y valores agregados que le ofrece tu compañía a los usuarios que visiten tu web. Para esta sección debes ser muy creativo, añadir animaciones, CTA’S, imagenes que hablen por sí solas y contenido que cautive a tus visitantes y los lleve a querer conocer más acerca de lo que ofreces.

Cómo lo hacemos – Casos de éxito en tu negocio:

Las redes sociales, los sitios web, los sitios especializados en opiniones, entre otros; detonaron un comportamiento casi predecible en los consumidores, conocer opiniones del servicio o producto a comprar antes de hacerlo. Por ello es importante que la estructura de un sitio web, en este caso en la home page contemos con una sección dedicada a que los visitantes de tu web conozcan casos de éxito, valoraciones y opiniones acerca de tus productos y servicios; esto habla muy bien de tu marca y es una estrategia muy efectiva para detonar los llamados a la acción, las compras, inscripciones a newsletter entre otras acciones.

Elementos que componen la estructura de un sitio web - Gradiweb
El CTA (Call To Action):

En la estructura de un sitio web es imperativo y de carácter casi que obligatorio, contar con secciones que llamen la atención de nuestros usuarios y visitantes para realizar una acción. Esta acción podría ser algún tipo de navegación en la web, un botón direccionando a un landing de contacto, un link para descargar un ebook o cualquier tipo de acción que se te ocurra. Estas acciones deben estar distribuidas estratégicamente en las partes de una página web, en esta caso en nuestra Home Page, permitiendo y asegurando un click en tu llamado a la acción.

Elementos que componen la estructura de un sitio web - Gradiweb
Formularios o sección de contacto:

La estructura de la información que contiene tu sitio web, debe estar organizada de forma que una sección lleve a la otra. En este orden de ideas siempre uno de nuestros objetivos principales será capturar leads e información de clientes potenciales. Para llegar a detonar esta acción en nuestro sitio web, debemos incluir, en este caso en nuestra home page, un formulario de contacto para los visitantes de tu sitio web. Por lo general esta sección siempre es incluida en la parte final antes del Footer(pie de página), sin embargo no te sientas atado, juega con tu creatividad e incluye esta sección, con un buen diseño y funcionalidad en el sitio que consideres conveniente.

Footer en la estructura de un sitio web:

El footer (pie de página), se encuentra situado en la parte inferior de una página. Este footer puede ser compartido para todas las páginas que forman la estructura de un sitio web o si lo prefieres puede tener ciertas variaciones, es decir puedes cambiar los elementos y componentes del footer en función de la página web que se esté visitando.

Elementos que componen la estructura de un sitio web - Gradiweb
Menús de navegación para generar conversiones en tus páginas principales:

Para tener una correcta navegación en la web y experiencia de usuario, puedes plantearte agregar algunos menús que contengan links a tus páginas más importantes dentro de tu sitio web específicamente en el footer. Dentro de las características de una página web, los menús son un elemento muy importante, teniendo en cuenta que ellos son el canal con el cual conectamos a los usuarios con las demás páginas de nuestro sitio web, de allí su gran importancia.

CTA en tu Footer – Genera conversiones de calidad:

Ya conoces que es un CTA y su importancia dentro de la estructura de una página web, por ello puedes plantearte insertar en el footer de tu sitio web, algunos llamados a la acción disponibles para tus usuarios. En una página web puedes insertar una buena cantidad de llamados en acción, pero debes tener cuidado de que tu usuario no sienta que lo estas obligando a realizar una acción, por ello debes realizar test y pruebas con herramientas como hotjar que te permitan probar la eficacia en la posición de tus llamados en acción (CTA’S).

¿Estás planeando realizar tu propio sitio? Si necesitas ayuda estamos disponibles para ti

Agrega un timeline de tus redes sociales:

Puedes añadir un timeline o línea de tiempo de tus publicaciones en la red social que más gestiones dependiendo tu negocio y público objetivo, recuerda que los canales de comunicación con nuestros clientes y usuarios cada vez se hacen más extensos y uno de los canales más importantes son las redes sociales, por ello es importante que todos tus visitantes conozcan tus perfiles en redes sociales, interactúen con tus publicaciones y tengas más posibilidades de generar conversiones traducidas en me gusta de tu página.

Inscripción a newsletter:

Siempre en nuestro sitio web debemos tener un objetivo claro, uno de estos objetivos suele ser conseguir inscripciones a nuestro boletín de noticias, promociones e información de valor para los usuarios. Por este motivo uno de los componentes más importantes en la estructura de un sitio web es el boletín de newsletter, el cual puedes ubicar en una ventana emergente tal vez, en el header si lo precisas y para dar un toque final y detonar esta accion, tambien puedes insertarlo en el footer de tu sitio web.

Políticas de tratamiento de datos y privacidad:

Recuerda que estamos hablando de tu negocio, de tu marca, por ello debes cuidarla y protegerla de cualquier posible eventualidad legal; pero más allá de esto brindar a tus visitantes información clar y concisa acerca del tratamiento que le das a sus datos. Por ello es importante que dentro de tu mapa de navegación web incluyas algunos links a páginas dentro de tu sitio web, que puedan suministrar a sus usuarios información acerca de las políticas de tratamiento de datos y privacidad, para ello qué mejor lugar que el footer de tu sitio web. Además recuerda que este es un aspecto casi que de carácter obligatorio en la ley de habeas data e internet.

Elementos que componen la estructura de un sitio web - Gradiweb
¿Es necesaria la pagina quienes somos en la estructura de un sitio web?

Antes de desarrollar un sitio web y como te lo he comentado en anteriores artículos, es importante realices un diseño conceptual y un mapa de sitio claro de todas las páginas que van a componer tu sitio web junto con sus interacciones. Es importante que entiendas que no porque la pagina de mi competencia cuente con una página de quienes somos, tu también debes tenerla, se trata de que entiendas que tal vez tu tipo de negocio y el contenido que puedes generar mencionando la fundación de tu compañía, el proceso, como empezaste o tu visión, no es lo suficientemente extenso como para crear una página exclusiva y dedicada para este fin. Revisa tu contenido y si consideras que es un par de párrafos o renglones, no te desgastes creando una página exclusiva de quienes somos, este contenido podrías incluirlo de forma creativa en la home page de tu sitio, o tal vez en una página llamada ¿Como lo hacemos? en donde no solo estará esta información si no también tendrás testimonios de clientes, casos de éxito, testimonios y otra información que en realidad hará que valga a la pena la creación de una página dentro de tu sitio web, sin alterar y extender más allá tu negación en la web la cual queremos sea perfecta ¿o no?.

Páginas de servicios el core de mi sitio web

En esta sección se encuentra la razón de ser de tu negocio, ese valor agregado que le ofreces a las personas por medio de tus servicios o productos y si lo piensas en la estructura de un sitio web, una de las secciones más concurridas siempre será el lugar donde se explique el core del negocio. Por ello debes prestar mucho atención al detalle a la navegación web, a la cantidad de interacciones que tus usuarios deben tener para llegar allí entre otros factores que te darán victorias tempranas. Recuerda incluir en tus páginas de servicios una visión clara de lo que ofreces, del porque el cliente potencial debe seleccionarte a ti por encima de la competencia, cautiva, se creativo y no olvides tener llamados a la acción conectando tus servicios entre sí, formando una robusta cadena de valor durante la navegación web en tu sitio.

El blog tu 90% de marketing

En muchas ocasiones me he referido a la importancia y el impacto que tiene un blog dentro de un sitio web. Y si reflexionamos en este aspecto, el blog es uno de los componentes de una página web que tiene vida propia, pero esa vida se la generas tú a través de contenido de valor. El blog te permite dar a conocer de una forma creativa y no inmersiva, aspectos importantes de tus productos y servicios, llevando a tus usuarios a través de un hilo que siempre termina por conectar con el valor adicional que ofrece tu marca de cara a la competencia. Por ello es muy importante evitar la dilación en la creación del blog dentro de tu sitio web, teniendo en cuenta que sin él estarías perdiendo una gran oportunidad de posicionar tu sitio web y dar a conocer tu marca de una forma diferente. Trabaja muy bien las secciones, escribe con paciencia, con elegancia, cautiva y estructura muy bien tu contenido de manera que puedas garantizar una disminución en el porcentaje de rebote en tus artículos.

Elementos que componen la estructura de un sitio web - Gradiweb

El Sidebar

El sidebar es una sección que por general dentro de la estructura de un sitio web en este caso específicamente en tu blog, está ubicada en los extremos laterales de la página. Este es uno de los componentes de una página web al cual no se le presta mucha atención en ocasiones, pero trabajado de una forma eficaz, te puede generar grandes conversiones o acciones dentro de tu sitio web. Dentro de esta sección por lo general siempre tendremos ubicados algunos llamados a la acción, formularios de newsletter, menús a otros artículos o categorías de artículos entre otros componentes de fácil visualización durante la lectura o navegación en el blog. Ponte el la piel de tus clientes y antes de estructurar esta sección, piensa que acciones de valor podrías insertar allí, para ofrecer una experiencia enriquecida a tus usuarios y mejorar tus conversiones.

Canal de comunicaciones a través de la página de contacto

Un elemento imperdible en la navegación web, una página dentro de nuestro sitio web, que recibirá una gran cantidad de visitas, si juegas bien tus cartas con los Call To Action (CTA) y crear un hilo que te lleve a tener conversiones de esta índole, en este caso datos y leads. Debes prestar mucha atención a esta página a su estructura de la información, los formularios y su funcionamiento, entre muchos otros aspectos que te den 100 puntos en experiencia de usuario. Para esta pagina puedes plantearte insertar un mapa de la ubicación física de tu negocio y oficina lo anterior como aspecto importante para tener más credibilidad con tus clientes potenciales. De la misma forma en esta página de contáctenos podrías también tener una sección en la cual inicies con la enumeración de cada uno de los miembros de tu equipo, sus redes sociales, cargo e información de contacto que consideres relevante. Tal vez el elemento o componente más importante en la pagina de contactenos, siempre sera el formulario, por ello presta mucha atención al detalle, a los botones, a los inputs, generando una buena experiencia de usuario con mensajes claros informando a tus visitantes cuando fue, cuando no fue y ¿por que no? fue enviada la información de contacto. Puedes por ejemplo tener un CTA listo a visualizarse cuando el formulario sea enviado con éxito entre muchas otras estrategias que nos permitan seguir llevando este hilo que tan cuidadosamente estamos erigiendo.

Consejos y aspectos importantes a tener en cuenta en la estructura de una página web

Diseño

Te sonará a cliche pero es muy cierto, todo entra por los ojos. Por ello presta mucha atención al detalle, los colores, imágenes, textos e información que insertas en la estructura de una página web. Lo anterior definirá de forma drástica los comportamientos y conversiones que podrá o no generar tu audiencia.

Estructura de la información:

Es muy importante que tengas una estructura de información clara y que permita a tus usuarios conocer la información en el tiempo preciso, generando un completo entendimiento de tu modelo de negocio. Imagina que un usuario ingrese a tu home page y en el slider se encuentre con un carrusel de testimonios de clientes, esto podrá dejar a tus usuarios altamente confundidos, teniendo en cuenta que están recibiendo información basada en opiniones de un producto o servicio que aún no conocen, ¿No sería más claro primero presentar el producto ?. El anterior es solo un pequeño ejemplo de esta premisa, que te permitirá tener clara la importancia no solo de brindar información, si no brindar información en el tiempo y momento indicado; cuida mucho la estructura de la información.

Navegación pensada y con propósito:

Como decimos coloquialmente, “Una cosa lleva a la otra”. Piensa la estructura de tus páginas de forma que el usuario pueda navegar de forma clara, buen posicionamiento orgánico en los buscadores. o está formando de tu servicio o producto. Brinda todo un completo proceso de presentación, apoyado en tus servicios y sus respectivos llamados a la acción, los procesos y cadena de valor de tus productos, un portafolio claro y varios CTA’S que permitan generar conversiones y disminuir el porcentaje de rebote de tu sitio web. Al final el usuario encontrará el formulario de contacto o inscripción a newsletter, pero teniendo en cuenta que ya realizamos la presentación de nuestro servicios y cadena de valor, habrá muchas más posibilidades de generar una conversión, dado que este es un usuario que ya conoce lo que brindas y como lo haces, estando más convencido de dar el paso y contactar. Lo anterior es solo un ejemplo de una estructura bien pensada y de un fino y bien trazado camino que permitirá a ese usuario convertirse en un lead de calidad.

Optimizar estructura para los buscadores:

No olvides que uno de nuestros visitantes más recurrente es el boot de google o de cualquier otro navegador que tengas en mente. Por ello debes estructurar tu web de forma que estos robots puedan entender la jerarquía y composición de tu sitio web. Recuerda usar atributos alt en tus imágenes, respetar la semántica de tus textos a través de etiquetas y optimizar al máximo tus contenidos y navegación web de cara a un buen posicionamiento orgánico en los buscadores.
Elementos que componen la estructura de un sitio web - Gradiweb

Formularios claros

Ponte en los zapatos de tus visitantes, crear formularios claros, si utilizas plugins o librerías para este fin, evita el spanglish o en este caso traduce los campos, mensajes de error, de éxito e interacciones con tus usuarios. A través de un elemento tan simple como un formulario de contacto, puedes conectar o desconectar nuestro hilo.

Mide indicadores

No me cansaré de decirlo jamás! lo que no se puede medir no se puede controlar, por ello mide tus resultados, analiza interacciones y recolecta la mayor cantidad de datos posible, convirtiendo estos en información y mejorar exponencialmente la estructura de tu sitio web con cada iteración.

Elementos que componen la estructura de un sitio web
Un sitio web correctamente concebido, estructurado y diseñado, siempre tendrá una gran ventaja competitiva sin importar el tipo de negocio. Antes de iniciar cualquier proyecto web, asegúrate de conocer muy bien las características de una página web, las partes de una página web, la estructura de un sitio web, solo conociendo cada uno de estos aspectos, aseguras un completo entendimiento de las necesidades de información que tus usuarios pueden tener al momento de la navegación web.
Si piensas que falta algún elemento por mencionar o tienes algún consejo que pueda ayudarnos en la búsqueda de la web perfecta, no dudes en escribirlo.

Comparte esto con tus amigos
Miguel Soler

Desarrollador Full Stack certificado en Scrum Master con experiencia en tecnologías como Ruby, Rails, JavaScript, React, Angular, Wordpress entre otras. Apasionado por el emprendimiento, la tecnología, el entorno digital y la lectura. Gestor e inversor de proyectos tecnológicos enfocados en la disrupción y mejora de procesos.

Puede interesarte

Posts Relacionados

Déjanos tus comentarios

Crecer y mejorar es nuestro objetivo principal, por eso te invitamos a que dejes tus dudas, opiniones, sugerencias y congratulaciones.

Déjanos tus comentarios

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Nombre*
Sitio web
Comentarios*