Les bonnes pratiques pour la conception et le design d'un bouton de langue

Dans le cadre de votre stratégie de localisation, la création d’un site multilingue doit figurer en tête de vos priorités. Si vous en avez déjà un, vous savez probablement que le moyen le plus simple de permettre à vos visiteurs de consulter votre contenu dans la langue de leur choix est de proposer un bouton de langue ergonomique bien en évidence sur la page d'accueil de votre site.

Investir dans un site multilingue est un choix judicieux. Selon la Localization Industry Standards Association (LISA), chaque euro dépensé pour la localisation d'un site web rapporte 25 euros en moyenne. Un bouton de langue est indispensable à tout site multilingue. Il améliorera non seulement votre capacité à attirer et à fidéliser de nouveaux clients, mais jouera également un rôle essentiel en matière d'expérience utilisateur.

Il est crucial de bien concevoir et designer votre bouton de langue. D’où cet article, dans lequel nous allons donc examiner de plus près la conception et la personnalisation du bouton de langue idéal à mettre en place sur votre site. 

Personnaliser votre bouton de langue 

Quiconque possède un bouton de langue ou visite fréquemment des sites multilingues sait qu'il existe de nombreux types de boutons. Les possibilités de personnalisation pour le vôtre sont donc considérables.

Cela dit, comme vous l'avez probablement remarqué, certains sont bien plus efficaces que d'autres. Examinons ce qu’il convient de faire et de ne pas faire dans le cadre de la création d’un bouton de langue. 

Drapeaux ou pas drapeaux ?

Avant tout, l'un des principaux points à prendre en compte dans le cadre de la personnalisation de votre bouton de langue est le choix d’utiliser ou non des drapeaux représentant les pays. Bien qu'un drapeau représente un pays et non une langue, il s'agit d'une pratique assez répandue sur les sites multilingues. Alors, quel est le bon choix ?

Comme le souligne le United Language Group, les drapeaux n'ont pas été créés pour représenter des langues et ne les représentent d’ailleurs pas.

Prenons par exemple le drapeau du Royaume-Uni 🇬🇧. Il est souvent utilisé pour représenter la langue anglaise, mais cette représentation n'est pas tout à fait exacte si l'on considère que des pays comme l'Irlande 🇮🇪, l'Australie 🇦🇺, les États-Unis 🇺🇸 et même la Jamaïque 🇯🇲 ont également l'anglais pour langue principale.

Chacun de ces pays possédant une identité unique, distincte de sa langue, cela risque de dénoter un manque de sensibilité culturelle. C'est pourquoi certains pensent que les drapeaux ne doivent être utilisés que lorsque vous offrez un contenu spécifique à un pays donné. 

Pourtant, l'utilisation de drapeaux sur votre bouton de langue peut également avoir ses intérêts. Tout d'abord, du point de vue du design, ils sont généralement colorés et peu encombrants, ce qui peut représenter une option intéressante si vous disposez de peu d'espace. De plus, les drapeaux de votre sélecteur de langue ajouteront une touche de couleur qui facilitera sa visibilité et permettra aux utilisateurs de votre site web de le trouver plus rapidement.

Ici, la marque française de lunettes Jimmy Fairly a choisi d'ajouter des drapeaux pour représenter ses différentes langues, en y adjoignant les initiales des langues au lieu de leurs noms complets.

Emplacement du bouton de langue

Au nombre des points à considérer pour assurer la visibilité de votre bouton de langue, évoquons son emplacement sur votre page web. Bien entendu, cet emplacement peut déjà avoir été déterminé en fonction d'autres éléments déjà présents sur votre site.

Comme nous l'avons vu ci-dessus, Jimmy Fairly a choisi de placer son bouton de langue dans le coin supérieur droit de l'écran. En revanche, un autre exemple, comme celui de Youth With A Mission, nous montre un bouton de langue positionné dans le coin inférieur droit des pages web. Quelle option est la plus efficace ?

