Saltar al contenido

Mejores prácticas de diseño y ejemplos

febrero 2, 2022
website footer.jpegkeepProtocol

¿Alguna vez no has podido encontrar lo que buscas en la navegación principal de un sitio web? ¿Alguna vez ha estado considerando un producto en un sitio de comercio electrónico pero no ha podido encontrar la política de devolución? La frustración que esto causa hace que algunos usuarios abandonen y busquen un sitio que sea más transparente o intuitivo.

Esta instancia de comportamiento del usuario es exactamente la razón por la cual su sitio necesita un pie de página de sitio web bien diseñado. Piense en un pie de página como una red de seguridad para los usuarios que no han podido encontrar la información que buscan en otras secciones de su sitio. Al proporcionar un enlace a su política de devolución o formulario de contacto, por ejemplo, puede evitar que algunos visitantes abandonen su sitio de comercio electrónico y nunca regresen.

Descargue nuestro kit gratuito de investigación y prueba de UX

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

Quizás esté pensando que no tiene sentido dedicar mucho tiempo y esfuerzo al pie de página porque las personas no prestan atención al contenido debajo de la página. Este tipo de pensamiento está definitivamente validado por la mayoría de las investigaciones sobre el comportamiento de los pergaminos, incluida una realizada por Grupo Neilsen Norman en 2018. Descubrieron que el 57% del tiempo de visualización de la página se gastó en la parte superior de la página.

Sin embargo, según el estudio, el tiempo que se pasa en la mitad superior de la página disminuye con el tiempo a medida que las pantallas se hacen más grandes, los diseñadores favorecen el minimalismo y el desplazamiento se normaliza en general. El resumen de este estudio afirma que «las personas se desplazarán si tienen una razón para hacerlo».

Con eso en mente, debido a que los pies de página sirven para fines informativos y de navegación para su audiencia, solo tiene sentido optimizar este espacio para ellos a pesar de estar tan abajo en la página. Incluso notará que, a pesar de que Neilsen Norman Group descubrió que el tiempo dedicado a la visualización disminuyó a medida que avanzaba la página, hay un aumento al final.

Gráfico que ilustra el porcentaje de tiempo de visualización por número de pantallas verticales de contenido

Fuente de imagen

Esta es una indicación de que los usuarios saben que el pie de página contiene información valiosa y que pueden consultarlo, especialmente cuando buscan algo específico.

Ahora que entendemos la importancia del pie de página de un sitio web, echemos un vistazo más de cerca a qué información pertenece a esta sección de una página web.

Es importante comprender que el único requisito para diseñar un excelente pie de página para un sitio web es saber qué buscan los visitantes. Es por eso que no existe una receta precisa para el pie de página de un sitio web. Hay algunos ingredientes estándar, pero lo que pones exactamente, la cantidad, el orden, depende de ti.

Echemos un vistazo a algunos de los ingredientes que podría usar para diseñar su pie de página.

Aviso de copyright

Podría decirse que el elemento más importante del pie de página de un sitio web es el aviso de derechos de autor. Según Stephen Fishman, JD, en un artículo legal sobre Nolo, un aviso de derechos de autor es “un aviso escrito que indica que un trabajo en particular está protegido por derechos de autor y que usted es el propietario de esos derechos de autor”. El propósito es simple: disuadir a cualquier persona de copiar una imagen, animación, párrafo o intentar robar contenido de su sitio web.

Todo lo que se necesita es el símbolo de derechos de autor © (o las palabras «Copyright» o «Copr.»), el año de publicación del sitio web o la actualización sustancial más reciente y el nombre del propietario de los derechos de autor. El aviso de derechos de autor solo debe aparecer una vez. en la página de inicio de su sitio web, pero puede aparecer en tantas páginas como desee. Puede colocarse en cualquier parte de la página de inicio, pero se encuentra con mayor frecuencia en el pie de página.

Este es un ejemplo de la página de inicio del blog de HubSpot.

Ejemplo de pie de página con aviso de derechos de autor: HubSpot

Enlace de política de privacidad

