Selector de idioma del sitio web: Mejores prácticas de diseño

No sé ustedes, pero a mí me resulta muy satisfactorio un selector de idioma nítido y que se ajuste a la marca.

Quizás eso me delate como un friki de la localización. Pero escúchame.

Ese pequeño botón encierra muchísimo poder. Con un solo clic, un visitante pasa de tener que entrecerrar los ojos para leer una página en un idioma extranjero a navegar en su propio idioma, sin necesidad de abandonar su sitio web.

Un selector de idioma es donde convergen el diseño y la funcionalidad. Si se hace bien, encaja con tu marca, es fácil de encontrar y demuestra a los visitantes internacionales que son bienvenidos. Si se hace mal, queda oculto en el pie de página, etiquetado incorrectamente o resulta tan torpe que los visitantes se marchan antes de ver el contenido traducido.

¿Qué es lo que diferencia a ambos?

La mayoría de las guías se ciñen a lo básico: hacer que el selector sea fácil de encontrar, usar nombres en el idioma nativo y evitar el uso de banderas para los símbolos. También hablaremos de eso. Pero también queremos responder a las preguntas más difíciles, como ¿cómo se ordena alfabéticamente un menú desplegable que mezcla japonés, árabe y portugués? ¿Y por qué la mitad de internet vincula tu idioma a tu ubicación física, cuando eso suele ser un error?

En esta guía, aprenderás qué patrón de interfaz de usuario se adapta mejor a tu sitio web, qué buenas prácticas funcionan en la práctica y cómo abordar dos desafíos que casi nadie resuelve correctamente: el orden de clasificación y la división por idioma, país y moneda.

Vamos a entrar en materia.

Qué controla un selector de idioma (y qué no controla)

Un selector de idioma tiene una sola función: mostrar la página en otro idioma. No configura la moneda, el envío ni la ubicación del visitante. No es un panel de configuración ni un localizador de tiendas, y a pesar de que los sitios web a menudo lo tratan como tal, no sustituye a un selector de país.

Aquí, menos es más. Un selector de idioma que intenta abarcar demasiado suele fracasar en la única función para la que fue creado: ayudar a los visitantes a comprender su sitio web.

Un estudio de Nielsen Norman Group sobre la localización del comercio electrónico reveló que los compradores internacionales esperan cambiar el idioma del sitio web independientemente del lugar de envío o de la moneda en la que realicen el pago. Eso tiene sentido una vez que se observan los mercados reales. En Canadá, algunos compradores prefieren el inglés y otros el francés, pero todos esperan pagar en dólares canadienses. En España, todo el mundo paga en euros, pero algunos compradores prefieren navegar por internet en catalán en lugar de en español.

En definitiva, un selector de idioma que cambia inesperadamente la moneda o las reglas de envío supone un cambio que nadie ha solicitado y puede alienar precisamente a los clientes internacionales a los que se intenta dar la bienvenida.

Tipos de selectores de idioma

La mayoría de los seleccionadores se ajustan a uno de cuatro formatos. En lugar de preguntar cuál es la mejor opción, la pregunta más productiva es cuál se ajusta a la cantidad de palabras que necesitas y cuánto espacio visual puedes dedicarle.

• Los menús desplegables se adaptan mejor. Son la opción predeterminada más segura una vez que ya dominas tres o cuatro idiomas.
• Las filas de botones transmiten una sensación de mayor seguridad e inmediatez. Por eso, los sitios web con un conjunto pequeño y fijo de idiomas tienden a preferirlos, como un sitio web gubernamental bilingüe o un producto SaaS que presta servicio a dos mercados.
• Los enlaces de texto funcionan bien en los pies de página, donde un componente completo simplemente se vería pesado.
• Las ventanas modales dan prioridad a la elección del idioma, lo que las hace útiles para una sugerencia puntual como "¿Parece que prefieres el francés?", pero se vuelven molestas rápidamente si aparecen en cada carga de página.

Volver a lo básico

Teniendo en cuenta los diferentes formatos, veamos las mejores prácticas clásicas y analicemos cuáles siguen vigentes en el nivel 2026.

