Melhores práticas para projetar seletor de idioma

por Bahasa Aorinka
5 de dezembro de 2023

Blog > Guia > Melhores práticas para projetar seletor de idioma

O seletor de idioma é um elemento importante ao qual você deve prestar muita atenção ao criar um site multilíngue , porque o seletor de idioma é o que os usuários visitam com frequência quando desejam mudar de idioma.

Um botão de mudança de idioma eficaz pode fornecer vários benefícios para um site, desde aumentar a otimização da web até aumentar as vendas.

Neste artigo, discutiremos as melhores práticas para projetar seletores de idioma. Vamos discutir isso mais detalhadamente no artigo seguinte.

O que é um seletor de idioma?

Um seletor de idioma é um elemento ou recurso da interface do usuário que permite aos usuários selecionar o idioma com o qual desejam interagir com um site, aplicativo ou qualquer plataforma digital. É comumente encontrado em sites, aplicativos de software e outras interfaces digitais para atender usuários que falam idiomas diferentes.

O seletor de idioma geralmente exibe uma lista de idiomas disponíveis, e o usuário pode selecionar o idioma de sua preferência nessa lista. Uma vez selecionado, o conteúdo da interface, incluindo texto, rótulos e, às vezes, imagens, será exibido no idioma selecionado. Isso é especialmente importante para sites e aplicativos que atendem a um público global ou a uma base de usuários diversificada.

Os seletores de idioma contribuem para uma melhor experiência do usuário, tornando o conteúdo digital acessível a um público mais amplo, independentemente do seu nível de conhecimento do idioma. Eles são um componente-chave dos esforços locais, permitindo que desenvolvedores e designers adaptem seus produtos a diferentes contextos linguísticos e culturais.

Por que precisa personalizar seu alternador de idioma?

Personalizar o seletor de idioma em um site multilíngue traz vários benefícios importantes.

Alinhamento da marca e estilo visual: Ao personalizar o seletor de idioma, você pode garantir que a aparência e o estilo do idioma usado sejam consistentes com a marca e o estilo visual do seu site. Você pode personalizar botões ou menus de troca de idioma para se adequar ao design geral do seu site, criando consistência na experiência do usuário.
Maior controle sobre os idiomas exibidos: Às vezes, você pode querer limitar determinados idiomas exibidos no alternador de idiomas. Por exemplo, você pode ter uma versão limitada do seu site em vários idiomas e deseja exibir apenas esses idiomas no alternador de idiomas. Ao personalizar o seletor de idiomas, você pode escolher quais idiomas serão exibidos, dando mais controle sobre o conteúdo disponível.
Experiência de usuário otimizada: ao personalizar o seletor de idioma, você pode criar uma experiência de usuário otimizada. Por exemplo, você pode ajustar o layout ou a posição do seletor de idioma para facilitar a localização pelos usuários. Você também pode adicionar recursos como notificações ou instruções de troca de idioma que ajudam os usuários a entender como usar o recurso facilmente.
Atenda às diferentes necessidades dos usuários: cada usuário tem preferências de idioma diferentes. Ao personalizar a troca de idioma, você pode atender às necessidades de usuários de diferentes origens linguísticas. Isso pode incluir usuários locais, visitantes internacionais ou usuários que se sintam mais confortáveis em um idioma diferente.
Aumente a conversão de vendas: a personalização adequada do alternador de idioma também pode fornecer o benefício de aumentar a conversão de vendas. Porque um alternador de idioma eficaz pode proporcionar conforto ao usuário ao interagir com seu site. De acordo com dados da CSA Research, 72,4% dos consumidores afirmaram que estariam mais propensos a comprar produtos que tivessem informações na sua própria língua. Portanto, é impossível que o seu nível de vendas também aumente.

Diferentes tipos de seletor de idioma

Cada proprietário de site certamente considerará cuidadosamente a aparência de seu seletor de idioma; cada site, é claro, terá preferências diferentes. Para aqueles que procuram um tipo de seletor de idioma que possa ser usado, aqui estão alguns deles.

Botão Idioma

Este é um dos tipos de alternador de idioma comumente usados. O botão de idioma geralmente é um ícone ou texto que indica o idioma que está sendo exibido, por exemplo, “EN” para inglês ou a bandeira de um país para representar um idioma específico. Quando os usuários clicam no botão de idioma, eles serão redirecionados para a versão do site no idioma apropriado.

