Alguna vez has buscado algo en la navegación principal de un sitio web y no lo has encontrado? ¿En alguna ocasión consideraste adquirir un producto en un ecommerce, pero no encontraste las políticas de devolución? La frustración que provoca no encontrar «algo» hace que algunos usuarios abandonen el sitio y busquen otro más transparente o intuitivo.

Este comportamiento del usuario es exactamente la razón por la que tu sitio necesita un pie de página o footer.

<< Descarga gratis la guía y descubre cómo diseñar y optimizar páginas de  destino >> 

Un footer funciona como una red de seguridad para los usuarios que no han podido encontrar la información que necesitan en otras secciones de tu página web. Por ejemplo, proporcionando un enlace a tu política de devoluciones o un formulario de contacto, puedes evitar que algunos visitantes abandonen tu ecommerce y nunca regresen.

En esta publicación, explicaremos qué es un footer y por qué es importante para la experiencia del usuario. Luego repasaremos qué elementos poner en un footer y concluiremos con algunos de los ejemplos más creativos para inspirarte.

Tal vez pienses que no tiene sentido dedicar mucho tiempo y esfuerzo al footer, porque la gente no presta atención al contenido ubicado hasta el final. En cierta medida, esta creencia está avalada por varias investigaciones de comportamiento de desplazamiento o scrolling en internet, que así lo afirman. Jakob Nielsen asegura que el 57 % del tiempo de visualización de una página web ocurre en la mitad superior de la página. Sin embargo, el tiempo invertido en la mitad superior de la página se reduce a medida que las páginas son más largas, o cuando los diseñadores favorecen el minimalismo y el desplazamiento se normaliza en general. En resumen: un usuario llegará hasta el final de un sitio web si hay una razón para hacerlo.

Con eso en mente y debido a que un footer ofrece información y opciones de navegación para tu audiencia, tiene sentido optimizar este espacio especialmente para esos dos propósitos. En la gráfica siguiente notarás lo que Neilsen Norman Group descubrió: el tiempo dedicado a la visualización disminuye a medida que el usuario recorre la página, pero hay un aumento al final.

Porcentaje de visualización por número de pantallas de contenido

Imagen de Nielsen Norman Group

Esta es una indicación de que los usuarios saben que el footer contiene información valiosa y acuden a él, especialmente cuando buscan algo específico.

Ahora que entendemos la importancia del footer en un sitio web, veamos más de cerca qué información suele incluir esta sección.

Es importante comprender que el requisito indispensable para diseñar un footer es saber qué buscan los visitantes y por qué llegaron hasta aquí. Aunque no existe una receta precisa, hay algunos ingredientes estándar que puedes agregar, pero el contenido que pongas, la cantidad y el orden dependen de ti y de las necesidades de tu empresa.

1. Aviso de copyright

Aunque este elemento no sea precisamente algo que los usuarios buscan, cualquier página web declara siempre quién es su autor. Por lo tanto, podría decirse que el elemento más importante del footer es el aviso de derechos de autor o copyright. Esta es la indicación visible y escrita sobre la propiedad de un trabajo, en este caso del sitio web y de sus contenidos, los cuales están protegidos por las leyes derechos de autor (internacionales y nacionales). El propósito es simple: disuadir a cualquiera de copiar o una imagen, animación o texto; o robar contenido de tu sitio web.

Todo lo que se necesita es colocar el símbolo de derechos de autor © (o la palabra «Copyright»), el año de publicación del sitio web o su actualización sustancial más reciente y el nombre del propietario de los derechos de autor. El aviso de derechos de autor debe exhibirse siempre en la página de inicio de tu sitio web. Se puede colocar en cualquier lugar, pero comúnmente se localiza en el footer.

Como ejemplo te mostramos la página de inicio del blog de HubSpot.

Cómo hacer un footer: incluir aviso de copyright

2. Enlace a la política de privacidad

Si recopilas datos personales de los usuarios, como sus direcciones de correo electrónico o información de pago, los acuerdos de política de privacidad son obligatorios por ley. Por esta razón, es esencial redactar una política de privacidad que cumpla con la normatividad de tu país y asegurarte de que sea de fácil localización y acceso en tu sitio web.

Una buena práctica (y frecuente) es poner un enlace a tu política de privacidad en el footer. Esto cubrirá el requisito legal y también las expectativas de la mayoría de los consumidores que esperan encontrar esta información. Aquí tienes un ejemplo del sitio web del periódico español El País.

Cómo hacer un footer: incluir política de privacidad

Imagen de El País

3. Mapa de sitio

Otro elemento que debes agregar al elaborar un footer es un mapa de sitio. Puedes proporcionar varios enlaces a secciones de tu sitio web o puedes proporcionar un único enlace a tu mapa de sitio XML.

