El selector de idioma es un componente que permite a los usuarios elegir su idioma preferido al navegar en una aplicación.
Los casos de uso general incluyen lo siguiente:
Un usuario final de Digital anónimo (no autenticado) que está accediendo a una microaplicación de cliente y necesita encontrar el mejor idioma disponible.
Un usuario final empresarial que abre una vista previa de microfrontend incrustada y debe seleccionar un idioma adecuado entre las opciones definidas por el cliente.
Al diseñar para experiencias de Digital (de consumidor), el selector de idioma aparece dentro del encabezado global y consta de los siguientes elementos:
Ícono de traducción: El ícono de traducción de Jutro es un indicador universal que ayuda a los usuarios a identificar el selector de idioma.
Rótulo de texto (opcional): El rótulo de texto indica el nombre del idioma seleccionado actualmente. El rótulo de texto es opcional en las vistas de tablets y dispositivos móviles.
Menú desplegable de selección estándar: El menú de selección incluye una lista de idiomas disponibles entre los que el usuario puede elegir.
Al diseñar para experiencias empresariales, el selector de idioma aparece dentro de la ventana de vista previa del microfrontend incrustado.
El selector de idioma debe ocupar un lugar destacado en la primera experiencia que un usuario final tenga con una aplicación de consumidor. Todas las interacciones posteriores dependen de que el usuario pueda comprender el contenido de la interfaz de usuario, por eso, otras funciones deben ser secundarias en este punto.
Utilice el ícono “traducir” de Jutro junto con un rótulo de texto para ayudar al usuario a identificar el selector de idioma, incluso si la interfaz de usuario se presenta inicialmente en un idioma que no entiende.
Evite el uso de banderas para representar idiomas. Esta práctica es problemática porque hay idiomas que se hablan en varios países y en un solo país quizás se hablen varios idiomas.
Utilice el ícono “traducir” junto con un rótulo de idioma para la vista de computadoras de escritorio. El rótulo es opcional para las vistas de tablets y dispositivos móviles.
Cuando el selector de idioma aparezca en el encabezado global, oculte el borde de selección y expanda el ícono “traducir” para mantener la coherencia con la apariencia y el patrón funcional.
El componente selector de idioma se ajusta automáticamente a cualquier tamaño de pantalla, incluidas computadoras de escritorio, tablets y dispositivos móviles. En las vistas de tablets y dispositivos móviles, el rótulo de texto es opcional.
Al hacer clic en el selector de idioma, aparece un menú desplegable de selección estándar, que incluye una lista de idiomas disponibles de entre los cuales los usuarios pueden elegir. Tras la selección de un idioma adecuado, la interfaz de usuario cambia sin interferir en el flujo del usuario.
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
Consulte la sección Uso para obtener detalles sobre cómo diseñar un selector de idioma correctamente y las diferentes opciones de configuración que ofrecemos.
De forma predeterminada, el componente LanguageSelector rellena su lista de idiomas automáticamente en función del contexto de su configuración regional. Puede invalidar esto suministrando una lista de códigos ISO de idioma a la propiedad availableLanguageValues.
