Lorsque vous examinez des éléments individuels d'un site Web qui contribuent également positivement à l'expérience utilisateur, le logo est porteur de marque et mérite une attention particulière. Dans cet article, je voudrais vous donner quelques conseils issus de notre pratique en agence sur la manière de garantir une excellente expérience utilisateur pour les utilisateurs de votre site Web lors de la gestion de votre logo de site Web.

Le logo du site Web remplace le lien du menu de la page d'accueil

Le Logo est souvent placé dans la barre de navigation et DOIT toujours être lié à la page d'accueil. Aujourd'hui, les utilisateurs s'attendent également à ce que le clic sur le logo renvoie à la page d'accueil. Le logo remplace donc également le lien du menu "Accueil", qui est parfois encore visible sur les sites Web pour diriger vers la page d'accueil. Un lien "Accueil" en tant qu'élément de menu séparé dans la navigation est inutile. Cela permet également d'économiser de l'espace précieux.

La ville de Waren (Müritz) dans le nord de l'Allemagne, où notre entreprise est basée, a décidé d'aider l'utilisateur en mettant une icône de maison pour rappeler le retour à la page d'accueil. Deux raisons ont probablement motivé cette décision: d'une part, un autre logo a été placé à côté du logo principal, ce qui pourrait réduire l'incitation à cliquer sur le logo. D'autre part, on peut également supposer que les utilisateurs de ce site Web sont moins familiers avec Internet. Honnêtement, cette icône de maison n'améliore que partiellement l'expérience utilisateur, car ce site Web présente de nombreux défauts remarquables en termes d'architecture de l'information, d'interface utilisateur et aussi d'accessibilité (en particulier les contrastes pour la lecture des liens et des textes). Le site Web de la ville de Waren (Müritz) reste donc un contre-exemple.

Logo réactif : Adaptation du logo en fonction de la résolution de l'appareil

Alors que dans les vues de bureau beaucoup d'espace est disponible et que donc le nom de l'entreprise ou le slogan dans le logo peut être inclus, dans la vue mobile, pour des raisons d'espace et d'attention, le logo doit être affiché dans une forme réduite.

Pour les logos, tout comme pour les sites Web, la tendance à l'adaptation à la taille, au support et à l'environnement est établie depuis des années. On parle ici de Logo réactif, ce qui signifie que le logo tient compte de l'environnement et se présente parfaitement également sur des supports plus petits, ce qui peut nécessiter une présentation légèrement différente. Contrairement aux logos fixes qui ont la même apparence sur tous les appareils et tailles d'écran, les logos réactifs s'adaptent aux exigences spécifiques et offrent ainsi une expérience utilisateur cohérente et optimisée sur différents appareils. Le logo se réduit uniquement dans sa forme, mais pas dans son message de marque.

Un bon exemple est celui de l'entreprise suisse Victorinox. L'icône principale est affichée en premier. Seul point négatif : le logo est intégré en tant que fichier PNG au lieu de SVG.

Dans le défilement, seul l'élément d'image est affiché. À l'arrière-plan, une montagne est visible, soulignant l'origine suisse. Ainsi, la construction de la marque est importante dans le premier viewport. L'utilisateur doit comprendre. Vous êtes au bon endroit chez Victorinox. Lorsque l'utilisateur fait défiler vers le bas, les contenus deviennent importants. Le logo se réduit dans son affichage et laisse plus de place aux contenus principaux. La navigation reste fixée en haut, ce qui est également très logique d'un point de vue de l'ergonomie.

Un autre approche est suivie par le site Web de Guinness : le logo est placé avec le nom de l'entreprise. En faisant défiler, le logo devient un peu plus petit tout en conservant la navigation visible. Dès qu'un utilisateur commence à faire défiler vers le haut, le logo et la navigation redeviennent plus grands, car on suppose que l'utilisateur souhaite visiter d'autres pages.

