Dans un monde de plus en plus connecté, les sites web multilingues sont de plus en plus courants. Mais comment les concevoir ? C'est un peu plus compliqué qu'on ne le pense, surtout si l'on considère les modifications qu'il faudra apporter à la conception de votre site.

Les principes de base sont simples : avec Weglot, vous pouvez ajouter différentes langues à votre site e-commerce en moins de 5 minutes. Ensuite, à vous de décider où vous souhaitez positionner votre sélecteur de langue. Vous devez aussi adapter votre mise en page à tous les utilisateurs. En effet, certains utilisateurs peuvent passer d'une langue qui se lit de gauche à droite à une langue qui se droite à gauche (right-to-left, RTL). L'utilisation de couleurs, d'images et d'icônes doivent être adaptées à la culture de la langue cible.

Dans ce guide, nous allons examiner quelques-unes des considérations les plus importantes en matière de conception pour vous aider à planifier un site web multilingue dans les règles de l'art.

1. Utiliser des modèles globaux pour une image de marque cohérente

Lorsque qu'un visiteur arrive sur votre site multilingue, vous voulez qu'il ait une expérience utilisateur cohérente, quelle que soit la langue de l'interface par laquelle il y accède. Cela signifie que l'image de marque et le design de votre site doivent être les mêmes pour un visiteur qui se rend sur l'interface du site en langue anglaise, qu'il soit indien ou chinois.

Vous ne pouvez pas empêcher les visiteurs bilingues ou multilingues de naviguer dans les différentes interfaces de votre site multilingue, mais vous pouvez en revanche vous assurer qu'ils voient la même image de marque, la même mise en page et les mêmes éléments de conception web lorsqu'ils changent la langue par défaut.

Si vous utilisez un système de gestion de contenu, comme WordPress, grâce à Weglot il est facile de créer un site web multilingue cohérent. Weglot s'intègre de manière transparente au thème de votre constructeur de site Web et traduit automatiquement votre contenu. Il s'intègre également à toutes les autres parties importantes de la fonctionnalité de votre site, comme les plugins de commerce électronique. De fait, vous n'avez pas besoin d'avoir des thèmes ou des conceptions différents pour les différentes langues que vous ajoutez à votre site Web multilingue.

Par exemple, lorsque vous visitez la page d'accueil d'Airbnb depuis un pays comme l'Australie...

... et que vous passez ensuite sur l'interface en japonais, le design et l'image de marque sont cohérents dans les deux langues.

Non seulement le fait d'avoir un design immédiatement reconnaissable contribue à renforcer votre image de marque, mais il facilitera les mises à jour futures de votre site web multilingue et réduira les maux de tête lorsque les différentes langues nécessiteront des modifications de l'interface utilisateur ou de l'interface graphique.

2. Faire en sorte que le sélecteur de langue soit vraiment facile à trouver

Votre menu de changement de langue doit être bien visible sur votre page d'accueil, mais aussi sur toutes les pages de votre site. Sur certains sites web multilingues, le sélecteur de langue se trouve dans l'en-tête ou le pied de page.

Où que vous choisissiez de positionner le menu de langue sur votre site multilingue, faites en sorte qu'il soit vraiment facile à trouver.

Assurez-vous également que vos options de changement de langue sont parfaitement claires. Indiquez la langue directement dans sa traduction : utilisez « Deutsch » au lieu de « Allemand » et « 日本語 » au lieu de « Japonais ».

Asana, par exemple, utilise un menu déroulant avec les noms des différentes langues disponibles :

En résumé, vous voulez que les visiteurs de votre site multilingue se sentent les bienvenus, quelle que soit la langue qu'ils parlent. Plus votre sélecteur de langue est facile à trouver, et plus vous améliorez l'expérience d'utilisation (UX).

3. Laisser les visiteurs choisir leur langue préférée

Spontanément, on imagine que les utilisateurs peuvent facilement choisir leur langue de préférence. Mais en réalité, de nombreux sites multilingues rendent la tâche très difficile : ils obligent les utilisateurs à changer de région.

Les grandes marques sont les pires coupables. Vous en trouverez souvent qui vous obligent à changer la région de leur site multilingue (par exemple, passer de www.adobe.com à www.adobe.com/us/) alors que vous voulez simplement changer la langue par défaut.

