Conseils de conception de sites Web multilingues avec ConveyThis

Conseils de conception de sites Web multilingues avec ConveyThis : améliorez l'expérience utilisateur et la portée mondiale grâce à des stratégies de conception pratiques.
Transmettrecette démo
Transmettrecette démo
conseils de conception multilingue

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 pour rendre votre site Web multilingue 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 verbeuses ou de droite à gauche et modifier les couleurs et les images dans ces cas. où les originaux ne conviennent pas à 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 simple à faire dans 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 :

Multilingue

Et voici la version japonaise :

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

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.

Sans titre3

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 :

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P vOTNbP2pFSp17B530ArONrjgjryMZYqcQl5 WQuEAYvm6LArZbXFsMD9AiSX mEzsJilUu4a

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.

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

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.

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

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 !

wsEceoJKThGv2w9Qzxu gim H YPX39kktoHXy4vJcu aanoASp V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

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 :

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

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.

FParMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

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

fbnRHXPPyY2OPijzOvFkH0y Ke

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.

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

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.

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

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

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGODxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9R T0by f2qOI9CQz2CfwdRj

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 exigences linguistiques et garantir une excellente expérience utilisateur. Et le meilleur, c'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 des lignes.

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.

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvOB0 dTzQkZjUKogNMo2sQnJD0UTAdAeIe

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.

TsA5aPbhznm2N vv qL
(Source des images :VolerKiwi)

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é.

cx90RYDHGTToOiC uMNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3oW R6X3bRxeHdjJ

Enfin et surtout, ConveyThis peut traduire n'importe quel texte, à condition qu'il ne soit 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'incorporer 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

Pensez à éviter d'utiliser uniquement des chiffres lors de l'écriture des dates car il existe de nombreuses façons différentes 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 utilisent des systèmes différents (tels que jj/mm/aaaa) peut prêter à confusion. Vos options sont donc : vous assurer que les versions traduites ont le format de date adapté ou écrire le mois en lettres pour 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 existe 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 internet.

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 par défaut avec n'importe quel site, 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 à laquelle vous pouvez faire confiance

Il est communément admis que la traduction d’un site Web est un processus complexe. Mais il n’est pas nécessaire de le reporter car vous ne voulez pas avoir à vous soucier des maux de tête. Ce n'est pas intimidant du tout ! Avec ConveyThis, cela devient une conversion simple. C’est transparent et rapide.

Après une installation rapide, tout votre contenu peut désormais être traduit sans affecter le formatage, y compris 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.

Commentaires (4)

  1. La fin en vue pour Google-Translate pour les sites Web ! – ConveyThis
    8 décembre 2019 Répondre

    […] Le texte informatique en suédois. Des éléments comme ceux-ci ont aidé l'équipe de conception à formuler un chemin pour les clients visitant la plate-forme, vers une expérience de traduction facile et en évitant l'index drop-scroll comme précédemment […]

  2. Optimisation mondiale des moteurs de recherche pour toutes les plateformes linguistiques – ConveyThis
    10 décembre 2019 Répondre

    […] Les idées autour de la plate-forme multilingue et de la clientèle soient formulées, ce qui suit serait un regard sur l'ingrédient textuel de la langue […]

  3. Transformez votre WooCommerce multilingue – ConveyThis
    Le 19 mars 2020 Répondre

    […] et demandez à un linguiste de l'équipe ConveyThis d'y jeter un œil et de le modifier afin que vous puissiez être sûr que le libellé et le ton sont adaptés aux valeurs de votre magasin et […]

  4. Dans quelle mesure WooCommerce est-il personnalisable ? – ConveyThis
    23 mars 2020 Répondre

    […] Que les visuels sont toujours très chargés de sens culturel et que différents publics ont des attentes différentes quant à la façon dont les magasins devraient afficher leur […]

Laisser un commentaire

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués*