Comment corriger les erreurs de design dans le cadre d'une localisation : l'édition visuelle de vos traductions

La localisation d'un site web est une excellente initiative pour toute entreprise ou organisation ciblant un public international. Non seulement elle rend votre site plus accessible aux visiteurs, mais elle améliore également le niveau de personnalisation de votre site - ce qui devient de plus en plus important à mesure que les secteurs d'activité deviennent de plus en plus compétitifs.

Bien entendu, lorsqu'il s'agit de la localisation de votre propre site, la traduction joue un rôle important. Toutefois, la localisation de votre site web par la traduction d'une langue à l'autre, bien qu'elle soit une étape nécessaire, peut entraîner des problèmes de conception.

Ces problèmes découlent souvent du fait que les langues peuvent différer en termes d'espace occupé par les mots dans une phrase donnée. Il en résulte des ruptures de chaîne et des chevauchements de texte, ce qui est loin d'être idéal lorsque vous essayez de séduire de nouveaux clients internationaux avec votre offre.

Heureusement, ces problèmes de conception peuvent être facilement corrigés à l'aide de l'outil d'édition visuelle intuitif Weglot. Dans cet article, nous allons donc nous intéresser à visual editor Weglot visual editor voir comment il peut vous aider à corriger les problèmes de conception indésirables qui peuvent accompagner la traduction d'un site web.

Quel est l'avantage d'un visual editor?

visual editor vous permet de voir et de modifier vos traductions dans un aperçu en direct de votre site web. Vous pouvez ainsi voir exactement à quoi ressemblera le contenu traduit sur votre site et évaluer si cela aura ou non des implications sur la conception de votre site.

Lorsqu'un texte est traduit d'une langue à une autre, la longueur du texte traduit est susceptible d'être différente de celle du texte original. Selon W3.org, les textes en chinois et en anglais sont généralement assez compacts, de sorte que la traduction d'une de ces langues à l'autre peut entraîner des écarts importants en termes de longueur de texte.

En fait, IBM, dans ses "Guidelines to Design Global Solutions", note que pour les textes de plus de 70 caractères traduits de l'anglais vers d'autres langues européennes, le taux d'expansion moyen est de 130 %.

Cela signifie que la version traduite de votre site occupera 30 % d'espace supplémentaire sur le site principal par rapport à la version originale. Les problèmes associés à cette situation peuvent être les suivants :

• Texte se chevauchant
• Chaînes effondrées
• Asymétrie par rapport à la conception générale de votre site

Pour mieux comprendre comment un visual editor peut aider à résoudre ces problèmes et à quoi il ressemble, nous allons examiner en détail visual editor Weglotet voir comment il peut vous aider à prévisualiser votre design dans différentes langues.

Visual Editor Weglot

Pour accéder à l visual editor sur votre Weglot , puis dans l'onglet « Traductions » et cliquez sur l'onglet « Éditeurvisual editor

Vous accédez alors à un aperçu en direct de votre site web. Bien que vous soyez initialement sur la page d'accueil, vous pouvez accéder à n'importe quelle URL de votre site web en cliquant sur les différentes pages, comme si vous étiez réellement sur votre site web.

C'est à ce stade que vous pouvez voir exactement à quoi ressemble votre site web dans les différentes langues que vous avez ajoutées. Utilisez le sélecteur de langue pour passer d'une langue à l'autre afin de repérer et de corriger instantanément toute erreur de conception. Toutes les modifications que vous apportez à la traduction seront mises à jour en temps réel.

N'oubliez pas que si vous en êtes à l'étape de l'édition, il est probable que vous ne souhaitiez pas encore mettre vos traductions en ligne. Veillez donc à désactiver l'option "Rendre public" dans votre liste de traductions pour vous assurer que votre site web multilingue n'est accessible qu'à votre équipe. (Remarque : il suffit d'ajouter ?weglot à la fin de votre URL pour que les traductions soient mises en ligne).

Dans l'exemple ci-dessous, nous avons ajouté le français et l'espagnol. Lorsque vous passez d'une langue à l'autre, vous pouvez immédiatement constater les différences d'espace que chaque langue occupe dans la conception du site web, en particulier dans le titre du site.

Vous avez probablement passé des heures à créer votre site web dans sa langue d'origine et la conception joue un rôle important dans la façon dont votre marque/entreprise est perçue. C'est précisément la raison pour laquelle il est important de voir comment les nouvelles langues que vous avez ajoutées s'intègreront dans ce design pour obtenir le même impact impressionnant que votre site web d'origine.

Il est intéressant de constater que le texte de l'en-tête principal (dans l'exemple ci-dessus) est beaucoup plus long en français et en espagnol. Il est évident, à partir de Visual Editor le propriétaire du site Web pourrait vouloir apporter des modifications à cette section.

