Sélecteur de langue pour site web : conseils, bonnes pratiques et exemples

Si vous gérez un site multilingue, il est recommandé d’y incorporer un sélecteur de langue. Ce dernier permettra à vos visiteurs de voir dans quelles langues vous proposez votre site, leur permettant de choisir celle qu’ils préfèrent.

Cette capture d'écran montre ce à quoi ressemble un sélecteur de langue :

Mais la manière dont apparaît un sélecteur de langue peut considérablement varier, notamment en termes d'emplacement (en-tête, pied de page, etc.). Un sélecteur peut également afficher, ou non, des icônes matérialisant les drapeaux des pays concernés.

Bonne nouvelle : l’ajout d'un sélecteur de langue n'est pas nécessairement une opération difficile. Nous verrons ce qu'implique la conception, le design et le développement de votre propre outil de sélection de langues en partant de zéro.

Il existe par ailleurs une solution plus simple, sous la forme de logiciels ou plugins de traduction intégrant un sélecteur de langue (ces outils s’avèrent également très utiles pour la localisation de sites web).

Cet article couvre les différents types de sélecteurs de langue, quelques bonnes pratiques pour rendre votre sélecteur de langue aussi visible que fonctionnel, ainsi qu'une méthode simple pour ajouter et designer un sélecteur de langue sur votre site web multilingue.

Tu cherches une solution tout de suite ? Essaie Weglot et son essai gratuit de 14 jours pour avoir un sélecteur de langue sur ton site en quelques minutes !

Ajout d’un sélecteur de langue sur votre site web (conseils et bonnes pratiques)

Si vous disposez déjà d’un site multilingue et cherchez simplement à y ajouter un sélecteur de langue, votre designer vous a peut-être déjà fourni une maquette que votre développeur pourra implémenter. En ce cas, voici quelques conseils qui vous aideront à améliorer l'expérience utilisateur globale :

Mettez votre sélecteur en évidence

Lorsqu'un utilisateur parlant une autre langue atterrit sur votre site web, il va probablement regarder les principaux menus de navigation (en-tête, pied de page) pour voir si votre site est disponible dans sa langue.

Or, s'il ne repère pas d'options de changement de langue, il partira du principe que votre site n'est disponible que dans la langue par défaut, et interrompre sa navigation. Ce qui n’est pas bon pour votre entreprise.

Il est donc important de comprendre où vos visiteurs chercheront un sélecteur de langue et de le positionner à cet emplacement, que ce soit dans le menu de navigation du header, en bas de page, dans la barre latérale ou dans une fenêtre pop-up.

Déterminez le nombre de langues que vous souhaitez proposer

Vous n'aurez pas nécessairement besoin d'un menu déroulant si vous n'avez l'intention de traduire votre site que dans une seule langue.

En revanche, si vous comptez le traduire en trois, quatre langues ou plus, un menu déroulant s’avérera plus ergonomique, plus clair, et plus facile d’utilisation.

Privilégier la fonctionnalité à l’esthétique

Certes, votre sélecteur de langue doit s’harmoniser au design de votre site. Mais n'oubliez pas que l'objectif premier du design est la fonctionnalité.

Pour ne pas désorienter vos visiteurs, il faut signifier très clairement que votre site est disponible dans d'autres langues. Il faut également rendre le passage d'une langue à l’autre le plus facile possible.

Là encore, la conception et le développement de votre propre bouton de sélection de langues sont indiqués si vous n'envisagez pas d'utiliser un logiciel pour gérer les traductions de votre site multilingue.

En revanche, ce ne sera pas nécessaire si vous passez par un logiciel de traduction de sites web. En effet, la plupart d’entre eux vous permettent d'ajouter un sélecteur de langue. Remarque : nous recommandons l'utilisation d'un logiciel de traduction pour traduire votre site et garder vos traductions à jour.

Que diriez-vous d’un sélecteur de langue aussi élégant que celui d'Inbenta ? Essayez Weglot gratuitement sur votre site et découvrez ce que nous pouvons vous offrir en matière de sélecteur de langue.

Lister les langues dans leur version native

Sans même vous en rendre compte, vous avez peut-être répertorié les langues de votre site web dans votre propre langue maternelle. Si c’est le français, vous avez peut-être écrit « allemand », « chinois », « espagnol » etc. dans votre sélecteur de langue.

Or, ce n’est pas ainsi que réfléchit votre public international. Les noms natifs des langues peuvent être complètement différents des noms qu’on leur donne en français !

