Dicas de design de sites multilíngues com ConveyThis

Dicas de design de sites multilíngues com ConveyThis: aprimore a experiência do usuário e o alcance global com estratégias práticas de design.
Transmita esta demonstração
Transmita esta demonstração
dicas de design multilíngue

Vários sites agora têm muitas opções de idioma para que visitantes de todo o mundo possam navegar confortavelmente. A internet ajudou a tornar o mercado uma experiência global, por isso, ao ter um site, você abriu as portas do seu negócio para todos que tenham conexão com a internet. Porém, se não entenderem o idioma, não ficarão. Site multilíngue é fácil.

Felizmente, o processo de tornar seu site multilíngue é bastante simples. O ConveyThis pode criar uma versão traduzida do seu site em minutos e, em seguida, você pode personalizar a aparência e o posicionamento do seu seletor de idiomas, fazer algumas alterações de layout para acomodar idiomas com mais palavras ou da direita para a esquerda e alterar cores e imagens nos casos em que os originais são inadequado para a cultura-alvo.

O processo não é totalmente automatizado, você precisará fazer alguma pesquisa com antecedência. Este guia explica alguns aspectos do design do site para ajudá-lo a entrar confortavelmente no mundo dos sites multilíngues e do excelente design.

Marca consistente

A experiência do usuário precisa ser consistente, independentemente da versão do idioma que ele está visitando. A aparência deve ser muito semelhante em todas as versões, algumas diferenças podem ser necessárias devido a diferenças de idioma ou cultura, mas se você alternar entre idiomas, não deve sentir que foi redirecionado para um site completamente diferente.

Portanto, os elementos de design, como o layout e o estilo de marca específico da sua empresa, devem permanecer os mesmos em todos os idiomas.

Isso é super fácil de fazer em WordPress com ConveyThis, que identifica perfeitamente o texto independentemente do tema que você escolheu (mesmo que seja personalizado!) e traduza-o automaticamente, mesmo que você esteja trabalhando com outros plugins.

Isso ajudará você a ter um modelo global com o mesmo tema para todos os idiomas e, portanto, a mesma experiência do usuário.

A página inicial do Airbnb funciona muito bem como exemplo, vamos dar uma olhada na versão australiana:

Multi Idiomas

E aqui está a versão japonesa:

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

Sem dúvida, este é o mesmo site. O plano de fundo é o mesmo e a função de pesquisa também. Ter um design unificado ajuda a identidade da sua marca e economiza tempo e esforço ao adicionar novos idiomas ou atualizar.

Limpar seletores de idioma

Escolha um local de destaque para o seletor de idioma, como qualquer um dos quatro cantos do seu site, e coloque-o em todas as páginas, não apenas na página inicial. Tem que ser fácil de encontrar, ninguém quer procurar um botão oculto.

É altamente recomendável que os nomes dos idiomas estejam em seu próprio idioma. “Español” em vez de “Spanish”, por exemplo, fará maravilhas. Asana faz isso, seu site tem uma caixa suspensa com as opções de idioma disponíveis.

Sem título3

Desta forma, ajuda os visitantes a se sentirem bem-vindos. Se o seu site for traduzido, a lista de idiomas deve refletir isso. Ler “alemão, francês, japonês” em um site em inglês não facilita a navegação das pessoas e dá a impressão de que a versão em inglês é a mais importante.

'Idiomas' é melhor do que 'Regiões'

Muitas grandes marcas internacionais fazem você mudar de região para poder ler o site no seu idioma. Esta é uma péssima ideia que torna a navegação mais difícil para os visitantes. Esses sites funcionam com a suposição de que você está navegando na região onde o idioma é falado, então você obtém o texto em seu idioma, mas pode não obter o conteúdo da região em que está interessado.

A imagem a seguir foi retirada do site da Adobe:

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P vOTNbP2pFSp17B530ArONrjgjryMZYqcQl5 WQuEAYvm6LArZbXFsMD9AiSX mEzsJilUu4a

