Conseils de conception de sites Web multilingues avec ConveyThis

De nombreux sites Web proposent désormais de nombreuses options linguistiques afin que leurs visiteurs du monde entier puissent naviguer confortablement. Internet a contribué à faire du marché une expérience mondiale. Ainsi, en ayant un site Web, vous avez ouvert les portes de votre entreprise à toute personne disposant d’une connexion Internet. Mais s’ils ne comprennent pas la langue, ils ne resteront pas. Un site Web multilingue, c'est facile.

Heureusement, le processus de conversion de votre site Web en plusieurs langues est assez simple. ConveyThis peut créer une version traduite de votre site en quelques minutes, puis vous pouvez personnaliser l'apparence et l'emplacement de votre sélecteur de langue, apporter quelques modifications de mise en page pour s'adapter aux langues plus textuelles ou de droite à gauche et modifier les couleurs et les images dans les cas où les originaux sont inadapté à la culture cible.

Le processus n'est pas entièrement automatisé, vous devrez faire quelques recherches au préalable. Ce guide explique certains aspects de la conception de sites Web pour vous aider à entrer confortablement dans le monde des sites Web multilingues et du design de qualité.

Image de marque cohérente

L'expérience utilisateur doit être cohérente quelle que soit la version linguistique qu'ils visitent. L'aspect et la convivialité doivent être très similaires dans toutes les versions, certaines différences peuvent être nécessaires en raison de différences de langue ou de culture, mais si vous passez d'une langue à l'autre, vous ne devriez pas avoir l'impression d'avoir été redirigé vers un site complètement différent.

Par conséquent, les éléments de conception tels que la mise en page et le style de marque particulier de votre entreprise doivent rester les mêmes dans toutes les langues.

C’est super facile à faire en WordPress avec ConveyThis, qui identifie parfaitement le texte quel que soit le thème que vous avez choisi (même s’il est personnalisé!) et le traduit automatiquement, même si vous travaillez avec d’autres plugins.

Cela vous aidera à avoir un modèle global avec le même thème pour toutes les langues, et donc, la même expérience utilisateur.

La page d'accueil d'Airbnb fonctionne très bien comme exemple, jetons un coup d'œil à la version australienne :

Et voici la version japonaise :

Il s'agit sans aucun doute du même site. L'arrière-plan est le même, tout comme la fonction de recherche. Avoir un design unifié contribue à l'identité de votre marque et permet d'économiser du temps et des efforts lors de l'ajout de nouvelles langues ou de la mise à jour.

Commutateurs de langage clair

Choisissez un emplacement bien en vue pour le sélecteur de langue, comme l'un des quatre coins de votre site Web, et placez-le sur chaque page, pas seulement sur la page d'accueil. Il doit être facile à trouver, personne ne veut jamais chercher un bouton caché.

Il est fortement recommandé que les noms de langue soient dans leur propre langue. "Español" au lieu de "Espagnol" par exemple fera des merveilles. Asana le fait, leur site a une liste déroulante avec les options de langue disponibles.

De cette façon, les visiteurs se sentent les bienvenus. Si votre site Web est traduit, la liste des langues doit en tenir compte. Lire « allemand, français, japonais » sur un site anglais ne facilite pas la navigation et donne l'impression que la version anglaise est la plus importante.

«Langues» vaut mieux que «régions»

De nombreuses grandes marques internationales vous font changer de région afin de pouvoir lire le site dans votre langue. C'est une idée terrible qui rend la navigation plus difficile pour les visiteurs. Ces sites Web fonctionnent en supposant que vous naviguez dans la région où la langue est parlée, vous obtenez donc le texte dans votre langue, mais vous ne pouvez pas obtenir le contenu de la région qui vous intéresse.

L'image suivante provient du site Web d'Adobe :