El primer enfoque se conoce simplemente como «mapa de sitio», el cual es una guía de navegación que muestra donde localizar diferentes secciones o elementos que no aparecen directamente en las barras de navegación o menús generales (especialmente en sitios complejos o con mucho contenido). El footer de El Corte Inglés, por ejemplo, incluye enlaces de navegación que los visitantes podrían no haber considerado cuando ingresaron por primera vez al sitio, pero que tal vez les gustaría explorar.

 Cómo hacer un footer: incluir mapa del sitio web

Imagen de El Corte Inglés

El segundo enfoque está diseñado teniendo en cuenta los robots de los motores de búsqueda. Una de las cosas más importantes que tratará de hallar un robot de motor de búsqueda es un enlace a tu mapa de sitio XML. Tu mapa de sitio es un archivo que contiene URL e información de las páginas y archivos multimedia que el robot considera más importantes en tu sitio. Según Google, los motores de búsqueda utilizan este archivo para rastrear mejor los sitios web, particularmente los sitios ricos en contenido. Por eso proporcionar un enlace a este archivo en tu footer se considera una buena práctica para SEO.

4. Logo

El footer es un buen lugar para reforzar la identidad de tu marca. Hay algunos enfoques que puedes considerar. Podrías incluir tu logotipo, pero presentarlo de una manera diferente a la del encabezado. Quizás incluir una imagen, agregar la misión y los valores de tu marca o tu slogan debajo de él. Estas son solo algunas de las formas en que puedes recordarles a los visitantes lo que representa tu empresa y dar una última impresión memorable.

Puma, por ejemplo, agrega su logotipo en el footer y en el extremo derecho añade un link que dice: «Entrena con los más veloces». De esa manera, el usuario puede acceder a un sitio alternativo en el que Puma ofrece diversos entrenamientos y acompañamiento por medio de una app, lo cual complementa la experiencia del usuario y fideliza al cliente.

Cómo hacer un footer: incluir logoCómo hacer un footer: ejemplo de logo

Imagen de Puma

5. Información de contacto

Crear un footer eficiente implica una intención. Si deseas que los leads se pongan en contacto contigo fácilmente, puedes usar el footer para mostrar detalles de contacto como un correo electrónico, un número de teléfono o una dirección postal. 

Sony utiliza el footer para poner a disposición de los consumidores la dirección y el teléfono de sus oficinas; e incluso el registro fiscal.

Cómo hacer un footer: incluir información de contacto

Imagen de Sony 

6. Iconos de redes sociales

Las redes sociales son otro medio para que los leads establezcan contacto contigo. La inclusión de enlaces de tus perfiles sociales se considera una buena práctica y es una razón incluirlas en un footer. También representa una manera fácil de aumentar el número de seguidores en todas tus plataformas. Al comprender estos beneficios, tiene sentido que el 72 % de los sitios web incluyan iconos de redes sociales en el footer.

En el footer de Garnier vemos un espacio especial destinado solo a las redes sociales:

Cómo hacer un footer: incluir redes sociales

Imagen de GarnierEjemplo de footer con redes sociales

7. Formulario de registro por correo electrónico

Idealmente, debes presentar un formulario de registro por correo electrónico a un visitante que comprende el valor de tu contenido y quiere más. Un visitante que se ha desplazado hasta la parte inferior de tu página web es un candidato probable. Por esa razón muchos sitios web usan el footer como una oportunidad para aumentar suscriptores.

Por ejemplo, Axe incluye un enlace a un formulario de registro. La leyenda: «¿Te gustaría recibir consejos para tus citas, trucos, ideas/instrucciones y avisos sobre productos? Solo envíanos tus datos» ayuda al usuario a establecer las expectativas de la información que recibirá al inscribirse.

Cómo  hacer un footer: formulario de registro

Imagen de Axe

1. Revisa el código de tu página

Para hacer un footer en HTML necesitas conocer lo básico de este lenguaje informático. En este artículo puedes leer más al respecto, así sabrás qué representan y cómo utilizar las etiquetas principales. La etiqueta «footer» indica el término del sitio web dentro de la estructura. Por lo tanto, necesitas revisar el código de tu página para agregar un footer. En general, tu sitio tendrá «header» o cabeza y «body» o cuerpo, así que «footer» representa el cierre.

2. Piensa qué contenido quieres incluir en tu footer

Necesitas pensar previamente qué información requieres en esa sección de tu sitio. Toma en cuenta los siete elementos que mencionamos anteriormente; no es necesario que incluyas todos, coloca solamente aquellos que consideres útiles para tus usuarios.

3. Agrega el código

En el código de tu sitio web, verifica dónde termina la sección «body» para que enseguida añadas la etiqueta:

<footer>
</footer>

4. Incluye la información dentro del código

La información que añadas irá entre el principio y final de la etiqueta, por ejemplo, si quieres agregar el Copyright 2021 deberás escribir el código así:

<footer>
Copyright 2021
</footer>

Ahora que sabes cómo elaborar un footer y qué elementos puedes añadir, veamos algunos ejemplos que podrían inspirarte.

Ejemplos de footer o pie de página

