Si tenemos en cuenta los elementos individuales de un sitio web que también tienen un impacto positivo en la experiencia del usuario, el logotipo es formador de marca y merece su propia consideración. En este artículo, me gustaría darle algunos consejos de la práctica de nuestra agencia sobre cómo puede garantizar una alta experiencia de usuario a los usuarios de su sitio web cuando utilicen el logotipo de su sitio web.

El logotipo del sitio web sustituye al elemento de menú de la página de inicio

El logotipo suele colocarse en la barra de navegación y SIEMPRE debería estar vinculado a la página de inicio. Además, los usuarios de hoy en día esperan que al hacer clic en el logotipo se les devuelva a la página de inicio. Por tanto, el logotipo también sustituye al enlace de menú "Inicio", que a veces sigue visible en los sitios web actuales para enlazar con la página de inicio. Un enlace a la página de inicio como elemento de menú separado en la navegación es innecesario. Además, así se ahorra un valioso espacio.

La ciudad de Waren (Müritz), en el norte de Alemania, donde tiene su sede nuestra empresa, ha decidido utilizar el icono de la casa para ayudar a los usuarios a interactuar con la página de inicio. Probablemente se utilizó aquí por dos razones: por un lado, se colocó otro logotipo al lado, lo que podría reducir el número de clics en el logotipo. Por otro, quizá se supone que los usuarios de esta web están menos familiarizados con Internet. Para ser sinceros, este icono de la casa sólo mejora la experiencia del usuario hasta cierto punto, ya que este sitio web tiene muchas deficiencias notables en cuanto a arquitectura de la información, interfaz de usuario y accesibilidad (especialmente los contrastes para leer enlaces y texto). El sitio web de la ciudad de Waren (Müritz) sigue siendo un ejemplo negativo.

Logotipo responsivo: adaptación del logotipo según la resolución del dispositivo

Mientras que en las vistas de escritorio se dispone de mucho espacio y, por tanto, se puede incluir el nombre de la empresa o el reclamo en el logotipo, éste debe colocarse de forma reducida en la vista móvil por razones de espacio y atención.

Al igual que ocurre con los sitios web, la tendencia a adaptar los logotipos al tamaño, el medio y el entorno está establecida desde hace años. Esto también se conoce como logotipo responsivo, lo que significa que el logotipo tiene en cuenta el entorno y también se presenta perfectamente en soportes más pequeños, lo que significa que puede tener que mostrarse de forma diferente en algunos aspectos. A diferencia de los logotipos rígidos, que tienen el mismo aspecto en todos los dispositivos y tamaños de pantalla, los logotipos responsivos se adaptan a los requisitos respectivos y ofrecen así una experiencia de usuario coherente y optimizada en los distintos dispositivos finales. El logotipo sólo se reduce en su forma, pero no en su mensaje de marca.

La empresa suiza Victorinox ofrece un ejemplo positivo. El icono grande se muestra al usuario como primera vista. El único inconveniente es que el logotipo está integrado como archivo PNG en lugar de SVG.

En el desplazamiento sólo se muestra el elemento de imagen. En el fondo se ve una montaña, que subraya el origen suizo. Por tanto, la marca es importante en la primera ventana gráfica. El usuario debe entender. Victorinox es el lugar adecuado para usted. Si el usuario se desplaza hacia abajo, el contenido cobra importancia. El logotipo se reduce de tamaño y deja más espacio al contenido principal. La navegación se mantiene en la parte superior, lo que también tiene mucho sentido desde el punto de vista de la usabilidad.

Otro enfoque es el adoptado por el sitio web de Guinness: El logotipo se coloca junto al nombre de la empresa. Al desplazarse, el logotipo se hace ligeramente más pequeño, mientras que la navegación permanece visible. En cuanto el usuario empieza a desplazarse hacia arriba, el logotipo y la navegación vuelven a ser más grandes porque se espera que el usuario quiera visitar más páginas.