Ce n'est pas parce qu'une personne parle hindi qu'elle veut accéder à la version du site multilingue conçue pour la région où cette langue est parlée. Que faire si les visiteurs vivent à New York et veulent acheter sur le site américain, mais qu'ils veulent lire le site en hindi ? Ne les empêchez pas d'acheter sur votre site multilingue - aidez-les à accéder à votre contenu dans leur langue de préférence.

Voici un exemple d'entreprise qui laisse les visiteurs choisir leur langue préférée : Uber affiche ses options de changement de langue dans le pied de page :

Lorsque vous cliquez sur "English", une fenêtre modale apparaît, vous permettant de choisir votre langue préférée entre l'anglais et le français :

Cet interface de changement de langue sur le site d'Uber permet au visiteur de choisir sa langue de préférence, sans l'obliger à changer de région. C'est un avantage majeur !

Si vous souhaitez améliorer encore l'expérience utilisateur de vos visiteurs, pensez à « mémoriser » leur langue par défaut. La prochaine fois qu'ils se rendront sur votre site multilingue, celui-ci se chargera automatiquement dans leur langue maternelle.

Autodétection des langues

De nombreux sites web multilingues détectent la langue maternelle du navigateur web pour définir automatiquement la langue principale des utilisateurs.

Bien que cela permette aux utilisateurs de gagner du temps, la détection automatique de la langue n'est pas une science exacte. Il est important de garder à l'esprit que certains utilisateurs peuvent tomber sur la « mauvaise » interface de votre site multilingue.

Votre site multilingue peut détecter automatiquement un utilisateur qui se trouve en Espagne et s'afficher en espagnol. Cependant, cet utilisateur peut très bien être anglophone et ne pas comprendre l'espagnol !

Si vous prévoyez une détection automatique de la localisation de vos visiteurs, proposez également un sélecteur de langue afin de leur offrir la possibilité de choisir différentes langues.

Drapeaux et noms de langues

Les drapeaux sont souvent utilisés pour indiquer une langue, mais il convient de garder à l'esprit certains aspects contextuels:

