Přepínání na Squarespace: Jak navrhnout jazykové tlačítko

Vytvořili jste vícejazyčný web Squarespace. Bravo, kudos, mabrouk -rádi to vidíme!

Co teď?

Možná jste si všimli, že v poslední době se o Squarespace hodně mluví, a to proto, že ho používá spousta našich klientů (i pro e-shopy) - a odvádí opravdu skvělou práci.

Nejlepší weby Squarespace Weglot, které jsme viděli, jsou ty, které neustále vylepšovaly mikrodetaily svých webů, zejména po otázce "Co teď?".

Jednou z výhod používání Weglot je flexibilita, kterou máte při navrhování tlačítek přepínačů jazyků. Jak vám řekne většina webdesignérů, mít plnou kontrolu nad vzhledem importovaných prvků - pluginů, doplňků nebo jiných komponent aplikací - na stránce je vzácný luxus.

V mnoha případech jsou aplikace nebo moduly plug-in, které přidáte na své stránky, předprogramovány tak, aby vypadaly určitým způsobem a odpovídaly značce vývojářů, kteří je vytvořili. Uživateli je tak jasné, že prvek zásuvného modulu není nativním prvkem webu a pochází odjinud. I když se jedná o dokonale funkční widget, může se vizuálně odlišovat od zbytku webu.

Weglot takto nefunguje - nebo alespoň nemusí. Když nainstalujete Weglot na své stránky Squarespace, zobrazí se v pravém dolním rohu stránky tlačítko pro přepínání jazyků, které vypadá takto:

Docela základní, že? Myšlenkou tohoto jazykového switche fáze 1 je být co nejneutrálnější: žádné křiklavé barvy, žádná divoká typografie, jen jasné, přehledné tlačítko, které dělá to, co potřebujete.

A spousta lidí je fanoušky funkčního vzhledu, což je naprosto v pořádku. Pokud vám a vašim stránkám bílý obdélník vyhovuje, víte, co se říká (nebo možná ne, ale teď už to budete vědět): "Když to není rozbité, neopravuj to." To je pravda. (Ve francouzštině se někdy říká "On ne change pas une équipe qui gagne" - to také funguje.)

Pokud se však díváte na svůj pěkný, čistý obdélník a stále se jen neuspokojujete, nemusíte ztrácet naději.

Kam mám umístit tlačítko?

Celý koncept "umístění tlačítek" se může zdát triviální, ale uvědomte si, kolik tlačítek denně stisknete. A to včetně kláves na klávesnici chytrého telefonu, děti; je rok 2019 a naše prsty pravděpodobně přicházejí do styku s více tlačítky než s vodou a mýdlem(nechutné, ale je to tak). Jde o to, že tlačítka jsou všude.

A pokud je pro vás prioritou, aby byl váš web čitelný pro všechny možné čtenáře (což by zcela objektivně mělo být - zejména pokud chcete zvýšit míru konverze nebo prostě jen zpřístupnit svůj web po celém světě), budete chtít zajistit, aby jej mohli okamžitě přepnout do svého jazyka.

Vedlejší záležitosti.

Ano, čtete správně. Jistě, záleží také na velikosti - miniaturní tlačítko pravděpodobně nebude příliš viditelné, a proto je ještě méně pravděpodobné, že na něj kliknete.

Design webu je však v podstatě prostorová hádanka, a pokud o něm uvažujeme jako o hře, je vaše hrací plocha omezena na dvourozměrný obdélník se dvěma hlavními osami - vlevo vpravo a nahoře dole, nebo chcete-li "x" a "y" - a smyslem webu je, že může obsahovat mnoho informací. Jak do tohoto omezeného prostoru vměstnat všechny odkazy, obrázky, videa a další zábavné interaktivní prvky - a jak zajistit, aby ty nejdůležitější vynikly, aniž by ubíraly ostatním?

Existují výzkumy, které potvrzují, že umístění prvku na stránce - jak daleko podél každé osy se nachází -má rozhodujícívliv na to, jak rychle jej diváci najdou a jaká je pravděpodobnost, že s ním budou interagovat. Tyto dvě podmínky spolu nemusí nutně kauzálně souviset, ale jsou dosti provázané - dost na to, aby stálo za to zvážit přirozené preference uživatelů s ohledem na umístění výzvy k akci ("CTA") nebo tlačítka.

Ptáte se, co přesně výzkum říká?

Poněkud nepřekvapivě má rodný jazyk uživatele - neboalespoň jazyk, ve kterém je uživatel zvyklý prohlížet webové stránky - poměrně velký vliv na to, jakým způsobem s webovými stránkami pracuje.

Odborníci na design uživatelského rozhraní a uživatelského rozhraní Material Design vydali podrobného průvodce o tom, které prvky webových stránek by měly být přizpůsobeny (a které ne) pro jazyky, které se čtou zleva doprava (LTR, jako například angličtina) a zprava doleva (RTL, jako například arabština nebo hebrejština).

