Språkval på webbplatsen: Tips, bästa metoder och exempel

När du har en flerspråkig webbplats vill du ha ett språkval (ibland kallat en språkväxlare) på din webbplats. Detta låter dina besökare se vilka översatta versioner av webbplatsen du erbjuder, så att de kan välja sitt föredragna språk.

Ett språkval ser ut som på den här skärmbilden:

Men det finns variationer i hur det visas, inklusive var ditt språkval är placerat (sidhuvud, sidfot, etc.) och om det finns ikoner som visar landsflaggor.

Den goda nyheten är att det inte behöver vara svårt att lägga till ett språkval. Vi går igenom vad som krävs när du designar och utvecklar ett eget språkval från grunden.

Dessutom finns det en enklare lösning: översättningsprogram eller tillägg som kommer med ett inbyggt (och anpassningsbart) språkval (också väldigt hjälpsamt för webbplatslokalisering).

I det här inlägget tittar vi på olika typer av språkbytare, några bästa metoder för att hålla din språkbytare väl synlig och funktionell, samt ett enkelt sätt att lägga till och designa din språkbytare på din flerspråkiga webbplats.

Letar du efter en lösning direkt? Prova Weglots 14-dagars gratis provperiod och få en språkmeny live på din webbplats på bara några minuter!

Lägga till din webbplats språkval (Tips & smarta knep)

Om du redan har en flerspråkig webbplats och bara behöver lägga till ett språkval, kanske du har en designerskiss som din utvecklare kan skapa. Här är några tips som hjälper dig med den övergripande användarupplevelsen:

Gör det lätt att hitta

När en person som inte har engelska som modersmål besöker din engelska webbplats, kommer de troligtvis att titta i huvudnavigeringsområdena (sidhuvud, sidfot) för att se om din webbplats finns tillgänglig på deras språk.

Men om de inte ser språkalternativ kommer de att anta att din webbplats bara finns på engelska och lämna den direkt. Det skadar din verksamhet.

Så, ett bra tips är att veta var dina besökare kommer att leta efter ett språkval och att placera det där, oavsett om det är högst upp med din navigeringsmeny, längst ner på sidan, i sidofältet eller som en pop-up-ruta.

Fundera på hur många språkversioner du planerar att erbjuda

Du kanske till exempel inte vill ha en rullgardinsmeny om du bara ska översätta din webbplats till ett annat språk.

Om du däremot planerar att översätta den till tre, fyra eller till och med fler olika språk, då kommer en rullgardinsmeny att se snyggare ut och erbjuda bättre användbarhet.

Prioritera funktion före form

Ja, du vill att ditt språkval ska passa in i din webbplats design. Men glöm inte att syftet med designen är funktionalitet.

Du vill inte förvirra besökare – du vill att det ska vara väldigt tydligt att din webbplats finns tillgänglig på andra språk. Du vill också göra det så enkelt som möjligt att byta språk.

Att designa och utveckla en egen språkknapp är logiskt om du har en flerspråkig webbplats och inte planerar att använda programvara för att hantera dina översättningar.

Men om du använder översättningsprogramvara är det inte nödvändigt. Detta beror på att de flesta översättningsprogram för webbplatser låter dig lägga till ett språkval. (Vi rekommenderar att du använder översättningsprogram för att översätta din webbplats och hålla översättningarna uppdaterade.)

Vill du ha en snygg språkbytare som Inbentas? Prova Weglot gratis på din sida och utforska möjligheterna att designa din språkbytare.

Lista språk på deras originalspråk

Utan att tänka på det kanske du omedvetet har listat språken på din webbplats på ditt eget språk. Om din webbplats är på engelska betyder det att du har skrivit tyska, kinesiska, spanska och så vidare i ditt språkval.

Detta är dock inte intuitivt för dina besökare. Språkets originalnamn kan vara helt annorlunda än det engelska!

