Sélecteur de langue du site Web - Meilleures pratiques pour une expérience utilisateur simple

Matt Grech

Responsable du marketing de contenuSmartling

Chaque petit détail compte. Vous souhaitez que votre site Web soit aussi facile à parcourir que possible et que l'expérience soit satisfaisante pour que les utilisateurs reviennent.

Cela nécessite une attention particulière aux détails et une certaine créativité pour innover. Un bon exemple est la conception du menu de sélection de la langue sur votre site Web.

Cela semble simple à première vue, n'est-ce pas? Peut-être un menu déroulant rapide énumérant les différentes langues, et quelques drapeaux pour une aide visuelle.

Bien sûr, il s'agit d'une solution rapide et facile, mais elle ne favorise pas la meilleure expérience possible pour l'utilisateur. Qui a envie de faire défiler un menu sans fin? Que se passe-t-il sur les téléphones cellulaires lorsque vous ne pouvez afficher que 20 langues au maximum à la fois?

Il y a beaucoup de choses à prendre en compte lors de la conception d'un menu de sélection des langues pour votre site Web.

Pourquoi avons-nous besoin d'un sélecteur de langue?

L'objectif de la emplacement est de rendre votre site Web aussi accessible que possible aux utilisateurs. Mais à quoi servirait un site Web retrouvé si l'utilisateur n'a jamais la possibilité de choisir sa langue?

Il s'agit là d'un scénario idéal pour l'automatisation.

Il suffit de configurer votre site Web pour qu'il détecte automatiquement l'emplacement de l'utilisateur au moyen de l'adresse IP ou, mieux encore, la langue par défaut de son navigateur Web, et qu'il lui propose la bonne version retrouvée de votre site Web. Mais cela ne fonctionne que lorsque vous retrouvez dans des langues particulières.

Lorsque vous concevez un site Web pour les marchés français et anglais, les utilisateurs dont la langue par défaut est l'anglais voient le site Web anglais, et ceux dont le navigateur est réglé sur le français voient le site Web français. Tout autre visiteur ne disposant pas de ces deux options devrait être automatiquement dirigé vers le choix le plus populaire, en l'occurrence l'anglais.

Que se passe-t-il si l'utilisateur ne parle même pas anglais, mais qu'il parle français? Ils sont maintenant bloqués sur un site Web qu'ils ne peuvent pas lire.

Et cela ne fonctionnerait pas bien non plus si vous vous basiez par défaut sur l'emplacement. Que se passe-t-il si un visiteur de votre site Web vient du Royaume-Uni et qu'il fait des achats sur votre site Web britannique, mais qu'il préférerait naviguer dans sa langue maternelle, l'allemand? En leur imposant l'anglais par défaut, on les oblige à vivre une expérience qu'ils ne souhaitent peut-être pas.

Et c'est là que le bât blesse : les utilisateurs doivent encore pouvoir choisir la langue qu'ils préfèrent.

La sélection automatisée des langues est bien gérée

ASOS est l'exemple parfait d'une plateforme de commerce électronique retrouvée avec succès. Au cours des cinq dernières années, ASOS a réalisé 149 % de son chiffre d'affaires uniquement grâce aux ventes numériques, dépassant même les détaillants établis. Le tout sans un seul magasin physique.

Une partie de leur succès réside dans leur expérience d'emplacement transparent. ASOS tire parti de l'automatisation pour sélectionner automatiquement la langue et la devise préférées de l'utilisateur et, plus important encore, lorsqu'il est dirigé vers le mauvais endroit, ASOS inclut un petit message d'avertissement dans un pied de page ancré :

Ils permettent tous deux à l'utilisateur de naviguer sur une version étrangère du site Web tout en l'orientant dans la bonne direction. Il s'agit simplement d'une approche élégante qui intègre un grand nombre des meilleures pratiques que nous allons aborder.

Stratégies de sélection de la langue du site Web

Alors, comment concevoir et mettre en œuvre un sélecteur de langue pour une expérience transparente?

Tout comme pour la traduction de contenu généré par l'utilisateur, il n'existe pas toujours de solution unique. Passons en revue quelques stratégies courantes.

1. Menus de sélection

Les menus fonctionnent bien lorsque vous devez gérer un grand nombre de langues. L'option la plus facile à concevoir et à mettre en œuvre serait un simple menu déroulant.

L'emplacement de ces éléments sur votre site Web dépend de la conception de celui-ci, mais vous les trouverez généralement en haut à droite ou en bas de la page. Il suffit de mettre en place un menu déroulant avec un libellé clair et d'indiquer toutes les langues dans lesquelles votre site Web a été traduit.

Vous disposerez de plusieurs options pour la meilleure mise en œuvre en fonction de vos besoins :

• Comment allez-vous organiser le menu et représenter chaque langue? Vous pouvez séparer le menu par région ou par continent et inclure toutes les langues parlées pour faciliter la navigation.
• Allez-vous répertorier uniquement les langues ou énumérer plusieurs fois les pays pour différentes langues?
• Quel type d'icône ou de bouton utiliserez-vous pour mettre en évidence le menu? Il devra être reconnaissable

