Page MenuHomePhabricator

Empty states for the responsive language selector
Open, HighPublic

Assigned To
None
Authored By
Pginer-WMF
Oct 15 2020, 10:35 AM
Referenced Files
F32385569: Empty states - Layout spacing.png
Oct 15 2020, 11:17 AM
F32385526: unavailable.png
Oct 15 2020, 10:35 AM
F32385447: inexistent.png
Oct 15 2020, 10:35 AM
F32385432: zero-invite.png
Oct 15 2020, 10:35 AM
F32385542: unavailable-invite.png
Oct 15 2020, 10:35 AM
F32385425: zero.png
Oct 15 2020, 10:35 AM

Description

The language selector (T253303) may show no language options initially or when searching. In some cases it may be possible to provide options for the user about what to do next. This ticket defines a system to support the different empty states for the language selector.

The general structure for the empty states is:

  • Title
  • Description
  • (Optional) Actions represented by an icon and (optionally) a label. Up to three actions are shown.

The specific cases to support are illustrated below,

No language options

When the list of languages is empty because no options are available at all, the empty state is shown:

zero.png (310×348 px, 12 KB)

No languages yet

No languages are available for now.

Additional actions

The app using the selector can define actions to support users to add the missing languages. For example, on Wikipedia those could lead to Content Translation. In this case, the specific app would customize the description and the list of actions.

Although other actions should be possible, we want to make sure that the example of Content Translation integration works.
In this case, the actions would link to Content Translation with the article pre-selected to start the translation. Two specific target languages are provided based on suggested languages (excluding the current language which is used as source). A generic "more" action is provided where the target language will be selected by the user.

zero-invite.png (310×348 px, 17 KB)

No languages yet

You can translate this page. It’s an easy way to create content in your language.
[Language 1] [Language 2] [More]

Searching a language that does not exist

When the user searches for a language that does not exist in our database of all languages, the empty state is shown. In this case, the user is encouraged to review the spelling and informed of alternative ways to search for the language.

inexistent.png (310×348 px, 15 KB)

Language not recognized
Please, check the spelling. You can search languages by name or ISO code.

Searching a language that exists but is not supported

Often the languages shown by the selector in a given context don't cover all possible languages. For example, users selecting the language version of a Wikipedia article will be provided only the languages for which the article is available. In these cases it is possible for the user to search for a valid language that is not available. The empty state shown is intended to confirm that the language that the user searched for was understood by the system but it was not available.

unavailable.png (310×348 px, 12 KB)

Language not available
The language you are looking for is not available.

Note that the user search query can result in multiple unavailable languages (e.g., searching for "esp" could lead to this empty state if content is not available for both "español" and "esperanto"), so the generic version of the message does not mention a specific language. For cases where the search query identifies only one language, the title message would include it (e.g., " Esperanto not available").

Additional actions

The app using the selector can define actions to support users to add the missing languages. In this case, the languages surfaced would be those matching the user search. Additional suggested languages can be used to fill the remaining actions.

unavailable-invite.png (310×348 px, 16 KB)

Language not available
You can translate this page. It’s an easy way to create content in your language.

Additional design details

Empty states - Layout spacing.png (768×1 px, 45 KB)

Event Timeline

Change 635505 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] POC: Renderless language selector and custom selectos based on it

https://gerrit.wikimedia.org/r/635505

Change 635505 abandoned by Santhosh:
[mediawiki/extensions/ContentTranslation@master] POC: Renderless language selector and custom selectos based on it

Reason:
It was just POC

https://gerrit.wikimedia.org/r/635505