• Utilice los nombres en el idioma nativo . Las palabras “Deutsch” y “Español” le indican inmediatamente al visitante que su idioma está en la lista. Las palabras "alemán" y "español" obligan a una persona que no habla inglés a examinar una lista escrita en un idioma que quizás no domine.
• Ignora las banderas . Representan países, no idiomas, y la correspondencia falla constantemente. El español es idioma oficial en unos 20 países, el inglés no pertenece a una sola bandera, y Suiza, por sí sola, tiene cuatro idiomas nacionales bajo una misma bandera. Un icono de lenguaje universal, un globo terráqueo, un glifo de bocadillo de diálogo, una simple marca "A/文", se lee correctamente sin importar dónde se encuentre el visitante.
• Hacer que sea fácil de encontrar . En la mayoría de los sitios web, eso significa la esquina superior derecha del encabezado. Los sitios con mucho contenido o de carácter editorial, donde el espacio del encabezado es limitado, pueden utilizar el pie de página. En dispositivos móviles, inclúyelo en el mismo menú que la navegación en lugar de inventar una interacción aparte solo para el idioma.
• Mantén a los visitantes informados y en la misma página. Cuando un usuario cambia de idioma en la página de un producto, debería acceder a la misma página del producto en el nuevo idioma, y no ser redirigido a la página de inicio. Obligar a los visitantes a retroceder es una forma rápida de perderlos, especialmente si estaban a punto de comprar.
• Sugiere, no obligues. Una de las quejas más comunes sobre los sitios web multilingües es la redirección automática de los visitantes en función de su dirección IP o la configuración de su navegador, sin posibilidad de anularla. Las VPN, los ordenadores compartidos y los viajeros complican esa suposición. Si detectas una posible preferencia, ofrécela como sugerencia y proporciona siempre a los visitantes una forma clara y permanente de volver a la opción anterior.
• Recuerda su elección. Una vez que un visitante elige un idioma, manténgalo en todas las páginas y en las visitas posteriores. La elección que alguien haya hecho a propósito siempre debería tener mayor prioridad que la que tu sitio web deduzca a partir de su ubicación o navegador.

Más allá de lo básico: orden de clasificación y la división por idioma, país y moneda.

Esos conceptos básicos proporcionan una base sólida. Pero una vez que empiezas a construir un selector, surgen dos preguntas más difíciles, y la mayoría de las guías de buenas prácticas las pasan por alto.

1. ¿Cómo se ordena una lista que mezcla letras del alfabeto?

No existe un único orden alfabético que abarque el alemán, el japonés y el árabe, porque esos sistemas de escritura no comparten un alfabeto. Incluso dentro de las lenguas con escritura latina, una simple ordenación informática falla: coloca "Čeština" después de "Türkçe" porque lee la "Č" acentuada como un carácter separado en lugar de una especie de "C".

Para la mayoría de los sitios, es decir, aquellos que admiten hasta unas pocas docenas de idiomas, la solución práctica es la siguiente:

1. Agrupar idiomas por escritura. Latín, cirílico, árabe, CJK (chino, japonés, coreano), y así sucesivamente.
2. Coloca los grupos en el orden fijo que elijas. Un enfoque común es comenzar con el guion que usa la mayor parte de tu audiencia.
3. Clasifique dentro de cada grupo utilizando las reglas propias de ese script. En el caso del latín, eso significa que el Čeština se sitúa junto al danés y al alemán, no al final de la lista.

El resultado se parece a esto: Čeština, Deutsch, English, Español, Français, Português → Русский, Українська → العربية → 中文, 日本語, 한국어 .

Si tu lista incluye cientos de idiomas, ordenarlos manualmente deja de ser práctico y necesitarás herramientas de ordenación que tengan en cuenta la configuración regional para cada grupo de escritura.

2. ¿Deberían elegirse una sola opción, o tres, el idioma, el país y la moneda?

¿Recuerdan a los compradores canadienses y españoles de antes? Aquí es donde esa idea se vuelve práctica.

Muchos sitios de comercio electrónico de gran tamaño combinan el idioma, el país y la moneda en un único selector de "mercado". Para un minorista, la razón es que las normas de envío, los impuestos y los métodos de pago varían según el país, por lo que una opción combinada simplifica el proceso de compra. Es una compensación razonable.

Es una compensación errónea para productos en los que los tres elementos no necesitan ir de la mano, como las herramientas SaaS, los sitios web de medios de comunicación o cualquier producto digital utilizado por expatriados, trabajadores remotos o cualquier persona cuyo idioma preferido no coincida con su país de facturación. Un hablante de alemán que vive en Brasil quiere texto en alemán y precios en reales brasileños, no una combinación forzada de ambos.

La regla general:

• El idioma modifica el texto de la página.
• El tipo de cambio influye en cómo se muestran los precios.
• El país o la región va más allá de las diferencias lingüísticas y puede proporcionar diversos grados de localización.

Manténgalos como tres controles separados a menos que su producto no pueda funcionar sin vincularlos.

Detección, redirecciones y adición de idiomas más adelante

Utilice la detección para sugerir, no para decidir.

¿Recuerdas el dicho "sugiere, no obligues"? Aquí te explicamos cómo hacerlo bien.

La mejor señal para la primera visita es el idioma del navegador o dispositivo del visitante (enviado en el encabezado Accept-Language o leído con navigator.language en JavaScript). A diferencia de la ubicación basada en IP, refleja el idioma que la persona configuró.

Eso la convierte en una pista mucho mejor, pero debe seguir siendo una pista y no una decisión que tomes por ellos. De esta forma, nada cambia hasta que el visitante dice que sí, por lo que realiza la llamada en lugar de ser redirigido automáticamente.

Crea la aplicación para los idiomas que añadirás más adelante.