Para botões de idioma, é recomendado exibir um número limitado de idiomas para evitar uma exibição desordenada. Geralmente, ter mais de 4 a 5 idiomas pode criar um efeito visual movimentado. É importante posicionar o botão em um local visível para que os usuários possam encontrá-lo facilmente. Discutiremos esses aspectos mais detalhadamente na próxima seção deste artigo.

Os botões de idioma podem ser adequados para empresas que visam mercados específicos ou atendem comunidades internacionais em determinados locais. Um exemplo de uso do botão de idioma no site da OMS é o seguinte.

Link de texto

Links de texto são um tipo de alternador de idioma que usa texto na forma do nome do idioma como link. Por exemplo, você pode exibir links de texto como “Inglês”, “Français” ou “Español” que levam os usuários a uma versão do site no idioma selecionado. Esse link de texto geralmente é colocado em uma lista ou menu suspenso para facilitar aos usuários a seleção do idioma desejado.

Um tipo de seletor de idioma de link é utilizado pela grande empresa Facebook, além dos idiomas listados, você também pode pressionar o ícone (+) para encontrar mais idiomas.

Depois disso, a página será imediatamente traduzida para o idioma previamente selecionado.

Menu de seleção

Um menu de seleção é um tipo de alternador de idioma que usa um menu suspenso ou menu aberto para selecionar um idioma. Ao clicar no menu de opções, o usuário verá uma lista de idiomas disponíveis e poderá selecionar o idioma desejado. O menu de opções pode conter ícones ou bandeiras de países como indicadores de idioma, bem como nomes de idiomas no texto.

O menu de seleção é bem diferente do botão de idioma, esse tipo é mais complexo que apenas um botão. Como o exemplo abaixo que vem do site da Porsche.

Eles fornecem um site seletor de idioma onde os usuários podem anotar diretamente seu idioma ou país de destino.

Práticas recomendadas e dicas do seletor de idioma

Depois de entender os vários tipos de seletores de idioma que podem ser usados em sites, na criação de um seletor de idioma, é importante aplicar as melhores práticas para que você possa criar um seletor de idioma que seja eficaz e capaz de proporcionar uma boa experiência ao usuário. Aqui estão algumas práticas recomendadas.

Posicionamento claro e cuidadoso de botões de idioma: colocação de botões de idioma em locais intuitivos e de fácil acesso para os usuários. Normalmente, coloque botões de idioma na parte superior da página (por exemplo, à direita ou à esquerda do cabeçalho) ou na parte inferior da página (por exemplo, no rodapé). Certifique-se de que o botão não esteja oculto por outros elementos e seja fácil de ser encontrado pelos usuários.
Bandeiras ou sem bandeiras: O uso de bandeiras como ícones de linguagem é um tema controverso. Embora as bandeiras possam fornecer uma indicação visual clara da língua escolhida, é importante lembrar que as bandeiras nacionais também têm significados políticos e culturais complexos. esteja preparado para usar ícones de linguagem neutros e mais universais se quiser evitar possíveis problemas associados ao uso de sinalizadores.
Nome completo ou iniciais do idioma: Ao selecionar um rótulo de idioma em um botão, você pode usar o nome completo do idioma (por exemplo, “English” ou “Français”) ou as iniciais do idioma (por exemplo, “EN ” ou “FR”). Explica o nível de compreensão do usuário sobre a linguagem utilizada. Se você tem como alvo um público com diversos idiomas, usar o nome completo do idioma pode ser mais fácil de entender.
Botões de idioma dos ícones: você pode usar ícones em vez ou além de texto ou sinalizadores para representar idiomas específicos. Ícones de idioma claros e facilmente reconhecíveis podem ajudar os usuários a identificar o idioma que desejam selecionar. Certifique-se de que os ícones sejam consistentes e fáceis de entender para usuários de diferentes origens culturais e linguísticas.
Priorize o idioma relevante: exiba o idioma mais relevante para o seu público-alvo. Analise o tráfego do seu site e os dados demográficos dos usuários para identificar os idiomas que devem ser exibidos com destaque. Priorizar as linguagens mais utilizadas ou amplamente utilizadas pode melhorar a experiência do usuário e aumentar o engajamento.
Rótulos de idioma claros: use rótulos de idioma claros e concisos para representar cada opção de idioma. Exibe o nome do idioma no respectivo idioma, como “English” para inglês ou “Español” para espanhol. Isso ajuda os usuários a identificar rapidamente seu idioma preferido, mesmo que não estejam familiarizados com o idioma usado em seu site.

