9 conseils pour réussir le design d'un site web multilingue

Dans un monde de plus en plus connecté, les sites web multilingues deviennent monnaie courante. Mais en concevoir le design est un peu plus compliqué qu'on ne pourrait le penser, d'autant que cela implique d'apporter des modifications au design de votre site d'origine.

Les principes de base sont simples : avec Weglot, vous pouvez ajouter différentes langues à votre site en moins de 5 minutes. Mais vous devez ensuite réfléchir à l'emplacement de votre sélecteur de langue, à la restructuration de vos pages lorsqu'un utilisateur passe du français à une langue s’écrivant de droite à gauche, et à l'utilisation de couleurs, d'images et d'icônes culturellement appropriées.

Dans ce guide, nous allons examiner quelques-uns des points les plus importants en matière de design pour vous aider à préparer un site web multilingue dans les règles de l'art.

1. Utilisez des modèles mondiaux, pour une image de marque cohérente

Lorsque qu'un visiteur atterrit sur votre site multilingue, il doit vivre la même expérience quelle que soit la langue dans laquelle il y accède. Autrement dit, un visiteur indien se rendant sur la version anglaise de votre site doit voir les mêmes marqueurs visuels et le même design que sur la version hindie. 

Vous ne pouvez pas empêcher des visiteurs bilingues voire multilingues de voir les différentes versions de votre site multilingue, mais vous pouvez vous assurer qu'ils retrouvent la même marque, la même mise en page et le même design lorsqu'ils changent la langue par défaut.

Si vous utilisez un système de gestion de contenu comme WordPress, Weglot vous permet de créer facilement un site web multilingue homogène. Weglot s'intègre de manière fluide au thème de votre constructeur de site web et traduit automatiquement votre contenu. Il s'interface également à tous les autres éléments importants du fonctionnement de votre site, comme les plugins de e-commerce. Ainsi, pas besoin de prévoir des thèmes ou designs différents pour les différentes langues que vous ajoutez à votre site web.

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

... et que vous basculez ensuite sur la version japonaise, le design et l'identité de marque sont homogènes dans les deux langues.

Un design immédiatement reconnaissable va non seulement aider à renforcer votre image de marque, mais aussi faciliter les futures mises à jour de votre site web multilingue et vous épargnera bien des migraines lorsque des langues différentes
nécessiteront de modifier l'interface utilisateur ou l'interface graphique.

2. Mettez bien en évidence le sélecteur de langue

Votre menu de sélection de langue doit être clairement visible sur votre page d'accueil, mais aussi sur toutes les autres 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 sélecteur de langue sur votre site multilingue, assurez-vous qu'il soit vraiment évident à trouver.

Assurez-vous également de rendre la liste des langues disponibles parfaitement claire. Il est recommandé de désigner les langues dans leur version native. Par exemple, utilisez « Deutsch » et non « Allemand » et « 日本語 » au lieu de « Japonais ».

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

Les visiteurs de votre site multilingue doivent donc se sentir les bienvenus, quelle que soit leur langue. Mettre en évidence votre sélecteur de langue y contribuera indéniablement.

3. Laissez les visiteurs choisir la langue qu'ils préfèrent

On pourrait imaginer que laisser aux utilisateurs le choix de leur langue de préférence est une évidence. Mais en réalité, de nombreux sites multilingues rendent cette opération très difficile. Ils préfèrent obliger les utilisateurs à changer de zone géographique.