Si está recopilando datos personales de los usuarios, como sus direcciones de correo electrónico o información de pago, los acuerdos de la Política de privacidad son obligatorios por ley. Por esta razón, es esencial redactar una Política de privacidad que cumpla con la ley y asegurarse de que esta política sea fácil de ubicar y acceder a ella en su sitio web.

Una buena práctica es colocar un enlace a su Política de privacidad en el pie de página de su sitio web. Esto no solo cumplirá con el requisito legal, sino que también cumplirá con las expectativas de la mayoría de los consumidores, ya que esperan encontrar esta información en el pie de página. Algunas empresas como Conde Nast optarán por incluir un extracto de su Política de privacidad, además de un enlace. Aquí hay un ejemplo de El neoyorquino.

Ejemplo de pie de página con política de privacidad: The New Yorker

mapa del sitio

Puede agregar un mapa del sitio a su pie de página de dos maneras. Puede proporcionar múltiples enlaces a secciones de su sitio web o puede proporcionar un solo enlace a su mapa del sitio XML.

El primer enfoque se conoce como la creación de un «pie de página del mapa del sitio». Estos pies de página contienen puntos de navegación que no encajan perfectamente en las barras de navegación globales o de nivel superior de sitios más grandes, o puntos de navegación que animan a los visitantes a explorar el sitio. El pie de página del mapa del sitio en gracia eleyaepor ejemplo, incluye enlaces de navegación que los visitantes podrían no haber considerado cuando ingresaron al sitio por primera vez, pero que les gustaría explorar.

Ejemplo de pie de página con mapa del sitio: Grace Eleyae

El segundo enfoque para incluir un mapa del sitio está diseñado teniendo en cuenta los bots de los motores de búsqueda. Una de las cosas más importantes que buscará un robot de motor de búsqueda es un enlace a su mapa del sitio XML. Su mapa del sitio es un archivo que contiene direcciones URL e información de las páginas y archivos multimedia que considera más importantes en su sitio. De acuerdo a Google, los motores de búsqueda utilizan este archivo para rastrear mejor los sitios web, especialmente los sitios grandes y ricos en contenido. Es por eso que proporcionar un enlace a este archivo en su pie de página se considera una mejor práctica para SEO.

Logo

Los pies de página son un excelente lugar para reforzar la identidad de su marca. Hay algunos enfoques que puede tomar. Puede incluir su logotipo, pero presentarlo de una manera diferente a la de su encabezado. Tal vez aumente el tamaño de la fuente. Tal vez incluyas una imagen. Tal vez incluya una declaración de misión o los valores de su marca debajo del logotipo. Estas son solo algunas de las formas en que puede recordar a los visitantes lo que representa su empresa y causar una última impresión memorable.

Enviado, por ejemplo, agrega algo de marca justo debajo de su logotipo en el pie de página. Dice: “Creamos posibilidades para el mundo conectado. Sea audaz.” De esa manera, un lector tendría una idea de lo que hizo la empresa, incluso si no leyeron la página Acerca de.

Ejemplo de pie de página con logotipo: Envoy

Información del contacto

Desea que los clientes potenciales puedan ponerse en contacto con usted lo más fácilmente posible. Por esa razón, los pies de página del sitio web a menudo contienen detalles de contacto, como un correo electrónico comercial, un número de teléfono o una dirección postal. O simplemente puede incluir un enlace que lo lleve a un formulario de contacto.

El hotel boutique de lujo Bellevue Sirene dedica una parte de la cuadrícula del pie de página de su sitio web a su información de contacto. Para garantizar que los huéspedes potenciales puedan ponerse en contacto con el hotel de la manera que deseen, el pie de página incluye una dirección, un número de teléfono, un número de fax y una dirección de correo electrónico.

Ejemplo de pie de página con información de contacto: Bellevue Syrene

Iconos de redes sociales

Las redes sociales son otra forma en que los clientes potenciales pueden ponerse en contacto contigo. Incluir enlaces de perfil social se considera una buena práctica por este motivo. También es una manera fácil de aumentar el número de seguidores en sus plataformas. Entendiendo estos beneficios, tiene sentido que El 72% de los sitios web incluyen íconos para sus sitios web de redes sociales en el pie de página..

Aquí hay una muestra de íconos animados de redes sociales en Aplicación de rebobinado de Flatstudio.

