Seletor de idioma do site: Melhores práticas de design

Não sei quanto a vocês, mas há algo muito satisfatório em um seletor de idiomas nítido e que combine com a marca.

Talvez isso revele que sou um nerd da localização. Mas me escute.

Aquele pequeno botão guarda tanto poder. Com um clique, o visitante passa de ter que decifrar uma página em língua estrangeira para navegar em seu próprio idioma, sem nunca sair do seu site.

Um seletor de idiomas é onde design e funcionalidade se encontram. Se for bem feito, combina com a sua marca, é fácil de encontrar e mostra aos visitantes do mundo todo que eles são bem-vindos. Se for mal feito, fica escondido no rodapé, com a legenda errada ou tão desajeitado que os visitantes saem antes mesmo de verem o conteúdo traduzido.

Então, o que diferencia os dois?

A maioria dos guias se atém ao básico: facilitar a localização do seletor, usar nomes no idioma nativo e evitar o uso de indicadores para símbolos. Também abordaremos esses assuntos. Mas também queremos responder às perguntas mais difíceis, como por exemplo , como organizar alfabeticamente um menu suspenso que mistura japonês, árabe e português? E por que metade da internet vincula seu idioma à sua localização física, quando essa é, muitas vezes, uma decisão equivocada?

Neste guia, você aprenderá qual padrão de interface do usuário se adapta ao seu site, quais práticas recomendadas são eficazes no mundo real e como lidar com os dois desafios que quase ninguém consegue resolver: a ordem de classificação e a separação por idioma, país e moeda.

Vamos lá.

O que um seletor de idioma controla (e o que ele não controla)

Um seletor de idioma tem uma única função: exibir a página em outro idioma. Não define moeda, frete ou localização do visitante. Não se trata de um painel de configurações ou de um localizador de lojas e, apesar de muitos sites o tratarem dessa forma, não substitui um seletor de país.

Menos é mais. Um seletor de idiomas que tenta fazer demais geralmente falha na única coisa para a qual foi criado: ajudar os visitantes a entender seu site.

Uma pesquisa do Nielsen Norman Group sobre localização de comércio eletrônico revelou que os compradores internacionais esperam poder alterar o idioma do site independentemente do local de entrega ou da moeda utilizada para o pagamento. Isso faz sentido quando se analisa os mercados reais. No Canadá, alguns compradores preferem o inglês e outros o francês, mas todos esperam pagar em dólares canadenses. Na Espanha, todos pagam em euros, mas alguns compradores preferem navegar em catalão em vez de espanhol.

Em resumo, um seletor de idioma que altera inesperadamente a moeda ou as regras de envio está fazendo uma mudança que ninguém solicitou, e isso pode afastar justamente os clientes internacionais que você está tentando atrair.

Tipos de seletores de idioma

A maioria dos seletores se enquadra em um dos quatro formatos. Em vez de perguntar qual é a melhor opção, a pergunta mais produtiva seria qual delas se adequa à quantidade de palavras que você tem disponível e ao espaço visual que você pode dedicar a ela.

• Menus suspensos são os que melhor se adaptam ao tamanho. São a opção padrão mais segura depois de você ter mais de três ou quatro idiomas.
• As fileiras de botões transmitem mais confiança e um visual mais imediato. É por isso que sites com um conjunto pequeno e fixo de idiomas tendem a preferi-los, como um site governamental bilíngue ou um produto SaaS que atende a dois mercados.
• Os links de texto funcionam bem em rodapés, onde um componente completo ficaria pesado.
• Os verbos modais colocam a escolha do idioma em primeiro plano, o que os torna úteis para uma sugestão pontual como "Parece que você prefere francês?", mas perdem a sua utilidade rapidamente se aparecerem a cada carregamento de página.

De volta ao básico

With the different formats in mind, let’s look at the classic best practices and see which ones still hold up in 2026.

