Système de Conception pour l'Internationalisation

Système de Conception pour l'Internationalisation (i18n)

Objectif

Le skill « Système de Conception pour l'Internationalisation (i18n) » fournit une méthodologie pour concevoir des interfaces prêtes pour un public mondial. Il va au-delà de la simple traduction pour aborder les implications spatiales, typographiques et visuelles des différentes langues et cultures. Ce système garantit que les mises en page sont suffisamment flexibles pour s'adapter à des longueurs de texte variables, que les mises en page bidirectionnelles (de droite à gauche) sont correctement mises en miroir et que les indices visuels restent culturellement appropriés.

Cas d'Utilisation

• Concevoir une plateforme SaaS mondiale ou un site e-commerce pour un déploiement multi-régions.
• Adapter une interface existante uniquement en anglais pour des langues RTL (Arabe, Hébreu, Persan).
• Établir des normes typographiques pour les écritures non latines (CJC, Cyrillique, Devanagari).
• Auditer les composants d'interface utilisateur pour la « préparation à l'expansion » (gestion de la croissance du texte en allemand ou en finnois).
• Créer des ensembles d'icônes qui évitent les préjugés culturels ou directionnels.

Quand ne PAS l'Utiliser

• Sites Monorégionaux/Monolangues : Lorsqu'il n'y a pas de plan d'expansion future et que les conventions locales sont strictement connues.
• Sites Narratifs Purement Visuels : Lorsque la conception est une expression artistique qui repose sur des relations spatiales fixes et non réorganisables.
• Traduction de Contenu Uniquement : Si la tâche consiste strictement à traduire le texte sans modifier le comportement de l'interface utilisateur ou de la mise en page.

Entrées

1. Liste des Langues Cibles : Quelles langues et écritures doivent être prises en charge ?
2. Sens de Lecture : La langue s'écrit-elle de gauche à droite (LTR) ou de droite à gauche (RTL) ?
3. Ressources Typographiques : Piles de polices localisées qui maintiennent la voix de la marque à travers les écritures.
4. Contexte Culturel : Conventions spécifiques à la région pour les couleurs, les symboles et les formats de données (dates, devises).
5. Points de Rupture de Mise en Page : Issus du « système de grille responsive ».

Sorties

1. Spécification de Mise en Miroir Bidirectionnelle (RTL) : Une carte des éléments qui basculent et de ceux qui restent fixes (par exemple, les barres de progression par rapport aux commandes média).
2. Matrice d'Échelle Typographique : Tailles de police et hauteurs de ligne ajustées pour différentes familles d'écritures.
3. Plan d'Expansion : Modèles d'interface utilisateur conçus pour gérer une variance de longueur de texte de +/- 40 %.
4. Logique d'Iconographie : Directives pour les icônes mises en miroir par rapport aux icônes non mises en miroir.
5. Jetons de Conception pour la Localisation : Propriétés logiques (par exemple, padding-inline-start) définies dans le cahier des charges de conception.

Workflow

1. Concevoir pour l'Expansion du Texte

Ne supposez jamais qu'un libellé restera court. Des langues comme l'allemand ou l'italien peuvent être 30 à 50 % plus longues que l'anglais.

• Conteneurs Flexibles : Évitez les boutons ou les cartes à largeur fixe ; utilisez min-width ou fit-content.
• Retour à la Ligne du Texte : Assurez-vous que les éléments d'interface utilisateur (comme les onglets ou les éléments de menu) peuvent passer à la ligne élégamment ou passer à un menu « débordement ».
• Centrage Dynamique : Si le texte s'étend, assurez-vous qu'il ne chevauche pas les éléments adjacents.

2. Implémenter la Logique de Mise en Miroir RTL

Pour les langues s'écrivant de droite à gauche, le « modèle mental » de la page s'inverse :

• Mise en Miroir de la Mise en Page : La barre latérale se déplace de la gauche vers la droite ; le logo se déplace du coin supérieur gauche au coin supérieur droit.
• Propriétés Logiques : Annotez les conceptions en utilisant « Début » et « Fin » au lieu de « Gauche » et « Droite ».
• Flux de Navigation : Les boutons « Retour » en LTR (pointant vers la gauche) doivent pointer vers la droite en RTL pour indiquer « Retour à l'état précédent ».

3. Localiser la Typographie et le Rythme Vertical

Les écritures non latines ont des hauteurs, des densités et des exigences de lisibilité différentes :

