Consejos de diseño de sitios web en varios idiomas con ConveyThis

Consejos de diseño de sitios web en varios idiomas con ConveyThis: mejore la experiencia del usuario y el alcance global con estrategias de diseño prácticas.
Transmitir esta demostración
Transmitir esta demostración
consejos de diseño multilenguaje

Numerosos sitios web ahora tienen muchas opciones de idiomas para que sus visitantes de todo el mundo puedan navegar cómodamente. Internet ha ayudado a hacer del mercado una experiencia global, por lo que al tener un sitio web, ha abierto las puertas de su negocio a todos los que tengan una conexión a Internet. Sin embargo, si no entienden el idioma, no se quedarán. El sitio web en varios idiomas es fácil.

Afortunadamente, el proceso de convertir su sitio web en multilingüe es bastante simple. ConveyThis puede crear una versión traducida de su sitio en minutos y luego puede personalizar la apariencia y la ubicación de su conmutador de idioma, hacer algunos cambios de diseño para adaptarse a idiomas más extensos o de derecha a izquierda y cambiar colores e imágenes en aquellos casos en que los originales son inadecuado para la cultura de destino.

El proceso no está completamente automatizado, deberá investigar un poco de antemano. Esta guía explica algunos aspectos del diseño de sitios web para ayudarlo a ingresar cómodamente al mundo de los sitios web multilingües y el gran diseño.

Marca consistente

La experiencia del usuario debe ser coherente independientemente de la versión de idioma que esté visitando. La apariencia debe ser muy similar en todas las versiones, algunas diferencias pueden ser necesarias debido a las diferencias de idioma o cultura, pero si cambia de idioma, no debería sentir que ha sido redirigido a un sitio completamente diferente.

Por lo tanto, los elementos de diseño como el diseño y el estilo de marca particular de su empresa deben permanecer iguales en todos los idiomas.

Esto es muy fácil de hacer en WordPress con ConveyThis, que identifica perfectamente el texto independientemente del tema que hayas elegido (¡incluso si está personalizado!) y lo traduce automáticamente, incluso si estás trabajando con otros plugins.

Esto te ayudará a tener una plantilla global con el mismo tema para todos los idiomas y, por lo tanto, la misma experiencia de usuario.

La página de inicio de Airbnb funciona muy bien como ejemplo, echemos un vistazo a la versión australiana:

Multi lenguaje

Y aquí está la versión japonesa:

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

Sin duda, este es el mismo sitio web. El fondo es el mismo y también lo es la función de búsqueda. Tener un diseño unificado ayuda a su identidad de marca y ahorra tiempo y esfuerzo al agregar nuevos idiomas o actualizar.

Cambiadores de idioma claros

Elija una ubicación destacada para el selector de idioma, como cualquiera de las cuatro esquinas de su sitio web, y colóquelo en todas las páginas, no solo en la página de inicio. Tiene que ser fácil de encontrar, nadie quiere buscar un botón oculto.

Se recomienda encarecidamente que los nombres de los idiomas estén en su propio idioma. "Español" en lugar de "Español", por ejemplo, funcionará de maravilla. Asana hace esto, su sitio tiene un cuadro desplegable con las opciones de idioma disponibles.

Sin titulo3

De esta manera ayuda a los visitantes a sentirse bienvenidos. Si su sitio web está traducido, la lista de idiomas debería reflejarlo. Leer “alemán, francés, japonés” en un sitio web en inglés no facilita la navegación de las personas y da la impresión de que la versión en inglés es la más importante.

"Idiomas" es mejor que "Regiones"

Muchas grandes marcas internacionales te obligan a cambiar de región para poder leer el sitio web en tu idioma. Esta es una idea terrible que hace que la navegación sea más difícil para los visitantes. Estos sitios web funcionan asumiendo que está navegando en la región donde se habla el idioma, por lo que obtiene el texto en su idioma, pero es posible que no obtenga el contenido para la región que le interesa.

La siguiente imagen fue tomada del sitio web de Adobe:

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P vOTNbP2pFSp17B530ARONrjgjryMZYqcQl5 WQuEAYvm6LArZbXFsMD9AiSX mEzsJilUu4a