La Commerzbank n'a pas résolu le problème de manière optimale sur son site Web. Le logo est affiché avec le nom de l'entreprise et placé en tant que fichier SVG, ce qui est une solution correcte. Cependant, il est en concurrence directe avec les éléments de navigation adjacents. Lors du défilement, la navigation disparaît complètement et l'utilisateur doit remonter en haut de la page pour la voir à nouveau. Il aurait été préférable que la navigation apparaisse immédiatement lorsque l'utilisateur commence à faire défiler vers le haut, comme c'est le cas sur le site web de zeit.de, par exemple.

Un bon exemple en termes d'optimisation de la conversion est le grand visuel de la Commerzbank avec l'orientation des deux personnes. Elles regardent en direction du bouton, ce qui dirige automatiquement le regard du visiteur vers le bouton. De telles orientations de regard vers l'appel à l'action sont très efficaces. Bien joué, Commerzbank !

Il est intéressant de regarder les exemples dans la version mobile.

Dans la version mobile, le logo de Victorinox est affiché encore plus petit et centré pour mieux structurer les possibilités d'interaction pour l'utilisateur. Guiness a placé le texte à droite du logo au lieu de dessous. Ainsi, la harpe a plus d'espace et la barre de navigation supérieure ne devient pas trop grande. En revanche, la Commerzbank se contente de masquer le texte dans la résolution smartphone.

Le rôle des logos responsives dans l'expérience utilisateur est important car ils contribuent à maintenir la cohérence visuelle et l'identité de la marque, quel que soit le mode d'accès des utilisateurs au site web.

Si un logo ne réagit pas du tout aux résolutions changeantes, il peut attirer trop fortement l'attention de l'utilisateur. Dans l'exemple suivant de la Hypovereinsbank, le logo très présent entre en concurrence avec l'appel à l'action placé à droite, en particulier dans la vue smartphone. Les éléments de navigation en gris moyen sont facilement négligés dans la vue bureau. En général, ce site web présente également plusieurs autres erreurs d'UX.

Les designers doivent donc fournir plusieurs adaptations de logo pour garantir des logos responsives. Le logo doit également fonctionner bien sur différents arrière-plans, ainsi que dans différentes tailles. Plus la résolution est faible, plus le logo est réduit dans sa complexité. Cependant, il ne doit pas perdre son noyau de marque. C'est ce qu'il y a de plus difficile lors de l'utilisation de logos responsives. Ainsi, lorsque vous commandez un nouveau lancement de marque, pensez déjà à cette exigence lors de l'utilisation de votre prochain logo.

Le format de fichier du logo du site web

L'utilisation de logos responsives a du sens car la bonne taille est chargée en fonction de la résolution. Avec des résolutions plus petites, par exemple sur un smartphone, seule l'image plus petite est chargée, ce qui économise du temps de chargement. L'effet le plus important sur votre temps de chargement sera atteint si vous :

1. intégrez le logo dans la bonne résolution (avec des informations sur la hauteur et la largeur). Les logos sont souvent intégrés dans une résolution trop élevée, puis redimensionnés pour l'affichage.
2. intégrez le logo au format vectoriel SVG au lieu de PNG ou JPG.

Utiliser le logo du site web comme favicon

Utilisez également la forme réduite de votre logo comme favicon. Évitez également les textes ou autres petits éléments qui ne sont pas reconnaissables dans la petite résolution du favicon.

Alors que le site web de Guinness dans l'exemple ci-dessus utilise très bien le logo de manière responsive pour le site web, il n'est pas optimal en tant que favicon. Le petit texte blanc de Guinness n'est pas reconnaissable et réduit l'impression générale du favicon. Le contraste est faible. L'impression serait nettement meilleure sans texte et simplement réduite à la harpe du logo. Les autres exemples de cet article ont tous mieux résolu ce problème que Guinness.

Si vous recherchez une agence axée sur les logos responsives, n'hésitez pas à nous contacter. Nous, chez 4eck Media, sommes des professionnels de l'expérience utilisateur.

Si une position professionnelle est importante pour vous, les packs d'icônes et modèles de conception d'entreprise suivants pourraient également vous intéresser :