Ejemplo de pie de página con iconos sociales: aplicación de rebobinado de Flatstudio

Formulario de registro de correo electrónico

Idealmente, desea presentar un formulario de registro de correo electrónico a un visitante que comprende el valor de su contenido y quiere más. Un visitante que se ha desplazado hasta la parte inferior de su página web es un candidato probable. Es por eso que muchos sitios web usan su pie de página como una oportunidad para aumentar sus suscriptores.

Por ejemplo, Chobani incluye un sencillo formulario de suscripción por correo electrónico en su pie de página. El eslogan anterior, «Obtenga las noticias más recientes de Chobani», ayuda a establecer las expectativas del suscriptor sobre a qué se está suscribiendo exactamente.

Ejemplo de pie de página con formulario: Chobani

Ahora que sabemos qué contenido y elementos posibles podemos poner en el pie de página de un sitio web, veamos algunos ejemplos reales que podrían inspirarte.

Ejemplos de pie de página del sitio web

Como se discutió anteriormente, no existe una forma «correcta» de crear un pie de página de sitio web siempre que refleje su identidad de marca única y se adapte a su audiencia. Veamos algunos ejemplos que hacen exactamente eso.

1. Lorelei Londres

Ejemplo de pie de página web: Lorelei Londres Sorrento Hotel

Lorelei Londres es un hotel de lujo en Italia que se esfuerza por brindar hospitalidad y encanto. Su pie de página acierta en ambos aspectos.

Anticipándose a cualquier pregunta de un visitante o invitado del sitio, hay información de contacto a la izquierda, enlaces de navegación en el centro y un formulario de suscripción al boletín a la derecha. A la derecha, también está el enlace de la política de privacidad, así como el formulario de envío directamente en el pie de página. 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 se coloca contra un fondo de imagen que representa a alguien en una piscina en un balcón con vista a la playa. El resultado es un pie de página estándar, pero perfectamente alineado con la marca.

2. superfluido

Ejemplo de pie de página del sitio web: superfluido

Superfluid es una marca de belleza vegana diseñada para que cualquiera la use. Al igual que la misión de Superfluid, su pie de página es básico pero también redefine lo que significa básico. El pie de página de Superfluid contiene la información que espera: un menú bien organizado de artículos de ayuda, información legal y cuentas de redes sociales a seguir, un formulario de registro de correo electrónico, logotipo e información de derechos de autor, pero no de la manera que podría esperar.

El logotipo es enorme en comparación con el otro texto en el pie de página. Debajo del pie de página, verá íconos que representan sus propuestas de valor: libre de crueldad, vegano, fácil de usar, sin aceites minerales. Debajo hay un aviso de copyright tradicional, así como los métodos de pago aceptados. En resumen, este pie de página proporciona información importante para abordar cualquier pregunta que los clientes potenciales o existentes puedan tener de una manera audaz pero clara.

3. Grupo Spline

Ejemplo de pie de página del sitio web: Grupo Spline

Spline Group es una empresa de ingeniería mecánica y eléctrica que valora la comunicación eficaz y la sencillez.

Esto está claro en su pie de página. Un diseño minimalista, el pie de página presenta texto negro sobre un fondo blanco. Hay una dirección y enlaces a su página de Instagram, LinkedIn y Carreras. Debajo hay un texto mucho más grande. Pero a diferencia de Superfluid, no es el logotipo o la marca de Spline. En cambio, es un enlace de contacto con el CTA simple pero atractivo: «Hablemos».

4. arte4web

Ejemplo de pie de página del sitio web: 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 propia sección de pie de página es un ejemplo de diseño único. En lugar de ofrecer un punto de contacto a clientes potenciales como Spline Group, Art4web ofrece tres. Los clientes potenciales pueden enviarles un correo electrónico, completar un formulario para obtener una cotización para su proyecto o llamarlos. O pueden optar por conectarse en cualquiera de las plataformas de redes sociales representadas por los íconos a continuación.

5. buenos

Ejemplo de pie de página del sitio web: gOOOders

gOOOders es una plataforma en línea y una serie de hoteles boutique que venden productos éticos y sostenibles. Su misión es ayudar a las personas a tomar mejores decisiones en los productos…