Muchos sitios web no mantienen la cantidad de idiomas con la que se lanzaron, así que ¿qué debes hacer una vez que superas la lista original en tu selector actual?

La respuesta es sencilla: genera automáticamente la lista de idiomas del selector a partir de los idiomas que ya has publicado y genera tus etiquetas hreflang de la misma manera, en lugar de mantenerlas manualmente. Bablic , por ejemplo, hace esto automáticamente. Si no estás familiarizado con hreflang y x-default, nuestra explicación de hreflang x-default te ayudará a comprender su funcionamiento.

Crea tu propio selector

La forma de crear un selector depende de cómo esté configurado su sitio web multilingüe.

Si cada idioma tiene su propia URL (subdirectorios como /es/ , subdominios como es.example.com o un parámetro de URL), el selector más simple es una lista de enlaces, cada uno de los cuales apunta a la misma página en otro idioma:

html

<nav aria-label="Idioma">

<a href="/es/precios/" hreflang="es" lang="es">inglés</a>

<a href="/es/pricing/" hreflang="es" lang="es" aria-current="page">Español</a>

<a href="/ja/pricing/" hreflang="ja" lang="ja">日本語</a>

</nav>

Cada detalle cumple una función importante:

• lang indica a los lectores de pantalla cómo pronunciar correctamente el nombre de cada idioma.
• aria-current="page" le indica a la tecnología de asistencia qué idioma está activo actualmente.
• Cada enlace lleva a la misma página en otro idioma (en este caso, la página de precios), no a la página de inicio, para que los visitantes no pierdan el hilo.

Las etiquetas hreflang en la sección <head> de la página (o en el mapa del sitio) deben coincidir exactamente con esta estructura de URL, porque es la que utilizan los motores de búsqueda para mostrar la versión correcta al usuario correcto. Google recomienda utilizar subdirectorios o subdominios en lugar de parámetros URL para las versiones de idioma.

Si el idioma se almacena en una cookie o en el navegador en lugar de en la URL, no existen URL de idioma a las que enlazar, por lo que los enlaces simples no funcionarán. Tu selector necesita actualizar el idioma almacenado y recargar la página.

Mostrarlos como un menú desplegable, una fila de botones o simples enlaces es una decisión de diseño. Lo que más importa es la estructura de la URL subyacente. La mayoría de los sitios web utilizan subdirectorios (/es/) o subdominios (es.example.com). Los parámetros de consulta (?lang=es) funcionan, pero Google desaconseja su uso para las versiones de idioma. Sea cual sea la opción que elijas, tus etiquetas hreflang en la sección <head> de la página (o en tu mapa del sitio) deben coincidir exactamente con esa estructura. Eso es lo que utilizan los motores de búsqueda para ofrecer la versión correcta al usuario correcto.

Si tu sitio web está traducido con Bablic , puedes elegir el camino que mejor se adapte a tu equipo:

• Utilice el selector incorporado. Selecciona un estilo predefinido en Proyecto → Selector del panel de control Bablic y ajústalo para que coincida con tu marca. No se requiere código.
• Dale estilo con CSS personalizado. Conserva el selector de Bablic , pero ajusta sus colores, fuentes, espaciado e iconos para que coincidan exactamente con tu sistema de diseño.
• Crea el tuyo propio con la biblioteca de selectores Bablic : el paquete @ bablic -io/selector te ofrece dos funciones: getLanguages() devuelve los idiomas publicados de tu proyecto y marca el actual, y setLanguage() cambia de idioma usando el método que use tu proyecto (carpeta, subdominio, parámetro URL, cookie o almacenamiento del navegador). Tú diseñas la interfaz, mientras que Bablic se encarga de la conmutación.

Los equipos que quieran lanzar su producto rápidamente pueden usar la configuración predeterminada, y los equipos que quieran que cada píxel refleje la imagen de marca tienen margen para personalizarla.

Sea cual sea el camino que elijas, solo tus propios datos pueden indicarte qué patrón funciona mejor para tu público. Si tienes dudas entre dos diseños, puedes realizar una prueba sencilla. Realiza un seguimiento de la frecuencia con la que los visitantes cambian de idioma y si permanecen en él una vez que lo hacen.

Elegir qué se encuentra detrás de su selector

Un buen selector solo importa si la traducción que lo respalda es sólida. Bablic combina la traducción automática con un editor contextual, de modo que alguien de tu equipo que hable el idioma pueda revisar y corregir líneas específicas directamente en la página, en lugar de traducir desde cero. Si te preguntas si la traducción automática es lo suficientemente buena como para publicarla de forma independiente, nuestro análisis de la fiabilidad de Google Translate es un buen punto de partida.

¿Comparando herramientas? Consulta nuestro centro de comparación Bablic o lee cómo funciona Bablic para obtener más información sobre la configuración. También puedes probarlo gratis durante 30 días, sin necesidad de tarjeta de crédito.

Preguntas más frecuentes