Allô le monde, est-ce que l’i18n va bien ? (DEVOXX France)

i18n... C'est quoi déjà ce numéronyme ? Internationalisation. Ah oui c'est le truc où faut faire plusieurs fichiers de langues ! Humm non, pas vraiment

Internationaliser un logiciel, que ce soit une app native, un site web ou une PWA, n'est pas qu'une question de fichiers de config. La UI, la UX, les animations, l'iconographie, le format des données, les langues... il y a un paquet de trucs à prendre en compte ! Et il faut surtout éviter le piège de nos propres biais sociétaux qui peuvent nous induire en erreur : aucune plateforme n'est à l'abri !

Je vous propose de voyager un peu et de voir les problématiques à traiter, quels que soient les plateformes et métiers, avec en bonus des exemples de leur prise en charge côté Android et iOS ;-)

Présentation réalisée à Devoxx France 2021.
Support de présentation sous licence CC-BY-SA.

Enregistrement vidéo de Devoxx France 2021 (YouTube) : https://www.youtube.com/watch?v=OhUDcWjCdZA

Vous avez aimé ce support ? Payez moi une bière , merci <3
(https://pylapersonne.info/buymeacoffee)

Transcript

1. #DevoxxFR Allô le monde Est-ce que l’i18n de mon app va bien ? Pierre-Yves Lapersonne @pylapp ✿✿✿✿ ʕ •ᴥ•ʔ/ ︻デ═⼀ Version 4 - 01/10/2021
2. Pierre-Yves Lapersonne • @pylapp • Ingénieur logiciel chez Orange • pylapersonne.info
3. Sommaire • Cas d’usage • Interfaces graphiques • Iconographie • Langues • Équipements
4. #DevoxxFR Cas d’usage
5. Une grosse app en prod 5 • Utilisée très fréquemment par nos clients • Répartis sur 3 continents • +7 langues o ff i cielles • +14 pays • Plein de features trop cools qu’on veut voir utilisées 😎
6. Mais ! 6 À quoi doit-on faire attention pour avoir une adhésion forte de nos utilisateurs, dans un environnement international, avec une diversité culturelle et en évitant nos propres biais ? « Il dit qu’en 45 minutes, c’est chaud » - Commissaire Bialès
7. #DevoxxFR 7 Interfaces graphiques
8. Atomiser la GUI 8 • Découper les interfaces graphiques en un maximum d’éléments con fi gurables, réutilisables et les plus simples possible KEEP IT SMALL AND SIMPLE
9. Atomiser la GUI 9
10. Atomiser la GUI 10 C’est peut-être un détail pour vous, mais pas pour la config du tout 🎵
11. Côté code 11 • Fragmenter la GUI en plusieurs .xib ou View 
 • Éviter les storyboards et View trop gros 
 • Dériver / composer les items (UITableViewCell, View, …) 
 • Positionnement par contraintes avec les AutoLayout (J’ai pas encore trop creusé SwiftUI sur ce sujet…)
12. Côté code 12 • Fragmenter la GUI avec des layouts.xml 
 • Éviter les grosses Activity 
 • Dériver les items (Fragment, …) 
 • Positionnement par contraintes avec les ConstraintLayout (J’ai pas encore trop creusé Jetpack Compose sur ce sujet non plus…)
13. Biais #1 13 Tout le monde ne lit pas de la gauche vers la droite
14. Left To Right / Right To Left 14 Attention au sens des boutons, indicateurs, menus, gestures, … et contenu embarqué !
15. Left To Right / Right To Left 15 En RTL, beaucoup d’éléments « basculent », mais attention au déroulement des animations !
16. Left To Right / Right To Left 16 Contraintes, AutoLayouts et direction du langage avec Xcode
17. Left To Right / Right To Left 17 • Depuis Xcode 11, support de la localization pour les images et les SF symbols embarqués dans les fontes. • Plus besoin de retourner soi-même les images ! Les EDI officiels facilitent grandement ce qui touche à a11y, l10n et i18n.
18. Left To Right / Right To Left 18 Dans Android Studio, autoriser le support du RTL 
 dans le Manifest avec l’attribut android:supportsRTL.
19. Left To Right / Right To Left 19 Les SDK officiels facilitent grandement ce qui touche à a11y, l10n et i18n. • Dans les layouts, remplacer les attributs left et right par start et end • Au besoin utiliser les su ff i xes comme ldrtl pour layout direction right to left, ldltr pour layout direction left to right, ou ar pour arabic • Android API 17+ (4.2)
20. Left To Right / Right To Left 20 L’attribut autoMirrored dans le fichier vectoriel fera que le drawable sera retourné en mode RTL.
21. Left To Right / Right To Left 21 Captures d’écran en mode LTR, RTL avec mirrored drawable, RTL sans mirrored drawable
22. Biais #2 22 Tout le monde n’est pas en bonne santé
23. Exemple : la vue 23 • En 2019 2,2 milliards de personnes dans le monde sou ff rent de troubles de la vision • 90% des personnes malvoyantes dans le monde vivent dans les pays en développement Coucou le Référentiel Général d'Amélioration de l’Accessibilité ! NE PAS NEGLIGER L’ACCESSIBILITE
24. A11y 24 Voice Over / TalkBack, dynamic fonts…
25. #DevoxxFR Iconographie
26. Biais #3 26 Tout le monde n’a pas la même couleur de peau
27. I18n dans la peau 27 Créer l’adhésion des utilisateurs au travers de personas avec des caractéristiques différentes comme la couleur de peau, la morphologie ou la coiffure pour qu’ils s’identifient au produit.
28. I18n dans la peau 28 Les variations de teintes de peaux apportent du contexte supplémentaire.
29. Biais #4 29 Tout le monde ne partage pas les mêmes convictions religieuses
30. Convictions religieuses 30 Sur codetoinspire.org, école de programmation pour femmes en Afghanistan, l’avatar féminin et les personnes de l’image de la landing page portent le voile.
31. Biais #4 31 Tout le monde n’a pas le même niveau d’instruction
32. Taux d’alphabétisme hétérogènes 32 Les taux d’alphabétisme peuvent être très bas selon les pays.
33. Sémantique des images 33 Prendre en compte le taux d’alphabétisme qui peut être très hétérogène. 
 Les icônes doivent apporter du sens si le texte ne peut être compris. Il faut envisager les cas où la lecture, l’écriture et le calcul ne sont pas maitrisés.
34. Sémantique des images 34 Photos : Jessica Paradis Source : creapills.com
35. Biais #5 35 Tout le monde ne partage pas la même culture
36. Couleurs 36 La couleur a autant une valeur esthétique que sémantique. danger amour prospérité joie deuil sagesse autorité deuil solitude deuil paix pureté jalousie chance prestige espoir joie peur deuil courage
37. #DevoxxFR Langues
38. Af fi chage du texte 38 Attention aux césures, sauts de lignes et aux textes multi-lignes affichés dans les composants.
39. La taille, ça compte ! 39 🇲🇬 Isika rehetra dia miaina ao an-kibon'ny alika goavambe, fantatry ny rehetra izany fa tsy misy miteny na inona na inona mihitsy. 🇮🇳 நா ம் அைனவ ரு ம் ஒ ரு ெப ரி ய நா யி ன் வ யி ற்றி ல் வா ழ்க ி றோ ம் , அ து அைனவ ரு க் கு ம் ெத ரி யு ம் , ஆனா ல் யா ரு ம் எ து வு ம் சொ ல்ல வி ல் லை . 🇫🇷 Nous vivons tous dans le ventre d'un chien géant, tout le monde le sait mais personne ne dit rien du tout. 🇩🇪 Wir alle leben im Bauch eines riesigen Hundes, jeder weiß es, aber niemand sagt etwas. 🇺🇸 We all live in the belly of a giant dog, everybody knows it but nobody says anything. 🇨🇳 我们都⽣活在⼀只⼤狗的肚⼦⾥，每个⼈都知道这⼀点，但没有⼈说什么。 teHbe'chugh mInDu'Daj. Google Translate et Bing parlent mieux que moi en malgache, tamoul, allemand, anglais, chinois et klingon.
40. Af fi chage du texte 40 Privilégier les alignements naturels, et être vigilant sur les sauts de lignes (ici Xcode)
41. Af fi chage du texte 41 Attributs textDirection pour définir l’orientation du texte, textAlignment pour aligner le texte dans les fichiers XML des layouts (Android Studio)
42. Af fi chage du texte 42 • Prendre en charge les langues o ff i cielles voire régionales 
 • Ne pas oublier les content texts et content descriptions 
 • Obtenir le feedback des utilisateurs
43. Traductions 43 La meilleure traduction est celle apportée par des personnes maitrisant la langue cible.
44. Biais #6 44 Tout le monde n’écrit pas les choses de la même façon
45. Quelle date ? 45 1/7/2009
46. Formatage des dates 46
47. Formatage des dates 47
48. Quel nombre ? 48 6,560
49. Formatage des nombres 49
50. Formatage des nombres 50
51. Accord de pluriels 51 Un chacal… des chacaux ?
52. Biais #7 52 Toutes les langues ne partagent pas les mêmes subtilités
53. Gestion des pluriels 53 L’usage du pluriel a des niveaux de finesse différents selon les langues, ici en anglais 🇬🇧.
54. Gestion des pluriels 54 L’usage du pluriel a des niveaux de finesse différents selon les langues, ici en polonais 🇵🇱.
55. Biais #8 55 Tous les pays n’ont pas qu’une seule langue courante
56. Langues répandues 56 • 🇧🇪 Belgique : français, néerlandais • 🇫🇷 France : français • 🇱🇧 Liban : anglais , arabe, français • 🇲🇩 Moldavie : roumain, russe • 🇸🇳 Sénégal : français, wolof • 🇨🇭 Suisse : allemand, français, italien Prendre en charge les langues courantes du pays évite d’exclure une partie de la population.
57. Biais #9 57 Tous les pays ne sont pas encore passé au système international
58. Une question d’unités 58 • Vitesse : Km/h ou mph ? • Distance : m ou ft ? cm ou inch ? • Température : °C ou °F ? • Masse : kg ou lb ? • 1 pinte* de bière 🍺 = 50 cl 🇫🇷 ou 47,3 cl 🇺🇸 ou 56,8 cl 🇬🇧 ? (*) ou une « chopine », vous voyez le bazar ? On plaisante, mais vous avez entendu parler du Mars Climate Orbiter ? Bien être vigilant sur les unités utilisées pour éviter les gags…
59. #DevoxxFR Équipements
60. Biais #10 60 Tout le monde n’a pas le même matériel
61. L’iPhone dans le monde 61 L’iPhone a presque 50% des parts de marché au Japon mais à peine 9% en Espagne.
62. Et en Afrique ? 62 Parts de marché des constructeurs en Afrique, avec en top 4 Samsung et Huawei de loin, puis Apple et Tecno. Les appareils bas de gamme et milieu de gamme ne doivent pas être négligés (SoC, modem, CPU, batterie, écran, stockage…).
63. Biais #11 63 
 Tout le monde n’a pas la même couverture réseau
64. Hétérogénéité des réseaux 64 Couverture réseaux de la France 🇫🇷
65. Hétérogénéité des réseaux 65 Couverture réseaux de la Jordanie 🇯🇴
66. Hétérogénéité des réseaux 66 Couverture réseaux du Burkina Faso 🇧🇫
67. #DevoxxFR Bref.
68. I18n = ? 68 C’est un peu plus compliqué que juste des localizable.strings et strings.xml. i18n = l10n + a11y + hardware + réseau + culture + mélanine + santé + alphabétisme + …
69. #DevoxxFR Des biais ?
70. Conclusion 70 Il n’y a pas que des personnes françaises , blanches , athées , anglophones, en bonne santé, avec un haut niveau d’éducation, de la 4G partout et le dernier Galaxy Z Fold3. Bordel.
71. #DevoxxFR Merci / Dziękuję bardzo! / ¡Gracias!
72. Liens en vrac 72 • Accusé de racisme, ce dessin animé a été supprimé de Youtube - huffingtonpost.fr • À Toulouse, cette graphiste crée des visuels pour illustrer les stations de métro - creapills.com • Carte de couvertures réseaux - nerf.com • Cécité et déficience visuelle - who.int • Different meanings of colours in different countries – funwithforeignlanguage.com • Natural Text Alignment for RTL Languages – useyourloaf.com • iOS Locale identifiers – gist.github.com • Internationalization and localization – developer.apple.com • Internationalizing Your iOS App: Getting Started – raywenderlich.com • L’alphabétisation continue de progresser - franceculture.fr • Les pays les plus accros à l’iPhone - fr.statista.com • Localization of Plural Forms – michiganlabs.com • Mobile Vendor Market Share Africa - statscounter.com • Nous vivons tous le ventre d’un chien géant, et personne ne dit rien. • Recommandations accessibilité numérique Orange - orange.com • Référentiel Général d’Amélioration de l’Accessibilité - numerique.gouv.fr • RTL Support in Android – medium.com • RTL Support on Android. Here is all you need to know - android.jlelse.eu • Support different languages and cultures – developer.android.com • The Hitchhiker’s Guide to Diversity - DevFest du Bout du Monde • Une vue globale sur la cécité et la déficience visuelle - orcam.com
73. Crédits en vrac 73 • Affichage du code source fait avec carbon • Captures d’écran et images de Baah Box – Copyright © Orange SA, CC BY-SA 4.0 • Captures d’écran et images de My Orange – Copyright © Orange SA • Captures d’écran de l’application iOS Vite Ma Dose - GitHub • Code source de Baah Box – Copyright © Orange SA, GPL 3.0 • Gif du Roi Loth - by northernsycthe • Icone klingon - icones8.fr • Image The Android logo as of 2019 – by CMetalCore, domaine public • Logo de Android Studio – by Google Inc., CC BY 2.5 • Logo de GitHub - by Github, MIT • Logo de iOS – by Apple Inc., domaine public • Logo de Kiss – Copyright © CMetalCore, domaine public • Logo de Mastodon - by Jin Nguyen • Logo de Medium - by Medium’s design and research team, domaine public • Logo de Swift – domaine publique • Logo de Twitter - by Twitter • Logo de Xcode – by Apple Inc., marque déposée • Mockups des apps réalisés avec Smartmockups et le Générateur d’images sur écran d’appareil • Trollfaces dénichées sur pngitem.com
74. Note 74 Merci aux organisateurs de DevoxxFr pour m’avoir proposé de faire cette présentation cette année 🧡. Support de présentation retravaillé sur la forme et enrichi sur le contenu, qui devait être présenté lors de l’édition 2020 de DevoxxFr, annulé à cause de la pandémie de COVID-19 🦠. Je m’excuse pour ne pas avoir eu plus de temps à consacrer aux aspects relatifs à SwiftUI et Jetpack Compose. Buvez de la bière, écoutez du métal, mangez des sashimis et libérez votre code bordel 🍺 🤘 🍣 🐃.
75. #DevoxxFR