Sprogvælgeren er et vigtigt element, som du bør være meget opmærksom på, når du opretter en flersproget hjemmeside, fordi sprogvælgeren er det, brugerne ofte besøger, når de vil skifte sprog.
En effektiv sprogskifterknap kan give flere fordele for en hjemmeside, lige fra at øge web-optimering til at øge salget.
I denne artikel vil vi diskutere bedste praksis for at designe sprogvælgere. Lad os diskutere det yderligere i den følgende artikel.
Hvad er en sprogvælger?
En sprogvælger er et brugergrænselement 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.
Sprogvælgeren viser normalt en liste over tilgængelige sprog, og brugeren kan vælge det ønskede sprog fra denne liste. Når der er valgt, vises grænsefladeindhold, 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 bred brugergruppe.
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 skal du tilpasse din sprogvælger?
Tilpasning af sprogvælgeren på en flersproget hjemmeside har flere vigtige fordele.
- Brandtilpasning og visuel stil: Ved at tilpasse sprogvælgeren kan du sikre, at udseendet og stilen på det anvendte sprog stemmer overens med din hjemmesides branding og visuelle stil. Du kan tilpasse knapper eller menuer til sprogvælgeren, 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 begrænse visse 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 for at gøre det nemt for brugerne at finde. Du kan også tilføje funktioner som underretninger eller instruktioner til sprogskifter, som hjælper brugerne med at forstå, hvordan man bruger funktionen nemt.
- Møde forskellige brugerbehov: Hver bruger har forskellige sprogpræferencer. Ved at tilpasse sprogskiftet kan du imødekomme brugere med forskellige sprogbaggrunde. Dette kan omfatte lokale brugere, internationale besøgende eller brugere, der er mere komfortable på et andet sprog.
- Øg konverteringsraten: korrekt sprogskifter-tilpasning kan også give fordelen ved at øge salgsomsætningen. 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 din salgsniveau ikke også vil stige.
Forskellige typer af sprogvælger
Enhver hjemmesideejer vil bestemt 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 landflag 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 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", "Engelsk", eller "Fransk" 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-sprogvæ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 valgsmenu er en type sprogskifter, der bruger en dropdown-menu 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 en sprogvelger hjemmeside, hvor brugerne kan direkte skrive deres sprog eller destinationsland.
Rullemenu vs. Liste vs. Pop-up: Hvilken fungerer bedst?
Valg af 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 websides 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 |
Rullemenu | Kompakt, ren, skalerbar, med mange sprog | Kræver interaktion (klik/tryk), kan måske ikke være tydelig for alle brugere | Websites med flere sprog og pladsbegrænsninger |
Tekstliste | Synlig uden interaktion, hurtigere adgang til nøgle sprog | Kan tilstoppe brugergrænsefladen, ikke skalerbar for mange sprog | Websteder med 2–4 primære sprogindstillinger |
Pop-up-vindue | 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
At designe en effektiv sprogvelger indebærer at levere en sømløs oplevelse på tværs af 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 sprogvælger er klar, bekvem og tilgængelig for alle brugere.
Prioriter responsivt design
De fleste brugere får adgang til 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 hjemmesidens sprogvælger sådan ud.
Derefter, når man ser fra mobilen, kan sprogvælgeren stadig tilgås let og forsvinder ikke eller flytter sig.
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.
Tænksom placering i grænsefladen
Placer sprogvælgeren i meget synlige, forventede områder såsom øverste højre hjørne af sidehovedet eller nederste sidefod. Disse er intuitive steder, hvor brugere typisk leder efter sprogindstillinger.
Undgå at skjule vælgeren inde i tvetydige ikoner eller sekundære menuer. Hold dens placering konsekvent på tværs af alle sider, så brugere, der ofte skifter mellem sprog, nemt kan finde den 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 f.eks. skærmlæsere med at forstå elementets rolle og funktionalitet.
Implementering af tilgængelighed opfylder WCAG-standarder og sikrer, at dit websted er inkluderende og brugbart for et bredere publikum. Inkluderende design gavner alle, ikke kun brugere med specifikke behov.
Brug klare og genkendelige sprogetiketter
Vis hver sprogindstilling ved hjælp af dets oprindelige mærkat, for eksempel “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.
Lokale betegnelser 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å overbelastning 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 almindeligt 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 trafikanalyse 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 et enkelt 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 konsistente og kulturelt neutrale på tværs af dit design.
Hold dig konsekvent med webstedets design og branding
Din sprogvelger skal visuelt stemme overens med din hjemmesides overordnede stil. Uanset om du bruger knapper, tekstlinks eller ikoner, skal du sikre, at typografi, farver og hover-tilstande matcher dit brand. Dette forbedrer tilliden og styrker brugeroplevelsen.
Hvis du bygger en brugerdefineret vælger, skal du teste den på tværs af forskellige browsere og enheder for at sikre, at den fungerer som tilsigtet. Konsekvent design og pålidelig funktionalitet bidrager til en problemfri flersproget brugerrejse.
Indstilling af en sprogvælger med Linguise i 7 trin
På dette tidspunkt kender du de bedste fremgangsmåder for sprogvælgerne. Denne oversættelse kan udføres, efter du har brugt hjemmesidens oversættelsestjeneste. Dog tilbyder ikke alle oversættelsestjenester fleksibilitet i sprogvælgerens indstillinger.
Men du behøver ikke bekymre dig, fordi Linguise ikke er sådan. Linguise er en automatisk oversættelsestjeneste, der tilbyder brugerdefineret sprogskifter. 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 vil blive udført automatisk på blot sekunder, efter at du har tilføjet sproget til sprogskifteren på hjemmesiden.
- Der er mere end 80+ tilgængelige sprog som kan tilføjes til sprogvælgeren.
- 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 sprogvariationer på en side.
- Du kan opsætte sprogvælger fleksibelt efter hjemmesidens behov, startende fra ikonet, farven og sprognavnet.
- Du kan se statistik over besøgende sidevisninger per sprog, for hvert sprog, der er tilføjet til sprogvælgeren.
I denne vejledning vil vi bruge WordPress som et eksempel på det anvendte CMS.
Trin 1: Opret 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 næste 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
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 vellykket tilføjelse af en hjemmeside, åbn derefter WordPress-dashboardet og installer Linguise-pluginet, gør dette ved at følge Plugins > Tilføj ny > Linguise > Installer > Aktiver.
Hvis plugin'et allerede er installeret, skal du gå til Linguise -dashboardet og kopiere API-nøglen.
Åbn derefter Linguise -plugin og indsæt API-koden, som du fik fra Linguise -dashboardet i den følgende kolonne.
Trin 4: Opsætning af hovedvisning
For at konfigurere en sprogskifter eller vise sprogflag, er trinene via Linguise dashboard i Indstillinger > Sprogflag menulinse.
Under den første opsætning vil vi foretage justeringer af hoveddisplayet 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. På venstre side 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 position, der er let synlig for besøgende.
Til sidst skal du beslutte om kombinationspræferencen for at vise sprogmulighederne. Du kan vælge mellem muligheder som f.eks. 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 nedenunder hoveddisplaysektionen komme på tværs af designkonfigurationer specifikt for flaget. Billedet nedenfor demonstrerer nogle af de tilgængelige indstillingsmuligheder.
- Visning af sprognavn: Du har mulighed for at vise sprognavnet baseret på enten landet eller selve sproget. 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 farven og størrelsen på flaget
Når flag-designet 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 mange tilpasselige indstillinger, herunder:
- Flag 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.
- Poppup-sprogfarve: Denne indstilling bestemmer farven på sprogtitlen i pop-up- eller dropdown-områderne.
- Flag størrelse: Du har mulighed for at ændre størrelsen på flaget efter dine præferencer.
- Sprog navn hover farve: Denne indstilling styrer tekstfarven, når du holder musen over sprognavne.
- Popup-sprog hover farve: Tilsvarende bestemmer denne indstilling tekstfarven, når du holder musen over sprogtitlen i popup eller dropdown.
Trin 7: Indstil flagets 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 gennemført, er her et eksempel på visning af sprogvelger ved hjælp af en pop op, placeret i øverste højre hjørne og med brug af initialer. Dette er blot et eksempel, du kan tilpasse resten efter ø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 sprogskifter for OpenCart, sprogskifter for Drupal, og indstilling af sprogskifter 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ælgere og hvordan man gør det ved hjælp af Linguise! Tro mig, at oprette en sprogvælger kan give mange fordele og sikre optimering baseret på de ovennævnte punkter.
Når du opretter en sprog væ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, registrer en Linguise-konto, tilføj din hjemmeside, og finjuster sprogvælgeren for at give en bedre brugeroplevelse. Glem ikke at prøve 1-måneds gratis prøveversionen for at nyde Linguise’s overlegne funktioner!
