Mejores prácticas del selector de idioma del sitio web para una experiencia de usuario sencilla

Matt Grech

Gerente de Marketing de ContenidosSmartling

Cada pequeño detalle cuenta. Desea que su sitio web sea lo más fácil de navegar posible y desea una experiencia satisfactoria para que los usuarios regresen.

Esto requiere una atención precisa a los detalles y un poco de pensamiento creativo para innovar. Un gran ejemplo es el diseño del menú de selección de idioma en tu sitio.

Parece sencillo al principio, ¿verdad? Tal vez un menú desplegable rápido que enumere diferentes idiomas y algunas banderas para ayuda visual.

Por supuesto, es una solución rápida y fácil, pero no fomenta la mejor experiencia de usuario posible. ¿Quién quiere desplazarse por un menú interminable? ¿Qué sucede en el móvil cuando solo puede mostrar 20 idiomas como máximo a la vez?

Hay muchos aspectos que tener en cuenta al diseñar un excelente menú de selección de idiomas para su sitio web.

¿Por qué necesitamos un selector de idioma?

El objetivo de la localización es hacer que su sitio web sea lo más accesible posible para los usuarios. ¿Pero de qué serviría un sitio localizado si el usuario nunca tiene la opción de seleccionar su idioma?

Ahora bien, este es un gran escenario para la automatización.

Simplemente configure su sitio para que detecte automáticamente la ubicación del usuario a través de la dirección IP, o incluso mejor, el idioma predeterminado de su navegador web, y sirva a ese usuario con la versión localizada correcta de su sitio. Pero eso solo funciona cuando se localiza a idiomas específicos.

Al diseñar para los mercados francés e inglés, los usuarios que tienen su idioma predeterminado configurado en inglés ven el sitio en inglés, y aquellos que tienen su navegador configurado en francés ven el sitio en francés. Cualquier otro visitante que no tenga estas dos opciones debería ser dirigido automáticamente a la opción más popular, en este caso, el inglés.

¿Qué pasa si ese usuario ni siquiera habla inglés, sino que habla francés? Ahora están atrapados en un sitio web que no pueden leer.

Y tampoco funcionaría bien si se establece de forma predeterminada en función de la ubicación. ¿Qué sucede si tiene un visitante del sitio web del Reino Unido y está comprando en su sitio del Reino Unido, pero prefiere navegar en su idioma nativo, el alemán? Ponerlos de forma predeterminada en inglés obliga a una experiencia que quizás no quieran.

Y ahí es donde radica el problema: los usuarios siguen necesitando la opción de elegir el idioma que prefieran.

La selección automatizada de idiomas se ha gestionado bien

ASOS ofrece el ejemplo perfecto de una plataforma de comercio electrónico localizada con éxito. ASOS ha logrado un 149% en los últimos 5 años únicamente a través de las ventas digitales, superando incluso a los minoristas establecidos. Todo ello sin una única tienda física.

Parte de su éxito radica en su experiencia de localización sin interrupciones. ASOS aprovecha la automatización para seleccionar automáticamente las preferencias de idioma y moneda del usuario y, lo que es más importante, cuando se les dirige a la ubicación incorrecta, ASOS incluye un pequeño mensaje como pie de página anclado:

Ambos permiten al usuario navegar por una versión extranjera del sitio y al mismo tiempo lo orientan en la dirección correcta. Este es solo un enfoque elegante que incorpora muchas de las mejores prácticas que vamos a cubrir.

Estrategias de selección de idioma del sitio web

Entonces, ¿cómo diseñamos e implementamos un selector de idioma para una experiencia fluida?

Al igual que ocurre con la traducción de contenido generado por el usuario, no siempre existe una solución única para todos. Repasemos algunas estrategias comunes.

1. Menús de selección

Los menús funcionan bien cuando hay que manejar muchos idiomas. La opción más fácil de diseñar e implementar sería un simple menú desplegable.

El lugar donde alojes esto en tu sitio web se reducirá al diseño individual, pero comúnmente los verás en la parte superior derecha o inferior de la página. Bastante simple, implemente un menú desplegable con una etiqueta clara e incluya todos los idiomas a los que se ha traducido su sitio web.

Tendrá algunas opciones para la mejor implementación en función de sus necesidades:

• ¿Cómo organizarás el menú y representarás a cada idioma? Puede separar el menú por región o continente e incluir todos los idiomas hablados ofrecidos para facilitar la navegación.
• ¿Enumerará solo los idiomas o enumerará los países varias veces para diferentes idiomas?
• ¿Qué tipo de icono o botón usarás para resaltar el menú? Tendrá que ser reconocible

