Seletor de idiomas do site: Dicas, práticas recomendadas e exemplos

Quando você tem um site multilíngue, convém ter um seletor de idioma (às vezes chamado de alternador de idioma) em seu site. Isso permite que seus visitantes vejam quais versões traduzidas do site você oferece, para que possam escolher o idioma de sua preferência.

Um seletor de idioma é semelhante a esta captura de tela:

Mas há uma certa variedade de exibição, inclusive onde o seletor de idioma está localizado (cabeçalho, rodapé etc.) e se há ícones que exibem bandeiras de países.

A boa notícia é que adicionar um seletor de idioma não precisa ser difícil. Discutiremos o que está envolvido no projeto e no desenvolvimento de sua própria ferramenta de seleção de idiomas a partir do zero.

E tem uma solução ainda mais fácil: softwares ou plugins de tradução que já vêm com um seletor de idiomas integrado (e que você pode personalizar), o que é super útil também para a localização do seu site.

Neste post, vamos ver os diferentes tipos de seletores de idioma, algumas boas práticas para manter seu seletor de idioma bem visível e funcional, e uma maneira simples de adicionar e personalizar seu seletor de idioma no seu site multilíngue.

Procurando uma solução agora mesmo? Experimente o teste gratuito de 14 dias da Weglot e tenha um seletor de idiomas funcionando no seu site em minutos!

Adicionando o Seletor de Idiomas do Seu Site (Dicas e Melhores Práticas)

Se você já tem um site multilíngue e só precisa adicionar um seletor de idiomas, talvez você já tenha um designer criando um modelo para o seu desenvolvedor. De qualquer forma, aqui vão algumas dicas para melhorar a experiência de quem usa seu site:

Deixe Fácil de Encontrar

Quando alguém que não fala inglês entra no seu site em inglês, provavelmente vai procurar nas áreas principais de navegação (cabeçalho, rodapé) para ver se seu site está disponível no idioma dela.

Mas se ela não vir opções de idioma, vai achar que seu site só está em inglês e vai sair na hora. Isso prejudica seu negócio.

Por isso, uma boa prática é descobrir onde seus visitantes procurariam por um seletor de idiomas e colocá-lo exatamente lá. Pode ser no topo, junto com o menu de navegação, no rodapé da página, na barra lateral ou até em um pop-up.

Pense em Quantas Versões de Idioma Você Pretende Oferecer

Por exemplo, talvez você não queira usar um menu suspenso se for traduzir seu site para apenas mais um idioma.

Mas, se você planeja traduzir para três, quatro ou até mais idiomas diferentes, aí sim um menu suspenso vai ficar mais organizado e fácil de usar.

Priorize a Função em Vez da Forma

Sim, você quer que seu seletor de idiomas combine com o design do seu site. Mas não se esqueça que o objetivo desse design é a funcionalidade.

Você não quer confundir os visitantes, certo? O ideal é que fique bem claro que seu site está disponível em outros idiomas. E, claro, que mudar de idioma seja o mais fácil possível.

Mais uma vez, criar e desenvolver seu próprio botão de idioma faz sentido se você tem um site multilíngue e não pretende usar um software para gerenciar suas traduções.

Mas se você usa um software de tradução, não precisa se preocupar com isso. A maioria dos softwares de tradução para sites já permite que você adicione um seletor de idiomas. (Aliás, a gente super recomenda usar um software de tradução para traduzir seu site e manter tudo sempre atualizado.)

Quer um seletor de idiomas estiloso como o da Inbenta? Experimente o Weglot de graça no seu site e explore as possibilidades de personalizar seu seletor de idiomas.

Liste os Idiomas em Sua Forma Nativa

Sem nem perceber, você pode ter listado os idiomas do seu site na sua própria língua. Se o seu site está em inglês, por exemplo, você pode ter escrito "German", "Chinese", "Spanish" e por aí vai no seu seletor de idiomas.

