Alternando no Squarespace: como criar seu botão de idioma

Então você tornou seu site do Squarespace multilíngue. Bravo, parabéns, mabrouk - adoramos ver isso!

E agora?

Você deve ter notado que temos falado muito sobre o Squarespace ultimamente, e isso porque muitos de nossos clientes o estão usando (até mesmo para e-commerce) e fazendo um ótimo trabalho.

Os melhores sites do Squarespace Weglot que vimos são aqueles que continuaram a refinar os microdetalhes de seus sites, especialmente depois de se perguntarem "E agora?".

Uma das vantagens de usar o Weglot é a flexibilidade que você tem com o design do botão de troca de idioma. Como a maioria dos web designers lhe dirá, ter controle total sobre a aparência dos elementos importados - plug-ins, complementos ou outros componentes de aplicativos - em uma página é um luxo raro.

Em muitos casos, os aplicativos ou plug-ins que você adiciona ao seu site são pré-programados para ter uma determinada aparência e estar em conformidade com a marca dos desenvolvedores que os criaram. Isso deixa claro para o usuário que o elemento do plug-in não é nativo do site e veio de outro lugar. Mesmo que seja um widget perfeitamente funcional, ele ainda pode se destacar visualmente do resto do site.

Weglot não funciona dessa forma - ou, pelo menos, não precisa funcionar. Ao instalar Weglot em seu site Squarespace, você verá inicialmente um botão de troca de idioma parecido com este, no canto inferior direito da página:

Bem básico, certo? A ideia por trás desse alternador de idioma de fase 1 é ser o mais neutro possível: sem cores fortes, sem tipografia selvagem, apenas um botão claro e limpo que faz o que você precisa.

E muitas pessoas são fãs do visual funcional, o que é perfeitamente normal. Se o retângulo branco combina com você e seu site, você sabe o que eles dizem (ou talvez não, mas você saberá agora): "se não está quebrado, não conserte". (Em francês, às vezes dizemos "On ne change pas une équipe qui gagne" - isso também funciona.)

Mas se você está olhando para o seu retângulo bonito e limpo e ainda não está simplesmente se aquecendo de satisfação, não precisa perder a esperança.

Onde devo colocar meu botão?

Todo o conceito de "posicionamento de botões" pode parecer trivial, mas pense em quantos botões você pressiona por dia. Isso inclui teclas no teclado de um smartphone, crianças; É 2019 e nossos dedos provavelmente entram em contato com mais botões do que com água e sabão (nojento, mas é verdade). A questão é que os botões estão em toda parte.

E se tornar seu site legível para todos os leitores possíveis é uma prioridade para você (o que, objetivamente, deveria ser - especialmente se você deseja aumentar sua taxa de conversão ou apenas tornar seu site mais acessível em todo o mundo), certifique-se de que eles possam mudá-lo instantaneamente para seu próprio idioma.

Assuntos secundários.

Sim, você leu corretamente. Claro, o tamanho também é importante - é improvável que um botão minúsculo seja particularmente visível e, portanto, ainda menos provável de ser clicado.

Mas o web design é um quebra-cabeça fundamentalmente espacial e, se pensarmos nisso como um jogo, seu tabuleiro de jogo é limitado a um retângulo bidimensional com dois eixos principais - esquerda-direita e cima-fundo, ou "x" e "y", se você preferir - e o objetivo de um site é que ele pode conter muitas informações. Como você pode encaixar todos os seus links, imagens, vídeos e outros elementos interativos divertidos nesse espaço restrito - e fazer com que os mais importantes se destaquem sem tirar os outros?

Há pesquisas que sustentam que o posicionamento de um elemento em uma página - a que distância ao longo de cada eixo ele termina - afeta criticamente a rapidez com que os espectadores o localizam, bem como a probabilidade de interagir com ele. Essas duas condições não estão necessariamente ligadas causalmente, mas estão bastante correlacionadas – o suficiente para valer a pena considerar as preferências inerentes dos usuários em relação à frase de chamariz ("CTA") ou ao posicionamento do botão.

Então, o que exatamente a pesquisa diz, você pode perguntar?

Sem surpresa, o idioma nativo do usuário - ou, pelo menos, o idioma em que ele está mais acostumado a navegar na web - tem um impacto muito importante na forma como ele interage com as páginas da web.

