Un guide pour localiser la typographie

La localisation n'est pas une mince affaire. Et pour les concepteurs et les développeurs qui construisent des applications mobiles pour des publics qui parlent des langues autres que la leur, cette complexité ne sera jamais plus claire. C'est pourquoi vous devez examiner avec soin l'impact de votre conception et de votre choix de typographie sur l'expérience de vos utilisateurs. Dans ce guide, nous verrons comment les stratégies logicielles et de conception que nous utilisons actuellement peuvent ne pas être suffisantes pour la conception d'applications globales et la marche à suivre pour les résoudre.

La localisation des applications peut sembler une tâche assez simple à exécuter. Créez des couleurs respectueuses de l'environnement, ajoutez un widget de langue en haut de l'application et permettez aux clients de changer de devise. Mais est-ce suffisant?

Le fait est que le langage est complexe. Et je ne parle pas seulement des différences dans la façon dont les langues conjuguent les verbes ou de la facilité avec laquelle ils parlent. Saviez-vous que certains ensembles linguistiques sont par nature plus courts que d’autres? Et que certaines langues exigent une orientation de droite à gauche, par opposition à la gauche commune?

Ces types de complexité peuvent rendre les tâches des concepteurs et développeurs d'applications plus difficiles. Toutefois, si vous concevez une application destinée à être utilisée par un ensemble global d'utilisateurs, vous devez prendre en compte l'impact de la langue et de la typographie que vous avez choisies sur leur expérience.

Dans le guide suivant Je vais vous donner un certain nombre de raisons pour lesquelles la typographie localisée devrait faire partie de votre processus.

Localisation de la typographie pour les applications mobiles

Il serait bien que vous ne trouviez qu'un seul type de police pouvant être utilisé dans tous les environnements localisés. versions de votre application mobile, ce n’est tout simplement pas réaliste.

De nombreuses polices ne fonctionnent que dans un nombre limité de langues, ce qui signifie que vous devez programmer votre application pour qu’elle utilise un certain nombre de polices pour couvrir toutes les langues (et les régions). ) vous ciblez. Pour compliquer davantage les choses, vous devez également en trouver qui n'interfèreront pas trop avec l'image de marque.

Avant de commencer à concevoir votre prochaine application, vous devez donc examiner en quoi ces attributs physiques de votre typographie peuvent affecter l'expérience utilisateur. comment les faire fonctionner.

Compatibilité alphabet

Avant de faire autre chose, dressez une liste de toutes les régions ciblées par votre application et des langues dans lesquelles vous aurez besoin de la traduire. Plus votre ensemble de langues est petit et plus leurs jeux de caractères sont similaires, moins vous aurez besoin de rechercher plusieurs polices de caractères pour votre application.

Cela dit, faites preuve de la diligence requise pour inspecter minutieusement le détail de votre choix. le jeu de caractères de la typographie. Même quelque chose comme des signes diacritiques manquants (comme des accents sur des voyelles) pourrait gêner l'expérience de lecture, sans parler de caractères entiers manquants sur la page et remplacés par une boîte vide.

De plus, n'oubliez pas les langues qui utilisent un caractère mixte. ensembles. Le japonais en est un bon exemple.

Ci-dessus est une capture d'écran du menu de navigation de Amazon en japonais. Il y a quatre alphabets présents:

• anglais
• Katakana
• Hiragana
• Kanji

Bien que vous pensiez pouvoir vous en sortir en téléchargeant une police qui fonctionne dans votre langue cible, Assurez-vous de comprendre toutes les nuances de la façon dont leur texte est écrit en premier. Ce n'est pas seulement une question de comptabilisation des caractères manquants non plus. Utilisez des polices pour modifier les jeux de caractères correspondants.

Si vous souhaitez obtenir de l'aide, utilisez le catalogue Monotype pour passer au crible les options de typographie:

Vous pouvez filtrer les résultats de la recherche afin de localiser les polices prenant en charge vos langues spécifiques et, plus important encore, leurs jeux de caractères complets.

Ce qui est agréable avec cet outil est que vous pouvez explorer plus de détails sur vos polices êtes intéressé à utiliser. Voyez quelles langues sont prises en charge et quelles interfaces utilisateur sont compatibles.

Et si vous voulez être plus sûrs à ce sujet, vous pouvez faire votre propre test comme celui-ci. Je l'ai fait ci-dessus. La langue ne comprend pas CJK (chinois, japonais, coréen), mais je voulais tout de même confirmer que les caractères n'étaient pas pris en charge.

Prise en charge de l'appareil

Si vous souhaitez simplifier considérablement les choses lors du choix des polices pour votre application mobile , vous pouvez toujours utiliser la nouvelle police universellement conviviale de Google appelée Noto de Google .

Pour les applications conçues pour un public totalement international, Google emballé 582 langues, couvrant 237 régions. Ou, si vous avez seulement quelques langues à couvrir, vous pouvez télécharger des packages individuels pour ces dernières et économiser votre espace serveur.

Pour commencer, c'est une bonne option si vous souhaitez donner à la typographie de votre application une apparence cohérente, quelle que soit son apparence. sa langue.