Mas isso não faz muito sentido para o seu público. O nome nativo de um idioma pode ser totalmente diferente do nome em inglês!

Um bom exemplo: nosso seletor de idiomas lista opções como Français, Deutsch, Español, Italiano, 日本語 para japonês e Nederlands. Assim, falantes nativos podem encontrar facilmente o idioma de site que preferem.

Usar Ícones de Bandeiras Pode Não Ser a Melhor Escolha

É comum pensar que uma bandeira é uma ótima representação visual para um idioma, mas a verdade é que não é bem assim.

O que queremos dizer com isso: nos Estados Unidos, o inglês é associado à bandeira americana, não à Union Jack (bandeira do Reino Unido).

Brasileiros associam o português à bandeira brasileira, não à bandeira de Portugal. O mesmo para falantes de espanhol na Espanha — eles associarão seu idioma à bandeira espanhola, não à mexicana.

Claro que você pode usar bandeiras! Elas ficam bem legais no design de experiência do usuário (UX), são mais chamativas e, por isso, mais fáceis de encontrar. E podem funcionar super bem para o seu caso. A questão é que tudo depende do seu público-alvo, pois você pode acabar afastando uma parte dele.

Use Redirecionamentos com Cuidado

Uma das formas de fazer a seleção de idioma do site é redirecionar automaticamente os usuários com base na localização deles (usando o IP) ou no idioma do navegador.

Isso funciona quando o site detecta o idioma do navegador do seu usuário e o redireciona imediatamente para a versão naquele idioma.

Embora seja prático, nem sempre é uma boa ideia depender do redirecionamento automático. Isso porque a localização de um usuário não corresponde necessariamente ao seu idioma.

Imagine um turista chinês de férias de um mês na Espanha. Ele ficaria, sem dúvida, confuso ao ser levado imediatamente para a versão em espanhol do site que está visitando!

E, mesmo que o idioma do navegador esteja configurado para dinamarquês, por exemplo, isso não significa necessariamente que a pessoa queira enviar pedidos físicos para um endereço na Dinamarca.

Em resumo, geralmente é melhor perguntar as preferências do seu usuário em vez de assumir a intenção. Um usuário deve poder escolher sua localização, idioma padrão e moeda. O Airbnb é um ótimo exemplo disso; eles não presumem que você fala os idiomas do país em que está. Ao clicar no ícone do globo, você poderá escolher seu idioma, localização e, na próxima aba, sua moeda:

‍

Isso não quer dizer que os redirecionamentos nunca sejam uma boa ideia; faz sentido quando um usuário francês na França acidentalmente cai na versão americana de um site, por exemplo.

Mas, existem alguns sites que fizeram a seleção automática de idioma da maneira certa. Por exemplo, a Zara oferece a opção de permanecer no site do Reino Unido ou de prosseguir para o site francês:

Isso é útil para várias intenções de busca, como verificar a disponibilidade ou os detalhes de um produto em um site de e-commerce em um local para onde você está viajando.

Sempre que possível, use o preenchimento automático

É sempre uma boa ideia ter o preenchimento automático nos seus menus suspensos, onde o site sugere o idioma que você está tentando encontrar ao digitar as primeiras letras.

O preenchimento automático é especialmente útil se você oferece idiomas suficientes para que seu usuário precise rolar a página para encontrar o dele. Dessa forma, levará apenas alguns segundos para ele alternar para o idioma selecionado.

Como criar os seletores de idioma do seu site

Existem muitas maneiras diferentes de projetar o seletor de idioma do seu site. Muitas pessoas optam por botões simples, enquanto outras preferem um toque a mais, adicionando sua marca (como o nosso!).

Menus suspensos ou de seleção

Esta é uma das maneiras mais comuns de exibir as versões de idioma disponíveis do seu site.

Menus suspensos, ou menus de seleção, são caracterizados pela lista de opções que se abre, mostrando todas as configurações de idioma disponíveis para você escolher.