Os especialistas em design de UI-UX da Material Design lançaram um guia detalhado sobre quais elementos da página da web devem ser ajustados (e quais não devem) entre idiomas que são lidos da esquerda para a direita ("LTR" - como inglês, por exemplo) e da direita para a esquerda ("RTL", como árabe ou hebraico).

Não entraremos em tantos detalhes quanto eles, mas você pode conferir aqui se tiver elementos visuais mais complexos - ícones, por exemplo - do que apenas botões para ajustar a direção do idioma.

Dito isto, existem explicações psicológicas concretas por trás do motivo pelo qual a direção que estamos acostumados a ler afeta nossa suscetibilidade a CTAs em diferentes lugares – uma das quais, chamada de diagrama de Gutenberg, ilustra a relação entre a ordem em que olhamos para os elementos em uma página e quanto tempo gastamos em cada um.

Há muitos outros recursos na Web que explicam esse fenômeno em detalhes - comoeste, por exemplo -, masbasta dizer que nossa decisão aqui na Weglot de colocar o botão do seletor de idioma por padrão no canto inferior direito da página não foi por acaso. Em uma tela bidimensional, esse posicionamento constitui a área terminal, onde um usuário que está lendo LTR tem grande probabilidade de descansar os olhos e interagir com a CTA apresentada a ele. Se o CTA em questão for um botão de mudança de idioma, isso significa que eles não terão muita dificuldade em encontrar uma maneira de tornar seu site acessível a eles.

Em suma, o lado da página em que você coloca o botão tem um grande efeito na facilidade com que os usuários poderão encontrá-lo. Se o idioma inicial do seu site estiver no formato LTR (como inglês, francês, espanhol, chinês simplificado...), isso implica manter o botão no lado direito da página.  

É claro que, se você estiver criando seu site inicial em um idioma RTL, como árabe, hebraico ou farsi, convém fazer o oposto e manter esse botão no lado esquerdo .

O site Dubai Font fornece um exemplo perfeito de como essa organização deve ser - tanto para o inglês, o idioma padrão da página inicial, quanto para o árabe, o idioma que você pode selecionar por meio do botão no canto superior direito da página em inglês. Observe como essa direcionalidade muda quando a linguagem muda.

Mas posso ver o menu, por favor?

Você ainda pode estar pensando, por que não colocá-lo na zona "Área Óptica Primária"? - e esta é uma pergunta válida.

Lembre-se de que este ainda é o seu site para, presumivelmente, sua marca ou outro projeto - então você provavelmente vai querer reservar esta seção para algum tipo de identificador pessoal impactante, como um logotipo.

No entanto, a área de pousio forte é, como a área terminal, uma boa candidata para o posicionamento do botão - especialmente se você tiver um menu horizontal no topo da sua página (que é o caso de ... bem, a maioria dos sites hoje em dia).
As barras de menu superiores são lugares muito bons para botões de troca de idioma, no final - e particularmente no Squarespace.

Botões de menu no Squarespace: estilize, sintetize e localize

Integrar o botão de troca de idioma Weglot em uma barra de menu no Squarespace (e isso se aplica a qualquer tipo de barra de menu, não importa o lado - portanto, a direcionalidade do seu idioma não afeta o funcionamento) é muito fácil.

No editor do seu site, você pode clicar em "Páginas", o que o levará a uma barra lateral parecida com a seguinte:

Ao clicar no sinal "+" ao lado do título "Navegação principal", você poderá adicionar links e/ou menus suspensos ao menu principal do cabeçalho.

Se você optar por incluir os idiomas disponíveis do seu site como opções diretas no menu principal...

… ou melhor, como elementos de um menu suspenso integrado...

… Você está em boas mãos: o processo é o mesmo. Se você criar um menu suspenso, também poderá adicionar links (como com o comando "+" no menu de navegação principal) e o processo a seguir para cada idioma que você adicionou ao seu site.

Depois de optar por adicionar um link, seja à barra de menu principal ou a um menu suspenso integrado, você verá um pop-up parecido com este:

Dê um título ao link com o nome do idioma para o qual você deseja alterar seu site. Você pode, é claro, chamar o idioma pelo nome em seu idioma original - por exemplo, "espanhol" em vez de "Español" se você estiver criando seu site original em inglês - mas recomendamos que você coloque o nome nativo do idioma como título, para que seus falantes possam reconhecê-lo mais facilmente.  Tl; dr: opte por "Español" em vez de "Espanhol"; "Français" em oposição a "francês"; et cetera, et cetera.

