Bytte rundt på Squarespace: Slik utformer du språkknappen din

Så du har gjort Squarespace-nettstedet ditt flerspråklig. Bravo, kudos, mabrouk - vielsker å se det!

Hva nå?

Du har kanskje lagt merke til at vi har snakket mye om Squarespace i det siste, og det er fordi mange av kundene våre bruker det (til og med til e-handel) - og gjør en veldig god jobb.

Det beste Weglot – Oversatte Squarespace-nettsteder vi har sett er de som har fortsatt å forbedre mikrodetaljene på nettstedene sine, spesielt etter å ha spurt «Hva nå?».

En av fordelene med å bruke Weglot er fleksibiliteten du har med designet på språkbytteknappene dine. Som de fleste nettdesignere vil fortelle deg, er det en sjelden luksus å ha full kontroll over utseendet og følelsen til importerte elementer – plugins, tillegg eller andre appkomponenter – på en side.

I mange tilfeller er apper eller plugins som du legger til på nettstedet ditt, forhåndsprogrammert til å se ut på en bestemt måte og være i samsvar med merkevaren til utviklerne som har laget dem. Dette gjør det tydelig for brukeren at plugin-elementet ikke er hjemmehørende på nettstedet, men kommer fra et annet sted. Selv om det er en perfekt funksjonell widget, kan den likevel skille seg visuelt ut fra resten av nettstedet.

Weglot fungerer ikke slik – eller i hvert fall trenger det ikke å gjøre det. Når du installerer Weglot På Squarespace-nettstedet ditt vil du først se en knapp for språkbytte som ser slik ut, nederst til høyre på siden din:

Ganske grunnleggende, ikke sant? Tanken bak denne fase 1-språkvaskeren er å være så nøytral som mulig: ingen sterke farger, ingen vill typografi, bare en tydelig, ren knapp som gjør det du trenger den til.

Og mange er tilhengere av det funksjonelle utseendet, noe som er helt greit. Hvis det hvite rektangelet passer deg og nettstedet ditt, vet du hva man sier (eller kanskje du ikke gjør det, men nå vet du det): "Hvis det ikke er ødelagt, må du ikke fikse det." (På fransk sier vi noen ganger "On ne change pas une équipe qui gagne" - det fungerer også).

Men hvis du ser på det fine, rene rektangelet ditt og fremdeles ikke er helt fornøyd, trenger du ikke å miste håpet.

Hvor skal jeg plassere knappen min?

Hele konseptet med "plassering av knapper" kan kanskje virke banalt, men tenk på hvor mange knapper du trykker på hver dag. Det inkluderer tastene på et smarttastatur, barn; vi skriver 2019, og fingrene våre kommer sannsynligvis i kontakt med flere knapper enn de gjør med såpe og vann (ekkelt, men sant). Poenget er at knapper er overalt.

Og hvis du prioriterer å gjøre nettstedet ditt lesbart for alle mulige lesere (noe det objektivt sett bør være - spesielt hvis du ønsker å øke konverteringsraten eller bare gjøre nettstedet ditt mer tilgjengelig over hele verden), må du sørge for at de umiddelbart kan bytte til sitt eget språk.

Sidesaker.

Ja, du leste riktig. Størrelsen har selvsagt også noe å si - en liten knapp vil neppe være særlig synlig, og det er derfor enda mindre sannsynlig at den blir klikket på.

Men webdesign er i bunn og grunn et romlig puslespill, og hvis vi tenker på det som et spill, er spillebrettet ditt begrenset til et todimensjonalt rektangel med to hovedakser - venstre-høyre og topp-bunn, eller "x" og "y", om du foretrekker det - og hele poenget med et nettsted er at det kan inneholde mye informasjon. Hvordan får du plass til alle lenkene, bildene, videoene og andre morsomme interaktive elementer på denne begrensede plassen - og hvordan får du de viktigste elementene til å skille seg ut uten at det går på bekostning av de andre?

Det finnes forskning som viser at plasseringen av et element på en side - hvor langt langs hver akse det havner - har avgjørende betydning for hvorraskt seerne finner det , samt hvor sannsynlig det er at de interagerer med det. Disse to forholdene er ikke nødvendigvis årsakssammenhengende, men de er ganske korrelerte - nok til at det er verdt å vurdere brukernes iboende preferanser når det gjelder plassering av oppfordringer til handling ("CTA") eller knapper.

Så hva sier egentlig forskningen, spør du kanskje?

Ikke overraskende har brukerens morsmål - eller idet minste det språket de er mest vant til å surfe på nettet på - en ganske stor innvirkning på hvordan de samhandler med nettsider.