As línguas não devem ser inseparáveis de suas regiões. Tomemos por exemplo todas aquelas cidades cosmopolitas como Nova York, Londres e Paris. Talvez um belga que mora no Reino Unido queira comprar no site do Reino Unido, mas navegue em francês. Eles precisam escolher entre comprar no site belga em seu idioma ou comprar no site do Reino Unido em inglês, e não querem fazer nenhum dos dois. Assim, você acidentalmente criou uma barreira. Vamos dar uma olhada em um site que permite especificar o idioma e a região separadamente, o site da Uber.

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

Este é um projeto excelente. Nesse caso, a opção de troca de idioma foi colocada no rodapé à esquerda e, em vez de uma caixa suspensa, você tem um modal devido às inúmeras opções. Os nomes dos idiomas também são referidos em seu próprio idioma.

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

Como bônus, você pode “lembrar” qual foi o idioma escolhido pelo usuário para que, a partir da primeira visita, ele não precise mais mudar.

Local de detecção automática

Esse recurso é super útil para que seus visitantes não acessem pelo idioma errado. E para economizar tempo do usuário para que ele não precise procurar o seletor de idioma. É assim que funciona: o site identifica o idioma em que o navegador está ou sua localização.

Mas atenção caso o usuário seja turista e não conheça o idioma local, pois precisará do botão de idioma para fazer a troca, por isso nem sempre a ferramenta é precisa.

Ao projetar seu site multilíngue, não escolha entre o idioma de detecção automática e o alternador de idioma, o último é obrigatório, enquanto o primeiro é opcional.

Sinalizadores não são substitutos adequados para um nome de idioma

Existem 21 países de língua espanhola e 18 países de língua inglesa e, na China, existem 8 dialetos principais, portanto, as bandeiras não são bons substitutos para nomes de idiomas. Além disso, sinalizadores podem não ser indicadores úteis porque podem confundir aqueles que não os reconhecem.

Seja flexível com o espaço de texto

Isso pode ser um desafio, mas é inegável que as traduções não ocupam o mesmo espaço do texto original, algumas podem ser mais curtas, outras mais longas, algumas podem até precisar de mais espaço vertical!

wsEceoJKThGv2w9Qzxu gim H YPX39kktoHXy4vJcu aanoASp V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

Os caracteres chineses contêm muitas informações, portanto, não é necessário muito espaço, enquanto o italiano e o grego são mais prolixos e precisam do dobro de linhas. Uma boa regra é assumir que algumas traduções podem exigir mais de 30% de espaço extra, então seja flexível com o layout e atribua amplos espaços para o texto. Aqueles apertos no site original podem não ter espaço suficiente para a tradução, o inglês é um idioma particularmente compacto e, se você achar necessário abreviar em inglês para que o conteúdo caiba, com certeza encontrará alguns problemas quando for hora de traduzir.

Além de ter espaço para o texto esticar, também é uma boa ideia ter elementos de interface do usuário adaptáveis para que os botões e campos de entrada também possam crescer, você também pode diminuir o tamanho da fonte, mas não muito.

O site do Flickr é multilíngue, vamos dar uma olhada no botão “views” original:

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

Parece fantástico, está tudo ótimo, mas 'views' acaba sendo uma palavra mais longa em outros idiomas, exigindo mais espaço.

FParMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

Em italiano requer três vezes mais espaço!

Muitos scripts não latinos, como o árabe, exigem mais altura para que a tradução caiba. Então, para resumir, o layout do seu site deve ser flexível o suficiente para se adaptar a diferentes requisitos de idioma, de modo que, na troca, a aparência polida do original não se perca.

Compatibilidade de fontes da Web e codificação de sites

De acordo com o W3C, é altamente recomendável que você codifique sua página da Web usando UTF-8 , que permite caracteres especiais.

É bem simples, a declaração UTF se parece com isso

fbnRHXPPyY2OPijzOvFkH0y Ke

Certifique-se também de que as fontes são compatíveis com os diferentes idiomas, caso contrário, o texto pode ficar ilegível. Basicamente, antes de decidir sobre qualquer fonte, verifique sua compatibilidade com todos os scripts de que você precisa. Se você deseja entrar no mercado russo, verifique se o script cirílico é compatível.

A imagem a seguir foi retirada do Google Fonts e, como você pode ver, você pode optar por baixar as versões de scripts que precisar. Esses idiomas com quantidades maiores de caracteres criam arquivos de fonte maiores, portanto, leve isso em consideração ao escolher e misturar fontes.

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

