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
   

   View Slide

2. Pierre-Yves Lapersonne
   • @pylapp
   
   
   • Ingénieur logiciel chez Orange
   
   
   • pylapersonne.info
   

   View Slide

3. Sommaire
   • Cas d’usage
   
   
   • Interfaces graphiques
   
   
   • Iconographie
   
   
   • Langues
   
   
   • Équipements
   

   View Slide

4. #DevoxxFR
   Cas d’usage
   

   View Slide

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 😎
   

   View Slide

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
   

   View Slide

7. #DevoxxFR 7
   Interfaces graphiques
   

   View Slide

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
   

   View Slide

9. Atomiser la GUI
   9
   

   View Slide

10. Atomiser la GUI
    10
    C’est peut-être un détail pour vous, mais pas pour la config du tout 🎵
    

    View Slide

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…)
    

    View Slide

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…)
    

    View Slide

13. Biais #1
    13
    Tout le monde ne lit pas de la
    gauche vers la droite
    

    View Slide

14. Left To Right / Right To Left
    14
    Attention au sens des boutons, indicateurs, menus, gestures, … et contenu embarqué !
    

    View Slide

15. Left To Right / Right To Left
    15
    En RTL, beaucoup d’éléments « basculent », mais attention au déroulement des animations !
    

    View Slide

16. Left To Right / Right To Left
    16
    Contraintes, AutoLayouts et direction du langage avec Xcode
    

    View Slide

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.
    

    View Slide

18. Left To Right / Right To Left
    18
    Dans Android Studio, autoriser le support du RTL
    

    dans le Manifest avec l’attribut android:supportsRTL.
    

    View Slide

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)
    

    View Slide

20. Left To Right / Right To Left
    20
    L’attribut autoMirrored dans le fichier vectoriel
    
    
    fera que le drawable sera retourné en mode RTL.
    

    View Slide

21. Left To Right / Right To Left
    21
    Captures d’écran en mode LTR, RTL avec mirrored drawable, RTL sans mirrored drawable
    

    View Slide

22. Biais #2
    22
    Tout le monde n’est pas en bonne
    santé
    

    View Slide

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
    

    View Slide

24. A11y
    24
    Voice Over / TalkBack, dynamic fonts…
    

    View Slide

25. #DevoxxFR
    Iconographie
    

    View Slide

26. Biais #3
    26
    Tout le monde n’a pas la même
    couleur de peau
    

    View Slide

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.
    

    View Slide

28. I18n dans la peau
    28
    Les variations de teintes de peaux apportent du contexte supplémentaire.
    

    View Slide

29. Biais #4
    29
    Tout le monde ne partage pas les
    mêmes convictions religieuses
    

    View Slide

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.
    

    View Slide

31. Biais #4
    31
    Tout le monde n’a pas le même
    niveau d’instruction
    

    View Slide

32. Taux d’alphabétisme hétérogènes
    32
    Les taux d’alphabétisme peuvent être très bas selon les pays.
    

    View Slide

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.
    

    View Slide

34. Sémantique des images
    34
    Photos : Jessica Paradis
    
    
    Source : creapills.com
    

    View Slide

35. Biais #5
    35
    Tout le monde ne partage pas la
    même culture
    

    View Slide

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
    

    View Slide

37. #DevoxxFR
    Langues
    

    View Slide

38. Af
    fi
    chage du texte
    38
    Attention aux césures, sauts de lignes et aux textes multi-lignes affichés dans les composants.
    

    View Slide

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.
    

    View Slide

40. Af
    fi
    chage du texte
    40
    Privilégier les alignements naturels, et être vigilant
    
    
    sur les sauts de lignes (ici Xcode)
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

43. Traductions
    43
    La meilleure traduction est celle apportée par des personnes maitrisant la langue cible.
    

    View Slide

44. Biais #6
    44
    Tout le monde n’écrit pas les
    choses de la même façon
    

    View Slide

45. Quelle date ?
    45
    1/7/2009
    

    View Slide

46. Formatage des dates
    46
    

    View Slide

47. Formatage des dates
    47
    

    View Slide

48. Quel nombre ?
    48
    6,560
    

    View Slide

49. Formatage des nombres
    49
    

    View Slide

50. Formatage des nombres
    50
    

    View Slide

51. Accord de pluriels
    51
    Un chacal… des chacaux ?
    

    View Slide

52. Biais #7
    52
    Toutes les langues ne partagent pas
    les mêmes subtilités
    

    View Slide

53. Gestion des pluriels
    53
    L’usage du pluriel a des niveaux de finesse différents selon les langues,
    
    
    ici en anglais 🇬🇧.
    

    View Slide

54. Gestion des pluriels
    54
    L’usage du pluriel a des niveaux de finesse différents selon les langues,
    
    
    ici en polonais 🇵🇱.
    

    View Slide

55. Biais #8
    55
    Tous les pays n’ont pas qu’une
    seule langue courante
    

    View Slide

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.
    

    View Slide

57. Biais #9
    57
    Tous les pays ne sont pas encore
    passé au système international
    

    View Slide

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…
    

    View Slide

59. #DevoxxFR
    Équipements
    

    View Slide

60. Biais #10
    60
    Tout le monde n’a pas le même
    matériel
    

    View Slide

61. L’iPhone dans le monde
    61
    L’iPhone a presque 50% des parts de marché au Japon mais à peine 9% en Espagne.
    

    View Slide

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…).
    

    View Slide

63. Biais #11
    63
    

    Tout le monde n’a pas la même
    couverture réseau
    

    View Slide

64. Hétérogénéité des réseaux
    64
    Couverture réseaux de la France 🇫🇷
    

    View Slide

65. Hétérogénéité des réseaux
    65
    Couverture réseaux de la Jordanie 🇯🇴
    

    View Slide

66. Hétérogénéité des réseaux
    66
    Couverture réseaux du Burkina Faso 🇧🇫
    

    View Slide

67. #DevoxxFR
    Bref.
    

    View Slide

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 + …
    

    View Slide

69. #DevoxxFR
    Des biais ?
    

    View Slide

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.
    

    View Slide

71. #DevoxxFR
    Merci / Dziękuję bardzo! / ¡Gracias!
    

    View Slide

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
    
    
    

    View Slide

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
    

    View Slide

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 🍺 🤘 🍣 🐃.
    

    View Slide

75. #DevoxxFR
    

    View Slide