Los idiomas no deben ser inseparables de sus regiones. Tomemos por ejemplo todas esas ciudades cosmopolitas como Nueva York, Londres y París. Tal vez una persona belga que vive en el Reino Unido quiera comprar en el sitio del Reino Unido pero navegue en francés. Tienen que elegir entre comprar en el sitio belga en su idioma o comprar en el sitio del Reino Unido en inglés, y no quieren hacer ninguna de las dos cosas. Por lo tanto, ha creado accidentalmente una barrera. Echemos un vistazo a un sitio web que le permite especificar el idioma y la región por separado, el sitio web de Uber.

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

Este es un diseño excelente. En este caso, la opción de cambio de idioma se colocó en el pie de página a la izquierda y, en lugar de un cuadro desplegable, tiene un modal debido a las numerosas opciones. Los nombres de los idiomas también se mencionan en su propio idioma.

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

Como beneficio adicional, podría "recordar" cuál fue el idioma elegido por el usuario para que, desde esa primera visita en adelante, no tenga que cambiar más.

Ubicación de detección automática

Esta característica es súper útil para que tus visitantes no accedan a través del idioma equivocado. Y para ahorrar tiempo por parte del usuario para que no tenga que buscar el selector de idioma. Así es como funciona: el sitio web identifica el idioma en el que está el navegador o su ubicación.

Pero tenga cuidado en caso de que el usuario sea un turista y no esté familiarizado con el idioma local porque necesitará el botón de idioma para poder cambiar, por esta razón, la herramienta no siempre es precisa.

Al diseñar su sitio multilingüe, no elija entre la detección automática de idioma y el selector de idiomas, este último es obligatorio mientras que el primero es opcional.

Las banderas no son reemplazos adecuados para el nombre de un idioma

Hay 21 países de habla hispana y 18 países de habla inglesa, y en China hay 8 dialectos principales, por lo que las banderas no son buenos sustitutos de los nombres de los idiomas. Además, las banderas pueden no ser indicadores útiles porque pueden confundir a quienes no las reconocen.

Sea flexible con el espacio de texto

Esto puede ser un desafío, pero es innegable que las traducciones no ocupan el mismo espacio que el texto original, algunas pueden ser más cortas, otras pueden ser más largas, ¡algunas incluso pueden necesitar más espacio vertical!

wsEceoJKThGv2w9Qzxu gim H YPX39kktoHXy4vJcu aanoASp V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

Los caracteres chinos contienen mucha información, por lo que no se necesita mucho espacio, mientras que el italiano y el griego son más prolijos y necesitan el doble de líneas. Una buena regla general es asumir que algunas traducciones pueden requerir más del 30% de espacio adicional, así que sea flexible con el diseño y asigne amplios espacios para el texto. Es posible que esos apretones apretados en el sitio web original no tengan suficiente espacio para la traducción, el inglés es un idioma particularmente compacto, y si encuentra la necesidad de abreviar en inglés para que el contenido encaje, definitivamente encontrará algunos problemas cuando llegue el momento de traducir.

Además de tener espacio para que el texto se estire, también es una buena idea tener elementos de interfaz de usuario adaptables para que los botones y los campos de entrada también puedan crecer, también puede reducir el tamaño de la fuente, pero no demasiado.

El sitio web de Flickr es multilenguaje, echemos un vistazo al botón original de "vistas":

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

Se ve fantástico, todo es genial, pero 'vistas' resulta ser una palabra más larga en otros idiomas, lo que requiere más espacio.

FParMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

¡En italiano requiere tres veces más espacio!

Muchas escrituras no latinas, como el árabe, requieren más altura para que la traducción encaje. Entonces, para resumir, el diseño de su sitio web debe ser lo suficientemente flexible para adaptarse a los diferentes requisitos de idioma para que en el cambio no se pierda el aspecto pulido del original.

Compatibilidad con fuentes web y codificación de sitios web

Según el W3C, es muy recomendable que codifique su página web utilizando UTF-8, que permite caracteres especiales.

Es bastante simple, la declaración UTF se ve así

fbnRHXPPyY2OPijzOvFkH0y Ke

También asegúrese de que las fuentes sean compatibles con los diferentes idiomas, de lo contrario, el texto puede terminar pareciendo ilegible. Básicamente, antes de decidirse por cualquier fuente, verifique su compatibilidad con todos los scripts que necesite. Si desea ingresar al mercado ruso, verifique que la escritura cirílica sea compatible.

La siguiente imagen fue tomada de Google Fonts y, como puede ver, puede elegir descargar las versiones de scripts que necesite. Esos idiomas con una mayor cantidad de caracteres generan archivos de fuentes más grandes, así que téngalo en cuenta al elegir y mezclar fuentes.

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

