Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Allô le monde, est-ce que l’i18n va bien ?

Allô le monde, est-ce que l’i18n va bien ?

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

Support de présentation sous licence CC-BY-SA.

#UI #UX #i18n #l10n #a11y #hardware #network #colors #Devoxx #DevoxxFr

323bb1cb39e6478e559b6e13d2fdf518?s=128

Pierre-Yves Lapersonne

September 24, 2021
Tweet

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