El sitio web de Commerzbank no es la mejor solución. El logotipo es visible con el nombre de la empresa y está colocado como SVG, lo que es una buena solución. Sin embargo, compite mucho con los puntos de navegación adyacentes. Al desplazarse, la navegación desaparece por completo y el usuario tiene que volver a desplazarse hasta arriba para ver la navegación. Una solución mejor sería mostrar la navegación en cuanto el usuario empieza a desplazarse hacia arriba, como ha hecho zeit.de.

Desde el punto de vista de la optimización de la conversión, la gran imagen de Commerzbank con la mirada de dos personas es una solución muy buena. Están mirando en dirección al botón, lo que dirige automáticamente la mirada del visitante hacia el botón. Guiar la mirada del visitante hacia la llamada a la acción de esta manera es muy eficaz. ¡Bien hecho, Commerzbank!

La cosa se pone interesante cuando nos fijamos en los ejemplos de la versión móvil.

En la versión móvil, el logotipo de Victorinox aparece aún más pequeño y en el centro para estructurar mejor las opciones de interacción para el usuario. Guiness ha colocado el texto a la derecha del logotipo en lugar de debajo. De este modo, el arpa tiene más espacio y la barra de navegación superior no es demasiado grande. Commerzbank, por su parte, simplemente oculta el texto en la resolución para smartphones.

El papel de los logotipos responsivos en la experiencia del usuario es importante, ya que ayudan a mantener la coherencia visual y la identidad de la marca, independientemente de cómo accedan los usuarios al sitio web.

Si un logotipo no responde en absoluto a los cambios de resolución, también puede atraer demasiado la atención del usuario. En el siguiente ejemplo del Hypovereinsbank, el logotipo muy prominente compite demasiado con la llamada a la acción situada a la derecha, especialmente en la vista de smartphone. Los puntos de navegación en el centro de color gris se pasan por alto fácilmente en la vista de escritorio. En general, este sitio web también tiene algunos otros errores de UX.

Por lo tanto, los diseñadores deben ofrecer varias adaptaciones del logotipo para garantizar la capacidad de respuesta. El logotipo también debe funcionar bien en distintos fondos y tamaños. Cuanto menor sea la resolución, menos detallado será el logotipo. Sin embargo, no debe perder su esencia de marca. Este es el arte de utilizar logotipos con capacidad de respuesta. Así que si está encargando un relanzamiento de marca, piense en este requisito a la hora de utilizar su próximo logotipo.

El formato de archivo del logotipo del sitio web

El uso de logotipos responsivos tiene sentido porque se carga el tamaño correcto en función de la resolución. Con resoluciones más pequeñas, por ejemplo en un smartphone, sólo se carga el gráfico más pequeño. Esto ahorra tiempo de carga. Sin embargo, conseguirá el mayor efecto sobre el tiempo de carga si

1. incrusta el logotipo en la resolución correcta (también con especificaciones de altura y anchura). A menudo, los logotipos se incrustan con una resolución demasiado alta y luego se reducen para su visualización.
2. incrustar el logotipo en formato vectorial SVG en lugar de PNG o JPG.

Utilice el logotipo del sitio web como favicon

Utilice la forma reducida de su logotipo para utilizarlo como favicon. No utilice texto u otros elementos pequeños que no sean reconocibles en la pequeña resolución del favicon.

Aunque el sitio web de Guinness del ejemplo anterior utiliza muy bien el logotipo para el sitio web, no es ideal como favicon. El pequeño texto blanco de Guinness no es reconocible y reduce la impresión general del favicon. El contraste es bajo. La impresión sería mucho mejor sin el texto y reducida puramente al arpa del logotipo. Los demás ejemplos de este artículo lo han resuelto mejor que Guinness.

Si buscas una agencia que se dedique a los logotipos responsive, ponte en contacto con nosotros. En 4eck Media somos profesionales de la experiencia del usuario.

Si el posicionamiento profesional es importante para usted, puede que también le interesen los siguientes paquetes de iconos y plantillas de diseño corporativo: