Investigate how to support multiple languages

[entrotech]

Goal

We currently only support a single language, but a many of our target food-seeker audience are not English readers.

Figure out how to display Food Oasis site in other languages

• [x] What are some possible solutions and what are the tradeoffs?
  • [x] Technical aspect : Huge undertaking and very difficult with our current resources. Some possibilities for machine-translation.
  • [ ] Volunteer and data entry aspects
• [ ] Food-seeker aspects - what do target audience need? What’s a MVP (minimal viable product?)

Related issues

• 1349 (research what our target users do, want, need)

[nicholaspung]

Was able to add translation features to front-end. Next steps is to figure out how to load translation text from the back-end to front-end.

[nicholaspung]

Current implementation has translations for both front-end (hard codes in /locales) and back-end (FAQ table has a languages table to query).

Anyone have a better way? Is there a preference for having all translated text to be on the back-end?

[Benbaillou]

Hi - can we label the size please?

[Benbaillou]

@entrotech - Is Nicolas or someone else still working on this issue?

[fancyham]

Can this possibly be done on-the-fly with google translate? At least for the short-term?

What other solutions are out there? It'd be amazing if the UI and the org's individual details and prose descriptions were translated, even imperfectly, into multiple languages. Something like Google Translate seems ideal.

Is that even possible with React?

[entrotech]

It is certainly possible to internationalize a React application, but we would need to decide what language needs to be internationalized and for how many languages. Make no mistake - making Food Oasis a fully-customized multi-lingual site is a huge project, and it only seems worthwhile if we translate not only the static text on the web application, but also all of the listing data as well. Just getting the listing data in English is already a pretty burdensome task. To add Spanish would require bilingual volunteers to translate and re-enter the same data in Spanish, and then try to keep the contents in multiple languages in sync.

IMO, this is not practical given our current resources.

You can view the site using the Google Translate Browser Extension. Simply install the extension, navigate to the website, and select Google Translate from the Browser Toolbar. Here is an example in English:

Translated to Spanish:

Note that if I scroll down the list on the left a bit, the listings that scroll into view are not translated:

I.e., note how the James Wood listing is in English but the listings above it were translated. This is because Google translate only translates what's visible on the screen at the time, and as new content scrolls into view, it is in the original language. You can press the Original button and then click it again to re-translate the visible part of the page, but that's sort of awkward.

We would also need to consider which fields should not be translated. For example, Google Translate will sometimes attempt to translate words in email addresses to the new language, which will then be an incorrect email address. we should also consider if the organization name, street names, city names, etc. should be translated or not. We can add a translate='no' attribute to HTML tags that should not be translated, but we'd need to do a thorough review of all tags to see which ones should not be translated.

The only part I see that will not translate at all is the location drop-down box, since it is driven by the MapBox geolocator, which may not be translatable.

IMO, the question is whether it is worth the minor adjustments above to make our site a bit more compatible with Google Translate.

[fancyham]

I wonder if partial translations are useful?

For example, a first phase could translate only the labels and generated text such as hours open. But the free form text would stay as English. (Or whatever original language??)

A second phase might be to either hand-translate (a huge, huge task) or perhaps a machine-learning translation is possible?

I also wonder if in the longer term, if we can trigger in-browser translation to translated newly-displayed text (re: the problem shown in your example)? As you mentioned, google chrome supports translation to some extent. I believe Safari does, too.

This would be a great user research study or desk research bit to figure out how people who are fluent in other languages read or access government websites that are in English.

• [ ] Research to see how users who are fluent in other languages access English-language web resources.

[fancyham]

Check out this automatic translation in Safari on my iPhone SE 2016. (I switched the UI language to spanish first)

My Spanish isn’t good enough to judge quality but It works with React loading.

maybe a solution would be to display instructions for how to turn browser translations on?

https://user-images.githubusercontent.com/3376957/174034791-a4e305a8-721a-4e73-a50b-ff2ee9459501.MOV

(Let me know if this video doesn’t work for you. It’s a .mov)

here is an 2018 iPad Pro 11 version where it even translates mage's text ..check out the logo. (Better processor is better translation features) https://user-images.githubusercontent.com/3376957/174035539-4879294f-b06f-4e06-ab6a-39d2232f9a95.mp4

[fancyham]

Had a good discussion about this — worth trying and it would be a huge time and effort saver compared to translating even just labels and buttons:

Immediate MVP steps:

• [ ] Design a way to detect(?) and tell non-English-reading visitors about their browser's translate function, and show them how to turn it on for their browser
• [ ] Analytics to measure how many people are visiting and using the translation function now, how many are visiting with their device's default language being something other than English

@seiko, @entrotech ^ I think we could turn these into individual issues? Do you agree? If so, I'll create them.

Research ideas: Desk research:

• [ ] How many people know about browser-based translation?
• [ ] Do they know how to use it?
• [ ] Do they use translation to access other English-language websites?
• [ ] Ask Hack for LA UX community about their experience with this browser translation, ask for best practices.
• [ ] How can we measure how many people are using this live translation?
• [ ] Research how non-fluent-English speakers navigate the English-language web. Perhaps visit non-English language forums.

^ I'd like not to lose these topics — perhaps I should create a related issue for this research as well?

[fancyham]

Quick notes from our leads meeting:

Let's try to make site compatible with automatic translation

• [ ] On Chrome, The list of orgs doesn't automatically translate, and items off-screen don't translate — it seems to be an issue with ReactJS and with the translation engine. Find out how to trigger the translation engine so translation happens completely automatically (to see the problem: add a 'preferred language' and try the translation.)

On Safari, translations seem to happen well and on the fly, even with ReactJS

• [ ] There's some sort of HTML tag that prevents translations that might be useful for the name of the org. Let’s find it and choose which fields to apply this to.

Once we roll it out, we should test it with food seekers

[staceyrebekahscott]

As for what should remain in English and what should be translated, we need to consider how names of orgs are listed. One concern is regarding religiously affiliated orgs that some food seeker groups might not be comfortable going to. Do we keep these in English only, do we translate them or is there a way we can have the org names in both English and another language?

[fancyham]

As an initial pass, I think the fields that should not be translated would be:

• Org name
• Street address
• Email address
• Website

Also

• Address search field contents (in the upper right) — I suspect that wouldn’t be translated anyway