Ett exempel: vår språkbytare listar alternativ som Français, Deutsch, Español, Italiano, 日本語 för japanska, och Nederlands. På så sätt kan modersmålstalare enkelt hitta sitt föredragna språk på webbplatsen.

Att använda flaggikoner kanske inte är det bästa valet

Det är vanligt att tänka att en flagga är en fin visuell representation av ett språk, men det är inte hela sanningen.

Vad vi menar med detta är: i USA associeras engelska med den amerikanska flaggan, inte Union Jack.

Brazilianer associerar portugisiska med den brasilianska flaggan, inte Portugals flagga. Samma sak gäller för spansktalande i Spanien – de kommer att associera sitt språk med den spanska flaggan, inte den mexikanska.

Du kan självklart använda flaggor. De ser snygga ut ur ett UX-designperspektiv eftersom de är mer iögonfallande, därmed lättare att hitta, och de kan fungera för ditt användningsområde. Det beror bara på vem din målgrupp är, eftersom du kan riskera att stöta bort en del av dem.

Använd omdirigeringar med försiktighet

Ett sätt att välja språk på en webbplats är att automatiskt skicka vidare besökare baserat på var de befinner sig (via deras IP-adress) eller vilket språk deras webbläsare använder.

Det här innebär att webbplatsen känner av vilket språk din besökare har i sin webbläsare och direkt skickar hen till den språkversionen.

Även om det är bekvämt, är det inte alltid en bra idé att förlita sig på automatisk omdirigering. Anledningen är att en användares plats inte alltid stämmer överens med vilket språk de faktiskt talar.

Tänk dig en kinesisk turist som är på en månads semester i Spanien. Hen skulle utan tvekan bli förvirrad om hen direkt skickades till den spanska versionen av webbplatsen hen tittar på!

Och även om deras webbläsarspråk är inställt på danska, till exempel, betyder det inte automatiskt att de vill få fysiska beställningar skickade till en adress i Danmark heller.

Kort sagt är det oftast bäst att fråga vad dina besökare föredrar, istället för att gissa. En användare ska kunna välja sin plats, vilket språk som ska vara standard och vilken valuta. Airbnb är ett jättebra exempel på det här; de antar inte att du talar språken i landet du befinner dig i. Genom att klicka på jordglobikonen får du välja språk, plats och, på nästa flik, valuta:

‍

Det betyder inte att omdirigeringar aldrig är en bra idé; det är till exempel logiskt när en fransk användare i Frankrike av misstag hamnar på den amerikanska versionen av en webbplats.

Men det finns faktiskt webbplatser som har lyckats med automatisk språkval på ett bra sätt. Zara erbjuder till exempel möjligheten att stanna kvar på den brittiska sajten eller att gå vidare till den franska webbplatsen:

Det här är praktiskt för flera olika syften, till exempel om du vill kolla tillgängligheten eller detaljerna för en produkt på en e-handelssajt i ett land du ska resa till.

Använd autofyll där det går

Det är alltid smart att ha autofyll i dina rullgardinsmenyer. Då föreslår webbplatsen vilket språk du letar efter redan när du skriver de första bokstäverna.

Autofyll är extra hjälpsamt om du erbjuder så många språk att dina besökare annars skulle behöva skrolla ner för att hitta sitt. På så sätt tar det bara några sekunder att byta till det språk de vill ha.

Så här designar du språkvalet på din webbplats

Det finns många olika sätt att designa språkvalet på din webbplats. Många väljer enkla knappar, medan andra föredrar lite mer finess genom att lägga till sin egen design (som vi har gjort!).

Rullgardinsmenyer eller valmenyer

Det här är ett av de vanligaste sätten att visa vilka språkversioner din webbplats finns på.

Rullgardinsmenyer, eller valmenyer, kännetecknas av att en lista med alternativ fälls ut och visar dig alla tillgängliga språkinställningar att välja mellan.

