Changement de langue sur Squarespace : Comment concevoir votre bouton de langue

Vous avez donc rendu votre site Squarespace multilingue. Bravo, kudos, mabrouk - nousaimons le voir !

Et maintenant?

Vous avez peut-être remarqué que nous avons beaucoup parlé de Squarespace ces derniers temps, et c'est parce qu' un grand nombre de nos clients l'utilisent (même pour le commerce électronique) et font un excellent travail.

Les meilleurs sites Squarespace Weglot que nous ayons vus sont ceux qui ont continué à affiner les micro-détails de leur site, surtout après s'être demandé "Et maintenant ?".

L'un des avantages de l'utilisation de Weglot est la flexibilité dont vous disposez dans la conception de vos boutons de changement de langue. La plupart des concepteurs de sites web vous diront qu'il est rare d'avoir un contrôle total sur l'aspect et la convivialité des éléments importés (plugins, modules complémentaires ou autres composants d'application) sur une page.

Dans de nombreux cas, les applications ou les plugins que vous ajoutez à votre site sont préprogrammés pour se présenter d'une certaine manière et se conformer à l'image de marque des développeurs qui les ont créés. Cela montre clairement à l'utilisateur que l'élément du plugin n 'est pas natif du site et qu'il vient d'ailleurs. Même s'il s'agit d'un widget parfaitement fonctionnel, il peut se démarquer visuellement du reste du site.

Weglot ne fonctionne pas de cette façon - ou, du moins, n'a pas à le faire. Lorsque vous installez Weglot sur votre site Squarespace, vous verrez initialement un bouton de changement de langue qui ressemble à ceci, dans le coin inférieur droit de votre page :

Plutôt basique, n'est-ce pas ? L'idée derrière cette phase 1 de l'échange linguistique est d'être aussi neutre que possible : pas de couleurs criardes, pas de typographie extravagante, juste un bouton clair et net qui fait ce dont vous avez besoin.