Nebudeme zabíhat do takových podrobností jako oni, ale pokud máte složitější vizuální prvky - například ikony - než jen tlačítka, která je třeba přizpůsobit směru jazyka, můžete se na to podívat zde.

Přesto existují konkrétní psychologická vysvětlení, proč směr, kterým jsme zvyklí číst, ovlivňuje naši vnímavost vůči CTA na různých místech - jedno z nich, tzv. Gutenbergův diagram, ilustruje vztah mezi pořadím, v jakém se díváme na prvky na stránce, a tím, kolik času strávíme na každém z nich.

Na webu je spousta dalších zdrojů, které tento jev podrobně vysvětlují -například tento-, alestačí říct, že naše rozhodnutí umístit tlačítko pro přepínání jazyků ve výchozím nastavení do pravého dolního rohu Weglot nebylo náhodné. Na dvourozměrné obrazovce představuje toto umístění koncovou oblast, kde uživatel čtoucí LTR s neuvěřitelnou pravděpodobností spočine očima a bude interagovat s předloženým CTA. Pokud je dotyčným CTA tlačítko pro přepínání jazyků, znamená to, že nebude mít velké potíže s nalezením způsobu, jak jim zpřístupnit vaši stránku.

Celkově má strana stránky, na kterou tlačítko umístíte, velký vliv na to, jak snadno ho uživatelé najdou. Pokud je výchozí jazyk vaší stránky ve formátu LTR (například angličtina, francouzština, španělština, zjednodušená čínština...), znamená to, že tlačítko bude umístěno na pravé straně stránky.

Samozřejmě, pokud vytváříte svůj původní web v jazyce RTL, jako je arabština, hebrejština nebo perština,budete chtít postupovat opačně a ponechat toto tlačítko na levé straně.

Webové stránky Dubai Font jsou dokonalým příkladem toho, jak by tato organizace měla vypadat - jak v angličtině, která je výchozím jazykem domovské stránky, tak v arabštině, kterou si můžete vybrat pomocí tlačítka v pravém horním rohu stránky v angličtině. Všimněte si, jak se tato směrovost mění v závislosti na jazyce.

Ale mohu se podívat na jídelní lístek, prosím?

Možná si stále říkáte, proč ji místo toho neumístit do zóny "Primární optická oblast"? -A to je správná otázka.

Nezapomeňte, že se stále jedná o vaše webové stránky, pravděpodobně pro vaši značku nebo jiný projekt, takžesi pravděpodobně budete chtít tuto část vyhradit pro nějaký výrazný osobní identifikátor, například logo.

Nicméně silná nevýrazná oblast je stejně jako oblast terminálu vhodným kandidátem pro umístění tlačítek - zejména pokud máte v horní části stránky horizontální menu (což je případ... no, většiny webových stránek v dnešní době).
Horní lišty nabídek jsou nakonec docela dobrým místem pro tlačítka pro přepínání jazyků - a to zejména ve Squarespace.

Tlačítka menu na webu Squarespace: Stylizace, syntéza a lokalizace

Integrace tlačítka Weglot pro přepínání jazyků do panelu nabídek na platformě Squarespace (a to platí pro jakýkoli druh panelu nabídek, bez ohledu na stranu - takže směr jazyka nemá vliv na to, jak to funguje) je velmi snadná.

V editoru webu můžete kliknout na položku "Stránky", čímž se dostanete na postranní panel, který vypadá následovně:

Kliknutím na znaménko "+" vedle názvu "Hlavní navigace" budete moci do hlavní nabídky v záhlaví přidat odkazy a/nebo rozbalovací nabídky.

Ať už se rozhodnete zahrnout dostupné jazyky webu jako přímé volby v hlavní nabídce...

...nebo spíše jako prvky integrovaného rozbalovacího menu...

...jste v dobrých rukou: postup je stejný. Pokud vytvoříte rozbalovací nabídku, budete moci přidávat odkazy (podobně jako pomocí příkazu "+" v hlavní navigační nabídce) - a následující postup také ke každému jazyku, který jste na web přidali.

Jakmile se rozhodnete přidat odkaz buď na hlavní panel nabídky, nebo do integrované rozbalovací nabídky, zobrazí se vyskakovací okno, které vypadá takto:

Odkaz pojmenujte jako název jazyka, do kterého chcete, aby se vaše stránka změnila. Jazyk můžete samozřejmě pojmenovat názvem v původním jazyce - tedy například "Spanish" (španělština) namísto "Español" (španělština), pokud svůj původní web vytváříte v angličtině - ale doporučujeme, abyste jako název uvedli původní název jazyka, aby jej jeho uživatelé snáze rozpoznali. Tl;dr: zvolte "Español" místo "Spanish"; "Français" místo "French"; atd., atd.