En plaçant votre bouton de langue en bas à droite de votre page web, vous le situez dans la zone terminale de la vision d'un utilisateur, c'est-à-dire là où il est le plus susceptible de poser ses yeux et de remarquer le bouton de langue.

Ainsi, pour aider vos visiteurs à découvrir votre bouton de langue, le positionner dans la partie inférieure droite est scientifiquement votre meilleure option.

Cela ne signifie absolument pas pour autant que Jimmy Fairly a fait le mauvais choix. Peut-être y avait-il un espace vide à combler dans l’en-tête, ou peut-être la marque utilisait-elle déjà la partie inférieure droite pour une autre fonctionnalité ou une fenêtre pop-up.

Comme nous l'avons vu, Jimmy Fairly a opté pour des drapeaux qui rendent son bouton de langue immédiatement apparent pour les visiteurs de son site web. Youth With A Mission n'a pas adopté les drapeaux, mais a optimisé la visibilité de son bouton de langue grâce à son positionnement. L’enseignement étant : vous devez considérer ce qui fonctionne pour VOTRE site, et ce qui marche pour l'un n'est pas nécessairement la meilleure solution pour un autre.

Remarque : Si votre site fait la part belle aux langues se lisant de droite à gauche comme l'arabe, l'hébreu ou le farsi, vous pouvez envisager de placer ce sélecteur de langue en bas à gauche de votre page web, qui devient alors la zone terminale de vos pages. 

Nom complet ou initiales ?

Une autre question fréquemment soulevée est celle de l’ajout ou non du nom complet de la langue sur votre sélecteur de langue. Mais, avant même d'y songer, vous devez vous assurer que chaque langue est affichée dans la langue du visiteur de votre site.

Par exemple, imaginons que vous gérez un site destiné à des utilisateurs anglais, français, italiens, allemands et espagnols. Votre sélecteur de langue doit afficher English, Français, Italiano, Deutsch et Español.

Tout simplement parce qu'un hispanophone pourrait ne pas reconnaître le mot anglais désignant sa langue, dans la mesure où il est très différent du terme espagnol. 

C'est exactement ce qu'a fait Bluetooth sur son propre site multilingue, avec beaucoup de succès. Non seulement ce choix s’avère pratique pour les visiteurs du site web, mais il améliore également l'expérience utilisateur en leur montrant que la marque est à l’écoute de leurs besoins et désireuse de bien servir ses clients. 

De prime abord, associer votre bouton de langue à votre image de marque et à la fidélisation de vos clients peut sembler un peu extrême. Mais, en réalité, dans un contexte de plus en plus concurrentiel, où le client est roi, ce sont les petits détails de ce genre qui peuvent faire la différence. 

Ceci étant dit, la question suivante est de déterminer si vous conservez ou non le nom complet de chaque langue ou si vous optez simplement pour les initiales la représentant. 

Icônes de boutons de langue

Vous avez peut-être remarqué dans l'image ci-dessus que le bouton de langue de Bluetooth est en réalité une icône, en l'occurrence un globe qui se déploie au clic. La question étant donc : les icônes représentent-elles un bon moyen de matérialiser votre bouton de langue ?

L'utilisation d’une icône pour indiquer votre bouton de langue comporte toujours le risque que certains visiteurs de votre site web ne comprennent pas ce qu'elle représente et ne voient donc pas que des langues supplémentaires sont disponibles.

Il est donc recommandé d’opter pour une icône universellement reconnaissable. C'est ce qu'a fait Bluetooth avec son icône, car quoi de plus identifiable par tous à travers le globe terrestre… qu’un globe terrestre ? 

Une recherche rapide sur Google pour « icône de langue » vous montrera rapidement que les globes ou les bulles de dialogue arrivent en tête des recherches.

De plus, nous recommandons à tous ceux qui choisissent d’utiliser une icône pour représenter leur bouton de langue de placer un autre bouton de langue (idéalement textuel) dans le pied de page ou une autre section de leur site afin de s'assurer que les visiteurs ne passent pas à côté et ne manquent pas l'occasion de naviguer dans leur langue de prédilection. 