UI-UX-designekspertene i Material Design har gitt ut en grundig veiledning om hvilke elementer på nettsider som bør tilpasses (og hvilke som ikke bør tilpasses) mellom språk som leses fra venstre mot høyre ("LTR", som engelsk) og fra høyre mot venstre ("RTL", som arabisk eller hebraisk).

Vi vil ikke gå like detaljert til verks som de gjør, men du kan sjekke det ut her hvis du har mer komplekse visuelle elementer - for eksempel ikoner - enn bare knapper som skal justeres for språkretning.

Når det er sagt, finnes det konkrete psykologiske forklaringer på hvorfor leseretningen vi er vant til å lese i, påvirker vår mottakelighet for CTA-er på ulike steder - en av dem kalles Gutenberg-diagrammet, og illustrerer forholdet mellom rekkefølgen vi ser på elementene på en side, og hvor mye tid vi bruker på hvert enkelt element.

Det finnes mange andre ressurser på nettet som forklarer dette fenomenet i detalj – som for eksempel denne – men det er nok å si at vår avgjørelse her på Weglot Det var ikke tilfeldig at språkvelgerknappen som standard ble plassert nederst til høyre på siden. På en todimensjonal skjerm utgjør denne plasseringen terminalområdet , der en bruker som leser LTR er utrolig sannsynlig å hvile øynene og samhandle med handlingsfremmende oppfordring (CTA) som presenteres for dem. Hvis den aktuelle handlingsfremmende oppfordringen er en språkvelgerknapp, betyr dette at de ikke vil ha noen problemer med å finne en måte å gjøre nettstedet ditt tilgjengelig for dem.

Alt i alt har siden du plasserer knappen på, stor innvirkning på hvor lett brukerne vil finne den. Hvis det opprinnelige språket på nettstedet ditt er i LTR-format (som engelsk, fransk, spansk, forenklet kinesisk ...), innebærer dette at du bør plassere knappen på høyre side av siden .

Hvis du bygger det første nettstedet ditt på et RTL-språk - som arabisk, hebraisk eller farsi - bør du selvfølgeliggjøre det motsatte , og beholde knappen på venstre side.

Nettsiden til Dubai Font er et perfekt eksempel på hvordan denne organisasjonen bør se ut - både på engelsk, som er standardspråket på hjemmesiden, og på arabisk, som er språket du kan velge via knappen øverst til høyre på den engelskspråklige siden. Legg merke til hvordan denne retningsbestemmelsen endres når språket endres.

Men kan jeg få se menyen?

Du tenker kanskje fortsatt: Hvorfor ikke plassere den i sonen "Primært optisk område" i stedet? -og dette er et gyldig spørsmål.

Husk at dette fortsatt er nettstedet ditt, antageligvis for merkevaren din eller et annet prosjekt - sådu vil sannsynligvis reservere denne delen til en eller annen form for slagkraftig personlig identifikator, for eksempel en logo.

Men det sterke brakkområdet er, i likhet med terminalområdet, en god kandidat for plassering av knapper - spesielt hvis du har en horisontal meny på toppen av siden (noe som er tilfelle for... vel, de fleste nettsteder i disse dager).
De øverste menylinjene er ganske gode steder for språkbytteknapper - og spesielt på Squarespace.

Menyknapper på Squarespace: Stiliser, syntetiser og lokaliser

Integrering av Weglot språkbytteknappen i en menylinje på Squarespace (og dette gjelder alle typer menylinjer, uansett hvilken side – så språkretningen din påvirker ikke hvordan dette fungerer) er superenkelt.

I redigeringsprogrammet kan du klikke på "Sider", som fører deg til et sidefelt som ser ut omtrent som følger:

Ved å klikke på "+"-tegnet ved siden av tittelen "Hovednavigasjon" kan du legge til lenker og/eller rullegardinmenyer i hovedmenyen i toppteksten.

Enten du velger å inkludere de tilgjengelige språkene på nettstedet ditt som direkte alternativer på hovedmenyen...

...eller snarere som elementer i en integrert nedtrekksmeny...

...er du i gode hender: prosessen er den samme. Hvis du oppretter en rullegardinmeny, kan du også legge til lenker (som med "+"-kommandoen på hovednavigasjonsmenyen) - og følgende prosess for hvert språk du har lagt til på nettstedet ditt.

Når du har valgt å legge til en lenke, enten i hovedmenylinjen eller i en integrert rullegardinmeny, vil du se et popup-vindu som ser slik ut:

Gi lenken navnet på språket du vil at den skal endre nettstedet ditt til. Du kan selvfølgelig kalle språket ved dets navn på originalspråket ditt - for eksempel "Spanish" i stedet for "Español" hvis du bygger det opprinnelige nettstedet på engelsk - men vi anbefaler at du bruker språkets opprinnelige navn som tittel, slik at de som snakker språket, lettere kan gjenkjenne det. Kort sagt: Velg "Español" i stedet for "Spanish", "Français" i stedet for "French", og så videre.