Eles também são claramente marcados, seja por um ícone de globo, o nome do idioma, uma bandeira ou uma abreviação do idioma.

Se você está procurando um seletor de idioma rápido e fácil, este funcionará melhor, pois existem muitas maneiras diferentes de projetá-lo. Ele é projetado para ser altamente visível, então geralmente é encontrado no topo da página, como você pode ver aqui:

Alguns sites optam por um método menos ortodoxo, com uma espécie de menu drop-up, como este seletor de site no Green Gifts:

O site da MINI mostra um seletor de idioma que exibe outros idiomas à esquerda do idioma atual quando você passa o mouse sobre ele. Assim como o Green Gifts, ele usa códigos de país para indicar cada idioma:

E ele usou um código especial para conseguir esse efeito:

Botões

Botões de idioma são uma forma clara e rápida de mostrar que você está mirando mercados específicos. Eles funcionam melhor quando você oferece poucas opções de idioma no seu site, já que ocupam bem mais espaço.

A Gardette Industries oferece o site apenas em francês e inglês, então um botão de idioma aqui faz sentido:

Por causa do contraste entre o botão de idioma e o fundo do site, o botão fica ainda mais visível, chamando naturalmente a atenção do usuário para ele.

Mas você vai querer pensar bem onde colocar esses botões. Eles não devem bloquear conteúdo importante, nem devem ser a principal atração do seu site. O objetivo é garantir que o usuário consiga o que quer (um site traduzido no idioma que ele prefere) com o mínimo de cliques possível.

Links de Texto

Se você prefere um seletor de idioma mais discreto, pode considerar os links de texto. Eles geralmente ficam no rodapé do seu site. Além disso, são uma boa opção se você tem poucos idiomas para um menu suspenso ou de seleção completo, mas muitos para ter botões próprios.

Aqui está um bom exemplo: no site da W3C, eles listaram diretamente o japonês e o chinês simplificado como links de texto.

O Facebook usa uma mistura de links de texto e um menu de seleção. Eles colocam os idiomas disponíveis bem no rodapé da página — você terá que rolar a página para baixo quando chegar na tela de login:

Se você clicar no botão +, vai parar em um menu de seleção enorme, com vários idiomas.

Janelas Modais

Modais são janelas menores que aparecem quando você clica em algo. Elas cobrem a página principal para desativar suas funções, mas a mantêm visível no fundo. Isso indica que você voltará para a janela principal depois de interagir com a janela modal.

Na hora de criar o seletor de idioma do seu site, os modais podem ser uma boa opção, já que geralmente chamam a atenção e são estilosos. Dependendo de como você configurar, o usuário conseguirá escolher a região e o idioma que prefere mais facilmente.

Vamos dar uma olhada no site da Calvin Klein como exemplo:

O seletor de idioma do site é ativado ao clicar no ícone de globo no canto superior direito, ao lado de “Entrar/Registrar”. Depois que você clica nele, a janela modal para escolher seu país e idioma preferidos vai aparecer.

Outro exemplo é a Nestlé. No canto superior direito da página, ele te mostra em qual versão do site você está.

Quando você clica nele, uma janela modal que ocupa a página inteira (mas é fácil de sair, marcada pelo botão X bem grande) vai aparecer.

Embora os modais sejam bem visíveis, é importante notar que eles podem interromper a experiência do usuário, assim como os pop-ups. Eles interrompem a navegação e exigem a atenção imediata do usuário.

Eles podem ser úteis quando você precisa sinalizar algo importante para o seu usuário, como preferências de privacidade, uso de dados ou avisos.

Usando um Software de Tradução de Sites para Personalizar o Seletor de Idioma do Seu Site

Se você está criando um site multilíngue ou já tem um funcionando, você pode usar a Weglot para melhorar a forma como você traduz seu conteúdo e gerencia todo o seu processo de tradução—com o benefício extra de ter um seletor de idiomas fácil de personalizar.

Primeiro, alguns pontos básicos sobre a Weglot:

