Le sélecteur de langue est un composant qui permet aux utilisateurs de choisir leur langue préférée lors de la navigation dans une application.
Les cas d'utilisation généraux comprennent :
un utilisateur final Digital anonyme (non authentifié) accède à une microapplication client et doit trouver la langue disponible la plus adaptée.
un utilisateur final Enterprise ouvre un aperçu intégré du micro front-end et doit sélectionner une langue appropriée parmi les options définies par le client
Lors de la conception pour les expériences Digital (client), le sélecteur de langue apparaît dans l'en-tête global et se compose des éléments suivants :
Icône de traduction : l'icône de traduction Jutro est un indicateur universel qui aide les utilisateurs à identifier le sélecteur de langue.
Étiquette de texte (facultatif) : l'étiquette de texte indique le nom de la langue actuellement sélectionnée. Une étiquette de texte est facultative dans les affichages de tablette et d'appareil mobile.
Menu déroulant de sélection standard : le menu de sélection comprend une liste de langues disponibles que l'utilisateur peut choisir.
Lors de la conception d'expériences métier, le sélecteur de langue apparaît dans la fenêtre d'aperçu du micro front-end intégré.
Le sélecteur de langue doit être mis en évidence lors de la première expérience d'un utilisateur final avec une application grand public. Toutes les interactions ultérieures dépendent de la capacité de l'utilisateur à comprendre le contenu de l'interface utilisateur. Les autres fonctions doivent donc être secondaires à ce stade.
Utilisez l'icône « traduire » de Jutro avec une étiquette de texte pour aider un utilisateur à identifier le sélecteur de langue, même si l'interface utilisateur s'affiche initialement dans une langue qu'il ne comprend pas.
Évitez d'utiliser des indicateurs pour représenter les langues. Cette pratique est problématique, car une langue peut être parlée dans plusieurs pays et plusieurs langues peuvent être parlées dans un seul pays.
Utilisez l'icône « traduire » conjointement avec une étiquette de langue pour l'affichage de bureau. Une étiquette est facultative pour les vues sur tablette et appareil mobile.
Lorsque le sélecteur de langue apparaît dans l'en-tête global, masquez la bordure de sélection et développez l'icône « traduire » pour rester cohérent avec l'apparence et le modèle fonctionnel.
Le composant Sélecteur de langue s'ajuste automatiquement à n'importe quelle taille d'écran, y compris les ordinateurs de bureau, tablettes et appareils mobiles. Dans les vues tablette et mobile, le libellé de texte est facultatif.
Le fait de cliquer sur le sélecteur de langue génère un menu déroulant de sélection standard, qui comprend une liste de langues disponibles parmi lesquelles les utilisateurs peuvent choisir. Lors de la sélection d'une langue appropriée, l'interface utilisateur change sans interférence avec le flux de l'utilisateur.
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
Consultez la section Utilisation pour découvrir comment concevoir correctement un sélecteur de langue et connaître les différentes options de configuration que nous proposons.
Par défaut, le composant LanguageSelector alimente automatiquement sa liste de langues en fonction du contexte de votre paramètre régional. Vous pouvez remplacer ce comportement en fournissant une liste de codes ISO de langue à la propriété availableLanguageValues.