Par exemple, notre sélecteur de langue propose les options suivantes : Français, Deutsch, Español, Italiano, 日本語 pour le japonais et Nederlands. Ainsi, les locuteurs natifs peuvent facilement trouver la langue de leur choix sur le site.

L'utilisation d'icônes de drapeaux n'est peut-être pas la meilleure solution

On pense souvent qu'un drapeau représente une bonne représentation visuelle d'une langue, mais ce n'est en réalité pas si simple.

Pour expliciter : aux États-Unis, l'anglais est associé au drapeau américain, et non à celui du Royaume-Uni.

Les Brésiliens associent le portugais au drapeau brésilien, et non au drapeau portugais. Il en va de même pour les hispanophones en Espagne : ils associent leur langue au drapeau espagnol, pas au drapeau mexicain.

Vous pouvez, bien sûr, utiliser des drapeaux. Ils présentent un intérêt en termes d’expérience utilisateur dans la mesure où ils sont plus marquants visuellement, donc plus faciles à trouver, et ils peuvent parfaitement convenir à votre cas d’usage. Cela dépend simplement de votre public cible. Ne prenez pas le risque d'en rebuter une partie !

Prudence avec les fonctionnalités de redirections

Pour déterminer la langue dans laquelle un site web doit s’afficher, il est possible de rediriger automatiquement les utilisateurs en fonction de leur emplacement (à l'aide de leur adresse IP) ou de la langue de leur navigateur.

Dans ce dernier cas, le site web détecte la langue du navigateur de l'utilisateur et le redirige immédiatement vers la version linguistique correspondante.

C’est bien pratique, mais il n’est pas toujours judicieux de se fier à la redirection automatique. En effet, l’emplacement d'un utilisateur ne reflète pas nécessairement sa langue maternelle.

Prenez le cas d’un touriste chinois qui passe un mois de vacances en Espagne. Il se sentira sans doute perdu s’il est d’office dirigé vers la version espagnole du site web qu'il est en train de consulter !

Et, même si le navigateur d’un internaute est paramètre en danois, par exemple, cela ne signifie pas nécessairement qu'il souhaite recevoir ses commandes physiques au Danemark.

En résumé, il est généralement préférable de demander aux utilisateurs quelles sont leurs préférences au lieu de les présumer. Un utilisateur doit pouvoir choisir sa situation géographique, sa langue et sa devise préférées. Airbnb en est un bon exemple : l'entreprise ne part pas du principe que vous parlez la langue du pays dans lequel vous vous trouvez. En cliquant sur l'icône « globe » vous pourrez choisir votre langue, votre emplacement et, dans l'onglet suivant, votre devise :

‍

Cela ne signifie pas que les redirections sont à proscrire : elles sont par exemple utiles lorsqu'un utilisateur français basé en France atterrit accidentellement sur la version américaine d'un site web.

Toutefois, certains sites web ont su tirer leur épingle du jeu en matière de sélection automatique de la langue. Par exemple, Zara offre la possibilité de rester sur le site du Royaume-Uni ou de passer au site français :

Ces fonctionnalités peuvent s'avérer utiles pour différents usages, par exemple pour vérifier la disponibilité ou les caractéristiques d'un produit sur un site de e-commerce dans un pays où vous allez vous rendre.

Utiliser si possible la saisie semi-automatique

Il est généralement recommandé d’équiper vos menus déroulants de fonctionnalités de saisie semi-automatique, permettant au site web de suggérer la langue que vous cherchez dès la saisie des premières lettres.

La saisie semi-automatique est particulièrement utile si vous proposez suffisamment de langues pour que l'utilisateur doive faire défiler le menu pour trouver la sienne. Ainsi, il ne lui faudra que quelques secondes pour basculer vers la langue de son choix.

Design des sélecteurs de langue de votre site web

Il existe quantité de façons de designer le sélecteur de langue de votre site web. Beaucoup optent pour de simples boutons, tandis que d'autres préfèrent les styliser davantage en y ajoutant leur identité visuelle (comme nous !)

Menus déroulants ou de sélection

C'est l'une des manières les plus répandues d'afficher les langues disponibles sur votre site web.

Les menus déroulants, ou menus de sélection, se caractérisent par une liste d'options se déployant en éventail pour présenter l’ensemble des paramètres linguistiques disponibles.

Ils sont également clairement identifiés, que ce soit par une icône « globe », le nom de la langue, un drapeau ou une abréviation désignant la langue.

Si vous recherchez un sélecteur de langue rapide et facile à utiliser, ces menus feront parfaitement l’affaire, car ils se prêtent à toutes sortes de design. Conçus pour être très visibles, ils se trouvent généralement en haut de page, comme vous pouvez le voir ici :

Certains sites web optent pour une méthode moins orthodoxe, avec des menus se déployant vers le haut, comme ce sélecteur sur le site web de Green Gifts :

Le site web de MINI présente un sélecteur de langue qui affiche les alternatives linguistiques à gauche de la langue actuelle au survol de la souris. Tout comme Green Gifts, il utilise des codes de pays pour désigner chaque langue :

Un code spécial a été employé pour obtenir cet effet :

Boutons

Les boutons de sélection de langue représentent un moyen clair et rapide de montrer que vous ciblez des marchés spécifiques. Ils sont particulièrement recommandés pour les sites web ne proposant que quelques langues, dans la mesure où ils prennent beaucoup plus de place.

Gardette Industries propose son site web uniquement en français et en anglais, d’où le choix d'y placer un bouton de sélection de langue :

Compte tenu du contraste entre le bouton et l'arrière-plan du site web, le sélecteur est encore plus visible et attire naturellement l’œil de l'utilisateur.

Il convient toutefois de réfléchir soigneusement à l'emplacement de ces boutons. Ils ne doivent pas bloquer la visibilité d’un contenu important, ni constituer le point focal de votre site web. L'objectif est de faire en sorte que l'utilisateur obtienne ce qu'il veut (un site web traduit dans sa langue préférée) en un minimum de clics.

Liens textuels

Si vous préférez un sélecteur de langue plus discret, il est possible d’opter pour des liens textuels. Ces derniers se trouvent généralement en bas de page. Et il s’agit d’un bon compromis si vous avez trop peu de langues pour un menu déroulant complet, mais trop pour que chacune mérite son propre bouton.

En voici un bon exemple : sur le site web du W3C, le japonais et le chinois simplifié sont directement proposés sous forme de liens textuels.

Facebook utilise une combinaison hybride de liens textuels et de menu de sélection. Les langues disponibles sont placées tout en bas de page, vous devrez défiler vers le bas lorsque vous atterrissez sur la page de connexion :

Un clic sur le bouton + vous dirigera vers un gigantesque menu proposant d’innombrables langues.

Fenêtres modales

Les fenêtres modales sont de petites fenêtres s’ouvrant en réponse à un clic. Elles masquent la page principale pour désactiver ses fonctionnalités, mais la laissent visible en arrière-plan. Cela vous indique que vous retournerez à la fenêtre principale une fois que vous aurez interagi avec la fenêtre modale.

Elles peuvent représenter une option intéressante pour designer le sélecteur de langue de votre site web, dans la mesure où elles sont généralement attrayantes et élégantes. Bien configurées, elles permettront aux utilisateurs de choisir plus facilement leur pays et leur langue de prédilection.

Prenons l'exemple du site web de Calvin Klein :

Le sélecteur de langue du site web apparaît en réaction à un clic sur l'icône représentant un globe terrestre dans le coin supérieur droit, à côté des options d’inscription/connexion. Une fois cette icône cliquée, la fenêtre modale permettant de choisir le pays et la langue de votre choix s'affiche.

Nestlé en est un autre exemple. Le coin supérieur droit de la page indique sur quelle version du site web vous vous trouvez.

Au clic, une fenêtre modale occupant toute la page (mais facile à fermer, comme l'indique le grand bouton X) s'affiche.

Bien que les fenêtres modales soient effectivement très visibles, il est important de noter qu'elles peuvent déranger l'utilisateur, tout comme les pop-ups. Elles interrompent en effet la navigation et exigent l'attention immédiate de l'utilisateur.

Elles peuvent s’avérer utiles lorsque vous devez poser à l’utilisateur une question essentielle (comme ses préférences en matière de confidentialité ou d'utilisation de ses données) ou lui communiquer un avertissement.

Utiliser un logiciel de traduction de sites web pour personnaliser votre sélecteur de langue

Que vous soyez actuellement en train de créer votre site multilingue ou que vous en ayez déjà un, utiliser Weglot vous permettra d’améliorer le processus de traduction de votre contenu et de gestion de vos traductions. Cerise sur le gâteau ? Vous disposerez d'un sélecteur de langue facilement personnalisable.

Mais commençons par quelques informations préliminaires au sujet de Weglot :

• Vous pouvez aisément ajouter Weglot à n'importe quel CMS (WordPress, Squarespace, Wix, Shopify, et toute autre plateforme personnalisée).

• Weglot utilise les meilleurs services de traduction, de Google Traduction à DeepL, pour traduire rapidement et efficacement l’intégralité du contenu de votre site web.

• Vous pouvez traduire votre contenu dans plus de 110 langues différentes, dont des langues se lisant de droite à gauche comme l'arabe et l’hébreu.

• Weglot crée des URL uniques pour chaque traduction. Par exemple, vous trouverez notre site anglophone via weglot.com, tandis que notre site francophone a pour URL weglot.com/fr.

• Toutes les versions traduites de votre site sont systématiquement mises à jour pour refléter les évolutions de contenu. Weglot utilise des fonctionnalités de détection automatique du contenu pour repérer tout changement sur votre site original et mettre à jour toutes les versions traduites de votre site en conséquence.

• Vous avez un contrôle total sur vos traductions et pouvez donc les éditer si besoin. Vous pouvez également visualiser vos traductions en direct sur votre site à l'aide de notre Visual Editor, vous permettant de modifier le contenu traduit pour l’adapter au design et à la mise en page de votre site.

Si vous préférez les supports visuels, voici une vidéo expliquant le fonctionnement de Weglot et la facilité avec laquelle notre solution permet de gérer des sites multilingues :

Plus important encore, Weglot vous permet de personnaliser votre sélection de langues. Chaque site web traduit par Weglot dispose d'un sélecteur de langue indiquant à vos visiteurs que vous proposez des versions traduites de votre contenu.

Ce qui nous ramène ici :

Mais Weglot ne vous cantonne pas à ce design spécifique. Depuis votre interface, vous pouvez personnaliser l'apparence de votre sélecteur de langue.

Vous pourrez ainsi choisir si vous souhaitez :

• Afficher le nom des langues, ou seulement une abréviation ou un code de langue (comme EN pour l'anglais, ES pour l'espagnol, FR pour le français, etc.).

• Afficher une icône drapeau.

• Afficher le sélecteur de langue sous la forme d'une liste déroulante.

Vous pouvez également choisir votre type de drapeaux (brillant ou mat), ou encore ajouter du CSS personnalisé si vous voulez pousser la personnalisation afin que le sélecteur de langue reflète votre identité de marque.

Avec Weglot, votre sélecteur de langue est placé par défaut en bas à droite de votre site web, mais vous pouvez en modifier la position si vous le souhaitez (en haut à droite, en bas à gauche, etc.).

La marche à suivre peut légèrement varier en fonction de votre CMS, mais voici deux tutoriels vidéo pour vous en donner une idée :

Changer la position de votre sélecteur de langue si vous utilisez WordPress :

Changer la position de votre sélecteur de langue si vous utilisez Shopify :

Et, si vous avez ajouté Weglot à votre site en utilisant du code, vous pourrez toujours modifier la position de votre sélecteur de langue en suivant ces instructions.

Pour récapituler : comment personnaliser le sélecteur de langue de votre site web

Il existe deux principales méthodes pour mettre en place un sélecteur de langue sur votre site web :

1. Concevoir et développer votre propre sélecteur. Cela ne représente pas un travail titanesque, mais ce n'est nécessaire que si vous n'utilisez pas de logiciel de traduction pour gérer votre site multilingue. Lorsque vous concevez et designez votre sélecteur de langue, gardez à l'esprit qu'il doit : (1) être facile à trouver, (2) indiquer clairement quelles sont les langues proposées et (3) s’harmoniser avec votre design.

2. Utilisez un logiciel de traduction de sites web. Tout logiciel de traduction de sites web digne de ce nom propose un sélecteur de langue personnalisable. Nous avons vu plus haut comment vous pouvez personnaliser votre sélecteur avec le logiciel de traduction de Weglot, notamment en ajoutant des drapeaux, en affichant le nom complet de la langue et en choisissant l'emplacement de votre sélecteur sur votre site.

Si tu es prêt(e) à laisser Weglot simplifier ton projet de traduction et t'aider à atteindre ton public mondial plus rapidement, commence ton essai gratuit de 14 jours dès aujourd'hui, sans engagement.