Deretter må du legge inn lenken du vil at denne tittelen skal føre til. Siden din Weglot – Hvis det oversatte Squarespace-nettstedet ikke består av dupliserte sider i undermapper, men snarere av individuelle underdomener for hvert språk , vil du faktisk ikke lenke ut til en separat URL. Skriv i stedet inn strengen «#». Weglot -» etterfulgt av den tobokstavs ISO-språkkoden for språket du jobber med (vi har en fullstendig liste over disse her ).

Når du har gjort dette, vil du se at språktitlene dine er perfekt integrert i hovedmenyen...

...som disse karene.

Det flerspråklige Squarespace-nettstedet ditt vil garantert se elegant og flott ut - slik er det med Squarespace-maler, som gjør det så enkelt som å klikke og dra for å pusse opp nettstedet ditt og få det til å se proft ut.

Det bør selvfølgelig ikke hindre deg i å prøve å tilpasse nettstedets utseende og virkelig gjøre det til ditt eget.

Med et flerspråklig nettsted er det spesielt viktig å sørge for at de personlige merkevareelementene dine henger sammen på tvers av versjonene - dette er et av de grunnleggende prinsippene for flerspråklig nettstedsdesign- og det betyr at du må samordne nettstedets estetikk, fra bildefargepaletter til typografi og knappestil. Språkbytteknappen er en viktig del av hele dette skjemaet, og nettstedet ditt blir bare vakrere hvis knappen passer inn i det overordnede visuelle temaet på siden.

Samtidig, som vi allerede har vært inne på, vil du at knappen skal skille seg litt ut fra andre sideelementer, slik at den er lett for brukerne å finne, raskt. Hvordan kan du oppnå en balanse mellom særpreg - forå gjøre det lett å finne - og sammenheng, for å sikre sidens kvalitet?

Dette er et bokstavelig talt paradoks, men det er ikke uløselig. Her er noen flerspråklige Squarespace-nettsteder som kan inspirere deg med sine kreativt plasserte og -designede språkbytteknapper.

Siku-prosjektet

Siku Project er et innovativt smykkefirma med base på Sicilia, og smykkene deres er laget av fibrene fra den lokale italienske figenkaktusen (ja, du leste riktig - fiber fra figenkaktus kan faktisk brukes til å lage et miljøvennlig hardt materiale), og den tospråklige nettsiden deres er like elegant som smykkene deres.

Nedtrekksmenyen for språkbytte, som lar deg veksle mellom engelsk og italiensk, er plassert på hovednavigasjonsmenyen øverst til høyre på siden, som en perle på en (svært visuelt tilgjengelig) snor.

Ekspedisjonssvømming

Siku-prosjektets nettsted ser ut som mange av oss nok forestiller oss at Squarespace-nettsteder skal se ut - det er monokromt, bildetungt og rent. Men Squarespace-nettsteder kan også være fargerike og sprø - det er slik Brussels Expedition Swim-prosjekt valgte å gjøre det (eller rettere sagt, svømme).

Målet med nettstedet er å få lokalbefolkningen til å ta med familiene sine på svømmetur i byens nyrensede dammer. Den er leken, lys og full av bølgende former og animasjoner (som minner om - du gjettet det - vann), og språkveksleren deres passer perfekt inn øverst til høyre i navlinjen.

De har gjort det superbrukervennlig ved å vise de tre språkene - fransk, engelsk og nederlandsk - med deres respektive universelt gjenkjennelige språkkoder på to bokstaver (FR, EN og NL), uten å måtte klikke på en nedtrekksmeny. Alle bruxellois, helt ned til de yngste, som er på jakt etter en kul sommeraktivitet, vil enkelt kunne finne ut på to sekunder hvordan de kan bytte til sitt eget språk.

SalesCandy

Saas-virksomhetsoppstartsselskapet SalesCandy har base i Malaysia, et grunnleggende multikulturelt - og iboende flerspråklig - samfunn. Å ha et flerspråklig nettsted er en absolutt nødvendighet i et slikt forretningsmiljø, og SalesCandy har lagt vekt på å legge til rette for at alle lesere skal ha tilgang til sitt eget morsmål.

Hvordan har de gjort dette? Det er særlig to ting: a) nedtrekksmenyen for språk er (ja, vi kan ikke understreke dette nok) pent plassert på høyre side av siden, og b) språkalternativene er skrevet naturlig - detvil si slik:

Føler du deg inspirert?

Det håper vi i hvert fall. Hvis du er klar til å lansere Squarespace-nettstedet eller -butikken din og optimalisere den for et flerspråklig publikum, får du her noen tips til hvordan du kan starte designprosessen, og hvordan du kan bli global på Squarespace når du har funnet ut av detaljene.