C'est également un bon choix si vos utilisateurs utilisent principalement des appareils Android. ( Google prend en charge Roboto et Noto. Pour les utilisateurs d'iOS il serait utile d'explorer San Francisco et New York.)

Lorsque vous concevez des applications mobiles, vous n'avez heureusement pas prendre en compte quelque chose comme le support du navigateur. (Cependant, pour ceux qui conçoivent des sites Web ou des PWA, tenez compte de cela dans votre stratégie de localisation de typographie.) Mais trouvez-en des compatibles avec les appareils mobiles et qui vous permettent de faire preuve de créativité. peut être assez difficile.

Effectuez une recherche dans un référentiel de polices tel que Adobe Fonts et vous découvrirez que les règles relatives aux licences n'autorisent pas l'utilisation de leurs polices dans les applications mobiles.

Malheureusement, si vous souhaitez personnaliser vos polices pour téléphone portable, vous devrez acquérir une licence correspondant à une source telle que Fontspring .

Orientation vers les langues [19659011] Désormais, il s'agit moins de choisir une typographie que de savoir comment manipuler l'orientation de votre contenu afin de ne pas compromettre votre conception.

Dans certains cas, les concepteurs d'applications ne suivent pas toujours les règles de direction. des langues. Par exemple, une langue comme le japonais, traditionnellement écrite de haut en bas et de droite à gauche, est écrite sous sa forme la plus moderne, de gauche à droite. Cela facilite l'ajustement d'un texte traduit en japonais dans un espace pour d'autres langues de gauche à droite.

Mais qu'en est-il de celles qui ne sont pas aussi flexibles? Utilisons l'application mobile d'Al Jazeera à titre d'exemple.

Voici à quoi ressemble l'édition en anglais de l'application:

[19659002] Tout le texte se lit de gauche à droite.

Dans la version arabe d’Al Jazeera, le texte est cependant le suivant:

Comme les concepteurs ont stratégiquement placé un arrière-plan solide derrière les titres des nouvelles, l'orientation du texte n'a pas d'incidence sur la capacité de voir l'image qui se cache derrière ou d'interpréter le contenu par-dessus.

Cela dit, que si votre conception n'inclut pas de calque d'arrière-plan opaque pour le texte? Par exemple, si la langue principale que vous avez conçue fonctionne de gauche à droite, vous devez choisir des images qui n'interfèrent pas avec la lisibilité du texte. Est-ce qu'il en irait de même si le texte allait de droite à gauche sur la même image?

Et n'oubliez pas les détails plus "textuels" tels que les icônes, les bascules et autres éléments graphiques adjacents au texte.

si vous conceviez un bouton pour dire Start Here avec une flèche tournée vers la droite? La flèche ne devrait-elle pas être déplacée de l'autre côté du texte et inversée pour indiquer l'autre direction?

Qu'en est-il de cet exemple d'interrupteur à bascule dans le panneau des paramètres d'Al Jazeera?

En anglais, la bascule apparaît à droite du texte et en orange lorsqu'elle est activée. Mais en arabe:

La bascule apparaît à gauche et en vert.

Ce sont de petits détails, mais ils ne manqueront pas de vous faire remarquer par vos lecteurs.

Style uniforme

Lorsqu'il s'agit d'écrire du contenu pour une page Web, qu'il s'agisse de quelques centaines de mots ou de quelques milliers, vous devez prévoir des pauses pour le lecteur. Ceci est particulièrement important pour les applications mobiles où le défilement peut devenir une tâche pénible très rapidement si vous ne voyez aucun soulagement en vue.

Les sauts intégrés tels que les en-têtes de section, les listes à puces et le texte stylisé sont le seul moyen de les encourager efficacement à obtenir de l'aide. à travers tout ce qui se trouve sur la page.

Ce n’est pas comme si vous ne pouviez pas utiliser les stylisations de police dans les versions localisées de votre application. Cependant, dans certains cas, la manière dont les styles apparaissent est incohérente d'une version à l'autre. Il y a aussi le problème posé par la publication dans une langue avec un nombre limité de polices disponibles. Vous aurez très peu de marge de manœuvre quant à ce que vous pouvez faire avec des styles comme le gras et l'italique, sans parler des balises d'en-tête.

Cela dit, les concepteurs de polices parviennent de mieux en mieux à répondre à ce besoin. Bien que vous ne puissiez peut-être pas présenter un visage cohérent à 100% d'une application à l'autre, vous pouvez vous en rapprocher un peu.

Par exemple, il s'agit de Haaretz l'application de presse israélienne en hébreu :

Ceci est la version anglaise de cette application:

Il existe en fait un certain nombre de différences notables , comme les couleurs utilisées dans l'en-tête et pour l'ombrage derrière les titres d'actualités. Cependant, si nous nous concentrons uniquement sur le texte lui-même, vous pouvez constater que le style gras varie. Toutefois, dans le contexte de la conception même de l'application, les caractères gras conviennent parfaitement dans les deux cas.

C'est peut-être le moyen de résoudre tout problème que vous pourriez rencontrer avec des styles incohérents – pour personnaliser la conception de l'interface afin qu'elle s'inscrit dans le contexte.

