Dans ce post
Lorsque vous lancez un site web multilingue, l'une des premières décisions de conception à prendre est de savoir comment présenter les options linguistiques à vos visiteurs. D'innombrables sites utilisent par défaut des icônes de drapeaux. Bien que cela puisse sembler attrayant et faire gagner de la place, ils créent souvent plus de problèmes qu'ils n'en résolvent. Le problème va au-delà de l'esthétique, car les drapeaux représentent des pays et non des langues.
Dans cet article, je vais vous présenter les difficultés liées à l'utilisation d'icônes de drapeaux pour la sélection de la langue et vous montrer comment TranslatePress résout ces problèmes. Je vous présenterai également les meilleures combinaisons de drapeaux, de codes de langue et de noms qui permettent d'offrir une expérience claire à vos visiteurs internationaux.
Pourquoi les sélecteurs de langue basés uniquement sur des drapeaux posent des problèmes
Le problème fondamental des sélecteurs de langue constitués uniquement de drapeaux est qu'ils confondent géographie et langue. Cette confusion se manifeste de plusieurs manières qui peuvent frustrer vos visiteurs et nuire à votre l'ergonomie du site.
Par exemple, Des dizaines de pays parlent anglais comme langue officielle ou principale. Si vous affichez uniquement un drapeau britannique, les visiteurs des États-Unis pourraient se demander si le contenu utilise l'orthographe et la terminologie britanniques. Si vous utilisez plutôt un drapeau américain, vous risquez de perturber les visiteurs du Royaume-Uni, d'Irlande, du Canada et d'Australie. Il n'existe pas de drapeau unique représentant la langue anglaise sans créer cette ambiguïté.
Le problème se multiplie avec les langues parlées dans de nombreuses régions :
- L'espagnol est la langue officielle dans de nombreux pays.
- L'arabe sert de langue officielle dans un nouveau groupe de pays.
- Le portugais est parlé au Portugal, au Brésil et dans plusieurs nations africaines.
Lorsque vous utilisez un seul drapeau pour représenter ces langues, vous faites un choix arbitraire qui exclut la majorité des locuteurs.
Certaines langues font face à un défi encore plus complexe car elles manquent d'un État-nation correspondant. Le kurde est parlé par des millions de personnes à travers la Turquie, l'Irak, l'Iran et la Syrie, mais n'a pas de drapeau national. Il en va de même pour le catalan, qui est parlé dans des parties de l'Espagne, de la France et d'Andorre. Pour ces langues, choisir un drapeau devient impossible sans créer de tensions politiques ou culturelles.
Il existe également des langues régionales et des dialectes qui n'ont pas de frontières politiques. En un mot, lorsque votre localisation de sites Web besoin d'inclure ces langues, les systèmes de sélection basés sur des drapeaux ne peuvent tout simplement pas les prendre en compte.
Reconnaissance des drapeaux et problèmes d'accessibilité liés aux systèmes utilisant uniquement des drapeaux
La plupart des gens peuvent identifier des drapeaux courants tels que ceux des États-Unis, du Royaume-Uni, de la France et de l'Allemagne. Cependant, les drapeaux de pays plus petits ou ceux dont les conceptions sont similaires peuvent perturber les visiteurs. Par exemple, sauriez-vous distinguer lequel de ces drapeaux est roumain et lequel est tchadien ?
Toutes deux utilisent des bandes verticales de bleu, de jaune et de rouge. La confusion s'étend aux drapeaux qui se ressemblent à petite échelle, où les détails deviennent difficiles à discerner.
Les commutateurs à drapeau seul peuvent souvent échouer normes d'accessibilité Aussi. Tout comme les autres images, les lecteurs d'écran ne peuvent pas interpréter les images de drapeaux sans texte alternatif approprié. Même avec un texte alternatif, l'expérience reste sous-optimale. Les utilisateurs malvoyants bénéficient beaucoup plus de libellés textuels qui indiquent clairement le nom de la langue.
Quand les indicateurs peuvent fonctionner pour votre site
J'ai dressé un tableau légèrement négatif de l'utilisation des indicateurs, mais ils pouvoir fonctionnent dans certains contextes limités. Il est important de reconnaître ces exceptions car elles représentent des situations où l'attrait visuel des drapeaux l'emporte sur la confusion potentielle.
Le facteur clé de ces exceptions est que les drapeaux servent d'éléments visuels complémentaires plutôt que de seul moyen de communication. Lorsque vous combinez des drapeaux avec des libellés textuels clairs, vous bénéficiez de l'atout visuel des drapeaux tout en préservant l'ergonomie et l'accessibilité. Cette approche hybride permet d'allier attrait visuel et clarté.
Sites avec peu de langues reconnaissables
Si votre site ne prend en charge que deux ou trois langues ayant de fortes associations nationales, les drapeaux peuvent servir d'indicateurs visuels efficaces. Un site web touristique proposant du contenu en anglais et en français pourrait utiliser des drapeaux ‘ ancres ’ à côté des noms de langues sans créer de confusion.
Le Découvrez l'Italie Le site touristique utilise cette approche.
Avec un choix de langues limité, la combinaison drapeau-plus-nom fonctionne parce que les choix de langues sont clairs et que le public cible attend ces options spécifiques.
Contenu et commerce électronique spécifiques à un pays
Les sites avec un contenu fort spécifique à un pays peuvent également utiliser des drapeaux avec efficacité. Si vous gérez des versions distinctes de votre site pour les États-Unis, le Canada et le Royaume-Uni, chacune avec un contenu, des prix et des informations d'expédition localisés, les drapeaux de pays ont du sens. Dans ce cas, vous basculez l'ensemble des expériences spécifiques à chaque pays.
Par exemple, Amazon utilise des drapeaux dans les éléments de sa navigation globale parce que chaque drapeau représente un marché complètement différent avec un inventaire, des prix et des options de livraison uniques.
Ici, les drapeaux communiquent l'emplacement géographique plutôt que de simples préférences linguistiques, ce qui correspond à la façon dont sa plateforme fonctionne.
Les problèmes des implémentations courantes basées sur des indicateurs
On peut souvent observer des erreurs de mise en œuvre spécifiques qui s'ajoutent aux problèmes liés à l'utilisation de sélections basées uniquement sur des drapeaux. Par exemple, de nombreux sites utilisent des drapeaux dans des menus déroulants sans aucun texte d'accompagnement. L'utilisateur verra une petite icône de drapeau dans l'en-tête, cliquera dessus et se retrouvera face à une liste d'autres drapeaux.
Cette approche pose problème car, d'une part, les utilisateurs doivent comprendre qu'ils peuvent cliquer sur le drapeau pour accéder aux options de langue. Ensuite, ils doivent identifier chaque drapeau dans le menu. C'est pire sur mobile car il est facile de sélectionner accidentellement la mauvaise langue. Quoi qu'il en soit, le résultat est une mauvaise expérience utilisateur.
En parlant de mobile, les drapeaux ont besoin d'assez de pixels pour être reconnaissables, mais les sélecteurs de langue occupent souvent un espace limité sur l'écran. Lorsque vous réduisez les drapeaux pour les faire tenir dans un menu compact, les détails qui permettent de distinguer des drapeaux similaires disparaissent.
Comment présenter les langues de la bonne manière (3 conseils)
À mon avis, la meilleure approche pour présenter une langue combine plusieurs éléments qui fonctionnent ensemble pour créer de la clarté. Voici quelques conseils pour vous aider à réussir du premier coup.
1. Toujours utiliser les noms dans la langue d'origine
Les noms de langues doivent toujours apparaître dans leur forme d'origine. Si vous proposez l'allemand, affichez-le “ Deutsch ” plutôt que “ German ”. Les noms de langues d'origine fonctionnent parce que les gens reconnaissent leur propre langue même lorsqu'elle est entourée de texte étranger.
Le site web de la BBC démontre ce principe à travers ses services mondiaux.
Chaque version linguistique affiche les langues dans leurs écritures et noms d'origine. Cette approche garantit que les visiteurs peuvent trouver leur langue qu'ils parlent l'arabe, le bengali, l'hindi ou l'une des autres langues prises en charge par la BBC.
2. Tenir compte des codes de langue pour les mises en page à espace restreint
Les codes de langue peuvent constituer une alternative compacte lorsque l'espace est limité. Codes ISO 639-1 tels que “ EN ”, “ ES ” et “ FR ” prennent un espace minimal et fonctionnent bien dans les mises en page restreintes. Cependant, je recommande de n'utiliser les codes que lorsque l'espace l'exige absolument, car ils supposent que les utilisateurs comprennent ces abréviations standardisées.
TranslatePress propose une option permettant, d’un simple clic, d’utiliser des codes de langue plutôt que les noms complets. Cependant, le problème est que de nombreux internautes ne connaissent pas la signification, par exemple, de “ PT ” pour le portugais ou de “ NL ” pour le néerlandais. Ces codes fonctionnent mieux auprès d’un public technique ou sur des sites où les utilisateurs sont familiers avec les abréviations linguistiques. Les plateformes financières et les outils de développement utilisent souvent ces codes avec succès, car leur public les comprend.
3. Gérer les langues de droite à gauche
Les langues de droite à gauche (RTL), telles que l'arabe, l'hébreu et le persan, nécessitent une attention particulière car l'ensemble de votre site (et par conséquent votre sélecteur de langue) doit s'inverser pour les langues RTL. Les combinaisons drapeau-plus-nom doivent s'inverser, le drapeau apparaissant sur le côté droit du texte.
TranslatePress prend en charge les langages RTL détecte automatiquement lorsqu'une langue utilise une écriture de droite à gauche et ajuste le site. Cela garantit que votre sélecteur de langue conserve un flux de lecture approprié, quelle que soit la langue sélectionnée par l'utilisateur.
Options de changement de langue de ’ TranslatePress »
TranslatePress propose plusieurs options d'affichage flexibles qui permettent de résoudre la ‘ polémique autour des drapeaux ’ tout en vous laissant le contrôle sur l'apparence de votre site.
TranslatePress Multilingue
Il est recommandé d'afficher les drapeaux à côté du nom complet du pays. C'est le réglage par défaut de TranslatePress, et cela fonctionne bien car c'est visuellement clair. C'est un excellent compromis, en particulier pour sites e-commerce multilingues où une communication claire est essentielle pour les conversions. Cependant, si votre conception opte pour une approche plus compacte, vous pouvez afficher des drapeaux avec des codes de langue au lieu des noms complets.
Si vous souhaitez éviter complètement l'utilisation des indicateurs, TranslatePress vous permet d'afficher uniquement les noms dans la langue d'origine. Cela évite toute confusion potentielle tout en garantissant la clarté.
Bien que le sélecteur prenne un peu plus d'espace horizontal, il élimine toute ambiguïté quant à la langue que représente chaque option.
Enfin — et oui, je vais me contredire un peu — vous pourriez aussi choisir d'afficher uniquement des drapeaux ! Les sites proposant un petit nombre de langues largement reconnues pourraient préférer cette approche visuelle, bien que vous veilliez à respecter les critères que j'ai mentionnés plus tôt. Après tout, il s'agit d'une option spécifique pour un usage précis.
Configuration du sélecteur de langue dans TranslatePress
La configuration de la langue d'affichage de votre choix dans TranslatePress est simple et rapide à mettre en œuvre. Commencez par vous rendre sur Paramètres → TranslatePress dans WordPress. Dans le Sélecteur de langue section, vous verrez des options pour le sélecteur de langue flottant ainsi que pour d'autres méthodes d'affichage telles que les éléments de menu et les shortcodes.
Vous pouvez ouvrir Personnaliser la mise en page panneau pour positionner les drapeaux ou les masquer complètement. Le Conception personnalisée Le panneau vous offre également des options supplémentaires pour afficher les drapeaux :
En passant, vous pouvez définir vos codes de langue et vos identifiants (slugs) sur le Général onglet. Une fois vos modifications enregistrées, TranslatePress appliquera vos choix.
Où placer votre sélecteur de langue
Bien que ce billet ne concerne pas la conception de sélecteurs de langue, je faire Je souhaite aborder son emplacement le plus optimal avant de conclure, car cela influence la facilité avec laquelle les visiteurs peuvent le trouver et l'utiliser. Votre sélecteur peut être placé à quatre endroits distincts :
- Dans l'en-tête.
- Dans le pied de page.
- Flottant en fonction de la zone d'affichage de la page et du comportement de défilement de l'utilisateur.
- Dans votre menu de navigation.
L'en-tête ou le pied de page conviennent bien à la plupart des sites web, en particulier lorsque vous placez votre sélecteur de langue dans le coin supérieur ou inférieur droit. Le TranslatePress Aperçu du commutateur l'affichage vous donne une indication rapide de l'apparence, mais un aperçu du site en plein écran sera une meilleure option.
Il semble logique d'avoir le sélecteur de langue dans l'en-tête, mais personnellement, je suis plutôt enclin à chercher dans le pied de page si le sélecteur n'est pas flottant.
En général, placer le sélecteur dans le pied de page a du sens lorsque la sélection de la langue s'effectue une seule fois au début de la visite de l'utilisateur. Si la plupart des utilisateurs arrivent sur votre site dans leur langue préférée via moteurs de recherche ou détection automatique, il est probable que l'accès constant aux options linguistiques ne soit pas une priorité.
La configuration par défaut de ’ TranslatePress » est un sélecteur de langue flottant, sous la forme d'un bouton qui suit les utilisateurs lorsqu'ils font défiler la page. Il s'agit d'une méthode moderne permettant de garder les options de langue accessibles sans occuper d'espace dans l'en-tête ni ailleurs sur la page.
Pour les sites comportant plusieurs niveaux de menu ou une navigation complexe, l'ajout du sélecteur de langue à votre menu de navigation principal constituera une option judicieuse. Options de changement de langue de ’ TranslatePress » incluez des menus distincts pour le mode flottant, les menus et l'intégration par codes courts, afin de disposer d'une grande flexibilité.
TranslatePress rend le choix de la langue simple et clair
’ TranslatePress » Les options du sélecteur de langue vous permettent de commencer avec des paramètres par défaut judicieux qui conviennent à la plupart des sites, que vous pouvez ensuite personnaliser pour répondre à vos besoins spécifiques. Choisir les bons paramètres d'affichage pour les drapeaux et la langue associée permettant d'identifier le pays fera des merveilles pour votre expérience utilisateur (UX) et, par conséquent, pour la réputation de votre site.
TranslatePress Multilingue
Les options de paramètres simples (mais puissantes) de ’ TranslatePress » vous permettent de présenter votre sélecteur de langue de la manière la plus adaptée à votre site web. Bien sûr, le plugin vous permet également d’utiliser les traductions automatiques, l’édition manuelle et les fonctionnalités de référencement naturel (SEO) afin de créer une solution de traduction complète et aboutie.
Allez-vous repenser votre stratégie en matière d'affichage des icônes de drapeaux de langues ? Partagez vos réflexions avec moi dans la section des commentaires ci-dessous !