Et beaucoup de gens sont fans de l'aspect fonctionnel, ce qui est tout à fait normal. Si le rectangle blanc vous convient, à vous et à votre site, vous savez ce qu'on dit (ou peut-être pas, mais vous le saurez maintenant) : "if it ain't broke, don't fix it" (si ce n'est pas cassé, ne le réparez pas). (En français, on dit parfois "On ne change pas une équipe qui gagne" - ça marche aussi).

Mais si vous regardez votre beau rectangle propre et que vous n'êtes pas encore satisfait, ne perdez pas espoir.

Où dois-je placer mon bouton ?

Le concept de "placement des boutons" peut sembler trivial, mais pensez au nombre de boutons sur lesquels vous appuyez chaque jour. Cela inclut les touches d'un clavier de smartphone, les enfants ; nous sommes en 2019 et nos doigts entrent probablement en contact avec plus de boutons qu'avec de l'eau et du savon(c'est dégoûtant, mais c'est vrai). Le fait est que les boutons sont partout.

Et si rendre votre site lisible pour tous les lecteurs possibles est une priorité pour vous (ce qui, très objectivement, devrait être le cas - en particulier si vous cherchez à augmenter votre taux de conversion ou simplement à rendre votre site plus accessible dans le monde entier), vous voudrez vous assurer qu'ils peuvent instantanément le basculer dans leur propre langue.

Le côté importe.

Oui, vous avez bien lu. Bien sûr, la taille a aussi son importance : un bouton minuscule a peu de chances d'être particulièrement visible, et donc encore moins d'être cliqué.

Mais la conception d'un site web est fondamentalement un casse-tête spatial et, si nous l'envisageons comme un jeu, votre plateau de jeu est limité à un rectangle bidimensionnel avec deux axes principaux - gauche-droite et haut-bas, ou "x" et "y", si vous préférez - et l'intérêt d'un site web est qu'il peut contenir une grande quantité d'informations. Comment faire tenir tous vos liens, images, vidéos et autres éléments interactifs amusants dans cet espace restreint, et faire ressortir les plus importants sans nuire aux autres ?

Des études montrent que l'emplacement d'un élément sur une page - sa position sur chaque axe -a une influence déterminantesur la rapidité avec laquelle l'internaute le repère et sur la probabilité qu'il interagisse avec lui. Ces deux conditions ne sont pas nécessairement liées, mais elles sont suffisamment corrélées pour qu'il vaille la peine de prendre en compte les préférences inhérentes des utilisateurs en ce qui concerne l'emplacement des boutons ou des appels à l'action ("call-to-action" ou "CTA").

Que dit exactement la recherche, me direz-vous ?

Sans surprise, la langue maternelle de l'utilisateur - ou, du moins, la langue dans laquelle il a le plus l'habitude de naviguer sur le web - a un impact assez important sur la manière dont il interagit avec les pages web.

Les experts en design UI-UX de Material Design ont publié un guide approfondi sur les éléments des pages web qui doivent être adaptés (et ceux qui ne doivent pas l'être) entre les langues qui se lisent de gauche à droite ("LTR" - comme l'anglais, par exemple) et de droite à gauche ("RTL", comme l'arabe ou l'hébreu).

Nous n'entrerons pas dans les détails, mais vous pouvez consulter cette page si vous avez des éléments visuels plus complexes - des icônes, par exemple - que de simples boutons à ajuster en fonction de la direction de la langue.

Cela dit, il existe des explications psychologiques concrètes qui expliquent pourquoi le sens dans lequel nous avons l'habitude de lire influe sur notre sensibilité aux CTA placés à différents endroits. L'une d'entre elles, appelée diagramme de Gutenberg, illustre la relation entre l'ordre dans lequel nous regardons les éléments d'une page et le temps que nous passons sur chacun d'entre eux.

Il existe de nombreuses autres ressources sur le web qui expliquent ce phénomène en détail - commecelle-ci, par exemple - maisil suffit de dire que notre décision, ici à Weglot , de placer votre bouton de commutation linguistique par défaut dans le coin inférieur droit de la page n'est pas le fruit du hasard. Sur un écran bidimensionnel, cet emplacement constitue la zone terminale, où un utilisateur lisant la LTR est incroyablement susceptible de reposer ses yeux et d'interagir avec le CTA qui lui est présenté. Si le CTA en question est un bouton pour les personnes qui changent de langue, cela signifie qu'elles n'auront pas de mal à trouver un moyen de rendre votre site accessible.

Dans l'ensemble, le côté de la page sur lequel vous placez votre bouton a une grande influence sur la facilité avec laquelle les utilisateurs pourront le trouver. Si la langue initiale de votre site est en format LTR (comme l'anglais, le français, l'espagnol, le chinois simplifié...), cela implique de garder votre bouton vers la droite de la page.

Bien entendu, si vous créez votre site initial dans une langue RTL, comme l'arabe, l'hébreu ou le farsi, vous devrez faire l'inverse et conserver ce bouton sur le côté gauche.

Le site web de Dubai Font est un parfait exemple de ce à quoi cette organisation devrait ressembler - à la fois en anglais, la langue par défaut de la page d'accueil, et en arabe, la langue que vous pouvez sélectionner via le bouton en haut à droite de la page en anglais. Remarquez que cette directionnalité change en fonction de la langue.

Mais puis-je voir le menu, s'il vous plaît ?

Vous vous dites peut-être encore : pourquoi ne pas le placer plutôt dans la zone "zone optique primaire" ? -Cette question est tout à fait justifiée.

N'oubliez pas qu'il s'agit toujours de votre site web pour, probablement, votre marque ou un autre projet.Vous voudrez doncprobablement réserver cette section à un identifiant personnel percutant, comme un logo.

Cependant, la zone de jachère forte est, comme la zone terminale, un bon candidat pour l'emplacement de boutons - surtout si vous avez un menu horizontal en haut de votre page (ce qui est le cas de... eh bien, de la plupart des sites web de nos jours).
Les barres de menu supérieures sont de bons endroits pour les boutons de changement de langue, en fin de compte, et particulièrement sur Squarespace.

Boutons de menu sur Squarespace : Styliser, synthétiser et localiser

L'intégration du bouton de changement de langue Weglot dans une barre de menu sur Squarespace (et cela s'applique à n'importe quel type de barre de menu, quel que soit le côté - la directionnalité de votre langue n'affecte donc pas la façon dont cela fonctionne) est très facile.

Dans l'éditeur de votre site, vous pouvez cliquer sur "Pages", ce qui vous mènera à une barre latérale qui ressemble à ce qui suit :

En cliquant sur le signe "+" à côté du titre "Navigation principale", vous pourrez ajouter des liens et/ou des menus déroulants à votre menu d'en-tête principal.

Que vous choisissiez d'inclure les langues disponibles sur votre site comme options directes dans le menu principal...

...ou plutôt comme éléments d'un menu déroulant intégré...

...vous êtes entre de bonnes mains : le processus est le même. Si vous créez un menu déroulant, vous pourrez également ajouter des liens (comme avec la commande "+" du menu de navigation principal) - et le processus suivant pour chaque langue que vous avez ajoutée à votre site.

Une fois que vous avez choisi d'ajouter un lien, soit à votre barre de menu principale, soit à un menu déroulant intégré, vous verrez apparaître une fenêtre contextuelle qui ressemble à celle-ci :

Intitulez le lien avec le nom de la langue dans laquelle vous souhaitez que votre site soit modifié. Vous pouvez, bien entendu, appeler la langue par son nom dans votre langue d'origine - par exemple, "Spanish" au lieu de "Español" si vous créez votre site original en anglais - mais nous vous recommandons d'utiliser le nom natif de la langue comme titre, afin que ses locuteurs puissent la reconnaître plus facilement. En clair, optez pour "Español" plutôt que "Spanish", pour "Français" plutôt que "French", etc.