Langue Longueur

La taille des langues varie en fonction de deux facteurs. Le premier a trait à la façon dont leurs mots sont construits.

Un bon exemple de cela est évident dans cet exemple de BBC News . Ceci est l'application en langue anglaise:

Notez que tous les titres sont succincts et existent dans la fiche de chaque article. Je tiens à attirer votre attention sur la carte n ° 2, intitulée:

"Hunt pour faire face à Johnson dans la course au leadership conservateur"

Regardez maintenant la version russe de l'application: [19659002]

Les titres des articles sont excessivement longs ici, et la plupart d'entre eux donnent lieu à des ellipses finales pour indiquer qu'il y a plus à ajouter au titre.

Le titre de la course Tory est beaucoup plus longtemps que le pendant anglais que j’ai souligné plus haut. Autant que je sache, le texte visible ici dit:

"Dans la course finale pour le chef de la Grande-Bretagne, Boris Johnson se rencontrera …"

Le russe n'est qu'une langue cela a tendance à être plus long du fait de la longueur de ses mots et de l'encombrement de l'alphabet cyrillique. L'allemand est un autre exemple de "longue" langue.

Lors de la conception des interfaces de votre application, tenez compte de cela. Alors qu'une marque comme la BBC peut se permettre des titres d'article incomplets ou tout type de texte coupé ou incomplet, les lecteurs et les utilisateurs de votre propre application risquent de ne pas être aussi indulgent.

Un moyen de résoudre ce problème potentiel est de travailler en étroite collaboration avec vos traducteurs. Donnez-leur une structure filaire dans laquelle travailler afin qu'ils sachent combien d'espace physique leur est alloué. Si vous ne travaillez pas avec des traducteurs, vous pouvez toujours créer des dimensions personnalisées mais cohérentes pour les espaces qui encapsulent des langues plus longues (ou même plus courtes).

Hauteur du langage

Dans le même ordre d'idées, il y a une certaine lisibilité de certaines écritures. les systèmes apparaissent lorsqu'ils sont présentés dans les mêmes espaces verticaux que les autres

Il s'agit de l'application d'entraînement Strong :

Remarquez la barre de navigation de le fond. En particulier, concentrez-vous sur le bouton mis en surbrillance pour "Démarrer l'entraînement". Ça va bien, non? C'est parce que cette application a été conçue d'abord pour les utilisateurs anglais, de sorte que le texte s'intégrera parfaitement dans les espaces prévus à cet effet.

Passons maintenant à l'allemand:

Bien que l'anglais et l'allemand utilisent tous les deux l'alphabet latin, vous pouvez constater qu'il commence à être encombré dans la barre de navigation. Et plutôt que de réduire la taille du bouton "Workout beginnen" (qui comporte 16 caractères contre 13 en anglais), le concepteur a réduit le suivi afin de l'adapter parfaitement.

Semblable à ce que j'ai suggéré ci-dessus, je ne sais pas que je suggère cette solution pour ce problème d'espacement. Bien que vous ne puissiez certainement pas laisser ce texte se terminer par un ellipse, vous pouvez envisager de travailler avec vos traducteurs pour vous assurer que le texte est rédigé de manière à correspondre à votre conception.

Enfin, comparons-les à ceux en japonais. version:

C'est ici que l'on comprend comment les différences d'alphabets peuvent affecter la lisibilité lorsqu'elles sont placées dans un espace mal aménagé.

Nous verrons cela avec certaines langues asiatiques, où les glyphes avec des détails super fins deviennent difficiles à lire s’ils n’ont pas suffisamment d’espace pour respirer. L'exemple japonais illustre ce problème avec les deux derniers caractères du bouton en surbrillance.

Vous rencontrerez également ce problème avec des langues telles que l'arabe qui ont tendance à apparaître plus petites même lorsqu'elles sont dimensionnées de manière cohérente avec d'autres types de langue. Cela est principalement dû au style cursif de la langue et aux signes diacritiques qui apparaissent au-dessus et au-dessous des mots.

Si votre application va être traduite dans des langues avec des alphabets différents, il est important de réfléchir à la la hauteur (ou la hauteur perçue) affectera la lisibilité.

Ainsi, lors de la conception de l'interface de votre application, vous devrez envisager l'un des deux plans d'action. Créez l’application et ses espaces avec suffisamment de hauteur pour l’adaptation de toutes les langues ou personnalisez les zones d’engagement clés pour les langues qui en ont le plus besoin – fonctions telles que la navigation, les boutons, les formulaires, etc.

Wraping Up

Construire une application mobile n'est pas une tâche facile, pas plus que d'écrire le contenu. Mais la promesse de toucher un public mondial – et, plus important encore, de rester engagée dans votre application – en vaut la peine.

Cela dit, il est plus important de créer une expérience localisée pour les utilisateurs d'applications que de choisir une palette de couleurs agnostique. ou écrire les dates et les devises dans le bon format. Ici, le langage et le design se croisent et vous pouvez en prendre le contrôle en accordant une plus grande attention à la typographie de votre application.