D'après une étude réalisée en 2023 : "Près de 76 % des utilisateurs préfèrent consommer sur un site dans leur langue natale". Et pourtant, en 2024, plus de 50 % des sites web sont exclusivement en anglais. Une asymétrie qui pourrait pourtant être corrigée grâce à l'intégration de nouvelles solutions innovantes, telles que Weglot (solution de traduction de site multilingue), avec qui nous avons collaboré sur un projet de Langages Switchers pour vous proposer :

1. Cinq composants "Language Switcher" sur Figma,
2. Une démo et intégration no-code des composants sur un projet web (CMS Webflow),
3. Des ressources éducatives sur le sujet.

À découvrir dans cet article !

1. Les enjeux d'un site multilingue en 2024

En 2024, les performances de conversion de nombreux sites sont toujours négativement impactées par les barrières linguistiques.

1.1 Chiffres clés

Pour comprendre les enjeux des sites multilingues, intéressons nous à quelques chiffres.

En 2023, et malgré ses 1,456 milliards de locuteurs, l'anglais ne touche qu'environ 16 % de la population mondiale. Pourtant, près de 59 % des sites web sont rédigés en anglais. Une répartition des langues sur le web et dans le monde qui est donc très inégale. 

Des chiffres qui s'expliquent par plusieurs facteurs :

• Le niveau d'accès à internet est réparti de manière inégale à travers le monde
• L'anglais reste la langue la plus utilisée à l'international
• La plupart des sites ne sont pas traduits pour divers raisons - techniques, manque de compétences, de ressources humaines ou encore de budget

Cette disparité linguistique présente des défis comme des opportunités pour les entreprises. Une enquête de CSA Research, basée sur 8 709 consommateurs dans 29 pays a d'ailleurs montré que 76 % des personnes interrogées préfèrent acheter des produits contenant des informations dans leur propre langue.

Une autre étude publiée par le CSA Research révèle que 65% des personnes préfèrent le contenu dans leur langue natale.

Face à ces chiffres, avoir un site multilingue nous paraît être un enjeu stratégique, rentable et vecteur de croissance pour les entreprises. C'est dans cet esprit, et pour continuer d'apporter des solutions de traduction efficaces pour les sites web, que Digidop collabore avec Weglot en concevant de nouveaux language switchers.

1.2 C'est quoi un "Language Switcher" ?

Un "language switcher" est un composant qui permet aux utilisateurs d'un site multilingue de changer la langue d'affichage du site. Généralement, il s'agit d'un menu déroulant ou de boutons, où les différentes langues disponibles sur le site web y sont listées. L'utilisateur peut depuis ce module sélectionner la langue de son choix, et le site se mettra à jour dynamique afin d'afficher le contenu dans la langue adaptée.

1.3 Les enjeux des languages Switchers sur un site web

Si votre site intègre une une fonctionnalité multilingue, les switchers sont indispensables pour l'Expérience Utilisateur (UX). Ils permettent aux utilisateurs de choisir leurs préférences linguistiques, ce qui permet de :

1. Toucher un public beaucoup plus large : En proposant plusieurs langues, votre site devient accessible à des utilisateurs du monde entier, augmentant ainsi votre portée globale.
2. Réduire le taux de rebond : Les visiteurs sont plus susceptibles de rester sur un site qui offre du contenu dans leur langue maternelle, ce qui diminue le taux de rebond.
3. Améliorer le taux de conversion : Les utilisateurs se sentent plus à l'aise et en confiance avec un site dans leur propre langue.

Les langages Switchers sont donc indispensables pour offrir une bonne expérience globale aux utilisateurs de votre site.

2. Design de language switchers Weglot pour traduire vos maquettes Figma ?

2.1 Design des language switchers

Composant Weglot x Digidop

Nous connaissons tous le classique toggle FR/EN - très fonctionnel - mais peu original, qui nous fait passer de l'anglais au français en un clic. Cette fois-ci, nous souhaitions innover dans le design de cet élément, tout en gardant la notion du "1 clic" qui assure une expérience utilisateur optimale. Les enjeux de design étaient donc nombreux :

1. Se détacher des designs "classiques" qui existent déjà
2. Préserver un niveau d'accessibilité élevé pour ne pas affecter l'expérience utilisateur
3. Anticiper le nombre de langues qui pourraient être intégrées au site
4. Prévoir des comportement pour chacun de ces éléments
5. Designer des éléments qui s'intègrent bien

2.2 Comment utiliser ces language switchers pour vos une maquette Figma ?