Ensuite, vous devez entrer le lien vers lequel vous souhaitez que ce titre mène. Étant donné que votre site Squarespace Weglot ne consiste pas en des pages dupliquées dans des sous-dossiers, mais plutôt en des sous-domaines individuels pour chaque langue, vous n'aurez pas à créer un lien vers une URL distincte. Au lieu de cela, entrez la chaîne "Weglot" suivie du code ISO à deux lettres de la langue sur laquelle vous travaillez (nous avons une liste complète de ces codes ici).

Une fois cette étape franchie, vous verrez vos titres de langues parfaitement intégrés à votre menu principal...

...Comme ces gars-là.

Votre site multilingue Squarespace est pratiquement assuré d'être élégant et beau - c'est la nature des modèles Squarespace, qui rendent facile comme un clic et un glissement pour peaufiner votre site et lui donner un aspect professionnel.

Bien entendu, cela ne doit pas vous empêcher d'essayer de personnaliser l'apparence de votre site et de vous l'approprier.

Dans le cas d'un site multilingue, il est particulièrement important que les éléments de votre marque personnelle restent cohérents d'une version à l'autre - c'est l'un des principes de base de la conception de sites multilingues - etcela implique de synthétiser l'esthétique de votre site, qu'il s'agisse des palettes de couleurs des images, du style de la typographie ou du style des boutons. Votre bouton de changement de langue est un élément clé de ce schéma global, et votre site ne sera que plus beau si votre bouton s'inscrit dans le thème visuel général de la page.

En même temps, comme nous l'avons déjà dit, vous voulez que votre bouton se distingue au moins un peu des autres éléments de la page afin que les utilisateurs puissent le trouver facilement et rapidement. Comment parvenir à un équilibre entre le caractère distinctif - pour lafacilité de recherche - et la cohérence, pour la qualité de la page ?

C'est un paradoxe littéral, mais il n'est pas insoluble. Voici quelques sites multilingues de Squarespace qui vous inspireront avec leurs boutons de changement de langue placés et conçus de manière créative.

Le projet Siku

Basé en Sicile, le projet Siku est une entreprise de bijoux innovante dont les pièces sont fabriquées à partir de fibres de figuier de Barbarie italien (oui, vous avez bien lu, les fibres de figuier de Barbarie peuvent être utilisées pour fabriquer un matériau dur respectueux de l'environnement), et leur site web bilingue est aussi élégant que leurs bijoux.

Le menu déroulant qui permet de passer de l'anglais à l'italien est perché sur le menu de navigation principal, en haut à droite de la page, comme une perle sur un fil (très accessible visuellement).

Nage d'expédition

Le site Web du projet Siku ressemble à ce que beaucoup d'entre nous imaginent des sites Squarespace : monochrome, riche en images et propre. Mais les sites Squarespace peuvent aussi être colorés et loufoques - c'est ainsi que le projet Expedition Swim de Bruxelles a choisi d'aller (ou plutôt de nager).

L'objectif de leur site est d'inciter les habitants à emmener leurs familles se baigner dans les étangs nouvellement nettoyés de la ville. Il est ludique, lumineux, plein de formes ondulées et d'animations (qui évoquent - vous l'avez deviné - l'eau), et leur sélecteur de langue s'intègre parfaitement dans la partie supérieure droite de leur barre de navigation.

Ils l'ont rendu très convivial en affichant leurs trois langues - le français, l'anglais et le néerlandais - par leurs codes linguistiques respectifs de deux lettres universellement reconnaissables (FR, EN et NL), sans qu'il soit nécessaire de cliquer sur une liste déroulante. Tous les Bruxellois, jusqu'aux plus jeunes, à la recherche d'une activité estivale sympa, pourront facilement comprendre, en deux secondes, comment basculer le site dans leur propre langue.

SalesCandy

La startup SalesCandy est basée en Malaisie, une société fondamentalement multiculturelle et par conséquent multilingue. Disposer d'un site multilingue est une nécessité absolue dans ce type d'environnement commercial, et SalesCandy a pris soin de faciliter l'accès de chaque lecteur à sa langue maternelle.

Comment y sont-ils parvenus ? Deux choses en particulier : a) leur menu déroulant des langues est (oui, nous ne le soulignerons jamais assez) joliment situé sur le côté droit de la page, et b) les options linguistiques sont écrites de manière native - c'est-à-dire comme ceci :

Vous vous sentez inspiré ?

Nous l'espérons vraiment. Si vous êtes prêt à lancer votre site ou votre boutique Squarespace et à l'optimiser pour votre public polyglotte, voici quelques conseils sur la façon d'entamer votre processus de conception et, une fois les détails réglés, sur la façon de vous lancer à l'international sur Squarespace.