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) et du BreizhCamp 2020 (breizhcamp.org).

323bb1cb39e6478e559b6e13d2fdf518?s=128

Pierre-Yves Lapersonne

January 22, 2020
Tweet

Transcript

  1. 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. 2.

    i _ _ _ _ _ _ _ i _

    _ _ _ i _ _ _ i _ n
  3. 3.

    i n t e r n a t i o

    n a l i s a t i o n
  4. 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
  5. 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
  6. 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
  7. 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
  8. 16.

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

    des animations,
 aux éléments de navigations (boutons, indicateurs, menus…), aux gestures…
  9. 17.

    INTERFACES LTR / RTL 17 En RTL, « presque »

    tout devrait « basculer » : positions des menus, boutons, images, …
  10. 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.
  11. 21.

    INTERFACES LTR / RTL 21 Dans Android Studio, autoriser le

    support du RTL
 dans le Manifest avec l’attribut android:supportsRTL
  12. 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.
  13. 23.

    INTERFACES LTR / RTL 23 L’attribut autoMirrored dans le fichier

    vectoriel fera que le drawable sera retourné en mode RTL.
  14. 24.

    INTERFACES LTR / RTL 24 Captures d’écran en mode LTR,

    RTL avec mirrored drawable, RTL sans mirrored drawable
  15. 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.
  16. 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
  17. 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
  18. 39.
  19. 40.

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

    lignes et aux textes multi-lignes affichés dans les composants
  20. 41.

    LOCALIZATION AFFICHAGE DU TEXTE 41 Privilégier les alignements naturels, et

    être vigilant sur les sauts de lignes (ici Xcode)
  21. 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)
  22. 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
  23. 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
  24. 49.
  25. 54.

    LOCALIZATION GESTION DES PLURIELS 54 L’usage du pluriel a des

    niveaux de finesse différents selon les langues, ici en anglais.
  26. 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)
  27. 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
  28. 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
  29. 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 …
  30. 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
  31. 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 ‣ …
  32. 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 !
  33. 65.
  34. 66.

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

    développeurs ‣ graphistes ‣ UI/UX designers
 ‣ Connexe à d’autres sujets ‣ l10n ‣ a11y 56
  35. 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
  36. 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
  37. 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.
  38. 73.