De är också tydligt markerade, antingen med en jordglobikon, språkets namn, en flagga eller en förkortning av språket.

Om du letar efter ett snabbt och enkelt språkval fungerar det här bäst, eftersom det finns många olika sätt att designa det på. Det är gjort för att synas tydligt, så det finns oftast högst upp på sidan, som du kan se här:

Vissa webbplatser väljer en lite annorlunda metod, med en sorts drop-up-meny, som det här språkvalet på Green Gifts:

MINI:s webbplats visar ett språkval som visar andra språk till vänster om det aktuella språket när du håller muspekaren över det. Precis som Green Gifts använder den landskoder för att markera varje språk:

Och det krävdes speciell kod för att få till den här effekten:

Knappar

Språkknappar är ett tydligt och snabbt sätt att visa att du riktar dig till specifika marknader. De fungerar bäst när du bara erbjuder ett fåtal språk på din webbplats, eftersom de tar upp ganska mycket plats.

Gardette Industries erbjuder sin webbplats på endast franska och engelska, så en språkknapp här är logisk:

Med tanke på kontrasten mellan språkknappen och webbplatsens bakgrund blir knappen ännu tydligare och drar naturligtvis användarens blick till sig.

Du bör dock tänka noga på var du placerar dessa knappar. De ska inte blockera viktigt innehåll, och de ska inte heller vara det primära intresseområdet på din webbplats. Målet är att se till att användaren får det de vill ha (en översatt webbplats på sitt föredragna språk) med så få klick som möjligt.

Textlänkar

Om du föredrar en diskret språkmeny kan du överväga textlänkar. De finns oftast längst ner på din webbplats. Dessutom är de en bra kompromiss om du har för få språk för en komplett rullgardinsmeny eller urvalsmeny, men för många för att motivera egna knappar.

Här är ett bra exempel: på W3C:s webbplats har de direkt listat japanska och förenklad kinesiska som textlänkar.

Facebook använder en blandning av textlänkar och en urvalsmeny. De placerar sina tillgängliga språk längst ner på sidan – du måste scrolla ner när du kommer till inloggningen:

Om du klickar på +-knappen kommer du till en enorm urvalsmeny med många språk.

Modaler

Modaler är mindre fönster som dyker upp när du klickar på något. De täcker huvudwebbplatsen för att inaktivera dess funktioner, men håller den synlig i bakgrunden. Detta visar att du kommer tillbaka till huvudfönstret när du har interagerat med modalen.

När det gäller att designa din språkmeny för webbplatsen kan modaler vara ett alternativ eftersom de ofta är iögonfallande och snygga. Beroende på hur du ställer in det, kommer användaren lättare att kunna välja sin föredragna region och sitt språk.

Låt oss titta på Calvin Kleins webbplats som ett exempel:

Webbplatsens språkmeny aktiveras genom att klicka på jordglobikonen i det övre högra hörnet bredvid ”Logga in/Registrera”. När du klickar på den visas modalen för att välja ditt föredragna land och språk.

Ett annat exempel är Nestlé. I det övre högra hörnet av sidan står det vilken webbplatsversion du befinner dig på.

När du klickar på den visas en modal som tar upp hela sidan (men som är lätt att stänga, markerad med den ganska stora X-knappen).

Även om modaler är tydliga, är det viktigt att notera att de kan vara störande för användaren, precis som popups. De avbryter användarens surfupplevelse och kräver omedelbar uppmärksamhet.

De kan vara användbara när du behöver uppmärksamma något viktigt för din användare, som integritetsinställningar, dataanvändning eller varningar.

Använd webbplatsöversättningsprogramvara för att anpassa din webbplats språkmeny

Oavsett om du håller på att skapa en flerspråkig webbplats eller redan har en igång, kan du använda Weglot för att förbättra hur du översätter ditt innehåll och hanterar hela din översättningsprocess – med den extra fördelen att du får en språkmeny som är enkel att anpassa.