Les grandes marques tendent à être les pires. Nombre d’entre elle vous obligeront à modifier la zone de leur site multilingue (c'est-à-dire à passer de www.adobe.com à www.adobe.com/fr/) alors que vous voulez simplement changer la langue par défaut.

Un locuteur hindi ne veut pas nécessairement basculer sur la version de votre site multilingue conçue pour la zone où cette langue est parlée. Et s'il vit à New York et souhaite acheter sur le site américain, tout en visualisant le site en hindi ? Ne l'empêchez pas d'acheter sur votre site multilingue, aidez-le plutôt à accéder à votre contenu dans sa langue de prédilection.

Voici le parfait exemple d'une entreprise qui permet réellement aux visiteurs de choisir leur langue de préférence : Uber affiche ses options de changement de langue dans le pied de page :

Un clic sur « Français » ouvre un pop-up vous permettant de choisir votre langue de préférence entre Français et English :

Cet interface de sélection de langue sur le site d'Uber a le mérite de permettre au visiteur de choisir sa langue de préférence, sans l'obliger à changer de zone.

Si vous souhaitez améliorer encore l'expérience utilisateur, 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.

Détection automatique des langues

De nombreux sites web multilingues détectent la langue d'utilisation des navigateurs web pour définir automatiquement la langue maternelle des utilisateurs.

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

Votre site multilingue peut détecter automatiquement un utilisateur situé en Espagne et s'afficher en espagnol. Cependant, ce visiteur pourrait être anglophone et ne pas comprendre l'espagnol !

Si vous prévoyez d'utiliser la détection automatique, proposez donc également un sélecteur de langue afin de leur offrir la possibilité de choisir des langues différentes.

Weglot offre la possibilité de rediriger automatiquement vos visiteurs en fonction de la langue de leur navigateur. Découvrez Weglot en action sur votre site web avec un essai gratuit de 14 jours.

Drapeaux vs noms des langues

Les drapeaux sont souvent utilisés pour désigner des langues, mais il est important de garder à l'esprit certains enjeux contextuels :

• Les drapeaux représentent des pays, et non 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 confondre des drapeaux similaires.

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

4. Tenez compte du foisonnement des textes

Lors de la traduction d'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 compliquer la mise en page de votre site.

Certaines langues sont plus concises que d'autres à l'écrit. Des langues comme le japonais et le chinois utilisent un ou deux caractères pour livrer une information nécessitant plusieurs mots dans d'autres.

Des langues comme l'espagnol et l'anglais sont très bavardes et prennent parfois plus de 30 % d'espace en plus que d'autres langues.

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

Le W3C explique notamment pourquoi les outils de traduction automatique doivent impérativement permettre d'adapter tous les aspects de l'interface utilisateur adaptables : boutons, champs de saisie, textes descriptifs, etc.

Par exemple, lors de la traduction de Flickr
dans d'autres langues, les designers ont dû prendre en compte le texte situé sous les photos et indiquant le nombre de consultations.

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

De l'anglais à l'italien, le foisonnement s'élève à 300 % !

Le point important est que la largeur du texte augmente ou diminue naturellement. Veillez donc à ce que site web multilingue intègre ce paramètre. Gardez également à l'esprit que plus le texte source est court, plus sa traduction risque d'être longue. Si vous avez un problème d'espace, en fonction de la nouvelle langue, trouvez une traduction différente, moins littérale, ou modifiez la taille de la police.

Autre aspect à ne pas négliger : la hauteur des caractères et des lignes. Les caractères des polices non latines sont souvent comparativement beaucoup plus hauts. Des alphabets comme l'arabe nécessitent également un interlignage vertical plus important que les langues latines.

5. Tenez compte de la compatibilité et de l'encodage des polices web

Selon le W3C, vous devez toujours spécifier le codage de vos pages web. Il recommande d'utiliser UTF-8 pour vous 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 :

Les polices web que vous utilisez doivent être compatibles avec toutes les langues que votre site WordPress multilingue prend en charge, et notamment les langues utilisant un autre alphabet que le latin. Les polices utilisées doivent donc contenir tous les caractères et glyphes nécessaires.

Certaines polices couvrent les caractères latins, mais pas les alphabets s'écrivant de droite à gauche ou le cyrillique. Vérifiez donc que les langues dont vous avez besoin sont prises en charge avant d'opter pour une police.

Google Fonts, par exemple, vous permet de choisir des langues avant de télécharger un jeu de caractères :

Une seule langue pouvant comporter des centaines de caractères, les fichiers de polices de caractères peuvent être très volumineux.C'est là un autre point à garder à l'esprit pour choisir les polices pour votre site web multilingue.

6. Concevez votre site en pensant aux langues qui se lisent de droite à gauche

Le design de pages pour les langues qui se lisent de droite à gauche peut poser certains défis. Comme l'écrit Robert Dodis, développeur chez SteelKiwi, dans Smashing Magazine, concevoir des pages pour ces langues implique de « renverser 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, ici en arabe :

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

L'inversion de votre design est un point que vous devez prendre en compte si vous couvrez ces deux types de langues.

Nous recommandons 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. Nous ne voulons pas réinventer la roue ici, alors lisez son tutoriel. Nous voulons 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 se lisant de droite à gauche et vous permet d'y adapter la mise en page de votre site multilingue au moyen de règles CSS. Voici quelques-unes des langues disponibles :

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

Après avoir ajouté une langue se lisant de droite à gauche à votre site multilingue avec Weglot, vous pouvez personnaliser son affichage en appliquant des règles CSS à votre mise en page. Dans votre interface administrateur WordPress, allez dans Weglot > Design du bouton de langues (facultatif) et faites défiler vers le bas, jusqu'à Remplacer le CSS. Ajoutez vos règles CSS dans la zone de texte. Vous pouvez modifier la police, sa taille, la hauteur de ligne, etc. afin d'adapter le texte à votre design.

Voilà tout : avec Weglot, ajouter et personnaliser le style de langues se lisant de droite à gauche est aussi simple que ça ! Vous trouverez plus d'informations sur la gestion des langues se lisant de droite à gauche par Weglot dans notre documentation.

7. Utilisez des images et des icônes adaptées à la culture de la langue cible

Les images, icônes et autres éléments graphiques sont indispensables dans une page web. Mais ces briques visuelles sont par essence subjectives et peuvent donner lieu à des interprétations différentes en fonction du contexte culturel.

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

Mais la page d'accueil japonaise de l'entreprise affiche l'image d'une femme de type japonais :

Certains visuels peuvent également heurter certains publics cibles. Des images pouvant sembler innocentes dans un contexte occidental peuvent être taboues dans d'autre pays. Par exemple, des visuels représentant des couples homosexuels ou genres l'égalité des sexes seraient difficilement acceptés dans un pays où l'homosexualité est encore illégale et où les droits des femmes ne sont pas encore pleinement reconnus.

Ne négligez pas les éléments secondaires, comme les icônes, et la signification qu'elles peuvent avoir pour certains visiteurs de votre site multilingue. Par exemple, une icône représentant le globe terrestre doit être adaptée aux attentes de visiteurs australiens comme de visiteurs africains :

La troisième icône ci-dessus représente un globe terrestre, mais ne met pas en avant un pays ou une zone spécifique. Elle serait donc plus appropriée pour un site web multilingue.

Il faut également considérer les images et autres éléments graphiques à l'aune des sensibilités locales et culturelles.

Évitez d'utiliser des images et autres visuels contenant du texte. Vous ne pourrez pas traduire ce texte intégré avec des outils comme Weglot, alors mieux vaut l'éviter !

8. Utilisez des couleurs adaptées à la culture de la langue cible

La perception et l'interprétation des couleurs varie considérablement d'une culture à l'autre.

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 représente la chance, la prospérité, les festivités, et la longévité. Inversement, dans certains pays africains, le rouge est associé à la mort et à l'agression.

La couleur bleue est considérée comme le choix le plus sûr et le mieux accepté à l'international, car elle est généralement associée à des aspects positifs. C'est une couleur douce et apaisante, bien qu'elle soit également associée à la tristesse et à la dépression. Symbolisant confiance et compétence, le bleu est également la couleur la plus utilisée par les banques pour leurs logos.

Avant de choisir des couleurs pour le design de votre site web multilingue, veillez à rechercher sur Google la symbolique qui leur est associée.

9. Dates et autres formats

Tous les pays n'utilisent pas les même formats de date, même dans le monde anglophone. Au Royaume-Uni et en Europe, par exemple, il est pratique courante d'afficher les dates au format jour-mois-année, tandis que les États-Unis utilisent le format mois-jour-année.

Adapter les unités de mesure au pays ciblé est également recommandé pour favoriser le SEO. Bien que 90 % de la planète utilise le système métrique, les États-Unis, le Liberia et le Myanmar ont conservé le système impérial d'unités de poids et mesures.

Choisir le bon plugin de traduction WordPress pour la conception de votre site

Il existe une grande variété de plugins de traduction WordPress, qui peuvent interagir de manières très différentes avec le design de votre site. Mais une solution s'intégrera  parfaitement à votre site web multilingue, quel que soit son design : il s'agit de Weglot.

Vous pouvez même utiliser le Visual Editor de Weglot pour traduire votre contenu sur le front-end de votre site et au niveau des sous-domaines afin de visualiser la mise en page et le design dans le contexte du site, comme avec 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 du CSS afin d'en personnaliser le format.

De plus, Weglot permet d'appliquer les bonnes pratiques de design exposées dans ce article, et notamment :

• Utilisation de modèles universels pour assurer l'homogénéité de l'image de marque
• Mise en évidence des outils de changement de langue
• Possibilité pour les visiteurs de choisir leur langue de préférence
• Encodage UTF automatique
• Prise en charge des langues se lisant de droite à gauche

Jetons un œ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 avec Google Translate.

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

Une fois vos choix enregistrés, actualisez le front-end de votre site web nouvellement multilingue : vous y verrez un nouveau sélecteur de langue dans le coin inférieur droit. Au clic, il affiche les langues disponibles, vous permettant d'afficher le site dans la langue choisie.

Pour commencer vos personnalisations, allez dans Weglot > Design du bouton de langue (facultatif). Cet écran vous permettra de choisir :

• L'utilisation ou non d'une liste déroulante
• L'utilisation ou non de drapeaux
• Les types de drapeaux
• L'affichage du nom des langues
• L'affichage du code des langues seulement

Dans la section Remplacer le CSS, vous pouvez appliquer des règles CSS pour modifier l'apparence du sélecteur de langue de votre site web multilingue. Vous pouvez par exemple :

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

Dans cet article, Weglot livre quelques exemples de personnalisation du design des boutons de langue.

En faisant défiler l'écran de configuration de Weglot, vous trouvez des instructions vous aidant à positionner votre sélecteur de langue :

• Dans le menu. Allez dans Apparence -> Menus et glissez-déposez le lien personnalisé Weglot Translate à l'emplacement souhaité.
• Avec un widget. Allez dans Apparence -> Widgets et glissez-déposez le widget Weglot Translate à l'emplacement souhaité.
• Avec un shortcode. Utilisez le shortcode Weglot [ weglot_switcher ] (sans les espaces) pour placer votre sélecteur de langue à l'emplacement souhaité.
• Dans le code source. Vous pouvez ajouter le code suivant où vous le souhaitez dans le code source de votre page HTML :

<div id=”weglot_here”></div>

Pour illustrer les possibilités de personnalisation d'un sélecteur de langue sur un site web multilingue (qu'il s'agisse d'un site WordPress, Shopify ou autre), voyez ci-dessous comment Patyka affiche son sélecteur de langue dans le coin supérieur gauche de ses pages.