Con respecto a los idiomas de derecha a izquierda

A medida que crece el mercado de Medio Oriente, puede considerar crear una versión de su sitio web que atraiga a visitantes de esta región, lo que significa adaptar el diseño para que sea compatible con su idioma. ¡Un rasgo característico de la mayoría de los idiomas del Medio Oriente es que se leen de derecha a izquierda! Este es un gran desafío y la solución comienza con la duplicación de la interfaz.

Este es el diseño de Facebook para idiomas de izquierda a derecha, como el inglés.

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

Y este es el diseño invertido para idiomas de derecha a izquierda, como el árabe.

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGOdxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9R T0by f2qOI9CQz2CfwdRj

Mire de cerca, la ubicación de todo en el diseño se ha reflejado.

Consulte el artículo de Robert Dodis sobre diseño para idiomas de derecha a izquierda para obtener más información sobre cómo hacerlo.

Algunos idiomas de derecha a izquierda son árabe, hebreo, persa y urdu y ConveyThis no tiene problemas para adaptar su sitio web para adaptarse a sus requisitos de idioma y garantizar una gran experiencia de usuario. Y lo mejor es que puedes personalizar el aspecto de cada idioma y realizar cambios en el tipo de fuente o su tamaño, y si es necesario, editar la altura de la línea.

Elija iconos e imágenes apropiados

Las imágenes tienen un componente cultural muy fuerte y son elementos clave del diseño adecuado de un sitio web. Cada cultura asigna significado a diferentes imágenes e íconos, algunas interpretaciones son positivas y otras todo lo contrario. Algunas imágenes reflejan las experiencias de los ideales de una cultura pero en un contexto diferente hará que los usuarios se sientan alienados.

Este es un ejemplo de una imagen que tuvo que ser reemplazada porque no era culturalmente apropiada. Tenga en cuenta que no todas las imágenes serán ofensivas para los demás, tal vez solo genere apatía cuando desee que las personas sientan curiosidad e interés en su producto.

Esta es la página de inicio de Clarín para el idioma francés, con una mujer caucásica. Y aquí está la versión coreana, con una mujer coreana como embajadora de la marca.

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvOB0 dTzQkZjUKogNMo2sQnJD0UTAdAeIe

El tipo de imágenes que pueden ofender son aquellas que pueden parecer inocentes para algunas culturas, pero, a los ojos de una cultura diferente, muestran comportamientos que son ilegales o tabú, por ejemplo, representaciones de homosexualidad o empoderamiento femenino.

Esto también se aplica a los íconos, mientras que en los EE. UU. un ícono con dos copas de champán brindando representa una celebración, en Arabia Saudita es ilegal beber alcohol, por lo que ese ícono deberá ser reemplazado por uno culturalmente apropiado.

TsA5aPbhznm2N vv qL
(Fuente de imagen:Robarkiwi)

Por lo tanto, será necesario realizar una investigación para garantizar que los íconos que ha elegido sean apropiados para el mercado objetivo. Si no está seguro, siempre puede ir a lo seguro.

Por ejemplo, estos tres íconos con la Tierra, el primero fue diseñado para el público australiano; el segundo, para el público africano; y el último es adecuado para audiencias más grandes y globales, ya que no se presenta un área en particular.

cx90RYDHGTToOiC uMNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3oW R6X3bRxeHdjJ

Por último, pero no menos importante, ConveyThis puede traducir cualquier texto, siempre que no esté incrustado en una imagen. El software no podrá identificar lo que está escrito en él, por lo que permanecerá en el idioma original, así que evite incrustar texto.

Elección de colores

Como se mencionó en la sección anterior, las culturas interpretan las imágenes de manera diferente y lo mismo sucede con los colores. Sus significados son subjetivos.

Por ejemplo, en algunas culturas, el blanco es el color de la inocencia, pero otros no estarían de acuerdo, es el color de la muerte. Lo mismo sucede con el rojo, en las culturas asiáticas se usa en celebraciones pero para algunos países africanos no tiene una connotación tan positiva ya que está ligado a la violencia.

Sin embargo, parece que el azul es el más seguro de todos los colores, comúnmente asociado con significados positivos como la calma y la paz. Muchos bancos usan el azul en sus logos porque también puede significar confianza y seguridad.