• CJC (Chinois, Japonais, Coréen) : Nécessite des tailles de base légèrement plus grandes et une hauteur de ligne (interlignage) plus généreuse en raison de la complexité des caractères.
• Arabe : Présente de grandes hampes ascendantes et des jambages profonds ; augmentez l'espacement vertical pour éviter les « conflits » entre les lignes.
• Piles de Secours : Définissez des polices de secours système qui correspondent aussi étroitement que possible à la graisse et à la hauteur d'x de votre police de marque principale.

4. Auditer la Directionnalité de l'Iconographie

Tout ne bascule pas en RTL :

• Miroir : Icônes directionnelles (flèches, avions, vélos), barres de progression et icônes représentant un mouvement « avant/arrière ».
• Ne Pas Mettre en Miroir : Icônes horaires/antihoraires (horloges, rechargement), commandes de lecture média (Lecture, Pause, Recherche) et « coches » (universelles).
• Chiffres : La plupart des régions RTL utilisent les chiffres arabes occidentaux (1, 2, 3), qui se lisent toujours de gauche à droite même dans un texte RTL.

5. Établir des Normes de Formatage des Données

• Date et Heure : Définissez clairement JJ/MM/AAAA par rapport à MM/JJ/AAAA pour éviter toute confusion.
• Devise : Définissez si le symbole précède ou suit le montant (par exemple, 10 $ vs 10 €).
• Calendriers : Certaines régions utilisent des jours de début de semaine différents (lundi vs dimanche).

Règles de Décision

• La Règle de Mise en Miroir : Si un élément d'interface utilisateur représente une « direction » ou un « temps » (aller de l'avant), il DOIT être mis en miroir en RTL. S'il représente un objet physique (comme un appareil photo ou une horloge), il reste généralement fixe.
• La Règle du « Buffer de 35 % » : Laissez toujours 35 % d'espace vide dans les boutons et les libellés pendant la phase de conception en anglais pour tenir compte de l'expansion.
• Dimensionnement Spécifique à l'Écriture : Si une écriture est très complexe (par exemple, Devanagari), augmentez la taille de la police de 10 à 15 % par rapport à l'équivalent latin pour la lisibilité.
• Sensibilité Culturelle : Évitez les icônes centrées sur l'Occident (par exemple, une tirelire pour l'épargne, ce qui est inapproprié dans de nombreuses cultures).

Contraintes

• Accessibilité : L'expansion du texte ne doit pas masquer les éléments interactifs ni provoquer de débordement horizontal. Les rapports de contraste doivent être maintenus dans toutes les versions localisées.
• Responsivité : Les mises en page doivent rester stables lors du changement de direction. Utilisez padding-inline et margin-inline dans les spécifications.
• Hiérarchie : L'appel à l'action principal doit rester l'élément le plus important, quel que soit le sens de lecture.

Schémas d'Échec Courants

• La « Casse d'Expansion » : Largeurs codées en dur qui font que le texte traduit est tronqué ou se chevauche.
• Mise en Miroir Paresseuse : Mettre en miroir des icônes qui ne devraient pas l'être (comme un bouton « Lecture » ou une horloge), ce qui perturbe les utilisateurs.
• Le Piège du « Design d'Abord en Anglais » : Concevoir une interface utilisateur minimaliste et serrée en anglais qui devient totalement inutilisable dans des langues avec des mots longs.
• Absence de Polices de Secours : Ne pas spécifier de polices pour les écritures non latines, ce qui entraîne des « Tofu » (boîtes de caractères cassées).
• Alignement Incohérent : Mélanger une mise en page en miroir avec un alignement de texte non mis en miroir, créant une sensation irrégulière et peu soignée.

Critères de Validation

• La mise en page est correctement mise en miroir pour les fenêtres d'affichage RTL (échange barre latérale/logo).
• Les composants d'interface utilisateur gèrent une expansion de texte de 40 % sans se casser ni se chevaucher.
• L'échelle typographique est ajustée en fonction de la complexité de l'écriture (par exemple, augmentation de la hauteur de ligne pour l'arabe/CJC).
• L'iconographie suit la logique « Mise en miroir vs. Fixe ».
• Les conceptions utilisent des propriétés logiques (Début/Fin) au lieu de propriétés absolues (Gauche/Droite).
• Les formats de date, de devise et de nombre sont correctement localisés.
• Les piles de polices de secours sont définies pour toutes les écritures cibles.