Une liste affiche les noms des langues. Il suffit de cliquer sur le bouton et de sélectionner une langue pour que le contenu de la page soit mis à jour et traduit dans la langue choisie.

Étude de cas : comment Maestrooo utilise Weglot

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

Maestrooo recherchait une solution de conception de sites web multilingue solide et fiable, capable de s'adapter facilement aux exigences de ses clients. Après avoir testé de nombreuses solutions, qui présentaient des limites en termes de SEO ou de gestion des hreflang, l'équipe a découvert Weglot.

Weglot traduit l'intégralité du 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 affecter la mise en page de leurs sites multilingues.

Outre la conception de sites web personnalisés pour ses clients, Maestrooo développe également les thèmes officiels proposés sur la boutique de Shopify. Tandis que d'autres solutions de traduction de sites web tendaient à altérer le formatage des thèmes de Maestrooo, la solution de traduction de Weglot fonctionne à tous les coups.

Maestrooo aide chaque année 8 000 à 12 000 clients à se lancer sur Shopify en utilisant Weglot pour se doter de sites webs multilingues.

Optez pour une optimisation complète de votre site d'un point de vue culturel grâce à un design localisé

Chacune des bonnes pratiques en matière de design étudiées dans cet article vous aidera à créer un site web multilingue attrayant et agréable d'utilisation.

Pour offrir aux visiteurs de votre site et à vos clients une expérience utilisateur hors-pair dans leur langue maternelle, ne vous arrêtez pas à votre site multilingue. Pensez également à traduire vos documents marketing et d'assistance.

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

Avec le bon plugin de traduction de site web multilingue et un design de site qui fournit des options de traduction faciles à utiliser, vous aiderez vos clients avec une interface utilisateur et une interface utilisateur visuellement attrayantes dans leur langue préférée. Essayez Weglot gratuitement avec notre essai gratuit de 14 jours, ou faites une visite guidée du produit en vous inscrivant gratuitement !