$30 off During Our Annual Pro Sale. View Details »

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

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)

Pierre-Yves Lapersonne

September 24, 2021
Tweet

More Decks by Pierre-Yves Lapersonne

Other Decks in Programming

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