Les langues ne doivent pas être indissociables de leurs régions. Prenez par exemple toutes ces villes cosmopolites comme New York, Londres et Paris. Peut-être qu'une personne belge vivant au Royaume-Uni souhaite acheter sur le site britannique mais navigue en français. Ils doivent choisir entre acheter sur le site belge dans leur langue ou acheter sur le site britannique en anglais, et ils ne veulent faire ni l'un ni l'autre. Vous avez donc accidentellement créé une barrière. Jetons un coup d'œil à un site Web qui vous permet de spécifier la langue et la région séparément, le site Web d'Uber.

C'est une excellente conception. Dans ce cas, l'option de changement de langue a été placée dans le pied de page à gauche et au lieu d'une liste déroulante, vous avez un modal en raison des nombreuses options. Les noms de langue sont également mentionnés dans leur propre langue.

En prime, vous pouviez « se souvenir » de la langue choisie par l'utilisateur afin qu'à partir de cette première visite, il n'ait plus besoin de changer.

Emplacement de détection automatique

Cette fonctionnalité est très utile pour que vos visiteurs n'y accèdent pas via la mauvaise langue. Et pour faire gagner du temps à l'utilisateur afin qu'il n'ait pas à chercher le sélecteur de langue. Voici comment cela fonctionne : le site Web identifie la langue dans laquelle se trouve le navigateur ou son emplacement.

Mais soyez prudent dans le cas où l'utilisateur est un touriste et ne connaît pas la langue locale car il aura besoin du bouton de langue pour pouvoir changer, pour cette raison, l'outil n'est pas toujours précis.

Lors de la conception de votre site multilingue, ne choisissez pas entre la détection automatique de la langue et le sélecteur de langue, ce dernier est obligatoire tandis que le premier est facultatif.

Les drapeaux ne sont pas des substituts appropriés pour un nom de langue

Il y a 21 pays hispanophones et 18 pays anglophones, et en Chine, il y a 8 dialectes primaires, donc les drapeaux ne sont pas de bons substituts aux noms de langues. De plus, les drapeaux peuvent ne pas être des indicateurs utiles car ils pourraient confondre ceux qui ne les reconnaissent pas.

Soyez flexible avec l'espace de texte

Cela peut être un défi, mais il est indéniable que les traductions n'occupent pas le même espace que le texte original, certaines peuvent être plus courtes, d'autres peuvent être plus longues, certaines peuvent même nécessiter plus d'espace vertical !

Les caractères chinois contiennent beaucoup d'informations, donc peu d'espace est nécessaire, tandis que l'italien et le grec sont plus verbeux et nécessitent deux fois plus de lignes. Une bonne règle empirique consiste à supposer que certaines traductions peuvent nécessiter plus de 30 % d'espace supplémentaire. Soyez donc flexible avec la mise en page et attribuez suffisamment d'espace pour le texte. Ces compressions serrées dans le site Web d'origine peuvent ne pas avoir assez d'espace pour la traduction, l'anglais est une langue particulièrement compacte, et si vous trouvez le besoin d'abréger en anglais pour que le contenu s'adapte, vous rencontrerez certainement des problèmes quand il sera le temps de traduire.

En plus d'avoir une marge de manœuvre pour que le texte s'étire, c'est aussi une bonne idée d'avoir des éléments d'interface utilisateur adaptatifs afin que les boutons et les champs de saisie puissent également grandir, vous pouvez également réduire la taille de la police, mais pas trop.

Le site Flickr est multilingue, jetons un coup d'œil au bouton "vues" d'origine :

Cela a l'air fantastique, tout est super, mais "vues" s'avère être un mot plus long dans d'autres langues, nécessitant plus d'espace.

En italien, il faut trois fois plus d'espace !

De nombreux scripts non latins, tels que l'arabe, nécessitent plus de hauteur pour que la traduction s'adapte. Donc, pour résumer, la mise en page de votre site Web doit être suffisamment flexible pour s'adapter aux différentes exigences linguistiques afin que l'aspect raffiné de l'original ne soit pas perdu.

Compatibilité des polices Web et encodage du site Web

Selon le W3C, il est fortement recommandé d'encoder votre page Web en utilisant UTF-8 , qui autorise les caractères spéciaux.

C'est assez simple, la déclaration UTF ressemble à ceci

