Växla runt på Squarespace: Så här utformar du din språkknapp

Så du har gjort din Squarespace-webbplats flerspråkig. Bravo, kudos, mabrouk - viälskar att se det!

Vad händer nu?

Du kanske har märkt att vi har pratat mycket om Squarespace på sistone, och det beror på att massor av våra kunder använder det (även för e-handel) - och gör ett riktigt bra jobb.

De bästa Weglot Squarespace-webbplatserna vi har sett är de som har fortsatt att förfina mikrodetaljerna på sina webbplatser, särskilt efter att ha frågat "Nu vad."

En av fördelarna med att använda Weglot är den flexibilitet du har med din språkväxlingsknappdesign. Som de flesta webbdesigners kommer att säga är det en sällsynt lyx att ha full kontroll över utseendet och känslan av importerade element - plugins, tillägg eller andra appkomponenter - på en sida.

I många fall är appar eller plugins som du lägger till på din webbplats förprogrammerade för att se ut på ett visst sätt och överensstämma med varumärket för de utvecklare som skapade dem. Detta gör det tydligt för användaren att plugin-elementet inte är inbyggt på webbplatsen utan kommer från någon annanstans. Även om det är en perfekt funktionell widget kan den fortfarande sticka ut visuellt från resten av webbplatsen.

Weglot fungerar inte på det sättet - eller åtminstone behöver det inte göra det. När du installerar Weglot på din Squarespace-webbplats ser du initialt en språkväxlingsknapp som ser ut så här, längst ner till höger på din sida:

Ganska grundläggande, eller hur? Tanken bakom den här fas-1-språkomvandlaren är att vara så neutral som möjligt: inga starka färger, ingen vild typografi, bara en tydlig, ren knapp som gör vad du behöver den till.

Och många människor är fans av det funktionella utseendet, vilket är helt okej. Om den vita rektangeln passar dig och din webbplats vet du vad man brukar säga (eller kanske inte, men nu vet du det): "Om det inte är trasigt, fixa det inte." (På franska säger vi ibland "On ne change pas une équipe qui gagne" - det fungerar också).

Men om du tittar på din fina, rena rektangel och fortfarande inte bara solar dig i tillfredsställelse, behöver du inte förlora hoppet.

Var ska jag placera min knapp?

Hela konceptet med "knapplacering" kan verka trivialt, men tänk på hur många knappar du trycker på varje dag. Det inkluderar tangenterna på en smartphones tangentbord, barn; det är 2019 och våra fingrar kommer förmodligen i kontakt med fler knappar än de gör med tvål och vatten(äckligt, men sant). Poängen är att knappar finns överallt.

Och om du prioriterar att göra din webbplats läsbar för alla möjliga läsare (vilket den objektivt sett bör vara - särskilt om du vill öka din konverteringsgrad eller bara göra din webbplats mer tillgänglig över hela världen), vill du se till att de direkt kan byta till sitt eget språk.

Sidan är viktig.

Ja, du läste rätt. Visst, storleken har också betydelse - en liten knapp är sannolikt inte särskilt synlig och därför ännu mindre sannolik att bli klickad på.

Men webbdesign är i grunden ett rumsligt pussel, och om vi tänker på det som ett spel är spelplanen begränsad till en 2-dimensionell rektangel med två huvudaxlar - vänster-höger och topp-botten, eller "x" och "y" om du föredrar det - och hela poängen med en webbplats är att den kan innehålla mycket information. Hur kan du få plats med alla dina länkar, bilder, videor och andra roliga interaktiva element i det här begränsade utrymmet - och få de viktigaste att sticka ut utan att ta bort fokus från de andra?

Det finns forskning som stöder att placeringen av ett element på en sida - hur långt längs varje axel det hamnar - kritisktpåverkar hur snabbt tittarna ska hitta det, liksom hur troligt det är att de interagerar med det. Dessa två förhållanden är inte nödvändigtvis kausalt kopplade, men de är ganska korrelerade - tillräckligt för att det ska vara värt att överväga användarnas inneboende preferenser när det gäller placering av call-to-action ("CTA") eller knappar.

Så vad exakt säger forskningen, kanske du frågar dig?

Föga förvånande har användarens modersmål - elleråtminstone det språk som de är mest vana vid att surfa på webben på - en ganska stor inverkan på hur de interagerar med webbsidor.

UI-UX-designexperterna på Material Design har släppt en djupgående guide om vilka webbsideelement som bör anpassas (och vilka som inte bör anpassas) mellan språk som läses från vänster till höger ("LTR", som engelska) och från höger till vänster ("RTL", som arabiska eller hebreiska).

Vi kommer inte att gå in på lika många detaljer som de gör, men du kan kolla in det här om du har mer komplexa visuella element - till exempel ikoner - än bara knappar för att justera språkriktningen.

Med detta sagt finns det konkreta psykologiska förklaringar till varför den riktning vi är vana att läsa i påverkar vår mottaglighet för CTA:er på olika ställen - en av dem kallas Gutenberg-diagrammet och illustrerar förhållandet mellan den ordning i vilken vi tittar på element på en sida och hur mycket tid vi spenderar på var och en.

Det finns många andra resurser på webben som förklarar detta fenomen i detalj -till exempel den här - mendet räcker med att säga att vårt beslut här på Weglot att placera din språkväxlingsknapp som standard i det nedre högra hörnet av sidan inte var av misstag. På en tvådimensionell skärm utgör denna placering terminalområdet, där en användare som läser LTR är otroligt benägna att vila ögonen och interagera med den CTA som presenteras för dem. Om CTA:n i fråga är en språkväxlingsknapp innebär det att de inte kommer att ha några problem att hitta ett sätt att göra din webbplats tillgänglig för dem.

På det hela taget har den sida av sidan där du placerar din knapp stor betydelse för hur lätt användarna kommer att hitta den. Om webbplatsens första språk är i LTR-format (som engelska, franska, spanska, förenklad kinesiska ...) innebär det att knappen ska placeras till höger på sidan .

Om du bygger din första webbplats på ett RTL-språk - som arabiska, hebreiska eller farsi - bör du naturligtvisgöra tvärtom och behålla knappen på vänster sida.

Dubai Fonts webbplats är ett perfekt exempel på hur en sådan organisation bör se ut - både på engelska, som är standardspråket på startsidan, och på arabiska, som är det språk man kan välja via knappen längst upp till höger på den engelskspråkiga sidan. Lägg märke till hur denna riktning ändras när språket ändras.

Men kan jag få se menyn, tack?

Du kanske fortfarande tänker, varför inte placera den i zonen "Primary Optical Area" istället? -Och det är en berättigad fråga.

Kom ihåg att det här fortfarande är din webbplats för, förmodligen, ditt varumärke eller annat projekt - sådu vill förmodligen reservera det här avsnittet för någon form av effektfull personlig identifiering, som en logotyp.

Det starka fallow-området är dock, precis som terminalområdet, en bra kandidat för knappplacering - särskilt om du har en horisontell meny högst upp på din sida (vilket är fallet för ... ja, de flesta webbplatser nuförtiden).
Toppmenyrader är ganska bra platser för språkbytesknappar, i slutändan - och särskilt på Squarespace.

Menyknappar på Squarespace: Stilisera, syntetisera och lokalisera

Det är superenkelt att integrera Weglot språkväxlingsknapp i ett menyfält på Squarespace (och detta gäller alla typer av menyfält, oavsett sida - så din språkriktning påverkar inte hur detta fungerar).

I din webbplatsredigerare kan du klicka på "Sidor", vilket leder dig till en sidofält som ser ut ungefär som följer:

Genom att klicka på "+"-tecknet bredvid rubriken "Huvudnavigering" kan du lägga till länkar och/eller rullgardinsmenyer i din huvudmeny.

Oavsett om du väljer att inkludera webbplatsens tillgängliga språk som direkta alternativ på huvudmenyn...

...eller snarare som delar av en integrerad rullgardinsmeny...

...är du i goda händer: processen är densamma. Om du skapar en rullgardinsmeny kan du också lägga till länkar (som med kommandot "+" i huvudnavigeringsmenyn) - och följande process för varje språk som du har lagt till på din webbplats.

När du har valt att lägga till en länk, antingen i huvudmenyfältet eller i en integrerad rullgardinsmeny, visas ett popup-fönster som ser ut så här:

Rubricera länken som namnet på det språk du vill att den ska ändra din webbplats till. Du kan naturligtvis kalla språket vid dess namn på ditt originalspråk - till exempel "Spanish" i stället för "Español" om du bygger din ursprungliga webbplats på engelska - men vi rekommenderar att du använder språkets ursprungliga namn som titel, så att de som talar språket lättare kan känna igen det. Kort sagt: välj "Español" i stället för "Spanish"; "Français" i stället för "French"; och så vidare.