• Use nomes no idioma nativo . As palavras “Deutsch” e “Español” indicam imediatamente ao visitante que seu idioma está na lista. Os termos “alemão” e “espanhol” obrigam um falante não nativo de inglês a examinar rapidamente uma lista escrita em um idioma que ele pode não compreender bem.
• Ignore as bandeiras . Eles representam países, não idiomas, e o mapeamento apresenta falhas constantes. O espanhol é língua oficial em cerca de 20 países, o inglês não está associado a uma única bandeira e só a Suíça tem quatro línguas nacionais sob uma única bandeira. Um ícone universal de idioma, um globo terrestre, um glifo de balão de fala, uma simples marca “A/文”, tudo é lido corretamente, independentemente de onde o visitante esteja.
• Facilite a localização . Para a maioria dos sites, isso significa o canto superior direito do cabeçalho. Sites com muito conteúdo ou editoriais, onde o espaço no cabeçalho é valioso, podem usar o rodapé. Em dispositivos móveis, coloque a opção no mesmo menu da navegação, em vez de criar uma interação separada apenas para o idioma.
• Mantenha os visitantes na mesma página. Quando alguém muda o idioma em uma página de produto, essa pessoa deve ser redirecionada para a mesma página do produto no novo idioma, e não para a página inicial. Fazer os visitantes refazerem seus passos é uma maneira rápida de perdê-los, especialmente se eles estavam perto de comprar.
• Sugira, não force. O redirecionamento automático de visitantes com base em seu endereço IP ou nas configurações do navegador, sem nenhuma maneira de alterar essa configuração, é uma das reclamações mais comuns sobre sites multilíngues. VPNs, computadores compartilhados e viajantes, tudo isso pode atrapalhar essa suposição. Se você detectar uma preferência provável, ofereça-a como uma sugestão e sempre dê aos visitantes uma maneira clara e consistente de voltar à opção anterior.
• Lembre-se da escolha deles. Depois que um visitante escolher um idioma, mantenha-o em todas as páginas e em visitas futuras. Uma escolha feita intencionalmente por alguém deve sempre ter prioridade sobre o que o seu site presume com base na localização ou no navegador utilizado.

Além do básico: ordem de classificação e a divisão por idioma, país e moeda.

Esses princípios básicos fornecem uma base sólida. Mas, ao começar a construir um seletor, surgem duas questões mais complexas, que a maioria dos guias de boas práticas ignora.

1. Como ordenar uma lista que mistura letras do mesmo alfabeto?

Não existe uma única ordem alfabética que abranja o alemão (Deutsch), o japonês (日本語) e o árabe (العربية), porque esses sistemas de escrita não compartilham um alfabeto. Mesmo dentro de línguas com alfabeto latino, uma simples ordenação por computador falha: coloca “Čeština” depois de “Türkçe” porque lê o “Č” acentuado como um caractere separado em vez de uma espécie de “C”.

Para a maioria dos sites, ou seja, sites com até algumas dezenas de idiomas, a solução prática é:

1. Agrupe os idiomas por alfabeto. Latim, cirílico, árabe, CJK (chinês, japonês, coreano) e assim por diante.
2. Organize os grupos em uma ordem fixa de sua escolha. Uma abordagem comum é começar com o roteiro que a maioria do seu público usa.
3. Classifique dentro de cada grupo usando as próprias regras do script. Para o latim, isso significa que Čeština fica ao lado de Dansk e Deutsch, e não no final da lista.

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

Se sua lista incluir centenas de idiomas, a classificação manual deixa de ser prática, e você precisará de ferramentas de classificação que levem em consideração a localização para cada grupo de escrita.

2. O idioma, o país e a moeda devem ser uma única opção ou três opções diferentes?

Lembra-se dos compradores canadenses e espanhóis de antes? É aqui que essa ideia se torna prática.

Muitos grandes sites de comércio eletrônico combinam idioma, país e moeda em um único seletor de "mercado". Para um varejista, o motivo é que as regras de envio, os impostos e os métodos de pagamento variam de país para país, portanto, uma opção combinada simplifica o processo de finalização da compra. Essa é uma troca razoável.

É uma troca inadequada para produtos em que os três não precisam estar juntos, como ferramentas SaaS, sites de mídia ou qualquer produto digital usado por expatriados, trabalhadores remotos ou qualquer pessoa cujo idioma preferido não corresponda ao país de faturamento. Um falante de alemão que mora no Brasil quer texto em alemão e preços em reais brasileiros, não um pacote forçado dos dois.

A regra prática:

• O idioma altera o texto na página.
• A variação cambial altera a forma como os preços são exibidos.
• O país ou região vai além das diferenças linguísticas e pode oferecer vários graus de localização.

Mantenha-os como três controles separados, a menos que seu produto não funcione sem vinculá-los.

Detecção, redirecionamentos e adição de idiomas posteriormente.

Use a detecção para sugerir, não para decidir.

Lembra-se de "sugerir, não forçar"? Eis como fazer isso bem.

O melhor sinal para a primeira visita é o idioma do navegador ou dispositivo do visitante (enviado no cabeçalho Accept-Language ou lido com navigator.language em JavaScript). Ao contrário da localização baseada em IP, ela reflete o idioma que a pessoa realmente definiu.

Isso torna a pista muito melhor, mas ainda deve permanecer apenas uma pista e não uma decisão que você toma por eles. Dessa forma, nada muda até que o visitante diga sim, ou seja, ele faz a ligação em vez de ser redirecionado automaticamente.

Crie suporte para os idiomas que você adicionará posteriormente.

