Como Corrigir Erros de Design ao Localizar: Editando Visualmente Suas Traduções

A localização de sites é uma excelente medida para qualquer empresa ou organização que tenha como alvo um público internacional. Ela não apenas torna seu site mais acessível aos visitantes, mas também aumenta o nível de personalização do site, algo que se torna cada vez mais importante à medida que os setores se tornam cada vez mais competitivos.

É claro que, quando se trata de localização em seu próprio site, a tradução desempenha um papel importante nisso. Entretanto, a localização de seu site por meio da tradução de um idioma para outro, embora seja uma etapa necessária, pode causar problemas de design.

Esses problemas geralmente decorrem do fato de que os idiomas podem diferir em termos do espaço que as palavras ocupam em uma determinada frase. Como resultado disso, podem ocorrer problemas como sequências quebradas e sobreposição de texto, o que está longe de ser ideal quando se tenta atrair novos clientes internacionais com sua oferta.

Felizmente, problemas de design como esses podem ser facilmente corrigidos com a ajuda da ferramenta de edição visual intuitiva Weglot. Portanto, nesta publicação, vamos dar uma olhada no visual editor Weglot visual editor como ele pode ajudá-lo a corrigir quaisquer ramificações indesejadas de design que possam acompanhar a tradução de sites.

Qual é a vantagem de um visual editor?

visual editor permite que você visualize e edite suas traduções em uma pré-visualização ao vivo do seu site. Isso permite que você veja exatamente como o conteúdo traduzido ficará no seu site e avalie se haverá ou não implicações no design do seu site.

Quando um texto é traduzido de um idioma para outro, é provável que o tamanho do texto traduzido seja diferente do original. De acordo com o W3.org, os textos em chinês e inglês geralmente são bastante compactos e, portanto, a tradução de um desses idiomas para outro pode resultar em discrepâncias bastante grandes com relação ao tamanho do texto.

De fato, a IBM, em suas "Guidelines to Design Global Solutions", observa que, para textos com mais de 70 caracteres traduzidos do inglês para outros idiomas europeus, a taxa média de expansão é de 130%.

Isso significa que a versão traduzida de seu site terá 30% a mais de espaço ocupado com texto no site principal do que a versão original. Os problemas associados a isso podem incluir coisas como:

• Sobreposição de texto
• Cordas recolhidas
• Assimetria com o design geral do seu site

Para contextualizar melhor como uma visual editor pode ajudar com essas questões e como ela funciona, vamos analisar em profundidade visual editor Weglote como ela pode ajudá-lo a visualizar seu design em diferentes idiomas.

Visual Editor Weglot

Para acessar o visual editor Weglot , vá até a guia “traduções” e clique na guia “editorvisual editor

Em seguida, você será levado a uma visualização ao vivo do seu site. Embora inicialmente você esteja na página inicial, poderá acessar qualquer URL do seu site clicando nas diferentes páginas, como se estivesse realmente no site ao vivo.

É nesta fase que você pode ver exatamente como seu site fica nos diferentes idiomas que você adicionou. Use o seletor de idiomas para alternar entre os idiomas e identificar e corrigir instantaneamente quaisquer erros de design. Todas as edições feitas na tradução serão atualizadas em tempo real.

Vale a pena lembrar que, se você estiver no estágio de edição, é provável que ainda não queira colocar suas traduções no ar. Portanto, certifique-se de desativar a opção "Tornar público" na sua lista de traduções para garantir que o seu site multilíngue não possa ser acessado por ninguém além da sua equipe. (Observação: basta adicionar ?weglot no final do seu URL para ver as traduções ao vivo).

No exemplo abaixo, adicionamos francês e espanhol. Ao alternar entre os idiomas, você pode ver imediatamente as diferenças na quantidade de espaço que cada idioma ocupa no design do site, especialmente no título do site.

É provável que você tenha passado horas criando o seu site no idioma original e o design desempenha um papel importante na forma como a sua marca/empresa é percebida. É exatamente por isso que ver como os novos idiomas que você adicionou se encaixarão nesse design é uma etapa importante para obter o mesmo impacto impressionante do seu site original.

É interessante observar como o texto no cabeçalho principal – no exemplo acima – é muito mais longo em francês e espanhol, e fica evidente, ao usar o Visual Editor o proprietário do site pode querer fazer ajustes nessa seção.

