De taalkeuze is een belangrijk element waar u veel aandacht aan moet besteden bij het maken van een meertalige website omdat de taalwisselaar is wat gebruikers vaak bezoeken als ze van taal willen wisselen.
Een effectieve taalwisselaar-knop kan verschillende voordelen bieden voor een website, van het verhogen van weboptimalisatie tot het verhogen van de verkoop.
In dit artikel bespreken we de beste praktijken voor het ontwerpen van taalkeuzes. Laten we het verder bespreken in het volgende artikel.
Kernpunten: Best practices voor het ontwerpen van een taalselector
Strategische plaatsing maximaliseert het gebruik
De plaatsing van het menu in de header (desktop) en het hamburgermenu (mobiel) zorgt voor toegankelijkheid zonder de gebruikerservaring of de laadsnelheid van de pagina te beïnvloeden.
Slimme automatische detectie met override-functie
De browsertaal wordt gedetecteerd, maar er is altijd een eenvoudige mogelijkheid om deze handmatig aan te passen en de gebruikersvoorkeuren worden via cookies onthouden.
SEO + toegankelijkheid essentieel
Implementeer hreflang-tags, ARIA-labels voor schermlezers, een aanraakvriendelijk ontwerp en een JavaScript-vrije fallback voor crawlers.
Wat is een taalkeuze?
Een taalkeuzeknop is een gebruikersinterface-element of -functie waarmee gebruikers de taal kunnen selecteren waarmee ze willen communiceren met een website, applicatie of elk digitaal platform. Het wordt vaak aangetroffen op websites, softwareapplicaties en andere digitale interfaces om gebruikers tegemoet te komen die verschillende talen spreken.
De taalkeuzeknop toont gewoonlijk een lijst van beschikbare talen, en de gebruiker kan de taal van zijn keuze uit die lijst selecteren. Eenmaal geselecteerd, wordt de inhoud van de interface, inclusief tekst, labels en soms afbeeldingen, weergegeven in de geselecteerde taal. Dit is vooral belangrijk voor websites en apps die een wereldwijd publiek of diverse gebruikersgroep bedienen.
Taalkeuzes helpen bij het verbeteren van de gebruikerservaring door digitale inhoud toegankelijk te maken voor een groter publiek, ongeacht hun taalvaardigheid. Ze zijn een belangrijk onderdeel van lokalisatie-inspanningen, waardoor ontwikkelaars en ontwerpers hun producten kunnen aanpassen aan verschillende taalkundige en culturele contexten.
Waarom uw taalwisselaar aanpassen?
Het aanpassen van de taalwisselaar op een meertalige website heeft verschillende belangrijke voordelen.
- Merkalignatie en visuele stijl: Door de taalwisselaar aan te passen, kunt u ervoor zorgen dat de look en stijl van de gebruikte taal consistent zijn met de branding en visuele stijl van uw website. U kunt taalwisselaar-knoppen of menu's aanpassen om te passen bij het algehele ontwerp van uw website, waardoor consistentie in de gebruikerservaring ontstaat.
- Grotere controle over weergegeven talen: Soms wilt u misschien bepaalde talen beperken die worden weergegeven in de taalwisselaar. U hebt bijvoorbeeld een beperkte versie van uw website in verschillende talen en u wilt alleen die talen weergeven in de taalwisselaar. Door de taalwisselaar aan te passen, kunt u kiezen welke talen worden weergegeven, waardoor u meer controle hebt over de beschikbare inhoud.
- Geoptimaliseerde gebruikerservaring: Door de taalwisselaar aan te passen, kunt u een geoptimaliseerde gebruikerservaring creëren. U kunt bijvoorbeeld de lay-out of positie van de taalwisselaar aanpassen om het voor gebruikers gemakkelijk te maken om deze te vinden. U kunt ook functies toevoegen zoals meldingen of instructies voor het wisselen van taal die gebruikers helpen begrijpen hoe ze de functie gemakkelijk kunnen gebruiken.
- Voldoen aan de verschillende behoeften van gebruikers: Elke gebruiker heeft verschillende taalvoorkeuren. Door het aanpassen van de taalwisseling kunt u voldoen aan de behoeften van gebruikers met verschillende taalachtergronden. Dit kunnen lokale gebruikers, internationale bezoekers of gebruikers zijn die zich meer op hun gemak voelen in een andere taal.
- Verhoog de conversie van verkopen: juiste taalwisselaar-aanpassing kan ook het voordeel bieden van het verhogen van de conversie van verkopen. Omdat een effectieve taalwisselaar gebruikerscomfort kan bieden bij het interageren met uw website. Volgens CSA Research-gegevens zei 72,4% van de consumenten dat ze eerder producten zouden kopen die informatie in hun eigen taal hadden. Het is dus onmogelijk dat uw verkoopniveau niet zal stijgen.
Verschillende soorten taalkeuzes
Elke website-eigenaar zal zeker zorgvuldig overwegen hoe hun taalkeuze eruit ziet, elke website zal natuurlijk verschillende voorkeuren hebben. Voor degenen onder u die op zoek zijn naar een type taalkeuze dat kan worden gebruikt, zijn hier enkele opties.
Taal knop
Dit is een van de meest gebruikte soorten taalwisselaar. De taal knop is meestal een pictogram of tekst die de taal aangeeft die wordt weergegeven, bijvoorbeeld “NL” voor Nederlands of een landenvlag om een specifieke taal te vertegenwoordigen. Wanneer gebruikers op de taal knop klikken, worden ze doorgestuurd naar de versie van de website in de juiste taal.
Voor taal knoppen wordt aanbevolen om een beperkt aantal talen weer te geven om een rommelige weergave te vermijden. Over het algemeen kan het hebben van meer dan 4 tot 5 talen een druk visueel effect creëren. Het is belangrijk om de knop op een zichtbare locatie te plaatsen, zodat gebruikers deze gemakkelijk kunnen vinden. We zullen deze aspecten verder bespreken in de volgende sectie van dit artikel.
Taalkeuzeknoppen kunnen geschikt zijn voor bedrijven die specifieke markten bedienen of internationale gemeenschappen in bepaalde locaties dienen. Een voorbeeld van het gebruik van de taalkeuzeknop op de WHO-website is hieronder te zien.
Tekstlink
Tekstlinks zijn een type taalwisselaar die tekst in de vorm van de taalnaam als link gebruiken. U kunt bijvoorbeeld tekstlinks weergeven zoals “Nederlands,” “English,” of “Français” die gebruikers naar een versie van de website in de geselecteerde taal leiden. Deze tekstlink wordt meestal in een lijst of dropdownmenu geplaatst om het voor gebruikers gemakkelijker te maken om de gewenste taal te selecteren.
Een type linktaalselector wordt gebruikt door het grote bedrijf Facebook, naast de vermelde talen, kunt u ook op het (+) pictogram drukken om meer talen te vinden.
Daarna wordt de pagina onmiddellijk vertaald in de eerder geselecteerde taal.
Selectiemenu
Een selectiemenu is een type taalschakelaar dat een vervolgkeuzemenu of open menu gebruikt om een taal te selecteren. Wanneer gebruikers op het optiemenu klikken, zien ze een lijst met beschikbare talen en kunnen ze de gewenste taal selecteren. Het optiemenu kan landpictogrammen of -vlaggen bevatten als taalindicatoren, evenals taalnamen in de tekst.
Het selectiemenu is behoorlijk anders dan de taal knop, dit type is complexer dan alleen een knop. Net als het onderstaande voorbeeld dat afkomstig is van de website van Porsche.
Ze bieden een taalkeuzewebsite waarop gebruikers rechtstreeks hun taal of bestemmingsland kunnen invoeren.
Dropdown vs. Lijst vs. Pop-up: Wat werkt het beste?
Het kiezen van het juiste interactiemodel voor uw taalkeuzemenu is cruciaal voor het leveren van een naadloze en intuïtieve gebruikerservaring. Elke methode - of het nu een dropdown, inline lijst of pop-up is - biedt verschillende voordelen, afhankelijk van de lay-out van uw website, het aantal ondersteunde talen en het gebruikersgedrag. Hieronder volgt een vergelijking van de drie belangrijkste interactiemodellen voor taalkeuze, met focus op UX, toegankelijkheid en implementatiecontext.
Type | Sterktes | Beperkingen | Beste use case |
Dropdown | Compact, schoon, schaalbaar, met veel talen | Vereist interactie (klik/tik), is mogelijk niet voor alle gebruikers duidelijk | Meertalige websites met ruimtebeperkingen |
Tekstlijst | Zichtbaar zonder interactie, snellere toegang tot belangrijke talen | Kan de UI rommelig maken, niet schaalbaar voor veel talen | Sites met 2-4 primaire taalopties |
Pop-up | Kan een zoekveld bevatten, flexibel UI-ontwerp | Kan de gebruikersstroom verstoren, heeft een duidelijke sluitknop en toegankelijkheid nodig | Globale sites met 10+ talen |
Beste praktijken en tips voor taalkeuze
Het ontwerpen van een effectieve taalkeuze omvat het leveren van een naadloze ervaring op alle apparaten en het garanderen van toegankelijkheid voor gebruikers met verschillende achtergronden. Met een steeds groter wordend globaal publiek moet uw taalwisselaar intuïtief, toegankelijk en responsief zijn om ervoor te zorgen dat gebruikers comfortabel kunnen communiceren in hun voorkeurstaal.
Hieronder volgen beste praktijken die u kunt toepassen om ervoor te zorgen dat uw taalkeuze duidelijk, handig en toegankelijk is voor alle gebruikers.
Geef prioriteit aan responsief ontwerp
De meeste gebruikers bezoeken websites via mobiele apparaten, dus uw taalkeuzeschakelaar moet responsief en mobielvriendelijk zijn. Zorg ervoor dat de knop of het menu gemakkelijk te tikken is, geen belangrijke inhoud bedekt en zichtbaar blijft op kleinere schermen.
De taalkeuzewidget op de website ziet er bijvoorbeeld zo uit.
Wanneer bekeken vanaf de mobiele kant, kan de taalkeuzeschakelaar nog steeds gemakkelijk worden geopend en beweegt of verdwijnt niet.
Gebruik dropdowns of uitklapbare menu's om de lay-out netjes te houden en zorg ervoor dat aanraakdoelen voldoende ruimte hebben voor comfortabele interactie. Dit helpt gebruikers hun voorkeurstaal gemakkelijk te selecteren zonder frustratie veroorzaakt door krappe of moeilijk klikbare elementen.
Doordachte plaatsing in de interface
Plaats de taalkeuzeknop op zeer zichtbare, verwachte plaatsen zoals de rechterbovenhoek van de header of de onderkant van de footer. Dit zijn intuitieve locaties waar gebruikers doorgaans naar taalmogelijkheden zoeken.
Vermijd het verbergen van de selector in dubbelzinnige pictogrammen of secundaire menu's. Houd de plaatsing consistent op alle pagina's, zodat gebruikers die vaak de taal wijzigen het gemakkelijk kunnen vinden op elk moment.
Gebruik toegankelijkheidsattributen (ARIA)
Om ervoor te zorgen dat uw taalselector toegankelijk is voor gebruikers met een beperking, gebruikt u ARIA-kenmerken (Accessible Rich Internet Applications) zoals aria-label, aria-haspopup en aria-expanded. Deze helpen ondersteunende technologieën zoals schermlezers om de rol en functionaliteit van het element te begrijpen.
Toegankelijkheid implementeren voldoet aan WCAG-normen en zorgt ervoor dat uw site inclusief en bruikbaar is voor een breder publiek. Inclusief ontwerp heeft voordelen voor iedereen, niet alleen voor gebruikers met specifieke behoeften.
Gebruik duidelijke en herkenbare taal labels
Geef elke taaloptie weer met behulp van het oorspronkelijke label, bijvoorbeeld “Español” in plaats van “Spanish” of “Deutsch” in plaats van “German.” Hierdoor kunnen gebruikers hun voorkeurstaal snel herkennen, zelfs als ze de huidige site-taal niet begrijpen.
Oorspronkelijke labels zijn inclusiever en verminderen de cognitieve belasting, vooral voor internationale gebruikers. Vermijd het gebruik van obscure afkortingen of taal codes, tenzij uw publiek deze kent.
Vermijd overbelasting met te veel opties
Te veel taalopties tegelijk weergeven kan de interface rommelig maken en gebruikers in verwarring brengen. Geef alleen de meest relevante of meest gebruikte talen weer en plaats de rest in een dropdownmenu of onder een sectie 'Meer talen'.
Dit zorgt ervoor dat de interface schoon blijft en de bruikbaarheid verbetert, vooral op mobiele apparaten. Gebruik websiteverkeersanalyse om te beslissen welke talen prioriteit moeten krijgen of verborgen moeten worden.
Gebruik geschikte pictogrammen en visuele aanwijzingen (zonder te vertrouwen op vlaggen)
Visuele aanwijzingen zoals globe-pictogrammen (🌐), neerwaartse pijlen (▾) of actieve statusmarkeringen helpen gebruikers begrijpen dat een element klikbaar is. Vermijd echter het gebruik van nationale vlaggen om talen weer te geven, aangezien één taal in meerdere landen kan worden gesproken.
Vlaggen kunnen ook culturele of politieke implicaties hebben. Als je visuals gebruikt, combineer je deze met tekstlabels om de duidelijkheid te garanderen en houd je pictogrammen consistent en cultureel neutraal in je ontwerp.
Blijf consistent met websiteontwerp en branding
Je taalkeuze moet visueel aansluiten bij de algemene stijl van je website. Of je nu knoppen, tekstlinks of pictogrammen gebruikt, zorg ervoor dat typografie, kleuren en hover-statussen overeenkomen met je branding. Dit vergroot het vertrouwen en versterkt de gebruikerservaring.
Als je een aangepaste selector bouwt, test deze dan op verschillende browsers en apparaten om ervoor te zorgen dat deze werkt zoals bedoeld. Consistent ontwerp en betrouwbare functionaliteit dragen bij tot een naadloze meertalige gebruikerservaring.
Een taalselector instellen met Linguise in 7 stappen
Op dit punt weet u wat de beste praktijken zijn voor taalselectors. Deze vertaling kan worden uitgevoerd nadat u de website-vertalingsdienst heeft gebruikt. Echter, niet alle vertalingsdiensten bieden flexibiliteit in de instellingen van de taalselector.
Maar u hoeft zich geen zorgen te maken omdat Linguise niet zo is. Linguise is een automatische vertalingsdienst die gebruikersaanpassing van de taalwisselaar biedt. Enkele voordelen die u krijgt wanneer u Linguise gebruikt, zijn onder andere.
- Linguise kan worden gebruikt en geïntegreerd in meer dan 40 CMS (WordPress, Joomla, Drupal, enz.)
- Vertaling in verschillende talen zal automatisch in slechts enkele seconden worden uitgevoerd nadat u de taal aan de taalwisselaar op de website heeft toegevoegd.
- Er zijn meer dan 80 talen beschikbaar die kunnen worden toegevoegd aan de taalselector
- Linguise zal automatisch een unieke URL voorbereiden volgens de vertaalbestemmingstaal. Bijvoorbeeld de URL linguise.com/de/ voor een pagina die wordt vertaald in het Duits.
- Het zal automatisch een canonieke URL creëren om dubbele inhoud in zoekmachines te vermijden wanneer u taalvariaties op een pagina heeft.
- U kunt de taalwisselaar instellen flexibel volgens de behoeften van de website, te beginnen met het pictogram, en de kleur, tot de taalnaam.
- U kunt de statistieken van de bezoekerspaginaweergave per taal bekijken, voor elke taal die aan de taalkeuzelijst is toegevoegd.
In deze tutorial zullen we WordPress gebruiken als een voorbeeld van de gebruikte CMS.
Stap 1: Registreren van een gratis Linguise -account
Om de taalwisselaar te openen op Linguise, is de eerste stap die u moet doen een account registreren op Linguise. Linguise biedt ook een gratis proefperiode van een maand, inclusief een reeks functies die u kunt benutten.
Stap 2: Voeg domein toe aan uw meertalige website
De tweede stap is om het website-domein toe te voegen in Linguise dat u al bezit aan het Linguise dashboard. Er zijn verschillende dingen die u moet invullen, te beginnen met.
- Account
- URL's
- Platform
- Taal
- Vertalingstaal
- Vertaal URL
Daarna moet je de API-sleutel activeren en de taal-URL instellen. Voor een complete handleiding voor het toevoegen van een website-domein kunt u de documentatie raadplegen, terwijl u specifiek voor WordPress het kunt zien door installeer Linguise automatische vertaling op WordPress of door de onderstaande video-tutorial te bekijken.
Stap 3: Installeer de plugin Linguise
Na het succesvol toevoegen van een website, open dan het WordPress dashboard en installeer de Linguise plugin, doe dit door Plugins > Nieuwe toevoegen > Linguise > Installeren > Activeren.
Als de plugin al is geïnstalleerd, ga dan naar het Linguise dashboard en kopieer de API-sleutel.
Open vervolgens de Linguise plugin en plak de API-code die u hebt gekregen van het Linguise dashboard in de volgende kolom.
Stap 4: Instellen hoofdweergave
Om een taalwisselaar te configureren of taalvlaggen weer te geven, zijn de stappen via het Linguise-dashboard in het Instellingen > Taalvlaggen weergavemenu.
Tijdens de eerste installatie zullen we aanpassingen maken aan de hoofdweergave, rekening houdend met de verschillende componenten.
Een eerste overweging is de configuratie van de weergave-indeling van de taal lijst, die drie opties biedt om uit te kiezen: naast elkaar, dropdown of pop-up. Aan de linkerzijde is er een voorbeeldweergave voor elke indeling.
De eerste indeling, zoals hieronder weergegeven, is een naast elkaar geplaatste lay-out.
De volgende indeling hanteert een vervolgkeuzestijl, zoals weergegeven in de afbeelding hieronder.
Tot slot hebben we de pop-upindeling als laatste optie.
Vervolgens gaan we verder naar de volgende stap, waarbij we de positie van de taalwisselaar configureren. U hebt de flexibiliteit om uit verschillende positieopties te kiezen, dus het is belangrijk om een positie te selecteren die gemakkelijk opvalt voor bezoekers.
Tenslotte moet u beslissen over de combinatievoorkeur voor het weergeven van de taalopties. U kunt kiezen uit opties zoals vlag + taalnaam, vlag + korte naam, of het simpelweg weergeven van de vlag alleen. Deze beslissing hangt af van uw specifieke ontwerpvoorkeuren en de voorkeuren van uw doelgroep.
Stap 5: Stel het vlagontwerp in
Daarna komt u onder het hoofdweergavegedeelte ontwerpconfiguraties specifiek voor de vlag tegen. De onderstaande afbeelding toont enkele van de beschikbare instellingopties.
- Weergave van taalnaam
- Vlagtype Engels: Deze optie is van toepassing wanneer er meerdere variaties van een taal zijn, zoals “Engels VS” of “Engels Groot-Brittannië.” Soortgelijke keuzes kunnen worden gemaakt voor talen zoals Spaans, Taiwanees, Duits en Portugees.
- Vlagstijl: Met deze instelling kunt u de vorm van het vlagpictogram definiëren, of het nu rond of vierkant (rechthoekig) moet zijn.
Stap 6: Stel de kleur en grootte van de vlag in
Zodra het vlagontwerp is ingesteld, is de volgende stap het aanpassen van kleuren, grootte en verschillende andere elementen. In de volgende interface vindt u tal van aanpasbare instellingen, waaronder:
- Vlag border-radius: Hiermee kunt u de border-radius in pixels personaliseren wanneer u een rechthoekige vlag gebruikt.
- Kleur van de taalnaam: U kunt de standaardtekstkleur voor de taalnaam selecteren.
- Kleur van popuplanguage: Deze instelling bepaalt de kleur van de titel van de taal in de pop-up- of vervolgkeuzelijsten.
- Grootte van de vlag: U hebt de mogelijkheid om de grootte van de vlag aan te passen aan uw voorkeuren.
- Kleur van de taalnaam bij zweven: Deze instelling regelt de tekstkleur wanneer u met de muis over de taalnaam zweeft.
- Kleur van pop-uptaal bij zweven: Evenzo bepaalt deze instelling de tekstkleur wanneer u met de muis over de taalnaam in de pop-up of vervolgkeuzelijst zweeft.
Stap 7: Stel de vlag box-shadow in
In de laatste fase heeft u de mogelijkheid om de schaduwinstellingen voor de vlag aan te passen. Met de eerste instelling kunt u een schaduw opgeven voor elke vlag die op uw website wordt weergegeven, terwijl de daaropvolgende instelling betrekking heeft op het schaduw-effect bij het zweven over de taalvlag.
Vergeet niet op de Opslaan knop te klikken om de aanpassingsinstellingen die u heeft gemaakt voor de taalwisselaar te behouden. Dit zorgt ervoor dat uw geselecteerde configuraties voor de schaduw-effecten worden geïmplementeerd en opgeslagen voor toekomstig gebruik.
Nadat alle configuraties zijn uitgevoerd, is hier een voorbeeld van de weergave van de taalkeuze via een pop-up, gepositioneerd in de rechterbovenhoek, en met gebruik van beginletters. Dit is slechts een voorbeeld, u kunt de rest naar wens aanpassen aan de behoeften van de website.
Naast WordPress CMS kun je ook andere websiteplatforms gebruiken en de gedetailleerde handleiding volgen zoals setup switcher voor OpenCart, taalwisselaar voor Drupal, en instel switcher voor PrestaShop.
Ontwerp uw taalkeuze voor een naadloze meertalige ervaring met Linguise!
Hier hebt u inzicht gekregen in de beste praktijken voor het ontwerpen van taalkeuzes en hoe u dit kunt doen met behulp van Linguise! Geloof me, het maken van een taalwisselaar kan veel voordelen opleveren en optimalisatie garanderen op basis van de bovengenoemde punten.
Bij het maken van een taalkeuze, zorg ervoor dat u de tips en beste praktijken volgt die we hierboven hebben uitgelegd, te beginnen met het gebruik van pictogrammen en het selecteren van relevante talen, tot positionering.
Nu, registreer een Linguise account, voeg uw website toe en verfijn de taalkeuze om een betere gebruikerservaring te bieden. Vergeet niet om de gratis proefperiode van 1 maand te proberen om Linguise’s superieure functies te ervaren!
