Sprogvælgeren er et vigtigt element, som du bør være meget opmærksom på, når du opretter et flersproget website , fordi sprogskifteren ofte er det, brugerne besøger, når de vil skifte sprog.
En effektiv knap til sprogskift kan give flere fordele for et website, fra øget weboptimering til øget salg.
I denne artikel vil vi diskutere bedste praksis for design af sprogvælgere. Lad os diskutere det nærmere i den følgende artikel.
Nøglepunkter: Bedste praksis for design af sprogvælger
Strategisk placering maksimerer brugen
Placering i header/desktop og hamburger-/mobilmenu sikrer tilgængelighed uden at forstyrre brugeroplevelsen eller sidens hastighed.
Smart automatisk detektion med overstyring
Registrer browserens sprog, men giv altid mulighed for nem manuel tilsidesættelse, og husk brugerens præferencer via cookies.
SEO + tilgængelighed er afgørende
Implementér hreflang-tags, ARIA-labels til skærmlæsere, berøringsvenligt design og JavaScript-fri fallback til crawlers.
Hvad er en sprogvælger?
En sprogvælger er et brugergrænsefladeelement eller en funktion, der giver brugerne mulighed for at vælge det sprog, de ønsker at interagere med en hjemmeside, applikation eller enhver digital platform på. Den findes almindeligvis på hjemmesider, softwareapplikationer og andre digitale grænseflader for at imødekomme brugere, der taler forskellige sprog.
Sprogvælgeren viser normalt en liste over tilgængelige sprog, og brugeren kan vælge det ønskede sprog fra denne liste. Når det er valgt, vises grænsefladens indhold, herunder tekst, etiketter og nogle gange billeder, på det valgte sprog. Dette er især vigtigt for websteder og apps, der betjener et globalt publikum eller en mangfoldig brugergruppe.
Sprogvælgere bidrager til en bedre brugeroplevelse ved at gøre digitalt indhold tilgængeligt for et bredere publikum, uanset deres sprogfærdigheder. De er en central komponent i lokaliseringsindsatsen, som gør det muligt for udviklere og designere at tilpasse deres produkter til forskellige sproglige og kulturelle kontekster.
Hvorfor skal du tilpasse din sprogskifter?
Tilpasning af sprogskifteren på et flersproget websted har flere vigtige fordele.
- Brand alignment og visuel stil: Ved at tilpasse sprogskifteren kan du sikre, at udseendet og stilen af det anvendte sprog er i overensstemmelse med dit websites branding og visuelle stil. Du kan tilpasse sprogskifteknapper eller -menuer, så de passer til dit websites overordnede design og skaber en ensartet brugeroplevelse.
- Større kontrol over viste sprog: Nogle gange kan du ønske at begrænse visse sprog, der vises i sprogvælgeren. For eksempel kan du have en begrænset version af dit website på flere sprog, og du ønsker kun at vise disse sprog i sprogvælgeren. Ved at tilpasse sprogvælgeren kan du vælge, hvilke sprog der vises, hvilket giver dig mere kontrol over det tilgængelige indhold.
- Optimeret brugeroplevelse: Ved at tilpasse sprogskifteren kan du skabe en optimeret brugeroplevelse. Du kan for eksempel justere layoutet eller placeringen af sprogskifteren, så det er nemt for brugerne at finde den. Du kan også tilføje funktioner som notifikationer eller instruktioner til sprogskift, der hjælper brugerne med nemt at forstå, hvordan funktionen bruges.
- Imødekom forskellige brugerbehov: Hver bruger har forskellige sprogpræferencer. Ved at tilpasse sprogskiftet kan du imødekomme behovene hos brugere med forskellige sproglige baggrunde. Det kan omfatte lokale brugere, internationale besøgende eller brugere, der er mere komfortable på et andet sprog.
- Øg salgskonvertering: korrekt tilpasning af sprogskifteren kan også give fordelen ved at øge salgskonverteringen. Fordi en effektiv sprogskifter kan give brugeren komfort, når de interagerer med dit website. Ifølge data fra CSA Research sagde 72,4 % af forbrugerne, at de ville være mere tilbøjelige til at købe produkter, der havde information på deres eget sprog. Så det er umuligt, at dit salgsniveau ikke også vil stige.
Forskellige typer af sprogvælger
Enhver ejer af et websted vil helt sikkert nøje overveje, hvordan deres sprogvælger ser ud, og hvert websted vil naturligvis have forskellige præferencer. For dem af jer, der leder efter en type sprogvælger, der kan bruges, er her nogle af dem.
Sprogknap
Dette er en af de almindeligt anvendte typer af sprogskiftere. Sprogknappen er typisk et ikon eller en tekst, der angiver det sprog, der vises, for eksempel “EN” for engelsk eller et nationalflag, der repræsenterer et bestemt sprog. Når brugerne klikker på sprogknappen, omdirigeres de til den version af webstedet, der er på det relevante sprog.
For sprogknapper anbefales det at vise et begrænset antal sprog for at undgå en rodet visning. Generelt kan mere end 4 til 5 sprog skabe en travl visuel effekt. Det er vigtigt at placere knappen et synligt sted, så brugerne nemt kan finde den. Vi vil diskutere disse aspekter yderligere i næste afsnit af denne artikel.
Sprogknapper kan være velegnede til virksomheder, der henvender sig til specifikke markeder eller betjener internationale fællesskaber på bestemte lokationer. Et eksempel på brugen af sprogknappen på WHO's websted er vist nedenfor.
Tekstlink
Tekstlinks er en type sprogskifter, der bruger tekst i form af sprognavnet som et link. For eksempel kan du vise tekstlinks som “English”, “Français” eller “Español”, der fører brugerne til en version af webstedet på det valgte sprog. Dette tekstlink placeres normalt i en liste eller rullemenu for at gøre det nemmere for brugerne at vælge det ønskede sprog.
En type link-sprogvælger bruges af den store virksomhed Facebook. Ud over de anførte sprog kan du også trykke på (+) ikonet for at finde flere sprog.
Derefter oversættes siden straks til det tidligere valgte sprog.
Valgmenu
En valgmenu er en type sprogskifter, der bruger en rullemenu eller åben menu til at vælge et sprog. Når brugerne klikker på valgmenuen, ser de en liste over tilgængelige sprog og kan vælge det ønskede sprog. Valgmenuen kan indeholde landeikoner eller flag som sprogindikatorer samt sprognavne i teksten.
Valgmenuen er ganske anderledes end sprogknappen; denne type er mere kompleks end blot en knap. Som eksemplet nedenfor, der kommer fra Porsches hjemmeside.
De tilbyder et websted med en sprogvælger, hvor brugerne direkte kan skrive deres sprog eller destinationsland.
Dropdown vs. liste vs. pop-up: Hvad fungerer bedst?
At vælge den rigtige interaktionsmodel til din sprogvælger er afgørende for at levere en problemfri og intuitiv brugeroplevelse. Hver metode—uanset om det er dropdown, inline-liste eller pop-up—tilbyder forskellige fordele afhængigt af dit websites layout, antallet af understøttede sprog og brugeradfærd. Nedenfor er en sammenligning af de tre vigtigste interaktionsmodeller til sprogvalg med fokus på UX, tilgængelighed og implementeringskontekst.
Type | Styrker | Begrænsninger | Bedste anvendelsesscenarie |
Rullemenu | Kompakt, ren, skalerbar, med mange sprog | Kræver interaktion (klik/tap), er måske ikke tydeligt for alle brugere | Flersprogede websites med pladsbegrænsninger |
Tekstliste | Synlig uden interaktion, hurtigere adgang til nøglesprog | Kan skabe rod i brugergrænsefladen, ikke skalerbar til mange sprog | Websites med 2–4 primære sprogmuligheder |
Pop-up | Kan indeholde et søgefelt, fleksibelt UI-design | Kan forstyrre brugerens flow, kræver en tydelig lukkeknap og tilgængelighed | Globale websteder med 10+ sprog |
Bedste praksis og tips til sprogvælger
Design af en effektiv sprogvælger indebærer at levere en problemfri oplevelse på tværs af alle enheder og sikre tilgængelighed for brugere med forskellige baggrunde. Med et stadigt mere globalt publikum bør din sprogskifter være intuitiv, tilgængelig og responsiv for at sikre, at brugere kan interagere komfortabelt på deres foretrukne sprog.
Nedenfor finder du bedste praksis, du kan anvende for at sikre, at din sprogvælger er tydelig, bekvem og tilgængelig for alle brugere.
Prioritér responsivt design
De fleste brugere tilgår websites fra mobile enheder, så din sprogvælger bør være responsiv og mobilvenlig. Sørg for, at knappen eller menuen er nem at trykke på, ikke dækker vigtigt indhold og forbliver synlig på mindre skærme.
For eksempel ser sprogvælgerens websted sådan ud.
Når man ser fra mobilsiden, kan sprogvælgeren stadig nemt tilgås og flytter sig eller forsvinder ikke.
Brug rullelister eller udvidelige menuer for at holde layoutet ryddeligt, og sørg for, at trykmål har tilstrækkelig afstand til behagelig interaktion. Det hjælper brugere med nemt at vælge deres foretrukne sprog uden frustration forårsaget af trange eller svære at klikke på elementer.
Gennemtænkt placering i grænsefladen
Placer sprogvælgeren på meget synlige, forventede steder som øverste højre hjørne af headeren eller i bunden af footeren. Det er intuitive placeringer, hvor brugerne typisk leder efter sprogindstillinger.
Undgå at skjule vælgeren inde i tvetydige ikoner eller sekundære menuer. Hold dens placering konsekvent på alle sider, så brugere, der ofte skifter sprog, nemt kan finde den på ethvert tidspunkt.
Brug tilgængelighedsattributter (ARIA)
For at sikre, at din sprogvælger er tilgængelig for brugere med handicap, skal du bruge ARIA-attributter (Accessible Rich Internet Applications) som aria-label, aria-haspopup og aria-expanded. Disse hjælper hjælpeteknologier som skærmlæsere med at forstå elementets rolle og funktionalitet.
Implementering af tilgængelighed opfylder WCAG-standarderne og sikrer, at dit websted er inkluderende og brugbart for et bredere publikum. Inkluderende design gavner alle, ikke kun brugere med særlige behov.
Brug klare og genkendelige sprogbetegnelser
Vis hver sprogindstilling med dens oprindelige betegnelse, for eksempel “Español” i stedet for “Spanish” eller “Deutsch” i stedet for “German.” Det gør det muligt for brugere hurtigt at genkende deres foretrukne sprog, selv hvis de ikke forstår det aktuelle sprog på webstedet.
Native etiketter er mere inkluderende og reducerer den kognitive belastning, især for internationale brugere. Undgå at bruge uklare forkortelser eller sprogkoder, medmindre dit publikum kender dem.
Undgå at overbelaste med for mange valgmuligheder
At vise for mange sprogvalg på én gang kan overfylde grænsefladen og forvirre brugerne. Vis kun de mest relevante eller almindeligt anvendte sprog først, og placér resten i en rullemenu eller under en “Flere sprog”-sektion.
Dette holder grænsefladen ren og forbedrer brugervenligheden, især på mobil. Brug webtrafikanalyse til at beslutte, hvilke sprog der skal prioriteres eller skjules.
Brug passende ikoner og visuelle signaler (uden at bruge flag)
Visuelle signaler som globusikoner (🌐), nedadgående pile (▾) eller fremhævning af aktiv tilstand hjælper brugerne med at forstå, at et element er klikbart. Undgå dog at bruge nationale flag til at repræsentere sprog, da et sprog kan tales i flere lande.
Flag kan også have kulturelle eller politiske implikationer. Hvis du bruger visuelle elementer, skal du parre dem med tekstetiketter for at sikre klarhed og holde ikoner konsistente og kulturelt neutrale i hele dit design.
Hold dig konsekvent i forhold til webstedsdesign og branding
Din sprogvælger bør visuelt matche dit websites overordnede stil. Uanset om du bruger knapper, tekstlinks eller ikoner, skal du sikre, at typografi, farver og hover-tilstande matcher dit brand. Dette øger tilliden og styrker brugeroplevelsen.
Hvis du bygger en brugerdefineret vælger, skal du teste den i forskellige browsere og på forskellige enheder for at sikre, at den fungerer efter hensigten. Konsistent design og pålidelig funktionalitet bidrager til en problemfri flersproget brugerrejse.
Opsætning af en sprogvælger med Linguise i 7 trin
På dette tidspunkt kender du bedste praksis for sprogvælgere. Denne oversættelse kan udføres, efter du har brugt webstedets oversættelsestjeneste. Dog tilbyder ikke alle oversættelsestjenester fleksibilitet i indstillingerne for sprogvælgeren.
Men du behøver ikke bekymre dig, for Linguise er ikke sådan. Linguise er en automatisk oversættelsestjeneste, der giver brugeren mulighed for at tilpasse sprogskifteren. Nogle af de fordele, du får ved at bruge Linguise , omfatter.
- Linguise kan bruges og integreres i mere end 40 CMS (WordPress, Joomla, Drupal osv.).
- Oversættelse til forskellige sprog udføres automatisk i løbet af få sekunder, efter du har tilføjet sproget til sprogskifteren på webstedet.
- Der er mere end 80+ sprog tilgængelige , som kan tilføjes til sprogvælgeren.
- Linguise vil automatisk forberede en unik URL i overensstemmelse med oversættelsens målsprog. For eksempel URL'en linguise.com/de/ for en side, der oversættes til tysk.
- Den opretter automatisk en kanonisk URL for at hjælpe med at undgå duplikeret indhold i søgemaskiner, når du har sprogvariationer på en side.
- Du kan opsætte sprogskifteren fleksibelt efter hjemmesidens behov, lige fra ikonet og farven til sprognavnet.
- Du kan se statistik over besøgendes sidevisninger pr. sprog for hvert sprog, der er tilføjet sprogvælgeren.
I denne vejledning bruger vi WordPress som eksempel på det anvendte CMS.
Trin 1: Opret en gratis Linguise -konto
For at få adgang til sprogvælgeren på Linguise, er det første skridt, du skal gøre, at oprette en konto på Linguise. Linguise tilbyder også en gratis prøveperiode på en måned, som inkluderer en række funktioner, du kan drage fordel af.
Trin 2: Tilføj domæne til dit flersprogede website
Det andet trin er at tilføje webstedsdomænet i Linguise , som du allerede ejer, til Linguise -dashboardet. Der er flere ting, du skal udfylde, startende fra.
- Konto
- URL'er
- Platform
- Sprog
- Oversættelsessprog
- Oversæt URL
Derefter skal du aktivere API-nøglen og indstille sprog-URL'en. For en komplet guide til at tilføje et webstedsdomæne kan du læse dokumentationen, mens du specifikt for WordPress kan se det ved at installere Linguise automatisk oversættelse på WordPress eller se videovejledningen nedenfor.
Trin 3: Installer pluginnet Linguise
Når du har tilføjet et website, skal du åbne WordPress -dashboardet og installere Linguise -pluginnet. Det gør du ved at gå til Plugins > Tilføj nyt > Linguise > Installer > Aktivér.
Hvis plugin'et allerede er installeret, skal du gå til Linguise -dashboardet og kopiere API-nøglen.
Åbn derefter Linguise -pluginet, og indsæt den API-kode, du fik fra Linguise -dashboardet, i følgende kolonne.
Trin 4: Opsæt hovedvisning
For at konfigurere en sprogskifter eller vise sprogflag, foregår trinnene via Linguise -dashboardet i Indstillinger > menuen Visning af sprogflag.
Under den indledende opsætning foretager vi justeringer af hovedvisningen under hensyntagen til de forskellige komponenter.
En indledende overvejelse er konfigurationen af visningsformatet for sproglisten, som tilbyder tre valgmuligheder: side om side, dropdown eller popup. I venstre side vises en forhåndsvisning af hvert format.
Det første format, som vist nedenfor, er et side-om-side-layout.
Det følgende format anvender en rullemenu-stil, som vist på billedet nedenfor.
Endelig har vi popup-formatet som den sidste mulighed.
Dernæst går vi videre til næste trin, som indebærer at konfigurere placeringen af sprogskifteren. Du har fleksibilitet til at vælge mellem forskellige placeringsmuligheder, så det er vigtigt at vælge en placering, der let kan ses af besøgende.
Til sidst skal du beslutte, hvilken kombination du foretrækker til visning af sprogvalgmulighederne. Du kan vælge mellem muligheder som flag + sprognavn, flag + kort navn eller blot vise flaget alene. Denne beslutning afhænger af dine specifikke designpræferencer og dine målgruppers præferencer.
Trin 5: Sæt flagdesignet
Derefter vil du under hovedvisningssektionen støde på designkonfigurationer specifikt til flaget. Billedet nedenfor viser nogle af de tilgængelige indstillingsmuligheder.
- Sprognavn visning: Du har mulighed for at vise sprognavnet baseret på enten landet eller selve sproget. For eksempel kan du vælge at vise “German” eller “Deutsch.”
- Engelsk flagtype: Denne indstilling er relevant, når du arbejder med sprog, der har flere varianter, såsom “English USA” eller “English Britain”. Lignende valg kan foretages for sprog som spansk, taiwansk, tysk og portugisisk.
- Flagstil: Denne indstilling giver dig mulighed for at definere formen på flagikonet, om det skal være rundt eller firkantet (rektangulært).
Trin 6: Indstil flagets farve og størrelse
Når flagdesignet er sat op, indebærer næste trin at justere farver, størrelse og forskellige andre elementer. I følgende interface finder du adskillige tilpasningsmuligheder, herunder:
- Flaggranse-radius: Dette giver dig mulighed for at tilpasse grænseradius i pixels, når du bruger et rektangulært flag.
- Farve på sprognavn: Du kan vælge standardtekstfarven for sprognavnet.
- Sprogfarve i popup: Denne indstilling bestemmer farven på sprogtitlen i popup- eller dropdown-områderne.
- Flagstørrelse: Du har mulighed for at ændre flagets størrelse efter dine præferencer.
- Sprognavn ved hover-farve: Denne indstilling styrer tekstfarven, når musen holdes over sprognavne.
- Popup-sprog farve ved hover: Tilsvarende bestemmer denne indstilling tekstfarven, når musen holdes over sprogtitlen i popup- eller dropdown-menuen.
Trin 7: Indstil flagboks-skygge
I den sidste fase har du mulighed for at tilpasse skyggeindstillingerne for flaget. Den første indstilling giver dig mulighed for at angive en skygge for hvert flag, der vises på dit website, mens den efterfølgende indstilling vedrører skyggeeffekten, når du holder musen over sprogflaget.
Husk at klikke på Gem -knappen for at bevare de tilpasningsindstillinger, du har foretaget for sprogskifteren. Dette sikrer, at dine valgte konfigurationer for skyggeeffekterne implementeres og gemmes til fremtidig brug.
Når alle konfigurationerne er gennemført, er her et eksempel på visning af sprogvælgeren ved hjælp af en popup, placeret i øverste højre hjørne og med initialer. Dette er blot et eksempel, du kan tilpasse resten, som du ønsker, og efter webstedets behov.
Ud over WordPress CMS kan du også bruge andre hjemmesideplatforme og følge den detaljerede vejledning, såsom opsætning af switcher til OpenCart, sprogskifter til Drupal, og indstilling af switcher til PrestaShop.
Design din sprogvælger for en problemfri flersproget oplevelse med Linguise!
Her har du fået indsigt i bedste praksis for design af sprogvælgere, og hvordan du gør det med Linguise! Tro mig, oprettelse af en sprogskifter kan give mange fordele og sikre optimering baseret på de punkter, der er nævnt ovenfor.
Når du opretter en sprogvælger, skal du sørge for at følge de tips og bedste praksisser, som vi har forklaret ovenfor, lige fra brug af ikoner og valg af relevante sprog til placering.
Nu, opret en Linguise -konto, tilføj dit website, og finjuster sprogvælgeren for at give en bedre brugeroplevelse. Glem ikke at prøve den 1-måneders gratis prøveperiode for at nyde Linguises overlegne funktioner!