Com relação aos idiomas da direita para a esquerda

À medida que o mercado do Oriente Médio cresce, você pode pensar em criar uma versão do seu site que atraia visitantes dessa região, o que significa adaptar o layout para que seja compatível com o idioma deles. Uma característica da maioria dos idiomas do Oriente Médio é que eles são lidos da direita para a esquerda! Este é um grande desafio e a solução começa com o espelhamento da interface.

Este é o design do Facebook para idiomas da esquerda para a direita, como o inglês.

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

E este é o design invertido para idiomas da direita para a esquerda, como o árabe.

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGOdxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9R T0by f2qOI9CQz2CfwdRj

Observe atentamente, o posicionamento de tudo no design foi espelhado.

Confira o artigo de Robert Dodis sobre design para idiomas da direita para a esquerda para obter mais informações sobre como fazer isso.

Algumas línguas direita para a esquerda são árabe, hebraico, persa e urdu e ConveyThis não tem problemas em adaptar seu site para acomodar suas necessidades linguísticas e garantir uma ótima experiência ao usuário. E o melhor é que você pode personalizar o visual de cada idioma e fazer alterações no tipo de fonte ou seu tamanho, e se necessário, editar a altura da linha.

Escolha ícones e imagens apropriados

Os recursos visuais têm um componente cultural muito pesado e são elementos-chave do design adequado do site. Cada cultura atribui significado a diferentes imagens e ícones, algumas interpretações são positivas e outras totalmente opostas. Algumas imagens refletem as experiências de ideais de uma cultura, mas em um contexto diferente farão com que os usuários se sintam alienados.

Aqui está um exemplo de uma imagem que teve que ser substituída porque não era culturalmente apropriada. Observe que nem todas as imagens serão ofensivas para outras pessoas, talvez apenas gerem apatia quando você deseja que as pessoas fiquem curiosas e interessadas em seu produto.

Esta é a homepage do Clarin para a língua francesa, com uma mulher caucasiana. E aqui está a versão coreana, com uma coreana como embaixadora da marca.

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvOB0 dTzQkZjUKogNMo2sQnJD0UTAdAeIe

O tipo de visual que pode ofender são aqueles que podem parecer inocentes para algumas culturas, mas, aos olhos de uma cultura diferente, eles exibem comportamentos ilegais ou tabu, por exemplo, representações de homossexualidade ou empoderamento feminino.

Isso também se aplica aos ícones, enquanto nos EUA um ícone com duas taças de champanhe brindando representa a celebração, na Arábia Saudita é ilegal beber álcool, então esse ícone terá que ser substituído por um culturalmente apropriado.

TsA5aPbhznm2N vv qL
(Fonte da imagem:RoubarKiwi)

Portanto, será necessária uma pesquisa para garantir que os ícones escolhidos sejam apropriados para o mercado-alvo. Se você não tem certeza, pode sempre jogar pelo seguro.

Por exemplo, esses três ícones com a Terra, o primeiro foi projetado para o público australiano; o segundo, para o público africano; e o último é adequado para públicos maiores e globais, pois nenhuma área específica é apresentada.

cx90RYDHGTToOiC uMNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3oW R6X3bRxeHdjJ

Por último, mas não menos importante, ConveyThis pode traduzir qualquer texto, desde que não esteja embutido em uma imagem. O software não será capaz de identificar o que está escrito nele, portanto permanecerá no idioma original, portanto, evite incorporar texto.

Escolha de cores

Como mencionado na seção anterior, as culturas interpretam as imagens de maneira diferente e o mesmo acontece com as cores. Seus significados são subjetivos.

Por exemplo, em algumas culturas, o branco é a cor da inocência, mas outros discordam, é a cor da morte. O mesmo acontece com o vermelho, nas culturas asiáticas é usado em comemorações mas para alguns países africanos não tem uma conotação tão positiva pois está ligado à violência.

No entanto, parece que o azul é a mais segura de todas as cores, comumente associada a significados positivos como calma e paz. Muitos bancos usam azul em seus logotipos porque também pode significar confiança e segurança.

