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

Facilitez la personnalisation de l'expérience des utilisateurs en sélectionnant leur langue préférée pour votre site web.May 13th, 2020

Yext
Matt Grech

Matt Grech

Responsable marketing de contenuSmartling

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

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

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 portables 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 localisation de est de rendre votre site web aussi accessible que possible aux utilisateurs. Mais à quoi servirait un site localisé 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 pour qu'il détecte automatiquement la localisation de l'utilisateur via son adresse IP ou, mieux encore, la langue par défaut de son navigateur web, et qu'il lui propose la bonne version localisée de votre site. Mais cela ne fonctionne que si vous localisez dans des langues spécifiques.

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

Et si cet utilisateur ne parle même pas anglais, mais français ? Il se retrouve alors sur un site web qu'il ne peut pas lire.

Et cela ne fonctionnerait pas bien non plus si le choix se faisait par défaut en fonction de la localisation. Que se passe-t-il si un visiteur de votre site web vient du Royaume-Uni, qu'il fait des achats sur votre site britannique, mais qu'il préférerait naviguer dans sa langue maternelle, l'allemand ? En lui proposant par défaut l'anglais, vous lui imposez une expérience qu'il ne souhaite 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 localisée avec succès. Au cours des cinq dernières années, ASOS a enregistré une croissance de 149 % uniquement grâce aux ventes numériques, dépassant même les détaillants établis. Et ce, sans le moindre magasin physique.

Une partie de leur succès réside dans leur expérience de localisation transparente. ASOS utilise l'automatisation pour sélectionner automatiquement les préférences de l'utilisateur en matière de langue et de devise et, plus important encore, lorsqu'il est dirigé vers le mauvais emplacement, ASOS inclut un petit message d'avertissement dans un pied de page ancré :

asos-loc2

Ils permettent tous deux à l'utilisateur de naviguer sur une version étrangère du site tout en l'orientant dans la bonne direction. Il s'agit là 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 traduire le contenu généré par l'utilisateur, il n'y a 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 est un simple menu déroulant.

L'emplacement de ce menu sur votre site web dépend de la conception de celui-ci, mais vous le 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 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 international qui incorpore un menu dédié avec des drapeaux.

porsche-language

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

2. Boutons de langue dédiés

Si vous visez un marché très spécifique, par exemple si vous ne vendez qu'aux États-Unis et que vous devez localiser votre site 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 participer et de passer rapidement à une version localisé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, l'espace devient vite encombré.
  • Vous devrez également réfléchir à l'emplacement exact de ces boutons. Ils ne doivent pas gêner le contenu ni être au centre de la navigation, mais ils ne doivent pas non plus être cachés. Nous voulons minimiser 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.

USA-gov

Simple, facile et rapide.

3. Liens de texte

Vous pouvez également vous contenter de liens textuels, généralement placés dans le pied de page de votre site, pour chaque version localisé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 trop pour des boutons d'interface utilisateur individuels.

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 sa localisation 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 bon exemple. Lorsque vous visitez leur URL en français, google.fr, vous commencez en anglais.

google-language-select

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 les menus de sélection des langues. Ils sont faciles à identifier pour simplifier l'interface utilisateur et donnent plus de poids à la conception.

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

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 est localisé à l'aide du drapeau, comme le fait Porsche.

drapeaux 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 locaux de la langue. Les locuteurs natifs doivent pouvoir les reconnaître immédiatement. Par exemple, l'allemand doit être répertorié 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 mobile où l'espace est limité.
  7. N'oubliez pas d'adapter la devise en fonction de la localisation du visiteur, et même de fournir une option permettant aux utilisateurs de spécifier la devise si elle n'est pas déjà localisé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.