Visual Editor conçu pour aider tous les membres de votre équipe, pas seulement les concepteurs. C'est un excellent outil pour modifier les traductions dans le contexte où elles apparaissent réellement sur le site web. Pour en savoir plus sur les fonctionnalités d'édition, cliquez ici. ici.

Que se passe-t-il donc en cas de problèmes de conception ?

Lorsque Visual Editor utilisez Visual Editor remarquerez peut-être quelques problèmes liés à l'affichage du texte traduit dans la mise en page globale. Vous pouvez désormais anticiper ces éventuels problèmes et apporter les modifications nécessaires. Voici quelques mesures correctives que vous pouvez prendre :

Envisagez de reformuler ou de synthétiser le contenu : Si vous constatez que la version traduite de votre contenu pose des problèmes de conception, n'hésitez pas à supprimer et à modifier certains aspects qui ne se traduisent pas bien et qui prennent trop de place. Vous pouvez le faire au sein de votre équipe ou en travaillant avec des traducteurs professionnels directement dans le tableau de bord Weglot .

Par exemple, en anglais, votre onglet "About Us" serait traduit par "A propos de nous" en français, mais il y a de fortes chances que cela ne rentre pas dans l'espace alloué sur votre site. Dans ce cas, une solution simple consisterait à modifier manuellement "A propos de nous" en "Equipe", par exemple.

Si vous envoyez vos traductions à des traducteurs professionnels à l'aide du tableau de bord Weglot , cette section de notes est l'endroit idéal pour indiquer aux traducteurs les mots que vous avez repérés et qui pourraient être formulés différemment.

Modifier la taille de la police sur votre site web : si vous constatez que lorsque vous traduisez d'une langue à une autre, le texte est trop grand (ou trop petit) dans la langue traduite, vous pouvez réduire ou augmenter la taille de la police dans la langue traduite. Cela peut être facilement fait dans votre Weglot , dans la section CSS personnalisé, sous le sélecteur de langue.

Par exemple, le fichier CSS ci-dessous ajusterait la taille de la police allemande à 16px :

html[lang=de] body {

taille de la police : 16px ;

}

Changer la police de caractères sur votre site web : Dans certains cas, il est également judicieux de changer la police utilisée lorsqu'un texte est traduit dans une autre langue. En effet, certaines polices ne fonctionnent pas bien dans certaines langues et peuvent exacerber les problèmes de conception que vous pouvez rencontrer. Par exemple, si vous souhaitez utiliser la police Roboto pour la version française de votre site, mais la police Arial pour la version arabe (qui est beaucoup plus adaptée à la langue), cela est possible grâce à une autre règle CSS.

La feuille de style CSS ci-dessous ajusterait la police à Arial lorsque le site est en arabe :

html[lang=ar] body {

font-family : arial ;

}

Envisagez une conception globale du site web : Bien sûr, il est peut-être un peu tard pour le faire, mais si vous en êtes aux premières étapes de la création d'un site web et que vous savez que vous voulez ajouter plusieurs langues, vous pouvez envisager de laisser un espace de manœuvre dans la conception de votre site web afin d'éviter tout problème ultérieur. Vous trouverez ici d'autres conseils pour la conception de sites web.

Visual Editor un outil adapté au design, idéal pour Goodpatch

La société allemande Goodpatch est un exemple d'entreprise qui a pleinement tiré parti de visual editor pour corriger des erreurs de conception . Elle disposait déjà d'une version anglaise de son site, mais a décidé de lancer une version allemande afin d'attirer davantage le marché germanophone, très sensible au design.

L'une de leurs plus grandes réticences à entreprendre ce projet était l'impact qu'il aurait sur la conception de leur site web. Cependant, avec Weglot , ces réserves ont été immédiatement levées.

Les réactions de l'équipe ont été tellement positives que nous avons créé une étude de cas sur leur réussite. L'équipe de concepteurs UX et UI de Goodpatch a vraiment apprécié la possibilité de voir comment la langue traduite apparaîtrait sur leurs pages web, de cette façon ils ont pu voir ce qui devait être adapté ou quelle partie de la conception pouvait être améliorée pour fonctionner avec le texte plus long.

Bien que l'équipe de Goodpatch ait étudié d'autres solutions de traduction, ce qui les a convaincus, c'est que les capacités de Weglotreflétaient leur approche en tant qu'entreprise axée sur la conception : itérative, visuelle et axée sur l'expérience.

Conclusion :

Comme vous l'avez vu, l'utilisation visual editor Weglot visual editor simple et peut dissiper toutes vos inquiétudes en matière de localisation d'un point de vue conception. Ne faites pas de compromis sur la traduction au profit de la conception, et surtout, ne faites pas de compromis sur la conception au profit de la traduction. Parfois, vous pouvez vraiment tout avoir 😉

Pourquoi ne pas essayer la version d'essai gratuite de 10 jours de Weglotet constater par vous-même à quel point il est facile d'éditer visuellement vos traductions !

‍