Assurez-vous également que les polices sont compatibles avec les différentes langues, sinon le texte risque de paraître illisible. En gros, avant de choisir une police, vérifiez sa compatibilité avec tous les scripts dont vous avez besoin. Si vous souhaitez entrer sur le marché russe, vérifiez que le script cyrillique est pris en charge.

L'image suivante a été tirée de Google Fonts et, comme vous pouvez le voir, vous pouvez choisir de télécharger les versions de scripts dont vous avez besoin. Ces langues avec de plus grandes quantités de caractères créent des fichiers de polices plus volumineux, alors tenez-en compte lors de la sélection et du mélange des polices.

Concernant les langues de droite à gauche

À mesure que le marché du Moyen-Orient se développe, vous pouvez envisager de créer une version de votre site Web qui attire les visiteurs de cette région, cela signifie adapter la mise en page afin qu'elle soit compatible avec leur langue. Un trait caractéristique de la plupart des langues du Moyen-Orient est qu'elles se lisent de droite à gauche ! C'est un grand défi et la solution commence par la mise en miroir de l'interface.

Il s'agit de la conception de Facebook pour les langues de gauche à droite, comme l'anglais.

Et c'est la conception inversée pour les langues de droite à gauche, comme l'arabe.

Regardez attentivement, le placement de tout dans la conception a été reflété.

Consultez l'article de Robert Dodis sur la conception pour les langues de droite à gauche pour plus d'informations sur la façon de procéder.

Certaines langues de droite à gauche sont l’arabe, l’hébreu, le persan et l’ourdou et ConveyThis n’a aucun mal à adapter votre site Web pour répondre à leurs besoins linguistiques et assurer une grande expérience utilisateur. Et la meilleure chose est que vous pouvez personnaliser l’apparence de chaque langue et apporter des modifications au type de police ou sa taille, et si nécessaire, modifier la hauteur de la ligne.

Choisissez les icônes et les images appropriées

Les éléments visuels ont une composante culturelle très importante et sont des éléments clés d'une conception de site Web appropriée. Chaque culture attribue une signification à différentes images et icônes, certaines interprétations sont positives et d'autres complètement opposées. Certaines images reflètent les expériences des idéaux d'une culture, mais dans un contexte différent, les utilisateurs se sentiront aliénés.

Voici un exemple d'image qui a dû être remplacée parce qu'elle n'était pas culturellement appropriée. Veuillez noter que toutes les images ne seront pas offensantes pour les autres, peut-être que cela générera simplement de l'apathie lorsque vous voulez que les gens soient curieux et intéressés par votre produit.

Ceci est la page d'accueil de Clarin pour la langue française, mettant en vedette une femme de race blanche. Et voici la version coréenne, avec une femme coréenne comme ambassadrice de la marque.

Les types de visuels qui peuvent offenser sont ceux qui peuvent sembler innocents pour certaines cultures, mais, aux yeux d'une culture différente, ils affichent des comportements illégaux ou tabous, par exemple des représentations de l'homosexualité ou de l'autonomisation des femmes.

Cela s'applique également aux icônes, alors qu'aux États-Unis, une icône avec deux verres de champagne portant un toast représente la célébration, en Arabie saoudite, il est illégal de boire de l'alcool, de sorte que cette icône devra être remplacée par une icône culturellement appropriée.

Par conséquent, des recherches seront nécessaires pour s'assurer que les icônes que vous avez choisies sont appropriées pour le marché cible. Si vous n'êtes pas sûr, vous pouvez toujours jouer la sécurité.

Par exemple, ces trois icônes représentant la Terre, la première a été conçue pour le public australien ; le second, pour le public africain ; et le dernier convient à un public plus large et mondial car aucun domaine particulier n'est présenté.

Enfin et surtout, ConveyThis peut traduire n'importe quel texte, tant qu'il n'est pas intégré dans une image. Le logiciel ne sera pas en mesure d'identifier ce qui est écrit dessus, il restera donc dans la langue d'origine, évitez donc d'intégrer du texte.