Porsche es un ejemplo simple de un menú limpio para los usuarios que visitan su sitio internacional que incorpora un menú dedicado con banderas.

Separados por región, los usuarios pueden encontrar rápidamente exactamente lo que necesitan sin tener que navegar por una lista enorme. Incluso han incluido una función de búsqueda para darle un toque extra.

2. Botones de idioma dedicados

Si te diriges a un mercado muy específico, por ejemplo, solo ves a los EE. UU. y necesitas localizar para español e inglés, puedes incluir botones de idioma en el menú de navegación de tu sitio web.

Una simple selección permite a los usuarios suscribirse y pasar rápidamente a una versión localizada de la página.

Todavía hay que hacer algunas consideraciones:

• El mayor desafío de diseño aquí es el espacio. Más de dos idiomas y se llenará rápidamente.
• También deberá considerar cuidadosamente dónde se encuentran exactamente estos botones. No deben ser un obstáculo para el contenido o un foco importante de su navegación, pero tampoco se pueden ocultar. Queremos minimizar los clics para los usuarios.

USA.gov es uno de los ejemplos más populares de esto, ya que ofrece a los usuarios la opción de traducir instantáneamente la página web al español.

Sencillo, fácil y rápido.

3. Enlaces de texto

También puede simplificarlo con enlaces de texto, generalmente alojados en el pie de página de su sitio, para cada versión localizada. Esto funciona muy bien como un término medio entre los botones dedicados y los menús de selección cuando no tiene suficientes opciones para un menú completo, pero demasiadas para botones individuales de la interfaz de usuario.

Los desafíos y consideraciones aquí son, por supuesto, las limitaciones de espacio, y un enfoque dinámico o estático:

• Dinámico significaría mirar la IP del visitante para determinar la ubicación aproximada y servir los enlaces de texto apropiados para esa región.
• Estático significaría incorporar enlaces de texto como una fijación permanente en su interfaz de usuario, como el ejemplo mencionado anteriormente de incluir enlaces de texto en su pie de página.

Google es un gran ejemplo de esto. Cuando visites su URL en francés, google.fr, empezarás en inglés.

Pero hay un simple enlace en la parte inferior de la página que te lleva directamente a la versión en francés.

Una palabra sobre las banderas

Puede parecer de sentido común incluir banderas en los menús de selección de idioma. Son fáciles de identificar para simplificar la experiencia de usuario y agregar peso adicional al diseño.

Hay muchos matices, e incluso política, involucrados. No todas las naciones reconocen las mismas banderas, y ningún país representa un idioma específico.

Por ejemplo, no querría usar una bandera inglesa o del Reino Unido para Irlanda, a pesar de que ambos países hablan inglés principalmente, los irlandeses preferirían que su bandera y su país estuvieran representados.

Una forma fácil de evitar esto sería enumerar el mismo idioma varias veces y especificar para qué país está localizado ese sitio con la bandera, como hace Porsche.

Pero también tendrás que determinar la mejor manera de implementar los diseños; Algunas banderas son intrincadas, ¿cómo las diseñarás en un formato familiar que sea rápido y fácil de desarrollar?

Podría ser más fácil renunciar a las banderas por completo.

Prácticas recomendadas para el selector de idioma del sitio web

Hay algunas prácticas recomendadas estándar que debe seguir al diseñar un selector de idioma para un sitio web:

1. Utilice siempre el formato local y la ortografía del idioma. Debe ser reconocible al instante para los hablantes nativos. Por ejemplo, el alemán debe aparecer como Deutsch.
2. Es genial tener la automatización, pero quieres que los visitantes tengan la opción de personalizar su experiencia
3. Haz que sea fácil de encontrar, no querrás terminar frustrando a los visitantes. La redundancia ayuda mucho, y podría tener sentido combinar estrategias como un menú en la parte superior con enlaces de texto en el pie de página.
4. Evite las banderas a menos que el contenido se adapte específicamente a ese país en particular.
5. Implementa elementos visuales como un globo terráqueo o incluso un mapa para una experiencia más visual.
6. Tenga cuidado al implementar un menú desplegable, especialmente cuando diseñe para dispositivos móviles con espacio limitado.
7. No olvide adaptar la moneda en función de la ubicación del visitante, e incluso proporcione una opción para que los usuarios especifiquen la moneda si aún no está localizada

Pero no tengas miedo de ser creativo. Hay algunos diseños e implementaciones excelentes, y este desafío requiere una innovación única si está tratando de desarrollar la mejor experiencia de usuario.