Muitos sites não mantêm o número de idiomas inicial, então o que você deve fazer quando a lista original do seu seletor atual ficar pequena?

A resposta é simples: gere automaticamente a lista de idiomas do seletor a partir dos idiomas que você já publicou e gere suas tags hreflang da mesma forma, em vez de mantê-las manualmente. Bablic , por exemplo, faz isso automaticamente. Se você não está familiarizado com hreflang e x-default, nossa explicação sobre hreflang x-default detalha o funcionamento interno.

Crie seu próprio seletor

A forma como você cria um seletor depende de como seu site multilíngue está configurado.

Se cada idioma tiver seu próprio URL (subdiretórios como /es/ , subdomínios como es.example.com ou um parâmetro de URL), o seletor mais simples é uma lista de links, cada um apontando para a mesma página em outro idioma:

html

<nav aria-label="Idioma">

<a href="/en/pricing/" hreflang="en" lang="en">Inglês</a>

<a href="/es/pricing/" hreflang="es" lang="es" aria-current="page">Espanhol</a>

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

</nav>

Cada detalhe cumpre uma função importante:

• O parâmetro `lang` informa aos leitores de tela como pronunciar corretamente o nome de cada idioma.
• aria-current="page" indica à tecnologia assistiva qual idioma está atualmente ativo.
• Cada link direciona para a mesma página em outro idioma (neste caso, a página de preços), e não para a página inicial, para que os visitantes não se percam.

As suas tags hreflang na página <head> (ou no seu sitemap) precisam corresponder exatamente a esta estrutura de URL, porque é isso que os mecanismos de busca usam para mostrar a versão correta para o usuário correto. O Google recomenda subdiretórios ou subdomínios em vez de parâmetros de URL para versões de idioma.

Se o idioma estiver armazenado em um cookie ou no navegador em vez da URL, não haverá URLs de idioma para as quais criar links, portanto, links simples não funcionarão. Seu seletor precisa atualizar o idioma armazenado e recarregar a página.

A forma como você exibe essas informações — como um menu suspenso, uma linha de botões ou links simples — é uma escolha de design. O que importa mais é a estrutura da URL subjacente. A maioria dos sites usa subdiretórios (/es/) ou subdomínios (es.example.com). Os parâmetros de consulta (?lang=es) funcionam, mas o Google recomenda não os usar para versões de idioma. Independentemente da sua escolha, as tags hreflang no cabeçalho da página (ou no seu sitemap) precisam corresponder exatamente a essa estrutura. É isso que os mecanismos de busca usam para fornecer a versão correta ao usuário correto.

Se o seu site for traduzido com Bablic , você pode escolher o caminho que melhor se adequar à sua equipe:

• Utilize o seletor integrado. Escolha um estilo predefinido em Projeto → Seletor no painel de controle Bablic e ajuste-o para combinar com a sua marca. Nenhum código necessário.
• Personalize o design com CSS. Mantenha o seletor de Bablic , mas ajuste suas cores, fontes, espaçamento e ícones para que corresponda exatamente ao seu sistema de design.
• Crie o seu próprio com a biblioteca de seletores Bablic : O pacote @ bablic -io/selector oferece duas funções: getLanguages() retorna os idiomas publicados do seu projeto e marca o idioma atual, e setLanguage() alterna entre idiomas usando o método que seu projeto utiliza (pasta, subdomínio, parâmetro de URL, cookie ou armazenamento do navegador). Você cria a interface enquanto Bablic cuida da comutação.

As equipes que desejam lançar o produto rapidamente podem manter as configurações padrão, enquanto as equipes que desejam que cada detalhe esteja alinhado à identidade visual da marca têm espaço para personalizar.

Independentemente do caminho que você escolher, somente seus próprios dados podem lhe dizer qual padrão funciona melhor para o seu público. Se você estiver indeciso entre dois designs, pode realizar um teste simples. Monitore com que frequência os visitantes mudam de idioma e se permanecem na empresa após essa mudança.

Escolher o que fica atrás do seu seletor

Um bom seletor só importa se a tradução por trás dele for adequada. Bablic combina a tradução automática com um editor contextual, permitindo que alguém da sua equipe que domine o idioma revise e corrija trechos específicos diretamente na página, em vez de traduzir tudo do zero. Se você está se perguntando se a tradução automática é boa o suficiente para ser publicada sozinha, nossa análise sobre a confiabilidade do Google Translate é um bom ponto de partida.

Comparando ferramentas? Confira nossa central de comparação Bablic ou leia como Bablic funciona para saber mais sobre a configuração. Você também pode experimentar gratuitamente por 30 dias, sem necessidade de cartão de crédito.

Perguntas frequentes