Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.
LiveMême dialogue en anglais, français et allemand
Écran large
Téléphone (280 px)
Les boutons ont une largeur au contenu et flex-wrap : dès que le texte ne tient plus côte à côte, ils passent en pile, pleine largeur. Choisis une langue pour voir l'allongement (allemand : +35 %).
UX / UIBoutons avec un texte trop long : quoi faire
check_circleÀ faire
Server neu starten?Etwa eine Minute angehalten.
Les boutons passent en pile, pleine largeur, l'action principale en haut. Rien n'est coupé.
cancelÀ éviter
Server neu starten?
Largeur fixe et texte tronqué (« Server jetzt n… ») : on ne sait plus ce que le bouton fait.
check_circleÀ faire
Si c'est encore trop long, on raccourcit la phrase dans cette langue : un verbe, éventuellement un complément.
cancelÀ éviter
Un libellé sur deux lignes dans la pilule : le bouton se déforme et se lit mal.
cancelÀ éviter
Réduire la police pour que ça rentre : illisible, et la hiérarchie entre boutons disparaît.
cancelÀ éviter
Une rangée qui déborde du conteneur et coupe le bouton principal hors champ.
check_circleÀ faire
Zitternde HändeSchweißausbrüchePlötzlicher Hunger
Chips : le groupe passe à la ligne, chaque chip garde son libellé entier.
cancelÀ éviter
Libellés de navigation tronqués : chaque destination doit tenir en un mot court dans toutes les langues (« Réglages », « Optionen »).
infoSpécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.
Comment les composants tiennent quand le texte change de langue : français et anglais au minimum, et des textes qui peuvent s'allonger de 35 % (allemand).
Ce que fournit le consommateur
Des chaînes complètes venant des fichiers de traduction (jamais concaténées), et des conteneurs qui laissent le texte décider de la largeur.
Boutons avec un texte trop long
À faire : largeur au contenu ; rangée en flex-wrap pour que les boutons passent en pile, pleine largeur, l'action principale en haut ; si c'est encore trop long, raccourcir la phrase dans cette langue.
À éviter : largeur fixe, texte tronqué par des points de suspension, libellé sur deux lignes dans la pilule, police réduite, rangée qui déborde du conteneur.
Autres composants
Chips : le groupe passe à la ligne, aucune chip tronquée.
Navigation : un mot court par destination dans chaque langue.
Titres et paragraphes : retour à la ligne libre, pas de hauteur fixe.