Allô le monde, est-ce que l'i18n de mon app va bien ?

Allô le monde, est-ce que l'i18n de mon app va bien ?

i18n... Mais c’est quoi ce numéronyme ? I-n-t-e-r-n-a-t-i-o-n-a-l-i-s-a-t-i-o-n.

« Ah oui mais c’est le truc où tu mets des fichiers de confs pour deux/trois langues et c’est bon ! »
Ok boomer, c’est pas tout à fait ça.

Internationaliser un logiciel, que ce soit une app mobile, un site web ou un client lourd est plus complexe que quelques fichiers. Gestion des interfaces et des sens de lecture, animations, iconographie... ou encore gestion du texte et des langues qui ont chacune leurs spécificités, convictions religieuses et taux d’alphabétisation... il y a beaucoup de choses à prendre en compte, et cela peut devenir un vrai casse-tête !

Avec des cas concrets et des exemples simples, laissez-moi vous expliquer comment se sortir de pièges dont nous ne sommes pas forcément conscients à cause de nos biais. Et en bonus : des cas d’applications concrets pour Android et iOS !

Conférence animée lors d'un meetup de Code d'Armor (codedarmor.fr), acceptée pour les éditions 2020 BreizhCamp (breizhcamp.org) et de DEVOXX (www.devoxx.fr) (avant annulation cause COVID-19)

323bb1cb39e6478e559b6e13d2fdf518?s=128

Pierre-Yves Lapersonne

January 22, 2020
Tweet