• Les drapeaux représentent des pays, pas des langues.
• Un pays peut avoir plusieurs langues officielles.
• Une langue peut être parlée dans plusieurs pays.
• Les visiteurs peuvent ne pas reconnaître un drapeau (en raison de la taille de l'icône), ou être perturbés par des drapeaux similaires.

Concrètement, il faut proposer des options de sélection de langue faciles à comprendre dans n'importe quelle langue.

4. Tenir compte de l'expansion du texte

Lorsqu'on traduit un texte d'une langue vers une autre, comme avec Google Translate, la longueur du texte original diffère de celle de sa traduction. Cela peut être un défi pour prévoir la mise en page de votre site.

Certaines langues sont plus concises que d'autres à l'écrit. Les langues comme le japonais et le chinois utilisent un ou deux caractère(s) pour donner une information qui nécessite plusieurs mots dans d'autres langues.

Des langues comme l'espagnol et l'anglais sont très prolixes et nécessitent parfois plus de 30 % d'espace supplémentaire par rapport à d'autres langues.

Le guide du W3C sur la taille du texte dans les traductions, que je recommande vivement de lire dans son intégralité, donne d'excellents conseils.

Le W3C souligne pourquoi les outils de traduction automatique doivent nécessairement disposer d'éléments d'interfaces utilisateur adaptables, tels que des boutons, des champs de saisie et du texte descriptif.

Par exemple, lorsque Flickr a été traduit dans différentes langues, les créateurs ont dû tenir compte du texte situé sous les photos et indiquant le nombre de vues.

Le tableau comparatif ci-dessous présente les longueurs du mot « view » dans différentes langues par rapport à l'anglais original :

De l'anglais à l'italien, le texte est de 300 % plus long !

Il ne faut pas oublier que la largeur du texte augmente ou diminue selon la langue sur votre site web multilingue. Gardez également à l'esprit que plus le texte source est petit, plus la traduction risque d'être longue. Si vous avez un problème d'espace, trouvez une traduction différente, moins littérale, ou modifiez la taille de la police en fonction de la nouvelle langue.

La hauteur des caractères et des lignes est un autre aspect à ne pas négliger. Il arrive souvent que les caractères des textes non latins soient beaucoup plus hauts que ceux des textes latins. Les écritures comme l'arabe nécessitent également un espace vertical plus important entre les lignes que les langues latines.

5. Tenir compte de la compatibilité et de l'encodage des polices Web

Le W3C recommande de toujours spécifier l'encodage de vos pages web. Il recommande d'utiliser UTF-8 pour s'assurer que les caractères spéciaux s'affichent correctement, quelle que soit la langue.

Voici comment déclarer l'encodage en UTF dans l'en-tête de vos pages :

Toutes les polices web que vous utilisez doivent être compatibles avec l'ensemble des langues - hormis l'anglais - que votre site WordPress multilingue prend en charge, et tout particulièrement avec les langues non latines. Cela signifie que les polices que vous utilisez doivent contenir tous les caractères et les glyphes nécessaires.

Certaines polices peuvent prendre en charge les caractères latins, mais pas le RTL ou le cyrillique. Vérifiez donc que les langues autres que l'anglais dont vous avez besoin sont incluses avant de vous décider dans le choix d'une police.

Google Fonts, par exemple, vous permet de choisir les langues avant de télécharger un ensemble de polices :

Une seule langue peut comporter des centaines de caractères, ce qui peut rendre les fichiers de polices de caractères très volumineux - un autre élément qu'il faut garder à l'esprit lors du choix des polices pour votre site web multilingue.

6. Conception pour les langues de droite à gauche

La conception de pages pour les langues de droite à gauche peut poser des problèmes. Comme l' écrit Robert Dodis, développeur chez SteelKiwi, pour Smashing Magazine, la conception pour les langues de droite à gauche signifie "inverser l'interface".

Par exemple, voici à quoi ressemble le design de gauche à droite de Facebook :

Et voici à quoi ressemble le design de droite à gauche de Facebook, en arabe :

Remarquez que même la barre de défilement change de position !

La mise en miroir de votre conception est un élément que vous devez prendre en compte si vous traitez à la fois les langues LTR et RTL.

Je recommande vivement la lecture de l'article de Robert dans Smashing Magazine pour un aperçu détaillé de la manière de concevoir pour le RTL. Je ne veux pas réinventer la roue ici, alors lisez son tutoriel. Je veux vous montrer comment Weglot supporte les langues RTL et peut faciliter le processus de traduction pour votre site web multilingue.

Le service de traduction de Weglot prend en charge les langues RTL et, grâce aux règles CSS, vous pouvez adapter la mise en page de votre site multilingue à ces langues. Voici quelques-unes des langues RTL disponibles.

• arabe (ar)
• hébreu (he)
• persan (fa)
• urdu (ur)

Après avoir ajouté une langue RTL à votre site multilingue avec Weglot, vous pouvez personnaliser son affichage en appliquant des règles CSS à votre mise en page. Dans l'administration de WordPress, allez dans Weglot > Language button design (Optional) et descendez jusqu'à Override CSS. Ajoutez toutes les règles CSS que vous souhaitez dans la zone de texte - vous pouvez modifier la police, la taille, la hauteur de ligne et plus encore pour adapter la langue principale à votre design.

C'est tout ce que vous avez à faire pour ajouter et styliser des langues RTL avec Weglot ! Vous pouvez en savoir plus sur la façon dont Weglot supporte les langues RTL dans la documentation.

7. Utiliser des images et des icônes culturellement appropriées

Les images, icônes et autres graphiques sont des éléments essentiels de toute page web. Mais les éléments visuels, par leur nature même, sont subjectifs et peuvent être interprétés de différentes manières lorsqu'ils sont placés dans un autre contexte culturel.

Par exemple, la version française de la page d'accueil de Clarins présente une femme européenne :

Mais lorsque vous visitez la page d'accueil japonaise de l'entreprise, vous y voyez l'image d'une femme japonaise :

Les images ont également le potentiel d'offenser. Des images qui peuvent sembler innocentes au public occidental peuvent être taboues dans un autre pays. Par exemple, des images représentant des couples homosexuels ou l'égalité des sexes ne seraient pas acceptées dans des pays où l'homosexualité est encore illégale et où les droits des femmes ne sont pas encore pleinement reconnus.

Vous devrez également tenir compte de petits éléments, comme les icônes, et de la signification qu'ils peuvent avoir pour certains visiteurs de votre site multilingue, selon leur pays d'origine. Par exemple, un visiteur australien anglophone et un visiteur africain interpréteront de manière très différente l'icône d'un globe terrestre.

La troisième icône ci-dessus représente un globe terrestre, mais elle n'indique pas de pays ou de région spécifique, ce qui la rend plus appropriée pour un site web multilingue.

Il faut aussi passer en revue les images et autres éléments graphiques en tenant compte des sensibilités régionales et culturelles.

Évitez d'utiliser des images et autres graphiques contenant du texte intégré. Vous ne pourrez pas traduire le texte intégré avec des outils tels que Weglot, alors évitez-le, tout simplement.

8. Utiliser des couleurs adaptées à la culture

La façon dont les différentes cultures voient et interprètent la couleur varie considérablement dans le monde.

Par exemple, dans la culture occidentale, le rouge symbolise l'amour, l'énergie, la passion et le danger. Dans les cultures asiatiques, c'est une couleur très importante, qui symbolise la chance, la prospérité, la fête et une longue vie. Inversement, dans certains pays africains, le rouge est associé à la mort et à l'agression.

Le bleu est considéré comme le choix de couleur le plus sûr et le plus globalement accepté pour le design, car il a de nombreux aspects positifs. C'est une couleur douce et apaisante, bien qu'elle soit également associée à la tristesse et à la dépression. La couleur bleue est également la plus utilisée par les banques pour leur logo, car elle symbolise la confiance et l'autorité.

Lorsque vous choisissez des couleurs pour la conception de votre site web multilingue, veillez à rechercher sur Google le symbolisme associé aux couleurs que vous envisagez d'utiliser.

9. Dates et autres formats

Les pays n'utilisent pas tous le même format de date, même en anglais. Au Royaume-Uni et en Europe, par exemple, il est courant d'afficher la date au format jour-mois-année, alors qu'aux États-Unis, on utilise le format mois-jour-année.

Pour favoriser le référencement, vous pouvez aussi adapter les unités de mesure au pays ciblé. Bien que 90 % du monde ait recours au système métrique, les États-Unis, le Liberia et le Myanmar utilisent toujours le système impérial d'unités de poids et mesures.

Choisir le bon plugin de traduction WordPress pour votre design

Les plugins de traduction WordPress sont de toutes formes et de toutes tailles, et la façon dont ils s'intègrent à votre design particulier varie considérablement. Weglot est une solution qui s'intègre parfaitement à votre site multilingue.

Vous pouvez même utiliser l'éditeur visuel de Weglot pour traduire votre contenu sur le front-end de votre site et dans les sous-domaines afin de voir comment il se présente dans le contexte de la conception et de la mise en page de votre site, à l'instar de Google Translate.

Avec Weglot, le design et l'emplacement de votre sélecteur de langue sont 100 % personnalisables. Le bouton par défaut a été conçu pour s'adapter à n'importe quel site, mais vous pouvez également modifier son style via une CSS personnalisée, qui vous permet d'utiliser le format de votre choix.

De plus, Weglot applique les principes de conception exposés dans ce post, notamment :

• Utilisation d'un modèle mondial, pour une image de marque cohérente
• Options de changement de langue faciles à trouver
• Possibilité pour les visiteurs de choisir leur langue de préférence
• Encodage UTF automatique
• Prise en charge des langues RTL

Jetons un coup d'œil à la fonctionnalité la plus importante de Weglot en matière de design : la personnalisation de votre sélecteur de langue.

Personnaliser les options de changement de langue de votre site avec Weglot

Après avoir installé le plugin Weglot sur votre site WordPress multilingue et l'avoir configuré, vous serez invité à entrer votre clé API, votre langue par défaut et la langue dans laquelle vous souhaitez traduire votre contenu, comme Google Translate.

Si vous n'avez pas encore de compte Weglot, vous devrez en créer un pour obtenir votre clé API.

Une fois que vous avez enregistré vos modifications, jetez un coup d'œil au front-end de votre site. Votre nouveau sélecteur de langue WordPress se trouve dans le coin inférieur droit. Lorsque vous cliquez dessus, il affiche les langues disponibles et permet se sélectionner la langue de votre choix dans l'interface.

Pour commencer à effectuer des personnalisations de base, allez dans Weglot > Language button design (Optional). Dans cet écran, vous pouvez choisir :

• Utilisation ou non d'une liste déroulante
• Utilisation ou non des drapeaux
• Types de drapeaux
• Afficher le nom des langues
• Afficher uniquement le code des langues

La section Override CSS est l'endroit où vous pouvez appliquer des règles CSS pour styliser l'apparence de votre sélecteur de langue sur votre site web multilingue. Par exemple, vous pouvez :

• Enlever la flèche sur le bouton
• Modifier la couleur de l'arrière-plan
• Ajouter une barre de défilement
• Retirer la bordure
• Ajouter du remplissage

Weglot fournit quelques exemples dans cet article sur la personnalisation du design des boutons de langue.

En faisant défiler l'écran de configuration de Weglot, vous trouvez des instructions sur la façon de positionner le sélecteur de langue :

• Dans le menu. Allez dans Apparence -> Menus et faites glisser le lien Weglot Translate Custom à l'endroit souhaité.
• En tant que widget. Allez dans Apparence -> Widgets et glissez-déposez le widget Weglot Translate à l'endroit de votre choix.
• Avec un shortcode. Utilisez le shortcode Weglot [ weglot_switcher ] (sans les espaces) pour placer votre sélecteur de langue où vous le souhaitez.
• In the source code. You can add the code <div id=”weglot_here”></div> wherever you want in the source code of your HTML page.

Pour vous montrer comment le sélecteur de langue peut être personnalisé sur un site web multilingue (qu'il s'agisse d'un site WordPress, Shopify ou autre), vous pouvez voir ci-dessous comment Patyka affiche le sélecteur de langue dans le coin supérieur gauche de la page.

Les langues s'affichent par nom, et lorsque vous cliquez sur le bouton et choisissez une langue, le contenu de la page est mis à jour et traduit dans la langue choisie.

Étude de cas : Maestrooo utilise Weglot

Fondée en 2013, Maestrooo est une agence de développement web basée en France qui compte From Future et Patyka parmi ses clients. Maestrooo gère aujourd'hui la majorité des clients Shopify Plus en France.

Maestrooo était à la recherche d'une solution de site web multilingue solide et fiable, qui pourrait facilement s'adapter aux exigences de ses clients. Après avoir testé de nombreuses solutions et constaté qu'elles présentaient des problèmes de référencement ou de gestion de hreflang, l'équipe a découvert Weglot.

Weglot traduit tout le contenu des sites des clients de Maestrooo, qu'il s'agisse de contenu dynamique, de contenu généré par d'autres applications ou même du processus de paiement, sans impacter la mise en page de leur site web multilingue.

En plus de concevoir des sites web personnalisés pour ses clients, Maestrooo développe également les thèmes officiels de la boutique de thèmes de Shopify. Alors que d'autres solutions de sites web multilingues altèrent souvent le formatage des thèmes de Maestrooo, Weglot fournit une solution de traduction qui fonctionne à tous les coups.

Maestrooo aide entre 8 000 et 12 000 clients à démarrer avec Shopify chaque année en utilisant Weglot pour leur site web multilingue.

Optimisation culturelle totale grâce à une conception localisée

Chacun des principes de conception que nous avons explorés dans ce billet vous mettra sur la voie de la création d'un site web multilingue d'une grande qualité esthétique et offrant une expérience agréable à l'utilisateur.

Pour offrir aux visiteurs de votre site et à vos clients une expérience exceptionnelle dans leur langue maternelle, il est également utile de ne pas vous arrêter à votre site multilingue. Pensez à traduire vos documents marketing et votre support client.

Tenez également compte de la vitesse et des performances de votre site multilingue. Dans certains pays qui n'ont pas la chance de disposer d'un accès rapide à Internet, le téléchargement de packs linguistiques volumineux rend l'accès à votre contenu plus difficile pour les visiteurs.

Avec le bon plugin de traduction de site web multilingue et un site conçu de manière à offrir des options de traduction faciles à utiliser, vos clients pourront bénéficier d'une expérience et d'une interface utilisateur visuellement attrayantes, disponibles dans leur langue de préférence.