Par exemple, Uber s'assure que, même si les visiteurs de son site web ont manqué les options linguistiques en haut de la page, ils conservent la possibilité de changer de langue dans le pied de page.

Cet investissement en matière d’expérience utilisateur sera indéniablement bénéfique à votre entreprise. Une étude menée par le CSA montre que :

- 72,4 % des consommateurs se déclarent plus enclins à acheter un produit présenté dans leur propre langue

- 72,1 % des consommateurs passent la plupart ou la totalité de leur temps sur des sites web dans leur propre langue

- 48,6 % des consommateurs n'achètent que sur des sites web affichés dans leur propre langue.

Redirection linguistique?

La redirection linguistique automatique est une fonctionnalité très répandue sur les sites web multilingues. Elle adapte la langue du site web en fonction de la langue du navigateur du visiteur ou de son adresse IP.

Les utilisateurs de Weglot ont la possibilité d'utiliser la fonctionnalité de localisation « Auto-Switch », qui redirige automatiquement l'utilisateur vers une langue spécifique en fonction de la langue de son navigateur.  Si nous supposons que votre site web est disponible en deux langues, le français et l'espagnol, voici comment fonctionneront les choses :

• Si la langue du navigateur est l'espagnol, l'utilisateur est redirigé vers le site espagnol. 
• Si la langue du navigateur est le français, la redirection se fait vers le site français.
• Si la langue du navigateur n'est ni le français ni l'espagnol, il est possible d’opter pour une redirection automatique ; par exemple, le français peut être choisi comme langue par défaut.

La question est donc la suivante : si vous avez mis en place la redirection automatique, pouvez-vous vous passer de bouton de langue ? La réponse est non, absolument pas. 

Reprenons l’exemple du site web bilingue FR-ES ci-dessus, supposons que vous ayez un locuteur bilingue allemand-espagnol dont le navigateur est paramétré sur l'allemand. Suivant vos règles de redirection, le visiteur sera amené vers la version française de votre site.

Il est donc impératif que, même si la redirection linguistique est activée, les visiteurs aient toujours la possibilité de passer d'une langue à l'autre en cliquant sur le bouton de langue, faute de quoi ils ne pourront pas accéder à la version espagnole de votre site, même si c’est celle qu'ils comprendraient.

En synthèse

• Les boutons de langue sont extrêmement personnalisables et jouent un rôle important dans l'amélioration de l'expérience utilisateur globale de votre site web multilingue. 
• La visibilité de votre bouton de langue est essentielle. Pensez à utiliser des drapeaux pour le faire ressortir, à optimiser son emplacement sur votre page web, voire les deux !
• Utilisez le nom complet de la langue plutôt que des initiales, et veillez à utiliser le nom de la langue telle qu’elle le dit elle-même ! Donc, Italiano et non pas italien
• Les fonctionnalités de redirection linguistique peuvent représenter un atout dans votre stratégie de localisation, mais elles ne peuvent pas remplacer un bouton de langue. En faire l’économie représenterait une erreur, pour vous comme pour vos visiteurs !

Ajouter un bouton de langue avec Weglot

L’ajout de langues (et donc d’un bouton de sélection de langue !) à votre site vous permet de l’ouvrir votre site à de nouvelles catégories de clients, contribuant à l'augmentation de vos ventes et de vos bénéfices. Grâce à Weglot, qui propose diverses modalités de changement de langue simples mais efficaces et personnalisables, l'ajout d'un bouton de langue sur votre site se fait en toute simplicité. 

Un bouton de langue bien conçu s’intégrera parfaitement au design de votre site et constituera la cerise sur le gâteau en matière d'expérience utilisateur.

Pourquoi ne pas tester l'essai gratuit de 14 jours de Weglot ? Tu verras par toi-même comment un simple bouton de langue peut donner une toute nouvelle dimension à ton site.