Transcript

  1. ALLO LE MONDE EST-CE QUE L ’I18N DE MON APP

    VA BIEN ? ✿✿✿✿ ʕ •ᴥ•ʔ/ ︻デ═⼀一 This document is available under terms of Creative Commons with CC-BY-SA 3.0 Version 4
  2. i _ _ _ _ _ _ _ i _

    _ _ _ i _ _ _ i _ n
  3. i n t e r n a t i o

    n a l i s a t i o n
  4. PIERRE-YVES
 LAPERSONNE /ME

  5. pylapersonne.info @PYLAPP Dev iOS / Android

  6. I18N SOMMAIRE ▸ Cas d’usage ▸ Interfaces ▸ Iconographie ▸

    Langues ▸ Génie logiciel 6
  7. CAS D’USAGE

  8. CAS D’USAGE MY ORANGE ▸ App de selfcare Orange ▸

    3 continents ▸ +7 langues officielles ▸ +14 pays ▸ +40 features QUE PRENDRE EN COMPTE DANS SON LOGICIEL, UTILISÉ DANS UN CONTEXTE INTERNATIONAL, AYANT UNE DIVERSITÉ CULTURELLE RICHE, EN FAISANT ATTENTION À SES BIAIS ? 8
  9. INTERFACES

  10. INTERFACES ATOMISER LA GUI ‣ Découper les interfaces graphiques en

    un maximum d’éléments (atomes) qui seront configurables, réutilisables et les plus simples possible ‣ Composer les vues avec ces atomes 10 KEEP IT SMALL AND SIMPLE
  11. INTERFACES ATOMISER LA GUI 11

  12. INTERFACES ATOMISER LA GUI 12

  13. INTERFACES CÔTÉ CODE ‣ Fragmenter la UI en .xib
 ‣

    Eviter les storyboards trop riches
 ‣ Dériver / composer les items (UITableViewCell, …)
 ‣ Positionnement par contraintes avec les AutoLayout 13
  14. INTERFACES CÔTÉ CODE ‣ Fragmenter la UI avec des .layouts.xml


    ‣ Eviter les grosses Activity
 ‣ Dériver les items (Fragments, …)
 ‣ Positionnement par contraintes avec les ConstraintLayouts 14
  15. #1 
 TOUT LE MONDE NE LIT PAS DE GAUCHE

    À DROITE
  16. INTERFACES LTR / RTL 16 Attention au sens de défilement

    des animations,
 aux éléments de navigations (boutons, indicateurs, menus…), aux gestures…
  17. INTERFACES LTR / RTL 17 En RTL, « presque »

    tout devrait « basculer » : positions des menus, boutons, images, …
  18. INTERFACES LTR / RTL 18 Comparaison d’animations en LTR et

    en RTL (vidéos)
  19. INTERFACES LTR / RTL 19 Contraintes, AutoLayouts et direction du

    langage avec Xcode
  20. INTERFACES LTR / RTL ‣ Xcode 11 apporte la localization

    pour les images et les SF symbols embarqués dans les fontes. ‣ Plus besoin de retourner soi-même les images ! 20 Les EDI officiels facilitent grandement ce qui touche à a11y, l10n et i18n. Ici du code Swift.
  21. INTERFACES LTR / RTL 21 Dans Android Studio, autoriser le

    support du RTL
 dans le Manifest avec l’attribut android:supportsRTL
  22. INTERFACES LTR / RTL ‣ Dans les layouts, remplacer les

    attributs left et right par start et end ‣ Au besoin utiliser les suffixes comme ldrtl pour layout direction right to left, ldltr pour layout direction left to right, ou ar pour arabic ‣ Android API 17+ (4.2) 22 Les SDK officiels facilitent grandement ce qui touche à a11y, l10n et i18n.
  23. INTERFACES LTR / RTL 23 L’attribut autoMirrored dans le fichier

    vectoriel fera que le drawable sera retourné en mode RTL.
  24. INTERFACES LTR / RTL 24 Captures d’écran en mode LTR,

    RTL avec mirrored drawable, RTL sans mirrored drawable
  25. ICONOGRAPHIE

  26. #2 
 TOUT LE MONDE N’A PAS LA MÊME COULEUR

    DE PEAU
  27. ICONOGRAPHIE I18N DANS LA PEAU 27 Susciter l’adhésion des utilisateurs

    au travers de personas avec des caractéristiques différentes comm la couleur de peau, la morphologie ou la coiffure par exemple.
  28. ICONOGRAPHIE I18N DANS LA PEAU 28 Susciter l’adhésion des utilisateurs

    au travers de teintes de peaux
  29. #3 
 TOUT LE MONDE NE PARTAGE PAS LES MÊMES

    CONVICTIONS RELIGIEUSES
  30. ICONOGRAPHIE CONVICTIONS RELIGIEUSES 30 Sur codetoinspire.org, école de programmation pour

    femmes en Afghanistan, l’avatar porte le voile.
  31. a _ _ e _ _ _ _ _ _

    _ _ y
  32. a c c e s s i b i l

    i t y
  33. #4 
 TOUT LE MONDE N’A PAS LES MÊMES FACILITÉS

  34. ICONOGRAPHIE SÉMANTIQUE 34 Prendre en compte le taux d'alphabétisation qui

    peut être très hétérogène selon les régions.
 Les icônes doivent apporter du sens si le texte ne peut être compris, surtout si des langues ne sont pas supportées (comme les langues régionales). famille, communauté paiement, carte bancaire cadeau, récompense assistance, aide découvertes shopping
  35. #5 
 TOUT LE MONDE NE PARTAGE PAS LA MÊME

    CULTURE
  36. ICONOGRAPHIE COULEURS 36 La couleur a autant une valeur esthétique

    que sémantique. danger amour prospérité joie deuil joie peur deuil courage sagesse autorité deuil solitude deuil paix pureté jalousie chance prestige espoir
  37. l _ _ _ l _ _ _ _ _

    _ n
  38. l o c a l i z a t i

    o n
  39. LANGUES

  40. LOCALIZATION AFFICHAGE DU TEXTE 40 Attention aux césures, sauts de

    lignes et aux textes multi-lignes affichés dans les composants
  41. LOCALIZATION AFFICHAGE DU TEXTE 41 Privilégier les alignements naturels, et

    être vigilant sur les sauts de lignes (ici Xcode)
  42. LOCALIZATION AFFICHAGE DU TEXTE 42 Attributs textDirection pour définir l’orientation

    du texte, textAlignment pour aligner le texte dans les fichiers XML des layouts (Android Studio)
  43. LOCALIZATION LES LANGUES ‣ Prendre en charge les langues officielles

    voire régionales
 ‣ Ne pas oublier les content texts et content descriptions
 ‣ Obtenir le feedback des utilisateurs 43
  44. LOCALIZATION LES TRADUCTIONS 44 LA TRADUCTION EN LIGNE NE FAIT

    PAS TOUT LE TEMPS DES MIRACLES. Exemple d’un projet personnel avec une mauvaise traduction en ligne
  45. #6 
 TOUT LE MONDE NE FORMATE PAS LES CHOSES

    DE LA MÊME FAÇON
  46. 1/7/2009 ?

  47. LOCALIZATION FORMATAGE DES DATES 47

  48. LOCALIZATION FORMATAGE DES DATES 48

  49. 6,560 ?

  50. LOCALIZATION FORMATAGE DES NOMBRES 50

  51. LOCALIZATION FORMATAGE DES NOMBRES 51

  52. Un chacal, des… chacaux ?

  53. #7 
 TOUTES LES LANGUES NE PARTAGENT PAS LES MÊMES

    SUBTILITÉS
  54. LOCALIZATION GESTION DES PLURIELS 54 L’usage du pluriel a des

    niveaux de finesse différents selon les langues, ici en anglais.
  55. LOCALIZATION GESTION DES PLURIELS 55 L’usage du pluriel a des

    niveaux de finesse différents selon les langues, ici en polonais.
 (source : raywenderlich.com)
  56. GÉNIE LOGICIEL

  57. S O L I D R Y

  58. GÉNIE LOGICIEL DES PRINCIPES SOLID ‣ Single responsibility ‣ Une

    seule responsabilité par objet
 ‣ Open / closed ‣ Un objet doit être ouvert aux extensions
 ‣ Substitution de Liskov ‣ Possible de substituer d’instances de types différents
 ‣ Ségrégation des Interfaces ‣ Définir des interfaces spécifiques
 ‣ Inversion des Dépendances ‣ Dépendre des abstractions, non des implémentations 58
  59. GÉNIE LOGICIEL UN CODE DRY 59

  60. GÉNIE LOGICIEL CONFIGURATION AS CODE 60 Configuration globale Configuration pays

    A Configuration pays B Backends pays A Analytics pays A … Backends pays B Analytics pays B … … Avoir un maximum de configuration dans des fichiers tiers qui sont « versionnés » (principe DevOps)
 Utiliser aussi les schemes Xcode et les builds flavors et variants Gradle
  61. GÉNIE LOGICIEL DE BONNES FONDATIONS 61 Factoriser certaines logiques et

    ressources
 Isoler les features les unes des autres • Persistance • Logs • Traitement des données • Web Service • UI, assets • Utils • … Feature A Feature B …
  62. GÉNIE LOGICIEL S’Y VOUER CORE ET APPS 62 Séparer les

    ressources, la configuration et le fonctionnel.
 Bref ça fait 3 diapos que j’explique des trucs qui ne sont pas révolutionnaires. Core (= fondations + features) Ressources graphiques Configuration pays Wording
  63. GÉNIE LOGICIEL AUTOMATISATION 63 ‣ Automatiser les tâches un maximum

    : ‣ headers, contrôles de fichiers, wording, configuration ‣ livraisons en qualification et en production ‣ tests unitaires, fonctionnels ‣ …
  64. GÉNIE LOGICIEL OUTILLAGE 64 On reconnait un bon artisan à

    ses outils.
 « Pipeliner » les branches des stories Jira dans les dépôts git, notifier sur des canaux Slack… Confluence, Jira, Wekan, Taiga, Trello, GitHub, GitLab, Slack, Mattermost… au choix !
  65. I18N ?

  66. CONCLUSION I18N ‣ Connexe à plusieurs métiers, dont : ‣

    développeurs ‣ graphistes ‣ UI/UX designers
 ‣ Connexe à d’autres sujets ‣ l10n ‣ a11y 56
  67. DES BIAIS ?

  68. NOUS NE SOMME PAS TOUS DES FRANÇAIS BLANCS ATHÉES ANGLOPHONES,

    EN BONNE SANTÉ, AVEC UN HAUT NIVEAU D’ÉDUCATION, DE LA 4G PARTOUT ET LE DERNIER IPHONE. Quelqu’un. NOUS PERCEVONS LE MONDE À TRAVERS UN PRISME CONSTRUIT PAR NOS BIAIS
  69. ¡GRACIAS! DZIĘKUJĘ BARDZO!

  70. COMPLÉMENTS

  71. COMPLÉMENTS LIENS EN VRAC ‣ Natural Text Alignment for RTL

    Languages – useyourloaf.com
 ‣ Internationalization and localization – developer.apple.com
 ‣ iOS Locale identifiers – gist.github.com
 ‣ Internationalizing Your iOS App: Getting Started – raywenderlich.com
 ‣ RTL Support on Android. Here is all you need to know - android.jlelse.eu ‣ Recommandations accessibilité numérique Orange - orange.com
 ‣ RTL Support in Android – medium.com
 ‣ Support different languages and cultures – developer.android.com
 ‣ Different meanings of colours in different countries – funwithforeignlanguage.com
 ‣ Localization of Plural Forms – michiganlabs.com
 ‣ The Hitchhiker’s Guide to Diversity - DevFest du Bout du Monde ‣ Accusé de racisme, ce dessin animé a été supprimé de Youtube - huffingtonpost.fr ‣ DeepL Translator - deepl.com
  72. COMPLÉMENTS CRÉDITS ‣ 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 ‣ Code source de Baah Box – Copyright © Orange SA, GPL 3.0 ‣ Image Fried free icon – by photo3idea_studio, Flaticon Basic License ‣ Image The Android logo as of 2019 – by CMetalCore, domaine publique ‣ Logo de Android Studio – by Google Inc., CC BY 2.5 ‣ Logo de CocoaPods - ? ‣ Logo de Confluence – fair use, modifié avec GIMP ‣ Logo de Fastlane – Copyright © Google, Inc. ‣ Logo de GitLab CI – by Darby, CC BY-SA 4.0 ‣ Logo de Gradle – by Gradle Inc., marque déposée ‣ Logo de iOS – by Apple Inc., domaine publique ‣ Logo de Jira – by Inodes, CC BY-SA 4.0, modifié avec GIMP ‣ Logo de Ruby – by Yukihiro Matsumoto, CC BY-SA 2.5 ‣ Logo de Slack – by Slack Technologies Limited, marque déposée ‣ Logo de Swift – domaine publique ‣ Logo de Xcode – by Apple Inc., marque déposée ‣ Meme de Picard généré via imgflip.com ‣ 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 Présentation animée pour Code d’Armor, BreizhCamp et DEVOXX France.
  73. None