Därefter måste du ange den länk som du vill att den här titeln ska leda till. Eftersom din Weglot Squarespace-webbplats inte består av duplicerade sidor i undermappar, utan snarare av enskilda underdomäner för varje språk, kommer du faktiskt inte att länka ut till en separat URL. Istället anger du strängen "Weglot" följt av den tvåbokstaviga ISO-språkkoden för det språk du arbetar med (vi har en fullständig lista över dem här).

När du väl har gjort det här kommer du att se att dina språktitlar är perfekt integrerade i din huvudmeny...

...som de här killarna.

Din flerspråkiga Squarespace-webbplats är i princip garanterad att vara snygg och snygg - det är karaktären av Squarespace-mallar, som gör det enkelt att klicka och dra för att polera upp din webbplats och få den att se proffsig ut.

Det ska naturligtvis inte hindra dig från att försöka anpassa utseendet på din webbplats och verkligen göra den till din egen.

Med en flerspråkig webbplats är det särskilt viktigt att hålla dina personliga varumärkeselement sammanhängande över versionerna - detta är en av de grundläggande principerna för flerspråkig webbplatsdesign - ochdet innebär att du måste syntetisera webbplatsens estetik, från färgpaletter för bilder till typografistil och knappstil. Din språkbytesknapp är en viktig del av hela detta schema, och din webbplats blir bara vackrare om din knapp passar in i sidans övergripande visuella tema.

Samtidigt, som vi redan har gått igenom, vill du att din knapp ska sticka ut åtminstone lite från andra sidelement så att den är lätt för användarna att hitta, snabbt. Hur kan du uppnå en balans mellan särskiljningsförmåga- för sökbarhet - och samstämmighet, för sidkvalitet?

Detta är en bokstavlig paradox, men den är inte olöslig. Här är några flerspråkiga Squarespace-webbplatser som kan inspirera dig med sina kreativt placerade och designade språkbytesknappar.

Siku-projektet

Siku Project, som är baserat på Sicilien, är ett innovativt smyckesföretag vars smycken är tillverkade av fibrer från den lokala italienska kaktusen (ja, du läste rätt - kaktusfibrer kan faktiskt användas för att tillverka ett miljövänligt hårt material), och deras tvåspråkiga webbplats är lika elegant som deras smycken.

Deras rullgardinsmeny för språkbyte, som gör att du kan växla mellan engelska och italienska, sitter på huvudnavigeringsmenyn längst upp till höger på sidan, som en pärla på ett (mycket visuellt tillgängligt) snöre.

Expedition Simning

Siku-projektets webbplats ser ut som många av oss förmodligen föreställer oss att Squarespace-webbplatser ska se ut - den är monokrom, bildtung och ren. Men Squarespace-webbplatser kan också vara färgglada och knasiga - det var så Bryssels Expedition Swim-projekt valde att gå till väga (eller snarare simma).

Målet med deras webbplats är att få lokalbefolkningen att ta med sina familjer och bada i stadens nyrensade dammar. Den är lekfull, ljus och full av vågiga former och animationer (som för tankarna till - du gissade rätt - vatten), och deras språkväxlare passar perfekt i den övre högra delen av navigeringsfältet.

De har gjort den superanvändarvänlig genom att visa sina tre språk - franska, engelska och holländska - med deras respektive universellt igenkännbara språkkoder på två bokstäver (FR, EN och NL), utan att man behöver klicka på en rullgardinsmeny. Varje bruxellois, ända ner till ungdomarna, som letar efter en cool sommaraktivitet kommer lätt att kunna räkna ut, på två sekunder, hur man byter webbplats till sitt eget språk.

SalesCandy

Saas-startupen SalesCandy är baserad i Malaysia, ett i grunden mångkulturellt - och i sig flerspråkigt - samhälle. Att ha en flerspråkig webbplats är en absolut nödvändighet i den här typen av affärsmiljö, och SalesCandy har lagt ner en hel del tankearbete på att underlätta för varje läsare att få tillgång till sitt modersmål.

Hur har de gjort detta? Två saker i synnerhet: a) deras rullgardinsmeny för språk är (ja, vi kan verkligen inte betona detta tillräckligt) snyggt placerad på höger sida av sidan, och b) språkalternativen är skrivna nativt- det vill säga så här:

Känner du dig inspirerad?

Vi hoppas verkligen det. Om du är redo att lansera din Squarespace-webbplats eller -butik och optimera den för din mångspråkiga publik får du här några tips om hur du startar din designprocess och, när du har rett ut detaljerna, hur du blir global på Squarespace.