Em seguida, você terá de inserir o link para o qual deseja que esse título leve. Como o seu site do Squarespace Weglot não consiste em páginas duplicadas em subpastas, mas em subdomínios individuais para cada idioma, você não terá um link para um URL separado. Em vez disso, digite a string "Weglot" seguida do código de idioma ISO de duas letras para o idioma em que está trabalhando (temos uma lista completa deles aqui).

Depois de resolver isso, você verá os títulos dos seus idiomas perfeitamente integrados ao menu principal...

… Como esses caras.

Basicamente, seu site multilíngue do Squarespace é elegante e bonito - essa é a natureza dos modelos do Squarespace, que facilitam o aprimoramento do seu site e a aparência profissional.

Claro, isso não deve impedir que você tente personalizar a aparência do seu site e realmente torná-lo seu.

Com um site multilíngue, é especialmente importante manter seus elementos de marca pessoal coerentes entre as versões - esse é um dos princípios básicos do design de sites multilíngues - e isso significa sintetizar a estética do seu site, desde paletas de cores de imagem até estilo de tipografia e estilo de botão. Seu botão de troca de idioma é uma parte fundamental de todo esse esquema, e seu site só ficará mais bonito se o botão se encaixar no tema visual geral da página.

Ao mesmo tempo, como já analisamos, você deseja que seu botão se destaque pelo menos um pouco de outros elementos da página para que seja fácil para os usuários encontrarem rapidamente. Como você pode alcançar um equilíbrio entre distinção - para localização - e coerência, para qualidade de página?

Este é um paradoxo literal, mas não é insolúvel. Aqui estão alguns sites multilíngues do Squarespace para inspirá-lo com seus botões de troca de idioma posicionados e projetados de forma criativa.

O Projeto Siku

Com sede na Sicília, o Siku Project é uma joalheria inovadora cujas peças são feitas com as fibras do cacto de pera espinhosa italiano local (sim, você leu certo - a fibra do cacto de pera espinhosa pode realmente ser usada para fazer um material duro ecologicamente correto), e seu site bilíngue é tão elegante quanto suas peças de joalheria.

O menu suspenso de troca de idioma, que permite alternar entre inglês e italiano, está empoleirado no menu de navegação principal no canto superior direito da página, como uma pérola em uma corda (altamente acessível visualmente).

Natação de Expedição

O site do Siku Project se parece com o que muitos de nós provavelmente imaginamos que os sites do Squarespace sejam: é monocromático, com muitas imagens e limpo. Mas os sites do Squarespace também podem ser coloridos e malucos – foi assim que o projeto Expedition Swim de Bruxelas escolheu ir (ou melhor, nadar).

O objetivo do site é incentivar os moradores a trazer suas famílias para nadar nas lagoas recém-limpas da cidade. É divertido, brilhante e cheio de formas e animações onduladas (que evocam - você adivinhou - água), e seu alternador de idioma se encaixa perfeitamente na parte superior direita da barra de navegação.

Eles o tornaram super fácil de usar, mostrando seus três idiomas - francês, inglês e holandês - por seus respectivos códigos de idioma de duas letras universalmente reconhecíveis (FR, EN e NL), sem necessidade de clique suspenso. Todos os bruxelones, até os mais jovens, à procura de uma atividade de verão fresca poderão facilmente descobrir, em dois segundos, como mudar o site para o seu próprio idioma.

Doces de vendas

A startup de Saas SalesCandy está sediada na Malásia, uma sociedade fundamentalmente multicultural e inerentemente multilíngue. Ter um site multilíngue é uma necessidade absoluta nesse tipo de ambiente de negócios, e a SalesCandy pensou em facilitar o acesso de cada leitor ao seu idioma nativo.

Como eles fizeram isso? Duas coisas em particular: a) o menu suspenso de idioma está (sim, não podemos enfatizar isso o suficiente) bem situado no lado direito da página, e b) as opções de idioma são escritas nativamente - ou seja, assim:

Sentindo-se inspirado?

Certamente esperamos que sim. Se você está pronto para lançar seu site ou loja do Squarespace e otimizá-lo para seu público poliglota, aqui estão algumas dicas sobre como iniciar seu processo de design e, depois de resolver os detalhes, como se tornar global no Squarespace.