[Discovery] Drop-down Option for Spanish vs Tagalog

[SKasimow]

As we enhance and expand our Covid-related pages, we will need to provide users with the ability to choose a language if they are non-english speakers.

Today on the Coronavirus FAQ page, we offer users the option to toggle between english and spanish via a link placed above the H1. This ensures good visibility without changing the navigational elements of the page since our translated content is limited.

URL:https://www.va.gov/coronavirus-veteran-frequently-asked-questions/

This discovery request seeks to find out if it is possible to put the language choices (ie spanish and tagalog) into a drop-down box using the same placement that we have today and what that experience would look like.

[SKasimow]

@youngfreezyVA Hi Fareez - here's the ticket we touched on yesterday for discovery work on how to support language choices. Please point ti and let me know if you can do by 2/23 (end of sprint 41) or I can bump it into next sprint.

Thanks!

cc @DanielleThierryUSDSVA

[SKasimow]

@youngfreezyVA - can you work on this after Covid page? We expect this to be the next request.

[youngfreezyVA]

yes or sure

[SKasimow]

@youngfreezyVA Hi - here is the component used for drop-down menus:https://design.va.gov/storybook/?path=/story/components-dropdownpanel--default

LMK if this covers everything needed or not :)

cc @DanielleThierryUSDSVA

[youngfreezyVA]

that’s perfect thanks, it will be ready on Monday.

[SKasimow]

UPDATED:

@youngfreezyVA Hi - here is the component used for drop-down menus:

• https://design.va.gov/storybook/?path=/story/components-dropdownpanel--default

this was also provided as possibly better option:

• https://design.va.gov/storybook/?path=/docs/components-select--default

LMK if this covers everything needed or not :)

And if both are viable, we can choose one.

cc @DanielleThierryUSDSVA

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[youngfreezyVA]

The second option is the one to go with. I refactored the previous approach in the FAQ page to use React, and this is what it looks like currently. I developed the selection change to change the url based on these mappings, so it won't work for tagalog just yet

const langsToLinkSuffixes = {
  Spanish: '-esp',
  Tagalog: '-tagalog',
};

[youngfreezyVA]

https://user-images.githubusercontent.com/46791771/109433503-801f8680-79c5-11eb-81b6-9354e0116124.mov

[SKasimow]

@youngfreezyVA Looks good! Second option looks cleaner.

cc: @DanielleThierryUSDSVA

[SKasimow]

@youngfreezyVA Assuming the spanish version will be ready before we have the tagalog version, what would user experience be during the interim? would a user just see an option for spanish? And then click to choose?

[youngfreezyVA]

yes i can remove the tagalog option for now, and all we need is the link suffix for any language and it can be added as above. fyi, we would need to redo the analytics and "On this page" solution from the "Read this page in Spanish" link approach

[SKasimow]

@youngfreezyVA Thanks. Will review some more with you during stand-up to make sure I capture changes correctly

[SKasimow]

@youngfreezyVA @DanielleThierryUSDSVA

Another option suggested for presentation of language choices:

We're talking about how it might be simpler and more accessible, since we only have 2 languages, to do 2 side-by-side links with a vertical pipe in between. Like: [icon] Read this page in Spanish | Read this page in Tagalog

I will review during today's Design Office Hours call and ask for feedback.