O Visual Editor projetado para ajudar todos os membros da sua equipe, não apenas os designers. É uma ótima ferramenta para editar traduções no contexto em que elas realmente aparecem no site. Leia mais sobre os recursos de edição aqui.

Então, o que acontece se houver problemas de design?

Ao utilizar o Visual Editor notar que existem alguns problemas com a forma como o texto traduzido aparece no design geral. Agora pode antecipar estes potenciais contratempos e fazer os ajustes necessários. Existem algumas ações corretivas que pode realizar:

Considere reformular ou sintetizar o conteúdo: Se achar que a versão traduzida do seu conteúdo está causando problemas de design, não hesite em retirar e editar certos aspectos que não são bem traduzidos e que ocupam muito espaço. Você pode fazer isso dentro da sua equipe ou trabalhar com tradutores profissionais diretamente no painel Weglot .

Por exemplo, em inglês, sua guia "About Us" seria traduzida para "A propos de nous" em francês, mas há uma boa chance de que isso não caiba no espaço alocado em seu site. No entanto, uma solução simples, nesse caso, seria editar manualmente "A propos de nous" para "Equipe", por exemplo.

Se você estiver enviando suas traduções para tradução profissional com o painel Weglot , essa seção de notas é um ótimo lugar para informar aos tradutores quais palavras você identificou que poderiam ser redigidas de forma diferente.

Alterar o tamanho da fonte no seu site: se você perceber que, ao traduzir de um idioma para outro, o texto fica muito grande (ou muito pequeno) no idioma traduzido, é possível diminuir ou aumentar o tamanho da fonte no idioma traduzido. Isso pode ser feito facilmente no Weglot , na seção CSS personalizado, em “seletor de idiomas”.

Por exemplo, o CSS abaixo ajustaria o tamanho da fonte alemã para 16px:

html[lang=de] body {

tamanho da fonte : 16px;

}

Alterar a fonte em seu site: Como alternativa, também há casos em que faz sentido alterar a fonte usada quando um texto é traduzido para outro idioma. Isso ocorre porque algumas fontes não funcionam bem em determinados idiomas e podem agravar os problemas de design que você pode encontrar. Por exemplo, se você quiser usar a fonte Roboto para a versão em francês do seu site, mas Arial para a versão em árabe (que é muito mais adequada para o idioma), isso é possível com outra regra CSS.

O CSS abaixo ajustaria a fonte para Arial quando o site estiver em árabe:

html[lang=ar] body {

família de fontes : arial;

}

Considere um design global da Web: É claro que pode ser um pouco tarde para isso, mas se você estiver nos estágios iniciais da criação de um site e souber que deseja adicionar vários idiomas, considere deixar espaço para manobras no design do site para ajudar a evitar problemas no futuro. Confira mais dicas de design inicial aqui.

O Visual Editor uma ferramenta sensível ao design, perfeita para a Goodpatch

Um exemplo de empresa que aproveitou ao máximo visual editor Weglotpara corrigir erros de design é a empresa alemã Goodpatch. Eles já tinham uma versão em inglês do seu site, mas decidiram lançar uma versão em alemão para atrair mais o mercado de língua alemã, que é bastante sensível ao design.

Uma de suas maiores reservas quanto à realização desse projeto era o impacto que ele teria em seu web design. No entanto, com a Weglot , suas reservas foram imediatamente aliviadas.

Recebemos um feedback tão bom da equipe deles que criamos um estudo de caso sobre sua história de sucesso. A equipe de designers de UX e UI da Goodpatch realmente valorizou a possibilidade de ver como o idioma traduzido apareceria em suas páginas da Web. Dessa forma, eles puderam ver o que precisava ser adaptado ou qual parte do design poderia ser aprimorada para funcionar com a cópia mais longa.

Embora a equipe da Goodpatch tenha pesquisado outras soluções de tradução, o que convenceu Weglot foi o fato de que os recursos da Weglotrefletiam sua abordagem como uma empresa orientada para o design: iterativa, visual e que prioriza a experiência.

Conclusão:

Como você viu, usar visual editor Weglot visual editor ser mais fácil e pode acabar com qualquer preocupação que você possa ter em relação à localização do ponto de vista do design. Não comprometa a tradução em prol do design e, definitivamente, não comprometa o design em prol da tradução. Às vezes, você realmente pode ter tudo 😉

Por que não experimentar a avaliação gratuita de 10 dias do Weglote ver por si mesmo como é fácil editar visualmente suas traduções?

‍