De taalkeuzeknop 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 taal wisselknop 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 taalselectors. Laten we dit verder bespreken in het volgende artikel.
Wat is een taalselector?
Een taalselector 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, softwaretoepassingen en andere digitale interfaces om gebruikers te bedienen die verschillende talen spreken.
De taalkeuzeknop toont meestal een lijst van beschikbare talen, en de gebruiker kan de taal van zijn keuze selecteren uit die lijst. 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 globaal publiek of diverse gebruikersgroep bedienen.
Taalkeuzes helpen bij het creëren van een betere gebruikerservaring door digitale inhoud toegankelijk te maken voor een breder 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 moet u uw taalwisselaar aanpassen?
Het aanpassen van de taalwisselaar op een meertalige website heeft verschillende belangrijke voordelen.
- Merkanpassing en visuele stijl: Door de taalschakelaar 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 taalschakelknoppen 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 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 taalwissel instructies die gebruikers helpen begrijpen hoe ze de functie gemakkelijk kunnen gebruiken.
- Voldoen aan verschillende gebruikersbehoeften: 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 conversie:juiste taalwisselaar-aanpassing kan ook het voordeel bieden van het verhogen van de conversie. Omdat een effectieve taalwisselaar comfort biedt bij het interageren met uw website. Volgens CSA-onderzoeksgegevens zeggen 72,4% van de consumenten dat ze eerder producten kopen die informatie bevatten in hun eigen taal. Het is dus onmogelijk dat uw verkoopniveau niet zal stijgen.
Verschillende soorten taalkeuzes
Elke website-eigenaar zal zeker zorgvuldig overwegen hoe hun taalkeuzemenu eruit ziet, elke website zal natuurlijk verschillende voorkeuren hebben. Voor degenen onder u die op zoek zijn naar een type taalselector 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 weer te geven. 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.
Taal knoppen kunnen geschikt zijn voor bedrijven die specifieke markten bedienen of internationale gemeenschappen in bepaalde locaties bedienen. Een voorbeeld van het gebruik van de taal knop op de WHO-website is hieronder weergegeven.
Tekst link
Tekstlinks zijn een soort taalwisselaar die tekst gebruiken in de vorm van de taalnaam als link. U kunt bijvoorbeeld tekstlinks weergeven zoals “Nederlands,” “Français,” of “Español” 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 taalwisselaar 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 selectie menu is heel anders dan de taal knop, dit type is complexer dan alleen een knop. Net als het voorbeeld hieronder dat afkomstig is van de website van Porsche.
Ze bieden een taalselectorwebsite waar 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 taalkeuze 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 gedrag van de gebruiker. Hieronder volgt een vergelijking van de drie belangrijkste interactiemodellen voor taalkeuze, met focus op UX, toegankelijkheid en implementatiecontext.
Type | Sterktes | Beperkingen | Beste gebruikscase |
Dropdown | Compact, schoon, schaalbaar, met veel talen | Vereist interactie (klikken/tikken), is mogelijk niet voor alle gebruikers duidelijk | Meertalige websites met ruimtebeperkingen |
Tekstlijst | Zichtbaar zonder interactie, snellere toegang voor belangrijke talen | Kan 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 best practices die u kunt toepassen om ervoor te zorgen dat uw taalselector duidelijk, handig en toegankelijk is voor alle gebruikers.
Geef prioriteit aan responsief ontwerp
De meeste gebruikers bezoeken websites vanaf mobiele apparaten, dus uw taalkeuze 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 website met taalkeuzemenu ziet er bijvoorbeeld zo uit.
Wanneer bekeken vanaf de mobiele zijde, kan het taalkeuzemenu nog steeds gemakkelijk worden geopend en verdwijnt het 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 het taalkeuzemenu in zeer zichtbare, verwachte gebieden zoals de rechterbovenhoek van de header of de onderste footer. Dit zijn intuïtieve locaties waar gebruikers doorgaans naar taalopties zoeken.
Vermijd het verbergen van de selector in dubbelzinnige pictogrammen of secundaire menu's. Houd de plaatsing consistent over alle pagina's, zodat gebruikers die vaak tussen talen wisselen het gemakkelijk kunnen vinden op elk moment.
Toegankelijkheidsattributen gebruiken (ARIA)
Om ervoor te zorgen dat uw taalkeuze 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 groter 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.
Native labels zijn inclusiever en verminderen de cognitieve belasting, vooral voor internationale gebruikers. Vermijd het gebruik van obscure afkortingen of taal codes, tenzij uw publiek ze kent.
Vermijd overbelasting met te veel opties
Te veel taalopties 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 “Meer talen”-sectie.
Dit zorgt ervoor dat de interface schoon blijft en verbetert de gebruiksvriendelijkheid, 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 uitsluitend op vlaggen te vertrouwen)
Visuele aanwijzingen zoals wereldbol pictogrammen (🌐), neerwaartse pijlen (▾) of actieve status highlights 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 u visuals gebruikt, combineer ze dan met tekstlabels om duidelijkheid te garanderen en pictogrammen consistent en cultureel neutraal te houden in uw ontwerp.
Blijf consistent met websiteontwerp en branding
Uw taalkeuze moet visueel overeenkomen met de algemene stijl van uw website. Of u nu knoppen, tekstlinks of pictogrammen gebruikt, zorg ervoor dat typografie, kleuren en hover-statussen overeenkomen met uw branding. Dit verbetert 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 naar behoren werkt. Consistent ontwerp en betrouwbare functionaliteit zorgen voor een naadloze meertalige gebruikerservaring.
Een taalkeuze instellen met Linguise in 7 stappen
Op dit punt weet u wat de beste praktijken zijn voor taalkeuzes. Deze vertaling kan worden uitgevoerd nadat u de automatische vertaaldienst voor uw website heeft gebruikt. Niet alle vertaaldiensten bieden echter flexibiliteit in de instellingen voor taalkeuzes.
Maar u hoeft zich geen zorgen te maken omdat Linguise niet zo is. Linguise is een automatische vertaaldienst 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
- Vertaling naar verschillende talen gebeurt automatisch binnen enkele seconden nadat u de taal hebt toegevoegd aan de taalwisselaar op de website.
- Er zijn meer dan 80+ talen beschikbaar die kunnen worden toegevoegd aan de taalkeuzeknop.
- 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 maken om dubbele inhoud in zoekmachines te helpen voorkomen wanneer u taalvariaties op een pagina hebt.
- Je kan de taalwisselaar instellen flexibel volgens de behoeften van de website, te beginnen met het pictogram, de kleur en de taalnaam.
- U kunt de statistieken van de bezoekerspaginaweergaven per taal bekijken voor elke taal die aan de taalkeuze is toegevoegd.
In deze tutorial gebruiken we WordPress als voorbeeld van het gebruikte CMS.
Stap 1: Registreren van een gratis Linguise -account
Om toegang te krijgen tot de taalwisselaar op Linguise, is de eerste stap die u moet doen registreren voor een account op Linguise. Linguise biedt ook een gratis proefperiode van een maand, inclusief diverse functies die u kunt benutten.
Stap 2: Domein toevoegen aan uw meertalige website
De tweede stap is om het websitedomein toe te voegen in Linguise dat u al bezit aan het Linguise dashboard. Er zijn verschillende dingen die u moet invullen, te beginnen met.
- Rekening
- 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 specifiek voor WordPress, u het kunt zien door installatie 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, gaat u naar het Linguise -dashboard en kopieert u de API-sleutel.
Open vervolgens de Linguise plugin en plak de API-code die je hebt gekregen van het Linguise dashboard in de volgende kolom.
Stap 4: Hoofdweergave instellen
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 de hoofdweergave aanpassen, rekening houdend met de verschillende componenten.
Een eerste overweging is de configuratie van de weergave-indeling van de taalkeuzelijst, die drie opties biedt om uit te kiezen: naast elkaar, dropdown of pop-up. Aan de linkerzijde is een voorbeeldweergave voor elke indeling.
De eerste indeling, zoals hieronder weergegeven, is een zij-aan-zij-indeling.
De volgende indeling hanteert een vervolgkeuzestijl, zoals weergegeven in de onderstaande afbeelding.
Ten slotte hebben we het pop-up-formaat als laatste optie.
Vervolgens gaan we verder met 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.
Uiteindelijk moet u beslissen over de combinatievoorkeur voor het weergeven van de taalopties. U kunt kiezen uit opties zoals vlag + taalnaam, vlag + korte naam, of gewoon de vlag alleen weergeven. 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 afbeelding hieronder toont enkele van de beschikbare instellingopties.
- Weergave van taalnaam: U hebt de optie om de taalnaam weer te geven op basis van het land of de taal zelf. U kunt bijvoorbeeld kiezen voor het weergeven van “Duits” of “Deutsch.”
- Engelse vlagtype: Deze optie is van toepassing wanneer het gaat om talen die meerdere variaties hebben, zoals “Engels VS” of “Engels Groot-Brittannië.” Soortgelijke keuzes kunnen worden gemaakt voor talen als 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 ontwerp van de vlag is ingesteld, gaat de volgende stap over 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 randradius in pixels personaliseren wanneer u een rechthoekige vlag gebruikt.
- Taalnaamkleur: U kunt de standaardtekstkleur voor de taalnaam selecteren.
- Kleur popuplanguage: Deze instelling bepaalt de kleur van de titel van de taal in de pop-up- of vervolgkeuzelijsten.
- Vlag grootte: U heeft de optie om de grootte van de vlag aan te passen volgens uw voorkeuren.
- Kleur van de taalnaam bij hoveren: Deze instelling regelt de tekstkleur wanneer de muis over de taalnaam wordt bewogen.
- Kleur van de zwevende tekst bij taalkeuze: Deze instelling bepaalt de tekstkleur wanneer de muis over de taal titel in de pop-up of dropdown gaat.
Stap 7: Stel de vlag box-shadow in
In de laatste fase hebt 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 hebt gemaakt voor de taalwisselaar te behouden. Dit zorgt ervoor dat uw geselecteerde configuraties voor de schaduweffecten 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 instellingen switcher voor PrestaShop.
Ontwerp uw taalkeuze voor een naadloze meertalige ervaring met Linguise!
Hier heb je inzicht gekregen in de beste praktijken voor het ontwerpen van taalwisselaars en hoe je dit doet met 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 best practices 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!
