En un mundo cada vez más conectado, los sitios web multilingües son cada vez más comunes. Pero diseñarlos... Es un poco más complicado de lo que podría pensar, especialmente cuando se detiene a considerar los cambios de diseño web que tendrá que hacer a su sitio.
Los principios básicos son sencillos: con Weglot puede añadir diferentes idiomas a su sitio de comercio electrónico en menos de 5 minutos. No obstante, luego también tiene que pensar en dónde colocar el selector de idiomas, en cómo acomodar los cambios en el diseño cuando un usuario cambia del inglés a un idioma RTL y en utilizar colores, imágenes e iconos culturalmente apropiados.
En esta guía analizaremos algunas de las consideraciones de diseño más importantes para ayudarle a planificar su sitio web multilingüe.
Cuando alguien llega a su sitio multilingüe, usted desea que tenga una experiencia de usuario coherente, independientemente de la versión lingüística del sitio. Esto significa que los visitantes indios que visiten su sitio en inglés deben ver la misma marca y diseño que en la versión hindi.
No puede evitar que los visitantes bilingües o multilingües vean diferentes versiones de su sitio multilingüe, pero puede asegurarse de que vean la misma marca, la misma disposición y los mismos elementos de diseño web cuando cambien a un idioma diferente del predeterminado.
Si utiliza un sistema de gestión de contenidos, como WordPress, con Weglot es fácil crear un sitio web multilingüe coherente. Weglot se integrará perfectamente con el tema de su constructor de sitios weby traducirá automáticamente su contenido. También se integrará con todas las demás partes importantes de la funcionalidad de su sitio, como los plugins de comercio electrónico, lo que significa que no hay razón para tener diferentes temas o diseños para los diferentes idiomas que añada a su sitio web multilingüe.
Por ejemplo, cuando visita la página de inicio de Airbnb desde un país como Australia…
… y luego cambia al japonés, el diseño y la marca son coherentes en ambos idiomas.
No solo tener un diseño reconocible al instante ayuda a reforzar su marca, sino que será de ayuda en las futuras actualizaciones de su sitio web multilingüe y le ahorrará quebraderos de cabeza cuando sea necesario realizar cambios en la interfaz del usuario (UI) o la experiencia de usuario (UX) debido a los diferentes idiomas.
Coloque el menú desplegable de cambio de idioma en un lugar destacado en su página de inicio y en todas las demás páginas del sitio. Se dará cuenta de que los sitios web multilingües tienen el selector de idiomas en el encabezado o en el pie de la página.
Sea cual sea la opción que elija para su sitio web multilingüe, asegúrese de que sea realmente fácil de encontrar.
También deberá asegurarse de que las opciones de cambio de idioma estén claras. Lo mejor es referirse a un nuevo idioma en su lengua materna. Por ejemplo, utilice «Deutsch» en lugar de «Alemán» y «日本語» en lugar de «Japonés».
Asana, por ejemplo, utiliza un menú desplegable con los nombres de los diferentes idiomas disponibles:
Usted quiere que los visitantes de su sitio web multilingüe se sientan bienvenidos, independientemente del idioma que hablen. Colocar el conmutador de idiomas en un lugar fácil de encontrar le ayudará a conseguirlo.
Puede pensar que dejar que los usuarios elijan su idioma preferido es una obviedad, pero muchos sitios multilingües dificultan realmente la elección de un idioma. En su lugar, obligan a los usuarios a cambiar de región.
Las grandes marcas son las que peor lo hacen. Se encontrará con que muchas le obligan a cambiar la región del sitio multilingüe (es decir, pasar de www.adobe.com a www.adobe.com/kr/) cuando usted solo desea cambiar el idioma predeterminado.
Que alguien hable hindi no significa que quiera cambiar a esa región el sitio web multilingüe de una empresa. ¿Qué pasa si viven en Nueva York y quieren comprar en el sitio de EE. UU. pero quieren leer el sitio web en hindi? No ponga impedimentos para que compren en su sitio web multilingüe: ayúdeles a acceder a su contenido en su idioma preferido.
He aquí un ejemplo excelente de una empresa que permite realmente a los visitantes elegir su idioma preferido: Uber muestra sus opciones de cambio de idioma en el pie de página:
Cuando hace clic en «English» (Inglés), aparece una ventana modal que le permite elegir su idioma preferido:
Lo bueno del diseño de cambio de idioma de Uber es que permite a los visitantes seleccionar su idioma preferido sin obligarlos a cambiar de región.
Si desea mejorar aún más la experiencia de usuario de sus visitantes, considere la posibilidad de «recordar» su idioma por defecto a fin de que la próxima vez que visiten su sitio web multilingüe este se cargue automáticamente en su idioma nativo.
Muchos sitios web multilingües detectarán el idioma nativo del navegador web para establecer automáticamente el idioma principal para los usuarios.
Aunque esto ahorra algo de tiempo a los usuarios, ofrecer traducciones automáticas mediante la detección de idiomas no es una ciencia exacta. Es importante tener en cuenta a los usuarios que puedan llegar a la versión «incorrecta» de su sitio web multilingüe.
Un visitante podría estar ubicado físicamente en España, su sitio web multilingüe lo detectará automáticamente y pasará a mostrarlo en español; sin embargo, dicho visitante podría ser un hablante nativo de inglés que no sepa leer en español.
Por lo tanto, aunque vaya a detectar ubicaciones automáticamente, proporcione asimismo un selector de idiomas para que los visitantes tengan la opción de elegir entre diferentes idiomas.
Las banderas suelen utilizarse para indicar un idioma; sin embargo, existen algunos problemas contextuales que debe tener en cuenta:
En última instancia, lo que se quiere es ofrecer opciones de cambio de idioma que sean fáciles de entender en cualquier idioma.
Cuando se traduce un texto de un idioma a otro, como ocurre con Google Translate, la longitud del texto original y la traducción resultante serán diferentes. Esto puede suponer un reto a la hora de disponer su diseño.
Por escrito, algunos idiomas son más concisos que otros. Idiomas como el japonés y el chino usan uno o dos caracteres para transmitir información, mientras que en otros idiomas se necesitan varias palabras.
Idiomas como el español y el inglés son más extensos, necesitando a veces un 30 % más de espacio que otros idiomas.
La guía del W3C sobre el tamaño del texto en la traducción, cuya lectura completa recomiendo, ofrece excelentes consejos.
El W3C destaca por qué es fundamental que las herramientas de traducción automática tengan elementos de interfaz de usuario adaptables, como botones, campos de entrada y texto descriptivo.
Por ejemplo, cuando se tradujo Flickr a diferentes idiomas, los diseñadores debieron tener en cuenta el texto que aparece debajo de las fotos y que indica el número de visitas.
La siguiente tabla muestra las longitudes comparativas de la palabra «vista» en diferentes idiomas en relación con el inglés original:
¡Del inglés al italiano supone una ampliación del 300 %!
Lo que hay recordar aquí es que, por lo general, el texto se expandirá o contraerá en anchura, así que asegúrese de que su sitio web multilingüe lo tenga en cuenta. También hay que tener en cuenta que cuanto más pequeño sea el texto de origen, más larga será la traducción. Si el espacio es un problema, pruebe con una traducción diferente y menos literal, o cambie el tamaño de la letra en función del nuevo idioma.
La altura de los caracteres y de las líneas es otra de las cosas a tener en consideración. Es habitual que los textos no latinos tengan caracteres mucho más altos que los latinos. Las escrituras como el árabe también necesitarán más espacio vertical entre líneas en comparación con las lenguas latinas.
El W3C dice que siempre debe especificar la codificación de sus páginas web. Recomienda usar UTF-8 para asegurarse de que los caracteres especiales puedan verse correctamente independientemente del idioma.
Aquí se explica cómo hacer la declaración UTF en el encabezado de sus páginas:
Las fuentes web que utilice deberán ser compatibles con todos los idiomas no ingleses que admita su sitio multilingüe WordPress, especialmente con los idiomas no latinos. Esto significa que las fuentes que utilice deben contener todos los caracteres y glifos necesarios.
Algunas fuentes pueden ser compatibles con los alfabetos latinos pero no con el RTL o el cirílico; así pues, antes de comprometerse a usar cualquier fuente, compruebe que los idiomas diferentes del suyo que necesita están incluidos.
Google Fonts, por ejemplo, permite seleccionar idiomas antes de descargar un paquete de fuentes:
Un solo idioma puede comprender cientos de caracteres, lo que puede hacer que los archivos de fuentes tengan un tamaño enorme (otro aspecto a tener en cuenta a la hora de elegir las fuentes para su sitio web multilingüe).
Diseñar páginas para idiomas que se leen de derecha a izquierda puede ser un desafío. Como escribe el desarrollador de SteelKiwi, Robert Dodis, para Smashing Magazine, diseñar para TRL significa «darle la vuelta a la interfaz».
Por ejemplo, el diseño de izquierda a derecha de Facebook es así:
Y así es como se ve el diseño de derecha a izquierda de Facebook en árabe:
El reflejo de su diseño es algo que debe tener en cuenta si está diseñando para los lenguajes LTR y RTL.
Le recomiendo que lea el artículo de Robert en Smashing Magazine para obtener un resumen detallado de cómo diseñar para RTL. No pretendo reinventar la rueda aquí, así que léase su tutorial. Deseo mostrarle el modo de compatibilidad de Weglot con los idiomas RTL y la forma en que puede facilitar el proceso de traducción de su sitio web multilingüe.
El servicio de traducción de Weglot es compatible con los idiomas RTL y con las reglas CSS puede adaptar el diseño de su sitio multilingüe para ajustarlo. Estos son algunos de los idiomas RTL disponibles:
Tras añadir un idioma RTL a su sitio multilingüe con Weglot, puede personalizar su visualización aplicando reglas CSS a su diseño. Vaya a Weglot > Language button design (Diseño de botón de idioma) (opcional) del administrador de WordPress, y desplácese hasta Override CSS. Añada cualquier regla CSS que desee en el área de texto. Es posible que quiera cambiar la fuente, el tamaño, la altura de la línea y mucho más para estilizar el idioma principal y adaptarlo a su diseño.
¡Eso es todo lo que tiene que hacer para añadir y dar estilo a los idiomas RTL con Weglot! Puede leer más sobre cómo Weglot admite los idiomas RTL en la documentación.
Las imágenes, los iconos y otros gráficos son elementos esenciales de cualquier página web. No obstante, debido a su propia naturaleza, los elementos visuales son subjetivos y pueden interpretarse de diferentes maneras cuando se ponen en otro contexto cultural.
Por ejemplo, la versión francesa de la página de inicio de Clarins muestra a una mujer caucásica:
Pero cuando se visita la página de inicio coreana de la compañía, muestra la imagen de una mujer coreana:
Las imágenes también tienen el potencial de ofender. Imágenes que pueden parecer inocentes para el público occidental pueden ser tabú en otro país. Por ejemplo, las imágenes de parejas homosexuales o de igualdad de género no serían aceptadas en países donde la homosexualidad sigue siendo ilegal y los derechos de la mujer aún no han sido plenamente reconocidos.
También deberá tener en cuenta pequeños elementos, como los iconos, y lo que significan para las personas de determinados lugares que visitan su sitio web multilingüe. Por ejemplo, el icono de un globo terráqueo para un público australiano de habla inglesa tendría un aspecto muy diferente para los usuarios de África:
El tercer icono de arriba indica un globo terráqueo, pero no presenta un país o región específicos, lo que lo hace más apropiado para su uso en un sitio web multilingüe.
Tendrá que revisar las imágenes, así como otros elementos gráficos, teniendo en cuenta las sensibilidades regionales y culturales.
Evite utilizar imágenes y otros gráficos con texto incrustado. No podrá traducir el texto incrustado con herramientas como Weglot, así que evítelo completamente.
La forma en que las diferentes culturas ven e interpretan el color varía drásticamente en todo el mundo.
Por ejemplo, en la cultura occidental, el rojo simboliza el amor, la energía, la pasión y el peligro. Por su parte, en las culturas asiáticas es un color muy importante que simboliza la buena suerte, la prosperidad, la celebración y una larga vida. Por el contrario, en algunos países africanos, el rojo está asociado con la muerte y la agresión.
El azul se considera la opción de color más segura y globalmente aceptada para el diseño, ya que tiene muchas asociaciones positivas. Es un color relajante que se considera reconfortante y tranquilizador, a pesar de que también se asocia con la tristeza y la depresión. El azul es también el color más popular para los logotipos de bancos, ya que representa la confianza y la autoridad.
A la hora de elegir colores para el diseño del sitio web multilingüe, asegúrese de buscar en Google el simbolismo asociado a los colores que vaya a utilizar.
No todos los países utilizan el mismo formato de fecha, ni siquiera en inglés. Por ejemplo, en el Reino Unido y Europa es habitual que el formato de la fecha sea día-mes-año, mientras que en Estados Unidos es mes-día-año.
Es posible que también tenga que traducir unidades de medida, lo que ayuda al SEO, dependiendo de su público objetivo. Mientras que el 90 % del mundo usa el sistema métrico, los Estados Unidos, Liberia y Birmania siguen utilizando el sistema imperial de pesos y medidas.
Los plugins de traducción de WordPress vienen en todas las formas y tamaños, y la forma en que trabajan con su diseño particular varía considerablemente. Una solución que garantiza una perfecta integración con su sitio web en varios idiomas es Weglot.
Puede incluso utilizar el editor visual de Weglot para traducir el contenido del front-end de su sitio y a través de subdominios, para poder ver cómo se ve en el contexto del diseño y la disposición de su sitio, similar a Google Translate.
Con Weglot, el diseño y la ubicación del selector de idiomas son 100 % personalizables. El botón predeterminado ha sido diseñado para adaptarse a cualquier sitio, pero también puede modificarlo mediante un CSS personalizado para utilizar el formato que desee.
Además, Weglot es compatible con los principios de diseño expuestos en este post, entre ellos:
Echemos un vistazo a la característica más importante relacionada con el diseño que ofrece Weglot: personalizar el selector de idiomas.
Después de instalar y configurar el plugin Weglot en su sitio web multilingüe WordPress, se le pedirá que introduzca su clave API, su idioma por defecto y el idioma al que desea traducir su contenido, al igual que Google Translate.
Si aún no dispone de una cuenta Weglot, deberá crear una para obtener su clave API.
Una vez guardados los cambios, actualice el front-end de su nuevo sitio web multilingüe y verá un nuevo selector de idiomas en la esquina inferior derecha. Cuando haga clic en él, se expandirá para mostrar los idiomas disponibles, lo que le permitirá visualizar su traducción preferida.
Para empezar a hacer personalizaciones básicas, vaya a Weglot > Language button design (Opcional). En esta pantalla, puede elegir:
En la sección Override CSS puede aplicar reglas CSS para cambiar el aspecto del selector de idiomas en su sitio web multilingüe. Por ejemplo, podría:
En este artículo, Weglot ofrece algunos ejemplos sobre la personalización del diseño del botón de idioma.
Al desplazarse hacia abajo en la pantalla de configuración de Weglot, encontrará instrucciones sobre cómo colocar el selector de idiomas:
Para mostrarle cómo se puede personalizar el conmutador de idiomas en un sitio web multilingüe (ya sea WordPress, Shopify o cualquier otro tipo de sitio web), a continuación puede ver cómo Patyka muestra el conmutador de idiomas en la esquina superior izquierda de la página.
Los idiomas se muestran con sus nombres, y cuando hace clic en el selector y selecciona un idioma, actualiza el contenido de la página traduciéndolo al idioma elegido.
Fundada en 2013, Maestrooo es una agencia de desarrollo web con sede en Francia que cuenta entre sus clientes con From Future y Patyka. En la actualidad, Maestrooo gestiona la mayoría de los clientes de Shopify Plus en Francia.
Maestrooo buscaba una solución web multilingüe sólida y fiable que pudiera adaptarse fácilmente a las necesidades de sus clientes. Después de probar muchas soluciones y descubrir que tenían problemas con el SEO o la gestión del hreflang, el equipo descubrió Weglot.
Weglot traduce todo el contenido de los sitios web de los clientes de Maestrooo, ya sea contenido dinámico, contenido generado por otras aplicaciones o incluso el proceso de pago, sin afectar al diseño de su sitio web multilingüe.
Además de diseñar sitios web personalizados para los clientes, Maestrooo también desarrolla los temas oficiales para la tienda temática de Shopify. Mientras que otras soluciones de sitios web multilingües suelen romper el formato de los temas de Maestrooo, Weglot ofrece una solución de traducción que funciona siempre.
Cada año, Maestrooo ayuda a entre 8000 y 12 000 clientes a iniciarse en Shopify, utilizando Weglot para su sitio web multilingüe.
Cada principio de diseño que hemos explorado en este post lo pondrá en el camino correcto para crear un sitio web multilingüe con una estética fantástica y una experiencia de usuario agradable.
Para proporcionar a los visitantes y clientes de su sitio web una experiencia excepcional en su lengua materna, también vale la pena asegurarse de mirar más allá de su sitio web multilingüe. Considere traducir sus materiales de marketing y asistencia al cliente.
Tenga en cuenta, asimismo, la velocidad y el rendimiento de su sitio web multilingüe. En algunos países que no tienen la suerte de contar con un Internet de alta velocidad, la descarga de grandes paquetes de idiomas dificulta el acceso de los visitantes a su contenido.
Con el plugin de traducción de sitios web multilingües adecuado y un diseño del sitio que ofrezca opciones de traducción fáciles de usar, estará ayudando a los clientes con una interfaz de usuario y una experiencia de usuario visualmente atractivas en su idioma preferido.