Como se mencionó anteriormente, no existe una forma «correcta» de crear un footer en un sitio web. Mientras refleje tu identidad de marca y se adapte a tu audiencia será un buen footer. Veamos algunos ejemplos que logran exactamente eso.

1. Lorelei Londres Sorrento

Ejemplo de footer: Lorelei Londres Sorrento

Imagen de Lorelei Londres Sorrento

Lorelei Londres Sorrento es un hotel de lujo en Italia que se esfuerza por brindar hospitalidad y encanto. Su footer tiene éxito en ambos aspectos.

Anticipándose a cualquier pregunta: a la izquierda ofrece información de contacto, en el centro se ubican los enlaces de navegación y a la derecha se encuentra un formulario de suscripción al boletín. A continuación, hay otro enlace a la política de privacidad, la política de cookies y la agencia que creó el sitio web, así como el aviso de derechos de autor. Todo esto sobre una imagen de fondo que muestra a una persona en una piscina en un balcón con vistas a la playa. El resultado es un footer relajado, fresco y perfectamente alineado con la marca.

2. Superfluid 

Ejemplo de footer de Superfluid

Imagen de Superfluid

Superfluid es una marca de belleza vegana apta para cualquier persona. Su footer es básico, pero redefine muy bien el significado de la sencillez. Contiene la información que espera el usuario: un menú bien organizado de artículos de ayuda, aviso legal y cuentas de redes sociales, un formulario de registro de correo electrónico, logotipo y los derechos de autor, pero no de la forma convencional.

El logo es enorme, comparado con el resto del texto. Debajo de él, se ven los iconos que representan sus misión y valores: «libre de crueldad animal, vegano, fácil de usar, sin aceites minerales». Después hay un aviso de derechos de autor, así como los métodos de pago aceptados. En resumen, este footer proporciona información importante para abordar de una manera audaz, pero clara, cualquier pregunta que los leads tengan.

3. Spline Group

Ejemplo de footer de Spline Group

Imagen de Spline Group

Spline Group es una empresa de ingeniería mecánica y eléctrica que valora la comunicación eficaz y la simplicidad. Esto está claro en su footer con un diseño minimalista que presenta texto negro sobre un fondo blanco. Hay una dirección y enlaces a su página de Instagram, LinkedIn y Vacantes. Debajo hay texto mucho más grande que, a diferencia de Superfluid, no es el logotipo o el nombre de la marca: es un CTA simple, pero atractivo: «Hablemos».

4. Art4web

Ejemplo de footer de Art4web

Imagen de Art4web

Art4web es un estudio creativo digital y de branding, comprometido con la creación de sitios web, aplicaciones móviles y diseños de marca únicos. Su footer es un ejemplo de evidente de ello. En lugar de ofrecer una vía de contacto, Art4web ofrece tres. Los leads pueden enviar un correo electrónico, completar un formulario o llamarlos para obtener una cotización para su proyecto. También pueden optar por conectarse a cualquiera de las plataformas de redes sociales representadas por los iconos.

5. gOOOders

Ejemplo de footer de gOOOders

Imagen de gOOOders

gOOOders es una boutique que vende productos éticos y sostenibles en su plataforma en línea. Su misión es ayudar a las personas a elegir mejor los productos que compran y la forma en que viajan.

Dado que gOOOders es una marca centrada en la acción, tiene sentido que su footer sea colorido y animado, que busca atraer. La parte principal del footer está dedicada al formulario de registro de correo electrónico. A continuación se muestra un cintillo blanco que contiene otras opciones (pero pocas): derechos de autor, un enlace de contacto, la política de cookies, los términos y condiciones e iconos de redes sociales. Este es un gran modelo para sitios web que desean optimizar su footer para las conversiones.

6. Ajeeb

Ejemplo de footer de Ajeeb

Imagen de Ajeeb

Pranjal Kaila, también conocido como Ajeeb, es un diseñador interdisciplinario independiente. Según su biografía, una de sus especialidades es «crear experiencias interactivas espaciales y sensoriales». Esto está claro en cada parte de su sitio web, incluido su footer.

Este footer contiene información básica (enlaces a su book y trabajos, información de contacto, iconos de redes sociales, aviso de derechos de autor y enlace a su política de privacidad), pero su presentación es única. Sobre el fondo negro, la tipografía blanca parece imitar constelaciones. El cursor actúa como un haz de luz, y al pasarlo sobre cualquiera de los enlaces, la fuente se vuelve azul y amarilla.

Diseñar el footer de tu sitio web requiere una planificación cuidadosa. Es una sección donde los usuarios (y los robots de los motores de búsqueda) quieren encontrar información importante que no han encontrado en otro lugar. Por eso debes asegurarte de proporcionarles el contenido y los elementos necesarios para que continúen explorando tu sitio, en lugar de irse desilusionados.

Cómo diseñar y optimizar landing pages

 
New Call-to-action

Powered by WPeMatico

Comenta activando la opción de publicar también en Facebook. Gracias

comentarios