Quebrar barreiras linguísticas

Diga adeus às barreiras linguísticas e olá ao crescimento ilimitado! Experimente nosso serviço de tradução automática hoje mesmo.

Comece a traduzir agora

Configurando um seletor de idioma com Linguise em 7 etapas

Neste ponto, você conhece as práticas recomendadas para seletores de idioma. Esta tradução pode ser feita após usar o serviço de tradução de sites. No entanto, nem todos os serviços de tradução oferecem flexibilidade nas configurações do seletor de idioma.

Mas não se preocupe porque Linguise não é assim. Linguise é um serviço de tradução automática que fornece ao usuário a personalização do alternador de idiomas. Alguns dos benefícios que você obterá ao usar Linguise incluem.

Linguise pode ser usado e integrado em mais de 40 CMS ( WordPress , Joomla , Drupal , etc).
A tradução para vários idiomas será feita automaticamente em poucos segundos após você adicionar o idioma ao alternador de idiomas no site.
Existem mais de 80 idiomas disponíveis que podem ser adicionados ao seletor de idiomas.
Linguise preparará automaticamente um URL exclusivo de acordo com o idioma de destino da tradução. Por exemplo, o URL linguise .com/de/ para uma página que está sendo traduzida para o alemão.
Ele criará automaticamente um URL canônico para ajudar a evitar conteúdo duplicado nos mecanismos de pesquisa quando houver variações de idioma em uma página.
Você pode configurar o alternador de idioma de maneira flexível de acordo com as necessidades do site, começando pelo ícone e cor até o nome do idioma.
Você pode visualizar estatísticas de visualização de páginas de visitantes por idioma, para cada idioma adicionado ao seletor de idioma.

Neste tutorial, usaremos WordPress como exemplo do CMS utilizado.

Passo 1: Registrando uma conta gratuita Linguise

Para acessar o alternador de idiomas no Linguise , o primeiro passo que você precisa fazer é registrar uma conta no Linguise . Linguise também oferece um teste gratuito de um mês, que inclui uma variedade de recursos dos quais você pode aproveitar.

Etapa 2: adicione domínio ao seu site multilíngue

A segunda etapa é adicionar o domínio do site no Linguise que você já possui ao Linguise . Há várias coisas que você precisa preencher, começando por.

Conta
URLs
Plataforma
Linguagem
Idioma de tradução
Traduzir URL

Depois disso, você precisa ativar a chave API e definir o URL do idioma. Para obter um guia completo sobre como adicionar um domínio de site, você pode ler a documentação, enquanto especificamente para WordPress , você pode vê-lo instalando a tradução automática Linguise WordPress ou assistindo ao vídeo tutorial abaixo.

Passo 3: Instale o plugin Linguise

Depois de adicionar um site com sucesso, abra o painel WordPress Linguise , faça isso em Plugins > Adicionar Novo > Linguise > Instalar > Ativar.

Se o plugin já estiver instalado, acesse o painel Linguise e copie a chave API.

Em seguida, abra o plugin Linguise e cole o código API obtido no painel Linguise na coluna a seguir.

Etapa 4: configurar a tela principal

Para configurar um alternador de idioma ou exibir sinalizadores de idioma, as etapas são feitas por meio do Linguise no menu Configurações> Exibição de sinalizadores de idioma.

Durante a configuração inicial faremos ajustes no display principal, levando em consideração os diferentes componentes.

Uma consideração inicial é a configuração do formato de exibição da lista de idiomas, que oferece três opções de escolha: lado a lado, suspensa ou pop-up. No lado esquerdo, há uma visualização de cada formato.

O primeiro formato, conforme mostrado abaixo, é um layout lado a lado.

O formato a seguir adota um estilo suspenso, conforme mostrado na imagem abaixo.

Por último, temos o formato popup como opção final.

A seguir, passamos para a próxima etapa, que envolve configurar a posição do seletor de idioma. Você tem a flexibilidade de escolher entre várias opções de posição, por isso é importante selecionar uma posição que seja facilmente perceptível para os visitantes.