Dále je třeba zadat odkaz, na který má tento název vést. Vzhledem k tomu, že váš web Squarespace Weglot se neskládá z duplicitních stránek v podsložkách, ale z jednotlivých subdomén pro každý jazyk, nebudete ve skutečnosti odkazovat na samostatnou adresu URL. Místo toho zadejte řetězec "Weglot" následovaný dvoupísmenným kódem ISO jazyka, na kterém pracujete ( jejich úplný seznam najdete zde).

Jakmile se vám to podaří, uvidíte, že jsou vaše jazykové názvy dokonale integrovány do hlavní nabídky...

...jako tito lidé.

Vaše vícejazyčné stránky Squarespace budou v podstatě zaručeně elegantní a dobře vypadající - to je podstata šablon Squarespace, které umožňují snadno kliknutím a tažením vyladit vaše stránky a mít je profesionálně vypadající.

To by vám ovšem nemělo bránit v tom, abyste se snažili vzhled svých stránek přizpůsobit a udělat si je skutečně vlastní.

U vícejazyčného webu je obzvláště důležité, aby prvky vaší osobní značky byly ve všech verzích jednotné - to je jeden ze základních principů vícejazyčného designu webu - ato znamená syntézu estetiky webu, od barevné palety obrázků přes typografický styl až po styl tlačítek. Tlačítko pro přepínání jazyků je klíčovou součástí celého tohoto schématu a váš web bude krásnější pouze tehdy, pokud tlačítko zapadne do celkového vizuálního tématu stránky.

Zároveň, jak už jsme si řekli, chcete, aby vaše tlačítko alespoň trochu vyčnívalo z ostatních prvků stránky, aby ho uživatelé snadno a rychle našli. Jak můžete dosáhnout rovnováhy mezi odlišností - pronalezení - a soudržností, pro kvalitu stránky?

Je to doslova paradox, ale ne neřešitelný. Zde je několik vícejazyčných webů Squarespace, které vás mohou inspirovat svými kreativně umístěnými a navrženými tlačítky pro přepínání jazyků.

Projekt Siku

Siku Project je inovativní šperkařská společnost se sídlem na Sicílii, jejíž šperky jsou vyrobeny z vláken místního italského opunciového kaktusu (ano, čtete správně - z vláken opunciového kaktusu lze skutečně vyrobit ekologický tvrdý materiál) a její dvojjazyčné webové stránky jsou stejně elegantní jako jejich šperky.

Jejich rozbalovací menu s přepínačem jazyků, které umožňuje přepínat mezi angličtinou a italštinou, je umístěno v hlavním navigačním menu v pravém horním rohu stránky jako perla na (vizuálně velmi přístupné) šňůrce.

Expediční plavání

Webové stránky projektu Siku vypadají tak, jak si asi mnozí z nás představují, že stránky Squarespace vypadají - jsou černobílé, plné obrázků a čisté. Stránky Squarespace však mohou být také barevné a bláznivé - přesně takovou cestu zvolil (nebo spíše plaval) bruselský projekt Expedition Swim.

Cílem jejich stránek je povzbudit místní obyvatele, aby se s rodinami koupali v nově vyčištěných městských rybnících. Je hravá, jasná, plná vlnitých tvarů a animací (což evokuje - hádejte - vodu) a jejich jazykový přepínač dokonale zapadá do pravé horní části navigačního panelu.

Udělali to velmi uživatelsky přívětivé tím, že zobrazují své tři jazyky - francouzštinu, angličtinu a nizozemštinu - pomocí příslušných všeobecně rozpoznatelných dvoupísmenných jazykových kódů (FR, EN a NL), bez nutnosti klikání na rozbalovací seznam. Každý bruxellois, až po mladé lidi, kteří hledají skvělou letní aktivitu, bude snadno schopen během dvou vteřin zjistit, jak přepnout stránku do svého jazyka.

SalesCandy

Startup Saas SalesCandy sídlí v Malajsii, v zásadě multikulturní - a ze své podstaty vícejazyčné - společnosti. Vícejazyčné stránky jsou v takovém obchodním prostředí naprostou nutností a SalesCandy věnovala určitou pozornost tomu, aby každému čtenáři usnadnila přístup k jeho rodnému jazyku.

Jak to dokázali? Zejména dvě věci: a) jejich rozbalovací nabídka jazyků je (ano, to opravdu nemůžeme dostatečně zdůraznit) pěkně umístěna na pravé straně stránky a b) volby jazyků jsou napsány nativně -tedy takto:

Cítíte se inspirováni?

V to rozhodně doufáme. Pokud jste připraveni spustit své stránky nebo obchod Squarespace a optimalizovat je pro své polyglotské publikum, zde je několik tipů, jak začít s procesem navrhování a jak po vyladění detailů přejít na Squarespace.