Índice
Todas las webs se dividen en una estructura formada por el header, el contenido y el footer, independientemente del objetivo de la web.
Es importante determinar cuáles son los elementos que van a formar cada una de las partes. En el siguiente post, vamos a explicar la importancia del header y del footer para que, además de facilitar la navegación, también consigas un mejor SEO.
HEADER
El header es la navegación superior de una web. Este elemento se repite en todas y cada una de las páginas de las webs.
El header está compuesto, en la gran mayoría de las webs, por el logo de la empresa y el menú, aunque otra información que podemos encontrar en el header puede ser el teléfono y el correo de atención al cliente, así como también las redes sociales.
El menú es el eje central de la web, es donde informas al usuario de todo lo relevante de tu web. Al estar en el encabezado, es de los primeros elementos que se perciben y por eso se le identifica como un elemento de mayor relevancia que el Footer.
En el caso de los ecommerce, en el menú también estaría el carrito de compra y el apartado de mi cuenta. ¡Hasta el carrito del ecommerce tiene sus variantes!
Como usabilidad, lo más recomendado es que exista un mini carrito, que consiste en un pequeño rectángulo en el que puedes revisar de forma rápida todo lo que existe en el carrito y con un botón directo al checkout para pagar.
Esta opción es un desplegable, por lo que solo se muestra cuando el usuario quiere y así no entorpece la navegación y tampoco ocupa más espacio en el menú de lo necesario.
El mini carrito puede aparecer como ventana flotante, como rectángulo o como barra lateral. No es importante la posición, lo que sí suele encontrarse a la derecha de la web, pero la forma en la que aparece no determina su éxito, sino en si podemos repasar los productos añadidos a la cesta sin necesidad de cambiar de página, así nos aseguramos que la decisión de ir a la pasarle de pago sea voluntaria.
Como diseño la recomendación puede ser determinada por la estética de la web y la continuación del estilo.
A título personal, en Global Brand no somos partidarios de un botón de inicio en el menú, pues le quita espacio a otros elementos más importantes y el propio logo es un botón al inicio que estará visible en todas y cada una de las páginas de la web.
La decisión del orden del menú va a determinar la relevancia de cada página o categoría de productos. El orden de los elementos del menú es muy estático y evidentemente lo que hoy te pueda parecer importantísimo que esté en la primera posición del menú, dentro de una semana vas a querer desactivarlo porque no te interesa venderlo o anunciarlo.
- Respóndete a estas preguntas: ¿Qué es lo identificativo de tu negocio?, ¿Es algo diferente al resto?
- Añade siempre la página de contacto. Muchas webs optan por poner el enlace a la página de contacto en el footer, pero lo más visual y lo primero que vemos cuando entramos en una web es el header, por lo que lo primero que buscaremos cuando tengamos dudas o necesidad de más información, será buscar el contacto en el header y si además hemos dedicado un apartado especial en el que informamos del teléfono de atención y correo electrónico, mucho mejor.
- Páginas de quienes somos y FAQ. Dependiendo del tipo web que sea recomendaría ponerlas en el header o en el footer. Si es una web que contiene mucha información y muchos apartados importantes, estas páginas las colocaría en el footer.
- Destaca un elemento en el menú que te interese, como por ejemplo activar un enlace en el menú para la tienda online y darle un fondo al texto para que se vea mucho más. Que vaya en sintonía al objetivo de la web y al flujo de navegación del usuario.
En el caso de los ecommerce:
- El primer paso que debes seguir para identificar los elementos del menú y su orden, es crear un árbol de categorías para agrupar tus productos.
- Cuando ya tengas el árbol de categorías, ordena las categorías principales (padre), para que estas sean las que aparezcan en el menú, recomendamos en poner entre 4-6 elementos en el menú de navegación, no hay problema si hay 7, pero recuerda que todo luego va a ir a versión mobile y la lista del menú puede ser interminable y se ocultarán los últimos elementos.
FOOTER
El footer es el apartado que encontramos al final de la web, que comparte características con el header, se activa en todas las páginas. Aunque, bien es cierto que en versión mobile es posible desactivar el footer en caso de que la información se pueda encontrar en otra parte.
Como elemento estático, este no se suele modificar con gran frecuencia, aunque sí podría modificarse según los intereses del cliente en cualquier momento.
En el footer se suelen poner los enlaces de los textos legales, información sobre el horario comercial y sobre los datos de contacto para que estén localizables en cualquier momento.
Otro de los elementos que me gusta utilizar mucho en el footer, son los formularios de contacto, sin duda una de las estrellas de cualquier web es tener todo tipo de elementos de contacto en cada una de las páginas y que mejor que un formulario de contacto.
Para mejorar el SEO también se suelen añadir las categorías más destacadas y con mejores resultados de búsqueda con sus correspondientes enlaces para un acceso rápido y destacado.
El footer suele ser bastante versátil, también se le puede añadir el logo, los métodos de pago, jugar con el número de columnas, añadir botones call to action… Acepta tantas variantes como necesidades tenga el cliente. Incluso añadir el contenido del footer en el menú.
En este post nos hemos centrado en el header y en el footer porque suelen ser los elementos más olvidados y los que menos atención se les presta, aunque siempre contienen mucha información relevante y que debe aparecer en la web y no queremos que rompa la estructura ni el diseño de la web.
Nunca debemos olvidar que el diseño debe girar en torno a las necesidades del usuario y que es vital entender la forma de lectura y el flujo recomendado de la navegación para que alcance los objetivos marcados y por los que ha visitado la web.
En un post anterior explicamos algunos consejos y prácticas que se utilizan en el diseño y desarrollo de una web para facilitar la lectura del usuario.
