Dicas de design de sites multilíngues com ConveyThis

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. ConveyThis pode criar uma versão traduzida do seu site em minutos e então você pode personalizar a aparência e o posicionamento do seu alternador de idioma, fazer algumas alterações no layout para acomodar idiomas mais prolixos ou da direita para a esquerda e alterar cores e imagens nesses casos onde os originais são inadequados 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.

This is super easy to do in WordPress with ConveyThis, that perfectly identifies text regardless of the theme you have chosen (even if it’s customized!) and automatically translates it, even if you are working with other 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:

E aqui está a versão japonesa:

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.

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.

‘Languages’ is better than ‘Regions’

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:

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.

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.

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!

Chinese characters contain lots of information so not much space is needed, while Italian and Greek are wordier and need twice as many lines. A good rule of thumb is to assume that some translations may require more than 30% extra space so be flexible with the layout and assign ample spaces for text. Those tight squeezes in the original website may not have enough space at all for the translation, English is a particularly compact language, and if you find the need to abbreviate in English so the content will fit, you’ll definitely encounter some trouble when it’s time to translate.

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:

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

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

According to the W3C it’s highly recommended that you encode your webpage using UTF-8, which allows for special characters.

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

Also make sure that the fonts are compatible with the different languages, otherwise the text may end up looking illegible. Basically, before deciding on any font, check its compatibility with all the scripts you need. If you want to enter the Russian market, check that the Cyrillic script is supported.

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.

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.

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

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

Check out Robert Dodis’ article on design for Right to Left languages for further information on how to do this.

Some Right To Left languages are Arabic, Hebrew, Persian and Urdu and ConveyThis has no trouble adapting your website to accommodate for their language requirements and ensure a great user experience. And the best thing is you can customize the look of each language and make changes to the type of font or its size, and if necessary, edit the line height.

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.

The kind of visuals that may offend are those that may seem innocent to some cultures, but, in the eyes of a different culture, they are displaying behaviours that are illegal or taboo, for example, depictions of homosexuality or female empowerment.

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.

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.

Por último, mas não menos importante, ConveyThis pode traduzir qualquer texto, desde que não esteja incorporado 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.

This article shows the differences in color meanings all over the world, very useful for starting your research on what are the best colors for your multilingual site.

Ajustes de formato

Considere evitar usar apenas números ao escrever datas porque existem muitas maneiras diferentes de escrevê-las, nos EUA o formato oficial é mm/dd/aaaa e se você só puder ver os números, alguns usuários de outros países que usam sistemas diferentes (como dd/mm/aaaa) pode ficar confuso. Então suas opções são: certificar-se de que as versões traduzidas tenham o formato de data adaptado ou escrever o mês em letras para que ConveyThis escreva sempre 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 plugin de tradução ao seu site WordPress e nem todas funcionam da mesma maneira, os resultados podem variar. Com ConveyThis você tem a garantia de 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 plugin WordPress confiável que permitirá que você tenha uma versão sólida e multilíngue do seu site rapidamente. Ele pode entender o layout do site, detectar todo o texto e traduzi-lo. ConveyThis também inclui um editor intuitivo para personalização de texto.

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

It is commonly believed that website translation is a complex process. But there is no need to postpone it because you don’t want to deal with the headaches. It’s not daunting at all! With ConveyThis, it becomes a straightforward conversion. It is seamless and fast.

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

The option to order professional translations of your site is also available! They will help you completely transform your multi language website into a multi cultural one, drastically improving your clients’ experience. Remember that if you translate a website, you must also have customer support available in your new client’s language. Consider investing in content localization and adaptation to guarantee a superb user experience for your visitors.