Este artigo mostra as diferenças de significados das cores em todo o mundo , muito útil para iniciar sua pesquisa sobre quais são as melhores cores para o seu site multilíngue.

Ajustes de formato

Considere evitar usar apenas números ao escrever datas porque existem muitas maneiras diferentes de escrevê-los, nos EUA o formato oficial é mm/dd/aaaa e se você só pode ver os números alguns usuários de outros países que usam sistemas diferentes (como dd/mm/aaaa) pode ficar confuso. Portanto, suas opções são: garantir que as versões traduzidas tenham o formato de data adaptado ou escrever o mês em letras para que o ConveyThis sempre escreva a data correta.

Além disso, enquanto nos EUA o sistema imperial é usado, a maioria dos países usa o sistema métrico, então você precisará decidir se seria adequado para o seu site ter as medidas transformadas.

O melhor plugin de tradução para WordPress

Existem tantas opções quando se trata de adicionar um plug-in de tradução ao seu site WordPress e nem todas funcionam da mesma maneira, os resultados variam. Com o ConveyThis, você garante uma integração perfeita, independentemente do design do seu site.

ConveyThis é a melhor escolha para tradução de sites com 92 idiomas disponíveis. É um plug-in confiável do WordPress que permitirá que você tenha uma versão sólida em vários idiomas do seu site rapidamente. Ele pode entender o layout do site, detectar todo o texto e traduzi-lo. O ConveyThis também inclui um editor intuitivo para personalização de texto.

O ConveyThis inclui um botão de alternância de idioma de tamanho único que funciona com qualquer site como padrão, mas você também pode editá-lo o quanto quiser. Também seguimos os princípios de design declarados neste artigo:

  • Marca consistente em todas as versões de idioma do site.
  • Comutador de idioma claro e a opção de escolher um idioma preferido.
  • Os sites são codificados com UTF-8 automaticamente.
  • Interfaces adequadas para idiomas da direita para a esquerda

ConveyThis: uma solução de site multilíngue em que você pode confiar

Acredita-se comumente que a tradução do site é um processo complexo. Mas não há necessidade de adiar porque você não quer lidar com as dores de cabeça. Não é nada assustador! Com ConveyThis, torna-se uma conversão simples. É perfeito e rápido.

Após uma rápida instalação todo o seu conteúdo já pode ser traduzido sem afetar a formatação, e isso inclui o conteúdo gerado por outros apps e o processo de checkout. O ConveyThis é uma ferramenta fácil para tradução de sites em vários idiomas que não bagunçará seu código, como os outros.

A opção de solicitar traduções profissionais do seu site também está disponível! Eles irão ajudá-lo a transformar completamente o seu site multilíngue em um site multicultural, melhorando drasticamente a experiência de seus clientes. Lembre-se de que, se você traduzir um site, também deverá ter suporte ao cliente disponível no idioma do seu novo cliente. Considere investir em localização e adaptação de conteúdo para garantir uma experiência de usuário excelente para seus visitantes.

Comentários (4)

  1. The End in Sight para Google-Translate para sites! – ConveyThis
    8 de dezembro de 2019 Resposta

    […] O texto relacionado ao computador na língua sueca. Elementos como esses ajudaram a equipe de design a formular um caminho para os clientes que visitam a plataforma, para uma experiência de tradução fácil e evitando o índice drop-scroll como anteriormente [...]

  2. Otimização global do mecanismo de busca para todas as plataformas de idiomas – ConveyThis
    10 de dezembro de 2019 Resposta

    [...] as idéias em torno da plataforma multilíngue e da base de clientes fossem formuladas, o seguinte seria uma olhada no ingrediente textual para a linguagem [...]

  3. Vire seu WooCommerce Multilíngue – ConveyThis
    19 de março de 2020 Resposta

    [...] e obter um linguista da equipe de ConveyThis para dar uma olhada e editá-lo para que você possa ter certeza de que a redação e o tom são adequados aos valores da sua loja e [...]

  4. Quão personalizável é WooCommerce? – ConveyThis
    23 de março de 2020 Resposta

    [...] que os visuais são sempre muito carregados de significado cultural, e diferentes públicos têm diferentes expectativas de como as lojas devem exibir seus [...]

Deixe um comentário

Seu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados*