Language Navigation

[Anton-Olivier]

We willen graag meer leren over het Language Navigation component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Language Navigation

Doel

Eén of meerdere links om de website te openen in een andere taal.

Ook bekend als

Language Switcher, Language Selection

Onderzoek

Overzicht van Language Switchers op websites
Spreadsheet van sites met taalkeuze componenten: overheid, e-commerce, luchtvaartmaatschappijen en brandidentiteit uit binnen- en buitenland. Er kan gesorteerd en gefilterd worden op een aantal kenmerken als type en aantal talen. Graag aanvullen als je extra voorbeelden hebt.

6 Tips for Improving Language Switchers on Ecommerce Sites - Nielsen Norman Group
Artikel met tips voor het Language Switcher component op e-commerce sites. De meeste tips zijn ook bruikbaar voor overheidssites. Deze informatie komt ook terug in een bijbehorende video.

Designing A Perfect Language Selector UX - Smashing magazine
Artikel waarin veel verschillende voorbeelden voorbij komen. Er wordt ook geschreven over het gebruik van re-directs, vlaggen, iconen en de schrijfwijze van labels.

Supporting multiple languages - Github Discussion GOV.UK
Github Discussion van GOV.UK rondom het kunnen selecteren van verschillende talen. In de comments komt ook een verwijzing naar het component 'Translate navigation' voorbij.

Aria-label is a xenophobe
Artikel waarin wordt uitgelegd dat teksten die code binnen een 'aria-label' staan niet goed worden vertaald.

WCAG Success Criterion 3.1.2 - Language of Parts
In dit Success Criterion wordt een voorbeeld gegeven van code die bij dit component kan helpen.

translate="no"
Stukje code dat ervoor zorgt dat bepaalde teksten juist niét vertaald worden. Denk aan de achternamen (Bakker of Groot), straatnamen, etc.

Figma file - Logius: Language Navigation
In dit projectbestand staat verzameld onderzoek met visuele voorbeelden en uittreksels van internet artikelen.

[Anton-Olivier]

Google Translate gebruik op utrecht.nl | Gebruikersonderzoeken

Google Translate gebruik op utrecht.nl | Gebruikte code

[Anton-Olivier]

Guidelines van de Nieuw-Zeelandse regering over hoe om te gaan met weergeven van andere talen

[JeroenduC]

Interessant stuk over de toepasbaarheid van een language switcher, voegt deze ook echt waarde toe? Als de content van de site goed en duidelijk is geschreven (B1, duidelijke korte zinnen, geen jargon), kan een automatische vertaler de site goed vertalen. We zien mensen met een andere taalachtergrond, die Nederlands net nog wat ingewikkeld vinden, standaard Google Translate gebruiken om stukken of hele sites te vertalen. Ze gaan niet op zoek naar een language switcher van de site zelf.

[JeroenduC]

Misschien is de vraag meer: In welke situatie heeft een taal switcher zin? Wanneer is het schrijven van goede, vertaalbare content waardevoller dan het inzetten van een taal switcher?

[Anton-Olivier]

@JeroenduC : Wat je schrijft lijkt uitleg te zijn voor een link naar een artikel... Begrijp ik wat je schrijft verkeerd of zou je een link toe kunnen voegen?

[JeroenduC]

Excuus voor de verwarring, er is geen artikel, meer dat ik het onderwerp interessant vind :).

[Anton-Olivier]

Artikel: Hoe bied je je website het beste meertalig aan? - OpenGemeenten

Met dank aan Martijn Rietveld van OpenGemeenten

[MariekeBrouwer]

gemeente Groningen (en denk gemeenten vanuit het Open Online dimpact-verband) gaan/ kunnen gebruik maken van de DeepL plugin op hopelijk kortetermijn. We hebben daarin het voorbeeld van Rotterdam.nl gevolgd (maar laten de verwijzing naar toeristische website achterwege).

Op desktop is het een dropdown voor selectie, op mobiel een language selector met radio button met een backdrop. Zijn vrij snelle / slordige opzetjes voor mobiel trouwens voor ons ter voorbeeld , dus de spacing klopt daar nog even niet helemaal :)

[jeffreylauwers]

Amsterdam

Geen specifiek component gevonden in Figma of Storybook. Wel een mogelijkheid om van taal te wisselen op https://www.amsterdam.nl/

---

Screenshots / Varianten

Website

Small viewport

Small viewport - Nederlands

Small viewport - Engels

Large viewport - Nederlands

Large viewport - Engels

---

Notities

• Twee talen: Engels en Nederlands
• URL wijzigt bij keuze voor engels naar: https://www.amsterdam.nl/en/
• Bij small viewport als laatste item van 'hamburger' menu.
• Bij large viewport als link (label: 'English site' icon: chevron-right) in header (positie: inline-end).
• Label wisselt van 'English site' naar 'Dutch site'.

[jeffreylauwers]

Den Haag

• Figma - Huidig
• Mogelijkheid om van taal te wisselen op https://www.denhaag.nl

---

Screenshots / Varianten

Figma

Small viewport

Large viewport

Website

Small viewport - Nederlands

Small viewport - Nederlands (menu)

Small viewport - Engels (menu)

Large viewport - Nederlands

Large viewport - Nederlands (translate active)

Large viewport - Engels

Large viewport - Engels (translate active)

---

Notities

Figma
Keuze tussen link naar engelse versie en vertalen via Google Translate door middel van Select component.

Website

• Twee talen: Engels en Nederlands
• URL denhaag.nl gaat direct naar: https://www.denhaag.nl/nl/
• URL wijzigt bij keuze naar: https://www.denhaag.nl/en/
• Small viewport als laatste item van 'hamburger' menu.
• Bij large viewport triggert button (label: 'NL' + icon: chevron-down) in header (positie: inline-end) een overlay. Hierin staat de link.
• Genaamd: Language switch
• Label van button wisselt van 'NL' naar 'EN'.

[jeffreylauwers]

Open formulieren

Storybook

---

Screenshots / Varianten

Storybook

---

Notities

• Genaamd: Language selection
• Ook een functioneel component beschikbaar dat het 'slimme' gedrag afhandeld.

[jeffreylauwers]

OpenGemeenten

Geen specifiek component gevonden in Figma of Storybook. Zoals toegelicht door Martijn Rietveld (OpenGemeenten) tijdens een Design Open Dag is er wel een mogelijkheid om van taal te wisselen op https://www.nieuwegein.nl/ via Google Translate.

---

Screenshots / Varianten

Website

Small viewport - Nederlands

Large viewport - Nederlands

Large viewport - Nederlands (pagina)

Large viewport - Engels (Google Translate - bar)

Large viewport - Engels (Google Translate - sticky button)

---

Notities

• URL wijzigt bij keuze naar: https://www-nieuwegein-nl.translate.goog/?_x_tr_sl=nl&_x_tr_tl=en
• Bij small viewport link (label: Translate) in header (positie: inline-end).
• Bij large viewport link (icon: translate + label: 'Translate') in header (positie: inline-end)
• Aparte pagina met uitleg over Google Translate en meegeleverde cookies.
• Google Translate balk valt over header na activeren.

[jeffreylauwers]

Rotterdam

Geen specifiek component gevonden in Figma of Storybook. Wel een mogelijkheid om van taal te wisselen op https://www.rotterdam.nl/

---

Screenshots / Varianten

Website

Small viewport

Small viewport - Nederlands (menu)

Small viewport - Nederlands (menu - translate active)

Small viewport - Engels

Small viewport - Engels (menu)

Large viewport - Nederlands

Large viewport - Nederlands (translate active)

Large viewport - Engels

---

Notities

• Keuze tussen link naar Engelse versie en Tourist info of vertalen via Deepl door middel van Select component.
• URL wijzigt bij keuze voor engels naar: https://www.rotterdam.nl/en (en opent nieuwe tab!)
• Bij small viewport als laatste item van 'hamburger' menu.
• Bij large viewport als link (label: 'Translate' icon: globe) in header (positie: inline-end).
• Label blijft 'Translate'.

[jeffreylauwers]

RVO

• Documentatie website
• Figma
• Mogelijkheid om van taal te wisselen op https://www.rvo.nl/ (footer)

---

Screenshots / Varianten

Figma

Website

Small viewport - Nederlands

Small viewport - Engels

Large viewport - Nederlands

---

Notities

Documentatie website en Figma

• Documentatie beschikbaar
• Icon: globe + Label: 'English'
• Label wisselt van 'English' naar 'Nederlands'.

Website

• Link in footer
• Twee talen: Engels en Nederlands
• URL wijzigt bij keuze naar: https://english.rvo.nl/

[jeffreylauwers]

Utrecht

Geen specifiek component gevonden in Figma of Storybook. Wel een mogelijkheid om van taal te wisselen op https://www.utrecht.nl/

---

Screenshots / Varianten

Website

Small viewport

Small viewport - Nederlands (menu)

Small viewport - Engels

Large viewport - Nederlands

Large viewport - Engels

---

Notities

• Twee talen: Engels en Nederlands.
• URL wijzigt bij keuze voor engels naar: https://www.utrecht.nl/city-of-utrecht.
• Bij small viewport als laatste item van 'hamburger' menu. (2 keer?)
• Bij large viewport als link (icon: globe + label: 'English') in header (positie: inline-end).
• Geen mogelijkheid om terug te wisselen naar Nederlands.
• Label blijft dan ook 'English'.

[jeffreylauwers]

Rijksoverheid

Mogelijkheid om van taal te wisselen op https://www.rijksoverheid.nl/ (footer).

---

Screenshots / Varianten

Website

Small viewport - Nederlands

Small viewport - Engels

Large viewport - Nederlands

Large viewport - Engels

---

Notities

• Onderdeel van de footer.
• 5 talen: Nederlands, Engels, Papiamento, Papiamentu en Nederlandse gebarentaal (linkt naar aparte pagina met video's).
• URL wijzigt bij keuze voor engels naar: https://www.government.nl/

[jeffreylauwers]

Codepen voorbeeld opgezet door Rian Rietveld en mij ter voorbereiding op deze vraag bij Design Open Dag van april 2024: https://codepen.io/jeffreylauwers/pen/dyLgKpq

[Rozerinay]

@Anton-Olivier leuk dat je deze discussie bent gestart!

Wat vind je ervan om dit component te hernoemen naar 'Language navigation'? We hebben besloten om het woord 'navigatie' toe te voegen aan componenten die betrekking hebben op navigatie. Denk bijvoorbeeld aan 'Breadcrumb navigation' en 'Side navigation'.

Met de 'Language navigation' navigeer je tussen verschillende content en in essentie linkt dit component naar een andere url.

[Anton-Olivier]

Ik had de naam switcher gebruikt omdat het de naam is die de NN group er aan heeft gegeven (zie eerder gelinkte artikel). Maar als @jeffreylauwers en jij er allebei naar vragen, kan ik daar niet tegenop 😉

[JeroenduC]

Over de plek van de language switcher:

Tip 2: On desktop sites, put the language switcher in the top corners (left or right).

When automatic detection fails to work or users want to manually change the site language, it’s crucial that the language switcher be easy to find.

Across time and cultures, we found that users looked to the upper right corner to change a country or language setting. If they couldn’t find it there, they would turn to the top left corner. We observed that in our previous round of US studies and in our most recent study with Chinese users. This behavior makes sense, because utility features in sites are often located in that page area.

[Anton-Olivier]

Figma file - Logius: Language navigation
In dit projectbestand staat verzameld onderzoek met visuele voorbeelden en uittreksels van internet artikelen.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Language Navigation op het Community bord