Sprogvelgeren er et vigtigt element, som du bør være meget opmærksom på, når du opretter et flersproget website, fordi sprogskifteren er det, brugerne ofte besøger, når de vil skifte sprog.
En effektiv sprogskifterknap kan give flere fordele for et website, lige fra at øge web-optimering til at øge salget.
I denne artikel vil vi diskutere bedste praksis for design af sprogvelgere. Lad os diskutere det yderligere i den følgende artikel.
Nøglepunkter: Bedste praksis for design af sprogvælger
Strategisk placering maksimerer brugen
Placering af header-/desktop- og hamburger-/mobilmenuer sikrer tilgængelighed uden at forstyrre brugeroplevelsen eller sidehastigheden.
Smart automatisk detektion med overstyring
Registrer browsersprog, men sørg altid for nem manuel overstyring og husk brugerpræferencer via cookies.
SEO + tilgængelighed er afgørende
Implementer hreflang-tags, ARIA-etiketter til skærmlæsere, berøringsvenligt design og JavaScript-fri fallback til crawlere.
Hvad er en sprogvelger?
En sprogvelger er et brugergrænsefladeelement eller en funktion, der giver brugerne mulighed for at vælge det sprog, de ønsker at interagere med på en hjemmeside, applikation eller enhver digital platform. Det findes almindeligvis på hjemmesider, softwareapplikationer og andre digitale grænseflader for at imødekomme brugere, der taler forskellige sprog.
Sprogvelgeren 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 indholdet af grænsefladen, herunder tekst, etiketter og undertiden billeder, på det valgte sprog. Dette er især vigtigt for hjemmesider og apps, der betjener et globalt publikum eller en mangfoldig brugerbase.
Sprogvælgere bidrager til en bedre brugeroplevelse ved at gøre digitalt indhold tilgængeligt for et bredere publikum, uanset deres sprogfærdighedsniveau. De er en nøglekomponent i lokaliseringsindsatsen, der giver udviklere og designere mulighed for at tilpasse deres produkter til forskellige sproglige og kulturelle sammenhænge.
Hvorfor tilpasse din sprogskifter?
Tilpasning af sprogskifteren på et flersproget websted har flere vigtige fordele.
- Mærkejustering og visuel stil: Ved at tilpasse sprogskifteren kan du sikre, at udseendet og stilen på det anvendte sprog stemmer overens med din websites branding og visuelle stil. Du kan tilpasse knapper eller menuer til sprogskifteren, så de passer til det overordnede design på din hjemmeside og skaber konsistens i brugeroplevelsen.
- Større kontrol over viste sprog: Nogle gange vil du måske gerne begrænse bestemte sprog, der vises i sprogskifteren. For eksempel kan du have en begrænset version af din hjemmeside på flere sprog, og du vil kun vise disse sprog i sprogskifteren. Ved at tilpasse sprogskifteren 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. For eksempel kan du justere layoutet eller placeringen af sprogskifteren, så det er nemt for brugerne at finde. Du kan også tilføje funktioner som meddelelser eller instruktioner til sprogskift, der hjælper brugerne med at forstå, hvordan man bruger funktionen nemt.
- Møde forskellige brugeres behov: Hver bruger har forskellige sprogpræferencer. Ved at tilpasse sprogskift kan du imødekomme behovene hos brugere fra forskellige sprogbakgrunde. Dette kan omfatte lokale brugere, internationale besøgende eller brugere, der er mere komfortable på et andet sprog.
- Øg salgsomdannelsen: Korrekt sprogskifter-tilpasning kan også give fordelen ved at øge salgsomdannelsen. Fordi en effektiv sprogskifter kan give brugerkomfort, når de interagerer med din hjemmeside. Ifølge CSA Research-data 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 sprogvelger
Enhver hjemmesideejer vil helt sikkert overveje nøje, hvordan deres sprogvelger ser ud, hver hjemmeside vil naturligvis have forskellige præferencer. For dem af jer, der søger en type sprogvelger, der kan bruges, er her nogle af dem.
Sprogknap
Dette er en af de mest almindeligt anvendte typer af sprogskifter. Sprogknappen er normalt et ikon eller en tekst, der angiver det sprog, der vises, f.eks. “DA” for dansk eller et lands flag for at repræsentere et bestemt sprog. Når brugerne klikker på sprogknappen, vil de blive omdirigeret til den version af hjemmesiden på det relevante sprog.
For sprogknapper anbefales det at vise et begrænset antal sprog for at undgå et rodet display. Generelt kan det at have mere end 4 til 5 sprog skabe en travl visuel effekt. Det er vigtigt at placere knappen på 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 målretter specifikke markeder eller betjener internationale fællesskaber på bestemte lokationer. Et eksempel på brug af sprogknappen på WHO's hjemmeside er som nedenfor.
Tekstlink
Tekstlinks er en type sprogskifter, der bruger tekst i form af sprognavnet som et link. For eksempel kan du vise tekstlinks som “Dansk,” “English,” eller “Español”, der fører brugerne til en version af hjemmesiden på det valgte sprog. Dette tekstlink placeres normalt på en liste eller i en dropdown-menu for at gøre det lettere for brugerne at vælge det ønskede sprog.
En type link sprog vælger bruges af det store firma Facebook, ud over de anførte sprog, kan du også trykke på (+) ikonet for at finde flere sprog.
Derefter vil siden straks blive oversat 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å indstillingsmenuen, vil de se en liste over tilgængelige sprog og kan vælge det ønskede sprog. Indstillingsmenuen kan indeholde landikoner eller flag som sprogindikatorer samt sprognavne i teksten.
Udvælgelsesmenuen er ganske anderledes end sprogknappen, denne type er mere kompleks end blot en knap. Ligesom eksemplet nedenfor, som kommer fra Porsches hjemmeside.
De tilbyder et sprogvelger-websted, hvor brugerne kan skrive deres sprog eller destinationsland direkte.
Rullemenu vs. Liste vs. Pop-up: Hvilken fungerer bedst?
At vælge den rigtige interaktionsmodel til din sprogvelger 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 din hjemmesidens layout, antal 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 anvendelsestilfælde |
Dropdown | Kompakt, ren, skalerbar, med mange sprog | Kræver interaktion (klik/tryk), kan være uklar for alle brugere | Flersprogede hjemmesider med pladsbegrænsninger |
Tekstliste | Synlig uden interaktion, hurtigere adgang til nøgle-sprog | Kan tilstoppe UI, ikke skalerbar for mange sprog | Sider med 2-4 primære sprogindstillinger |
Pop-up | Kan inkludere et søgefelt, fleksibelt UI-design | Kan forstyrre brugerflowet, har brug for en tydelig lukkeknap og tilgængelighed | Globale sider med 10+ sprog |
Bedste praksis og tips til sprogvelger
Design af en effektiv sprogvelger indebærer at levere en problemfri oplevelse på alle enheder og sikre tilgængelighed for brugere med forskellige baggrunde. Med en stadigt mere global målgruppe bør din sprogskifter være intuitiv, tilgængelig og responsiv for at sikre, at brugerne kan interagere komfortabelt på deres foretrukne sprog.
Nedenfor er bedste praksis, du kan anvende for at sikre, at din sprogvelger er tydelig, bekvem og tilgængelig for alle brugere.
Prioriter responsivt design
De fleste brugere tilgår hjemmesider fra mobile enheder, så din sprogvelger skal være responsiv og mobilvenlig. Sørg for, at knappen eller menuen er let at trykke på, ikke dækker vigtigt indhold og forbliver synlig på mindre skærme.
For eksempel ser sprogvelgerens hjemmeside sådan ud.
Derefter, når man ser fra den mobile side, kan sprogvelgeren stadig tilgås let og forsvinder eller flytter sig ikke.
Brug dropdowns eller udvidelige menuer til at holde layoutet ryddeligt, og sørg for, at berøringsmål har nok afstand til komfortabel interaktion. Dette hjælper brugerne med at vælge deres foretrukne sprog let uden frustration forårsaget af trang eller svære at klikke på elementer.
Omhyggelig placering i grænsefladen
Placer sprogvelgeren på meget synlige, forventede områder såsom øverste højre hjørne af headeren eller nederste footer. Disse er intuitive steder, hvor brugere typisk søger efter sprogindstillinger.
Undgå at skjule velgeren inde i tvetydige ikoner eller sekundære menuer. Hold dens placering konsekvent på tværs af alle sider, så brugere, der skifter mellem sprog ofte, kan finde den let på ethvert tidspunkt.
Brug tilgængelighedsattributter (ARIA)
For at sikre, at din sprogvelger er tilgængelig for brugere med handicap, skal du bruge ARIA-attributter (Accessible Rich Internet Applications) såsom aria-label, aria-haspopup og aria-expanded. Disse hjælper hjælpeteknologier som skærmlæsere til at forstå elementets rolle og funktionalitet.
Implementering af tilgængelighed opfylder WCAG-standarder og sikrer, at dit websted er inkluderende og brugbart for en bredere målgruppe. Inkluderende design gavner alle, ikke kun brugere med specifikke behov.
Brug klare og genkendelige sproglabels
Vis hver sprogindstilling ved hjælp af dets oprindelige label, f.eks. “Español” i stedet for “Spanish” eller “Deutsch” i stedet for “German.” Dette giver brugerne mulighed for hurtigt at genkende deres foretrukne sprog, selvom de ikke forstår det aktuelle webstedsprog.
Oprindelige labels er mere inkluderende og reducerer den kognitive belastning, især for internationale brugere. Undgå at bruge uklare forkortelser eller sprogkoder, medmindre din målgruppe kender dem.
Undgå at overbelaste med for mange muligheder
Visning af for mange sprogindstillinger på én gang kan tilstoppe grænsefladen og forvirre brugerne. Vis kun de mest relevante eller hyppigt anvendte sprog først, og placer resten i en rullemenu eller under en "Flere sprog"-sektion.
Dette holder grænsefladen ren og forbedrer brugervenligheden, især på mobilen. Brug hjemmesidens trafikstatistik til at beslutte, hvilke sprog der skal prioriteres eller skjules.
Brug passende ikoner og visuelle signaler (uden at stole på flag)
Visuelle signaler som globus-ikoner (🌐), nedadgående pile (▾) eller aktive tilstandshøjdepunkter hjælper brugerne med at forstå, at et element kan klikkes. Undgå dog at bruge nationale flag til at repræsentere sprog, da ét sprog kan tales i flere lande.
Flag kan også have kulturelle eller politiske implikationer. Hvis du bruger visuals, skal du parre dem med tekstetiketter for at sikre klarhed og holde ikoner konsekvente og kulturelt neutrale på tværs af dit design.
Hold dig konsekvent med website-design og branding
Din sprogvelger skal visuelt stemme overens med din websites overordnede stil. Uanset om du bruger knapper, tekstlinks eller ikoner, skal du sikre, at typografi, farver og hover-tilstande matcher din branding. Dette forbedrer tilliden og styrker brugeroplevelsen.
Hvis du bygger en brugerdefineret velger, skal du teste den på tværs af forskellige browsere og enheder for at sikre, at den fungerer som tiltænkt. Konsekvent design og pålidelig funktionalitet bidrager til en problemfri flersproget brugerrejse.
Opsætning af en sprogvelger med Linguise i 7 trin
På dette tidspunkt kender du den bedste praksis for sprogvalg. Denne oversættelse kan udføres, efter du har brugt hjemmesidens oversættelsestjeneste. Dog tilbyder ikke alle oversættelsestjenester fleksibilitet i sprogvalgindstillinger.
Men du skal ikke bekymre dig, fordi Linguise ikke er sådan. Linguise er en automatisk oversættelsestjeneste, der tilbyder brugerdefineret sprogomskifter. Nogle af de fordele, du får, når du bruger Linguise , omfatter.
- Linguise kan bruges og integreres i mere end 40 CMS (WordPress, Joomla, Drupal, osv.).
- Oversættelse til forskellige sprog udføres automatisk på få sekunder, efter du har tilføjet sproget til sprogomskifteren på hjemmesiden.
- Der er mere end 80 tilgængelige sprog, som kan føjes til sprogvelgeren.
- Linguise vil automatisk forberede en unik URL i henhold til oversættelsens destinationssprog. For eksempel URL'en linguise.com/de/ for en side, der oversættes til tysk.
- Det vil automatisk oprette en kanonisk URL for at hjælpe med at undgå duplikatindhold i søgemaskiner, når du har sprogvarianter på en side.
- Du kan opsætte sprogskifteren fleksibelt efter webstedets behov, lige fra ikonet og farven til sprogets navn.
- Du kan se besøgendes sidevisningsstatistikker pr. sprog for hvert sprog, der føjes til sprogvælgeren.
I denne vejledning vil vi bruge WordPress som et eksempel på det anvendte CMS.
Trin 1: Oprettelse af en gratis Linguise -konto
For at få adgang til sprogskifteren på Linguise er det første skridt, du skal tage, at oprette en konto på Linguise. Linguise tilbyder også en gratis prøveperiode på en måned, som indeholder en række funktioner, du kan drage fordel af.
Trin 2: Tilføj domæne til din flersprogede hjemmeside
Det andet trin er at tilføje webstedsdomænet i Linguise, som du allerede ejer, til Linguise dashboard. Der er flere ting, du skal udfylde, startende fra.
- Konto
- URL'er
- Platform
- Sprog
- Oversættelsessprog
- Oversæt URL
Efter det skal du aktivere API-nøglen og indstille sprog-URL'en. For en komplet vejledning 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 pluginet Linguise
Efter at have tilføjet et websted, åbn derefter WordPress-dashboardet og installer Linguise-pluginet, gør dette ved Plugins > Tilføj ny > Linguise > Installer > Aktiver.
Hvis pluginet allerede er installeret, skal du gå til Linguise -dashboardet og kopiere API-nøglen.
Åbn derefter Linguise -pluginet og indsæt API-koden, som du fik fra Linguise -dashboardet, i følgende kolonne.
Trin 4: Opsætning af hoveddisplay
Til konfigurering af en sprogskifter eller visning af sprogflag, er trinene via Linguise-dashboardet i Indstillinger > Sprogflag-visningsmenu.
Under den første opsætning vil vi foretage justeringer af hovedskærmen under hensyntagen til de forskellige komponenter.
En indledende overvejelse er konfigurationen af sproglistens visningsformat, som tilbyder tre muligheder at vælge imellem: side-ved-side, dropdown eller pop-up. Til venstre er der en forhåndsvisning af hvert format.
Det første format, som vist nedenfor, er et side-ved-side-layout.
Følgende format anvender en dropdown-stil, som vist på billedet nedenfor.
Til sidst har vi popup-formatet som den sidste mulighed.
Derefter går vi videre til næste trin, som indebærer at konfigurere placeringen af sprogskifteren. Du har fleksibiliteten til at vælge mellem forskellige placeringsmuligheder, så det er vigtigt at vælge en placering, der er let at få øje på for besøgende.
Endelig skal du beslutte dig for kombinationspræferencen for at vise sprogvalgmulighederne. Du kan vælge mellem muligheder som flag + sprog navn, flag + kort navn eller blot vise flaget alene. Denne beslutning vil afhænge af dine specifikke designpræferencer og målgruppens præferencer.
Trin 5: Indstil flagdesign
Derefter vil du nedenfor hovedvisningssektionen komme på tværs af designkonfigurationer specifikt for flaget. Billedet nedenfor demonstrerer nogle af de tilgængelige indstillingsmuligheder.
- Sprog navn visning: Du har mulighed for at vise sprog navnet baseret på enten landet eller sproget selv. For eksempel kan du vælge at vise “Tysk” eller “Deutsch.”
- Engelsk flagtype: Denne mulighed er relevant, når der arbejdes med sprog, der har flere variationer, såsom “Engelsk USA” eller “Engelsk Storbritannien.” Lignende valg kan træffes for sprog som spansk, taiwanesisk, tysk og portugisisk.
- Flagstil: Denne indstilling giver dig mulighed for at definere formen på flagikonet, uanset om det skal være rundt eller firkantet (rektangulært).
Trin 6: Indstil farve og størrelse på flaget
Når flagdesignet er sat op, indebærer næste trin justering af farver, størrelse og forskellige andre elementer. I den følgende grænseflade finder du adskillige tilpasselige indstillinger, herunder:
- Flagets kant-radius: Dette giver dig mulighed for at tilpasse kant-radius i pixels, når du bruger et rektangulært flag.
- Sprognavn farve: Du kan vælge standardtekstfarven for sprognavnet.
- Popup-sprogfarve: Denne indstilling bestemmer farven på sprogtitlen i popup- eller dropdown-områderne.
- Flagstørrelse: Du har mulighed for at ændre størrelsen på flaget efter dine præferencer.
- Sprognavn hoverfarve: Denne indstilling styrer tekstfarven, når du holder musen over sprognavne.
- Popup-sprog hoverfarve: Tilsvarende bestemmer denne indstilling tekstfarven, når du holder musen over sprogtitlen i popup- eller dropdown-menuen.
Trin 7: Indstil flag box-shadow
I den sidste fase har du muligheden for at tilpasse skyggeindstillingerne for flagene. Den første indstilling giver dig mulighed for at specificere en skygge for hvert flag, der vises på din hjemmeside, 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 lavet til sprogskifteren. Dette sikrer, at dine valgte konfigurationer for skyggeeffekterne implementeres og gemmes til fremtidig brug.
Når alle konfigurationer er blevet udført, er her et eksempel på sprogvælgerens display ved hjælp af en pop op, placeret i øverste højre hjørne og ved hjælp af initialer. Dette er blot et eksempel, du kan tilpasse resten efter eget ønske og efter webstedets behov.
Bortset fra WordPress CMS, kan du også bruge andre website-platforme og følge den detaljerede guide, såsom opsætning af kontakt for OpenCart, sprogvælger for Drupal, og indstilling af kontakt for PrestaShop.
Design din sprogvælger til en problemfri flersproget oplevelse med Linguise!
Her har du fået indsigt i bedste praksis for at designe sprogvælger og hvordan man gør det ved hjælp af Linguise! Tro mig, at oprette en sprogskifter kan give mange fordele og sikre optimering baseret på de ovennævnte punkter.
Når du opretter en sprogvælger, skal du sørge for at følge de tips og bedste praksis, som vi har forklaret ovenfor, lige fra brug af ikoner og valg af relevante sprog til placering.
Nu, registrer en Linguise konto, tilføj dit website, og finjuster sprogvælgeren for at give en bedre brugeroplevelse. Glem ikke at prøve 1-måneders gratis prøveversion for at nyde Linguise’s overlegne funktioner!