• Você pode adicionar a Weglot facilmente a qualquer CMS (WordPress, Squarespace, Wix, Shopify e qualquer plataforma personalizada).

• A Weglot usa os principais provedores de tradução—do Google Translate ao DeepL—para traduzir de forma rápida e eficiente todo o conteúdo do seu site.

• Você pode traduzir seu conteúdo para mais de 110 idiomas diferentes. Isso inclui idiomas da direita para a esquerda, como árabe e hebraico.

• Para cada tradução, a Weglot cria URLs únicas. Por exemplo, weglot.com é o nosso site em inglês, enquanto weglot.com/fr é o nosso site em francês.

• Todas as versões traduzidas do seu site são sempre mantidas atualizadas com qualquer mudança de conteúdo. A Weglot usa detecção automática de conteúdo para perceber qualquer alteração no conteúdo do seu site original e atualizar todas as versões traduzidas do seu site de acordo.

• Você tem controle total sobre suas traduções, então pode editá-las, se precisar. Você também pode ver suas traduções ao vivo no seu site com um Visual Editor, assim você pode fazer alterações para que seu conteúdo traduzido se encaixe no design e layout do seu site.

Você aprende melhor vendo? Aqui está um vídeo rápido que explica como a Weglot funciona e como ela pode facilitar sua vida ao gerenciar sites multilíngues:

E o melhor de tudo, você pode personalizar a seleção de idiomas com o Weglot. Todo site traduzido pelo Weglot ganha um seletor de idiomas, assim seus visitantes saberão que você oferece versões traduzidas do seu conteúdo.

Isso nos traz de volta aqui:

Mas com o Weglot, você não fica preso a apenas um design. Do seu painel, você pode personalizar como seu seletor de idiomas aparece.

Você pode escolher se vai:

• Mostrar o nome do idioma, ou apenas a abreviação/código do idioma (como EN para inglês, ES para espanhol, FR para francês, e assim por diante).

• Mostrar um ícone de bandeira.

• Mostrar o seletor de idioma como uma caixa suspensa.

Você também pode escolher o tipo de bandeiras de países que você usa (como brilhantes ou foscas), e tem um lugar para adicionar CSS personalizado extra (se você quiser fazer mais edições, para que o seletor de idiomas combine ainda mais com a sua marca).

Com o Weglot, seu seletor de idiomas fica por padrão no canto inferior direito do seu site, mas você pode mudar a posição dele se quiser (canto superior direito, inferior esquerdo, etc.).

O processo vai ser um pouco diferente dependendo do seu CMS, mas aqui estão dois tutoriais em vídeo para te dar uma ideia:

Mudando a posição do seu seletor de idiomas quando você usa WordPress:

Mudando a posição do seu seletor de idiomas quando você usa Shopify:

Se você adicionou o Weglot ao seu site usando código, ainda pode mudar a posição do seu seletor de idiomas seguindo estas instruções.

Um Resumo Rápido: Como Personalizar o Seletor de Idiomas do Seu Site

Existem duas formas principais de colocar um seletor de idiomas no seu site:

1. Crie e desenvolva o seu próprio. Isso não é um projeto enorme, mas só é necessário se você não estiver usando um software de tradução para gerenciar seu site multilíngue. Ao criar seu seletor de idiomas, lembre-se que ele deve ser: (1) fácil de encontrar, (2) claro sobre quais idiomas são oferecidos e (3) tematicamente parecido com o seu design.

2. Use um software de tradução de sites. Qualquer software de tradução de sites que se preze vai te dar um recurso de seletor de idiomas personalizável. Acima, vimos como você pode personalizar seu seletor ao usar o software de tradução do Weglot, incluindo adicionar bandeiras, exibir o nome completo do idioma e escolher onde no seu site o seletor aparece.

Se você está pronto para deixar o Weglot simplificar seu projeto de tradução e te ajudar a alcançar seu público global mais rápido, comece seu teste gratuito de 14 dias hoje, sem compromisso.