Improve language toggle

international-labour-organization / designsystem

A design system for the International Labour Organization

Apache License 2.0

1 stars 3 forks source link

Improve language toggle #1033

Open inesdgomes opened 1 month ago

inesdgomes commented 1 month ago

Hi @beatrizmartinmartins We've been receiving feedback saying that the language toggle is not visible or easy enough to use. A few things I think we could improve:

I think we're missing an downward arrow after the language name. At the moment it's not clear that you can find more language options when clicking on the language
Do you think we can increase the font size of the language label or just make it bold? The same change would need to be applied to the link next to the language label (Main ILO website).
Since we're making these changes, I think we should also remove the arrow that shows before 'Main ILO website'. It's misleading as this is just a hyperlink, it does not actually take users back anywhere.

https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=1433-3563&t=f7Y3EMocyjiNUGro-0

beatrizmartinmartins commented 4 weeks ago

@inesdgomes

Honestly, I think the Link that says (Main ILO Website) doesn't look like a link because there's no separation between the language and that hyperlink. Maybe we should include a line between the Main ILO Website and the language so the user knows that they are two different things?
On the live website, I'm seeing we don't actually have the Main ILO Website hyperlink anywhere. Is it something we are going to add?

Made the changes you asked for here

inesdgomes commented 4 weeks ago

Thanks @beatrizmartinmartins The changes you made look good.

Agreed on adding a line or some other way of making a clearer distinction between the two items. Could you please try that?
The 'Main ILO website' link doesn't show on the live website because you're already on the main ILO website. That links is meant to be shown only on sub-sites that are separate from the main ILO website. It will eventually be implemented on sites like voices.ilo.org/ or ilo.org/infostories.

beatrizmartinmartins commented 2 weeks ago

@inesdgomes Made that change on the designs. You can check it on the component. On the templates is not shown.

inesdgomes commented 2 weeks ago

Great, thanks @beatrizmartinmartins. @justintemps Here are the changes that were done to 'languagelabel' and 'mainlink' in the desktop navigation:

Added a downward arrow to indicate there are more languages
Font size / weight changed
Removed arrow that showed before 'mainlink'
Added a vertical line separating 'mainlink' and 'languagelabel0

Changes can be seen in the component library: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=6198-11143&t=BcrzzTsjGNg4AHmh-1

beatrizmartinmartins commented 2 weeks ago

@justintemps Basically we added a line of 16px between the menu items so it looked different and users understood the difference between one and another. This line basically separates the language from the link. CC @inesdgomes