Finalmente, você precisa decidir sobre a preferência de combinação para exibir as opções de idioma. Você pode escolher entre opções como bandeira + nome do idioma, bandeira + nome abreviado ou simplesmente exibir apenas a bandeira. Esta decisão dependerá de suas preferências específicas de design e das preferências de seu público-alvo.

Etapa 5: definir o design da bandeira

Depois disso, abaixo da seção de exibição principal, você encontrará configurações de design específicas para a bandeira. A imagem fornecida abaixo demonstra algumas das opções de configuração disponíveis.

Exibição do nome do idioma : você tem a opção de exibir o nome do idioma com base no país ou no próprio idioma. Por exemplo, você pode optar por exibir “Alemão” ou “Alemão”.
Tipo de bandeira inglesa: esta opção é aplicável ao lidar com idiomas que possuem múltiplas variações, como “Inglês dos EUA” ou “Inglês da Grã-Bretanha”. Escolhas semelhantes podem ser feitas para idiomas como espanhol, taiwanês, alemão e português.
Estilo da bandeira: Esta configuração permite definir o formato do ícone da bandeira, se deve ser redondo ou quadrado (retangular).

Passo 6: Defina a cor e o tamanho da bandeira

Depois que o design da bandeira estiver configurado, a próxima etapa envolve ajustar cores, tamanho e vários outros elementos. Na interface a seguir, você encontrará inúmeras configurações personalizáveis, incluindo:

Raio da borda da bandeira: permite personalizar o raio da borda em pixels ao usar uma bandeira retangular.
Cor do nome do idioma: você pode selecionar a cor de texto padrão para o nome do idioma.
Cor do idioma pop-up: esta configuração determina a cor do título do idioma nas áreas pop-up ou suspensas.
Tamanho da bandeira: Você tem a opção de modificar o tamanho da bandeira de acordo com suas preferências.
Cor de foco do nome do idioma: esta configuração controla a cor do texto ao passar o mouse sobre os nomes dos idiomas.
Cor de foco do idioma do pop-up: Da mesma forma, esta configuração determina a cor do texto ao passar o mouse sobre o título do idioma no pop-up ou no menu suspenso.

Etapa 7: definir sinalizador box-shadow

Na fase final, você tem a oportunidade de personalizar as configurações de sombra da bandeira. A configuração inicial permite que você especifique uma sombra para cada bandeira exibida em seu site, enquanto a configuração subsequente refere-se ao efeito de sombra ao passar o mouse sobre a bandeira do idioma.

Lembre-se de clicar no Salvar para preservar as configurações de personalização feitas para o alternador de idioma. Isso garante que as configurações selecionadas para os efeitos de sombra sejam implementadas e salvas para uso futuro.

Após todas as configurações terem sido realizadas, aqui está um exemplo de exibição do seletor de idioma através de um pop-up, posicionado no canto superior direito, e utilizando iniciais. Este é apenas um exemplo, você pode personalizar o restante como desejar e de acordo com a necessidade do site.

Além do WordPress CMS, você também pode usar outras plataformas de site e seguir o guia detalhado, como alternador de configuração para OpenCart , alternador de idioma para Drupal e alternador de configuração para PrestaShop .

Pronto para explorar novos mercados? Experimente nosso serviço de tradução automática gratuitamente com nossa avaliação gratuita de 1 mês. Nenhum cartão de crédito necessário!

Reivindique sua avaliação gratuita de 1 mês

Projete seu seletor de idioma para uma experiência multilíngue perfeita com Linguise !

Aqui, você obteve informações sobre as melhores práticas para projetar seletores de idioma e como fazê-lo usando Linguise ! Acredite, criar um alternador de idiomas pode trazer muitos benefícios e garantir a otimização com base nos pontos mencionados acima.

Ao criar um seletor de idioma, certifique-se de seguir as dicas e práticas recomendadas que explicamos acima, desde o uso de ícones e seleção de idiomas relevantes até o posicionamento.

Agora, registre uma conta Linguise , adicione seu site e ajuste o seletor de idioma para fornecer uma melhor experiência ao usuário. Não se esqueça de experimentar o recurso de teste gratuito de 1 mês para aproveitar os recursos superiores do Linguise