Ces composants sont déjà animés, ce qui signifie que vous pourrez les intégrer tel quel dans vos maquettes Figma, via un simple Copier / Coller. Cela vous permettra ainsi, en ouvrant votre prototype Figma, de vous projeter dans l'utilisation du langage switcher et de son harmonie avec le reste de la maquette. 

Mais alors comment traduire votre maquette Figma ? 

A date, il n'existe pas de solution native dans Figma qui vous permette de traduire vos maquettes en un simple clic. Il est cependant possible avec les fonctionnalités de variables - et à petite échelle - de traduire des éléments de vos designs. 

Tuto - 00:00 Traduire sa maquette Figma

Si vous n'avez encore jamais utilité les variables dans Figma, vous pouvez également consulter les ressources suivantes :

• Maitriser les variables dans Figma
• Comment créer un Dark & Light mode dans Figma

2.3 Template Weglot Figma disponible gratuitement

Nous mettons tous les mois de nombreuses ressources gratuites à disposition de la Figma Community. Vous pourrez donc retrouver et duppliquer ces composants depuis notre profil @Digidop.

Disponible gratuitement sur la Figma Community ↗

Et maintenant, comment traduire mon site ?

3. Les nouveaux composants Weglot pour traduire un site Webflow

3.1 Les solutions de traductions de site Webflow en 2024

En 2024, ils existent 3 solutions pour créer un site multilingue sur Webflow :

1. Création de Folder et duplication de main "à la main"
2. Weglot solution de traduction no-code (intégration outil tiers)
3. Localization (Solution Native)

Pour comprendre la différence entre les 3 méthodes, voici un article complet sur le sujet →

💡 Note : Malgré la récente sortie de Localization, pour différentes raisons, telles que;

1. Le Prix de certaines fonctionnalités réservées aux plans Enterprise de Localization,
2. Le fait que la fonctionnalité native de Webflow soit récente,
3. Et que Weglot dispose d'une interface d'édition depuis un outil externe.

Certains utilisateurs de Webflow continuent d'utiliser l'intégration no-code "plug & play" de Weglot. Ce pourquoi nous avons profité de cette collaboration pour retravailler des composants "Webflow Friendly".

Depuis la collaboration Finsweet x Weglot en 2020 et la naissance de composants facilement intégrables à Webflow, l'outil de traduction Weglot s'est démocratisé dans l'écosystème Webflow. Et bien que Webflow ait récemment annoncé la sortie de Localization, Weglot reste (pour le moment?) une alternative populaire à la feature native de Webflow.

3.2 Pourquoi des nouveaux composants ?

L'objectif était de profiter du design de nouveaux composants de traduction pour apporter quelques améliorations sur la méthode actuelle dont Weglot s'intègre sur Webflow avec :

• Un code unique pour tous les composants
• Correction d'un bug lors de la duplication du composant sur la même page (exemple Navbar + Footer)
• Animation CSS vs Animation JS Webflow (l'ensemble du design des links est personnalisable via l'état "Current" des liens Webflow)
• Et bien sûr, un choix de 5 nouveaux Designs de language Switcher

Le tout, pour rendre toujours plus facile l'intégration de la solution de traduction pour les utilisateurs Weglot.

3.3 Comment les utiliser ?

1 - Copier/Coller le script dans le head ou body tag de votre projet Webflow

<script>
type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"
</script>

<script>
 Weglot.initialize({
        api_key: 'YOUR_API_KEY',
    });
</script>

2 - Remplacer le code de la clé API avec votre code

3 - Ajouter une classe CSS sur votre component : .weglot-switcher-component

4 - Ajouter les attributs lang sur vos liens

Retrouvez l'ensemble des attributs dans cette documentation HTML ↗

5 - Personnaliser le Design en utilisant la magie de Webflow (CSS)

(Current State disponible et reconnu via l'attribut lang)

6 - Publier votre site !

Et voilà ! 🎉

Note : L'intégration requiert en amont la configuration de votre compte Weglot. Retrouvez dans cette vidéo comment créer un compte Weglot pour Webflow ↗

3.4 Template gratuit à cloner sur le Made in Webflow

Si vous utilisez Webflow, pour faciliter l'intégration des nouveaux langages Switchers Weglot, vous pouvez cloner directement les composants depuis ce template sur le Made in Webflow 👇

D'autres ressources sur les sites Web multilingue

• Playlist traduire son site Webflow avec Weglot ↗
• Finsweet X Weglot Components ↗
• Webflow Localization : le guide ultime pour traduire et localiser votre site Webflow →

Sources de l'article :

• Statista - The most spoken languages worldwide in 2023‍
• Statista - Languages most frequently used for web content as of January 2023, by share of websites
• Enquête 1 CSA Research
• Enquête 2 SCA Research