Porsche est un exemple simple d'un menu propre pour les utilisateurs visitant leur site Web international qui incorpore un menu dédié avec des drapeaux.

Séparés par région, les utilisateurs peuvent trouver rapidement ce dont ils ont besoin sans avoir à parcourir une liste interminable. Ils ont même inclus une fonction de recherche pour une touche supplémentaire.

2. Boutons de langue dédiés

Si vous visez un marché très particulier, par exemple si vous ne vendez qu'aux États-Unis et que vous devez retrouver votre site Web en espagnol et en anglais, vous pouvez inclure des boutons de langue dans le menu de navigation de votre site Web.

Une simple sélection permet aux utilisateurs de s'abonner et de basculer rapidement vers une version retrouvée de la page.

Il y a encore quelques considérations à prendre en compte :

• Le plus grand défi en matière de conception est l'espace. Au-delà de deux langues, vous serez vite débordé.
• Vous devrez également réviser attentivement l'emplacement exact de ces boutons. Ils ne doivent pas gêner le contenu ni être au centre de votre navigation, mais ils ne doivent pas non plus être cachés. Nous voulons réduire le nombre de clics pour les utilisateurs.

USA.gov est l'un des exemples les plus populaires, offrant aux utilisateurs la possibilité de traduire instantanément la page Web en espagnol.

Simple, facile et rapide.

3. Liens de texte

Vous pouvez aussi vous contenter de liens textuels, généralement placés dans le pied de page de votre site Web, pour chaque version retrouvée. Il s'agit d'une solution intermédiaire entre les boutons dédiés et les menus de sélection lorsque vous n'avez pas assez d'options pour un menu complet, mais que vous en avez trop pour les boutons individuels de l'interface utilisateur.

Les défis et les considérations ici sont bien sûr les limitations d'espace, et une approche dynamique ou statique :

• Dynamique signifie que l'on regarde l'adresse IP du visiteur pour déterminer son emplacement approximative et lui proposer le(s) lien(s) textuel(s) approprié(s) pour cette région.
• Statique signifie incorporer des liens de texte en tant que fixation permanente dans votre interface utilisateur, comme dans l'exemple susmentionné de l'inclusion de liens de texte dans votre pied de page.

Google en est un excellent exemple. Lorsque vous visitez leur URL en français, google.fr, vous commencerez en anglais.

Mais il y a un simple lien en bas de page qui vous dirige directement vers la version française.

Un mot sur les drapeaux

Il peut sembler logique d'inclure des drapeaux dans vos menus de sélection des langues. Ils sont faciles à identifier pour faciliter l'interface utilisateur et ajouter un poids supplémentaire à la conception.

Il y a beaucoup de nuances, et même de politique, en jeu. Toutes les nations ne reconnaissent pas les mêmes drapeaux et aucun pays ne représente une langue particulière.

Par exemple, vous ne voudriez pas utiliser un drapeau anglais ou britannique pour l'Irlande. Bien que les deux pays parlent principalement l'anglais, les Irlandais préfèrent que leur drapeau et leur pays soient représentés.

Un moyen simple de contourner ce problème serait d'énumérer plusieurs fois la même langue et de spécifier le pays pour lequel le site Web est retrouvé à l'aide du drapeau, comme le fait Porsche.

Mais vous devrez également déterminer la meilleure façon de mettre en œuvre les dessins; certains drapeaux sont complexes, comment allez-vous les concevoir dans un format familier qui soit rapide et facile à développer?

Il serait peut-être plus simple de renoncer complètement aux drapeaux.

Meilleures pratiques pour le sélecteur de langue du site Web

Il existe quelques bonnes pratiques à respecter lors de la conception d'un sélecteur de langue pour un site Web :

1. Utilisez toujours le format et l'orthographe de la langue locale. Il doit être reconnaissable instantanément par les locuteurs d'origine. Par exemple, l'allemand devrait être listé comme Deutsch.
2. L'automatisation est une bonne chose, mais vous voulez que les visiteurs aient la possibilité de personnaliser leur expérience
3. Faites en sorte qu'il soit facile à trouver, vous ne voulez pas frustrer les visiteurs. La redondance est très utile, et il peut être judicieux de combiner des stratégies telles qu'un menu en haut de page et des liens textuels en bas de page.
4. Évitez les drapeaux, sauf si le contenu est spécifiquement adapté au pays concerné.
5. Mettez en place des éléments visuels tels qu'un globe ou même une carte pour une expérience plus visuelle.
6. Soyez prudent lors de la mise en place d'un menu déroulant, en particulier lors de la conception d'un site Web mobile où l'espace est limité.
7. N'oubliez pas d'adapter la devise en fonction de l'emplacement du visiteur, et même de fournir une option permettant aux utilisateurs de spécifier la devise si elle n'est pas déjà retrouvée.

Mais n'hésitez pas à faire preuve de créativité. Il existe d'excellentes conceptions et mises en œuvre, et ce défi nécessite une innovation unique si vous essayez de développer la meilleure expérience utilisateur.