Este artículo muestra las diferencias en los significados de los colores en todo el mundo, muy útil para comenzar su investigación sobre cuáles son los mejores colores para su sitio multilingüe.

Ajustes de formato

Considere evitar usar solo números al escribir fechas porque hay muchas formas diferentes de escribirlas, en los EE. UU. el formato oficial es mm/dd/yyyy y si solo puede ver los números, algunos usuarios de otros países que usan diferentes sistemas (como dd/mm/yyyy) puede confundirse. Así que tus opciones son: asegurarte de que las versiones traducidas tengan el formato de fecha adaptado o escribir el mes en letras para que ConveyThis siempre escriba la fecha correcta.

Además, mientras que en los EE. UU. se usa el sistema imperial, la mayoría de los países usan el sistema métrico, por lo que deberá decidir si sería adecuado para su sitio transformar las medidas.

El mejor plugin de traducción para WordPress

Hay tantas opciones cuando se trata de agregar un complemento de traducción a su sitio web de WordPress y no todas funcionan de la misma manera, los resultados pueden variar. Con ConveyThis tiene garantizada una integración perfecta sin importar el diseño de su sitio web.

ConveyThis es la mejor opción para la traducción de sitios web con 92 idiomas disponibles. Es un complemento confiable de WordPress que le permitirá tener una versión sólida en varios idiomas de su sitio web rápidamente. Puede comprender el diseño del sitio, detectar todo el texto y traducirlo. ConveyThis también incluye un editor intuitivo para la personalización del texto.

ConveyThis incluye un botón de cambio de idioma de talla única que funciona con cualquier sitio de manera predeterminada, pero también puede editarlo tanto como desee. También seguimos los principios de diseño establecidos en este artículo:

  • Marca coherente en todas las versiones lingüísticas del sitio web.
  • Cambiador de idioma claro y la opción de elegir un idioma preferido.
  • Los sitios web se codifican con UTF-8 automáticamente.
  • Interfaces adecuadas para idiomas de derecha a izquierda

ConveyThis: una solución de sitio web multilingüe en la que puede confiar

Se cree comúnmente que la traducción del sitio web es un proceso complejo. Pero no hay necesidad de posponerlo porque no quieres lidiar con los dolores de cabeza. ¡No es nada desalentador! Con ConveyThis, se convierte en una conversión directa. Es fluido y rápido.

Después de una instalación rápida, todo su contenido ahora se puede traducir sin afectar el formato, y eso incluye el contenido generado por otras aplicaciones y el proceso de pago. ConveyThis es una herramienta fácil para la traducción de sitios web en varios idiomas que no desordenará su código, como lo hacen otros.

¡También está disponible la opción de solicitar traducciones profesionales de su sitio! Le ayudarán a transformar completamente su sitio web multilingüe en uno multicultural, mejorando drásticamente la experiencia de sus clientes. Recuerde que si traduce un sitio web, también debe tener disponible el servicio de atención al cliente en el idioma de su nuevo cliente. Considere invertir en la localización y adaptación de contenido para garantizar una excelente experiencia de usuario para sus visitantes.

Comentarios (4)

  1. ¡El fin a la vista para Google-Translate para sitios web! – ConveyThis
    8 de diciembre de 2019 Respuesta

    […] El texto relacionado con la computadora en sueco. Elementos como estos ayudaron al equipo de diseño a formular un camino para los clientes que visitan la plataforma, hacia una experiencia de traducción fácil y evitando el índice de desplazamiento como antes […]

  2. Optimización global de motores de búsqueda para todas las plataformas de idiomas: ConveyThis
    10 de diciembre de 2019 Respuesta

    […] Se formulen las ideas en torno a la plataforma multilingüe y la base de clientes, lo siguiente sería una mirada al ingrediente textual del lenguaje […]

  3. Gire su WooCommerce Multilingual – ConveyThis
    19 de marzo de 2020 Respuesta

    [...] y conseguir un linguista de la ConveyThis equipo para echar un vistazo y editarlo para que pueda estar seguro de que la redacción y el tono son adecuados para los valores de su tienda y [...]

  4. ¿Qué tan personalizable es WooCommerce? – ConveyThis
    23 de marzo de 2020 Respuesta

    […] Que las imágenes siempre están muy cargadas de significado cultural, y las diferentes audiencias tienen diferentes expectativas de cómo las tiendas deben mostrar su […]

Deja un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios están marcados*