Först, lite grundläggande om Weglot:

• Du kan enkelt lägga till Weglot till vilket CMS som helst (WordPress, Squarespace, Wix, Shopify och alla specialbyggda plattformar).

• Weglot använder ledande översättningsleverantörer – från Google Translate till DeepL – för att snabbt och effektivt översätta allt innehåll på din webbplats.

• Du kan översätta ditt innehåll till över 110 olika språk. Detta inkluderar höger-till-vänster-språk som arabiska och hebreiska.

• För varje översättning skapar Weglot unika webbadresser. Till exempel är weglot.com vår engelska webbplats, medan weglot.com/fr är vår franska webbplats.

• Alla översatta versioner av din sida hålls alltid uppdaterade med alla innehållsförändringar. Weglot använder automatisk innehållsdetektering för att märka av ändringar på din ursprungliga sida och uppdaterar alla översatta versioner därefter.

• Du har full kontroll över dina översättningar, så du kan redigera dem vid behov. Du kan också se dina översättningar live på din sida med en Visual Editor, så att du kan göra ändringar för att få ditt översatta innehåll att passa din sidas design och layout.

Lär du dig bäst visuellt? Här är en snabb video som förklarar hur Weglot fungerar och hur det kan göra ditt liv enklare när du hanterar flerspråkiga webbplatser:

Viktigast av allt är att du kan anpassa din språkbytare med Weglot. Varje webbplats som översätts av Weglot får en språkbytare, så dina besökare kommer att veta att du erbjuder översatta versioner av ditt innehåll.

Detta för oss tillbaka hit:

Men med Weglot behöver du inte nöja dig med bara en design. Från din kontrollpanel kan du anpassa hur din språkbytare ser ut.

Du kan välja om du vill:

• Visa språkets namn, eller bara förkortningen/språkkoden (som EN för engelska, ES för spanska, FR för franska, och så vidare).

• Visa en flaggikon.

• Visa språkvalet som en rullgardinsmeny.

Du kan också välja vilken typ av landsflaggor du vill använda (till exempel glansiga eller matta). Dessutom finns det en plats där du kan lägga till egen CSS-kod (om du vill göra fler ändringar så att språkvalet matchar ditt varumärke ännu bättre).

Med Weglot hamnar din språkbytare som standard längst ner till höger på din webbplats, men du kan ändra placeringen om du vill (övre högra hörnet, nedre vänstra, etc.).

Hur det ser ut kan skilja sig lite beroende på vilket CMS du använder, men här är två videoguider som ger dig lite mer sammanhang:

Så här ändrar du placeringen av din språkmeny när du använder WordPress:

Så här ändrar du placeringen av din språkmeny när du använder Shopify:

Om du lade till Weglot på din sida med kod, kan du fortfarande ändra placeringen av din språkbytare genom att följa dessa instruktioner.

En snabb sammanfattning: Så anpassar du din webbplats språkmeny

Det finns två huvudsakliga sätt att lägga till en språkmeny på din webbplats:

1. Designa och utveckla din egen. Det här är inget jätteprojekt, men det är bara nödvändigt om du inte redan använder översättningsprogram för att hantera din flerspråkiga webbplats. När du designar din språkmeny, tänk på att den ska vara: (1) lätt att hitta, (2) tydlig med vilka språk som erbjuds, och (3) tematiskt lik din design.

2. Använd översättningsprogram för webbplatser. Alla översättningsprogram för webbplatser som är värda namnet ger dig en anpassningsbar språkbytare. Ovan tittade vi på hur du kan anpassa din språkbytare när du använder Weglots översättningsprogram, inklusive att lägga till flaggor, visa hela språknamnet och välja var på din sida din språkbytare ska placeras.

Om du är redo att låta Weglot förenkla ditt översättningsprojekt och hjälpa dig att nå din globala publik snabbare, starta din 14-dagars kostnadsfria provperiod idag, utan förpliktelser.