Choix de couleurs

Comme mentionné dans la section précédente, les cultures interprètent les images différemment et la même chose se produit avec les couleurs. Leurs significations sont subjectives.

Par exemple, dans certaines cultures, le blanc est la couleur de l'innocence, mais d'autres ne seraient pas d'accord, c'est la couleur de la mort. La même chose se produit avec le rouge, dans les cultures asiatiques, il est utilisé dans les célébrations, mais pour certains pays africains, il n'a pas une connotation aussi positive car il est lié à la violence.

Cependant, il semble que le bleu soit la plus sûre de toutes les couleurs, généralement associée à des significations positives comme le calme et la paix. De nombreuses banques utilisent le bleu dans leurs logos car cela peut aussi signifier la confiance et la sécurité.

Cet article montre les différences de signification des couleurs dans le monde entier , très utile pour commencer vos recherches sur les meilleures couleurs pour votre site multilingue.

Ajustements de format

Envisagez d'éviter d'utiliser uniquement des chiffres lorsque vous écrivez des dates, car il existe de nombreuses façons de les écrire. Aux États-Unis, le format officiel est mm/jj/aaaa et si vous ne pouvez voir que les chiffres, certains utilisateurs d'autres pays qui utilisent des systèmes différents (tels que jj/mm/aaaa) peut prêter à confusion. Vos options sont donc les suivantes : assurez-vous que les versions traduites ont le format de date adapté ou écrivez le mois en lettres afin que ConveyThis écrive toujours la date correcte.

De plus, alors qu'aux États-Unis, le système impérial est utilisé, la plupart des pays utilisent le système métrique, vous devrez donc décider s'il serait approprié pour votre site de transformer les mesures.

Le meilleur plugin de traduction pour WordPress

Il y a tellement d'options lorsqu'il s'agit d'ajouter un plugin de traduction à votre site Web WordPress et toutes ne fonctionnent pas de la même manière, les résultats varient. Avec ConveyThis, vous avez la garantie d'une intégration parfaite, quelle que soit la conception de votre site Web.

ConveyThis est le meilleur choix pour la traduction de sites Web avec 92 langues disponibles. C'est un plugin WordPress fiable qui vous permettra d'avoir rapidement une version multilingue solide de votre site Web. Il peut comprendre la mise en page du site, détecter tout le texte et le traduire. ConveyThis comprend également un éditeur intuitif pour la personnalisation du texte.

ConveyThis inclut un bouton de changement de langue unique qui fonctionne avec n'importe quel site par défaut, mais vous pouvez également le modifier autant que vous le souhaitez. Nous suivons également les principes de conception énoncés dans cet article :

• Image de marque cohérente sur toutes les versions linguistiques du site Web.
• Sélecteur de langue clair et possibilité de choisir une langue préférée.
• Les sites Web sont automatiquement encodés en UTF-8.
• Interfaces appropriées pour les langues de droite à gauche

ConveyThis : une solution de site Web multilingue en laquelle vous pouvez avoir confiance

On croit généralement que la traduction du site Web est un processus complexe. Mais il n’est pas nécessaire de le reporter parce que vous ne voulez pas faire face aux maux de tête. Ce n’est pas intimidant du tout! Avec ConveyThis, il devient une conversion simple. Il est transparent et rapide.

Après une installation rapide, tout votre contenu peut maintenant être traduit sans affecter le formatage, et cela inclut le contenu généré par d'autres applications et le processus de paiement. ConveyThis est un outil simple pour la traduction de sites Web multilingues qui ne gâchera pas votre code, comme d'autres le font.

La possibilité de commander des traductions professionnelles de votre site est également disponible! Ils vous aideront à transformer complètement votre site Web multilingue en un site multiculturel, améliorant considérablement l'expérience de vos clients. N'oubliez pas que si vous traduisez un site Web, vous devez également disposer d'un support client dans la langue de votre nouveau client. Envisagez d'investir dans la localisation et l'adaptation de contenu pour garantir une superbe expérience utilisateur à vos visiteurs.