It seems that recently the interface of the <languages /> output was changed for some reason

The reason is T329046: Improve page translation progress indicators.

Thanks for sharing your feedback, @Base. Can you share a bit more about the usecase? Are you looking for languages where translations are missing to provide them, checking the status of a particular language to know whether the contents will be complete enough, or something diffeent?

This context of use can be very useful to explore possible solutions. Thanks!

@Pginer-WMF, well, I use them in at least 3 scenarious:

a) when I want to read a translated version myself, and thus I want to see if it is translated
b) when I want to translate, and thus I am checking if it still requires translation; or I might be in the mood to fix existing translations, then I also need to be able to locate them
c) when I need to link to the page to someone who doesn't speak the source language (mostly English) and thus I want to see whether it makes sense to link to the translation page or via Special:MyLanguage at all, or I might as well just link to the translatable page directly and let the person deal with it (as in I understand that even if they were to read it had it been translated, they most definitely won't now, but I did my best to supply them with the link), unless I am in the mood for b)

To be honest I am surprised at the question, because for me, although the scenarios are different, it does not matter which scenario I am in right now: I still have the same requirement to know what the translation status is without having to squint my eyes or draw myself closer to the monitor.

In Ukraine, to test one's eyesight one uses a variation of Golovin–Sivtsev table . People undergoing eyesight testing often know that the left part, the one with letters, is much easier than the right part, the Landolt C part. The current design very much reminds me of Landolt C table, thus additional way to discern similar shapes such as colour-coding would be very much beneficial.

In T351563#9357477, @Base wrote:

@Pginer-WMF, well, I use them in at least 3 scenarious:

Thanks for the additional details.

To be honest I am surprised at the question, because for me, although the scenarios are different, it does not matter which scenario I am in right now: I still have the same requirement to know what the translation status is without having to squint my eyes or draw myself closer to the monitor.

In all your scenarios the steps seem similar: find a language of interest (scanning through the labels), and once a specific language has been found, focus on the symbol and interpret the completion status.

This may be different form an admin workflow where they may look for all languages where the translations is not complete (i.e., scanning through symbols first), for example.

There are some options we can consider:

• A) Distinguish completion status in green. In this way, the color makes the states different: mostly white and grey, white and blue, mostly blue, and green.
• B) Reduce to 3 easier to distinguish levels. In this way only three levels need to be distinguished with white and grey, half blue and full blue, less effort is expected for distinguishing the states.
• C) Distinguish low-completion by border & colour. If 4 levels are useful, we can represent the initial two states as empty circles. Representing the initial one with a thinner grey border and the second one with a thicker blue circle. This allows making the remaining states more visually distinct.

I represented the above ideas at a small size below:

It would be very useful if you can share which states do you find particularly difficult/easy to recognize from your perspective. Thanks!

In T351563#9362877, @Pginer-WMF wrote:

• B) Reduce to 3 easier to distinguish levels. In this way only three levels need to be distinguished with white and grey, half blue and full blue, less effort is expected for distinguishing the states.

I already didn’t appreciate the four levels (down from the previous five), three would make it even less clear what the state of the translation is.

This may be different form an admin workflow where they may look for all languages where the translations is not complete (i.e., scanning through symbols first), for example.

As a translation administrator for almost a decade I honestly have no idea why would anyone do that, but if they do it would still be of huge help to know what status the icon is indicating without straining one's eyes.

A) Distinguish completion status in green. In this way, the colour makes the states different: mostly white and grey, white and blue, mostly blue, and green.

To be fair the complete one is probably the easiest to distinguish anyway, it is the other ones that are the hardest to distinguish. I would prefer to see it go from red to green as it used to, but other shades where colours would give you intuitive sense of what the percentage is like would be equally acceptable.

As a note, I actually think the solution to the original problem is incorrect. If there was a problem with interpreting the square statuses and a switch was made to circular ones, it would actually make sense to use circle as a full fledged diagram, which can use red to green gradient to facilitate its readability, than still using discrete values, and even fewer values than before that is. Currently the indicators are very misleading. For example at this time on m:Tech/News/2023/49/uk I see the following

Looking at the indicators my instinct is that French is not translated at all, perhaps like 2%, it is actually 12%, something that could clearly be indicated on a circular diagram; Swedish looks to me like ⅔ basing on the diagram, it is actually 88%, and upon opening it I see that only one news item is not translated, that is not ⅔, that is indeed over 80%, as in an absolutely usable translation; pretty much the same with Indonesian.
Had the whole circle been used and colour-coding was included we would see a red 12% filled circle for French, and yellowish green 88% filled circle for Indonesian and Swedish — a much more clear indicator than the current one, where I had to hover my mouse over the indicators to learn what the actual percentage is.

The squares were not perfect too, but I think they actually provided better intuitiveness as to what they mean, especially since they were colour-coded.

B) Reduce to 3 easier to distinguish levels. In this way only three levels need to be distinguished with white and grey, half blue and full blue, less effort is expected for distinguishing the states.

This is an absolutely terrible idea for the reasons, as I've just explained even 4 levels make it very un-intuitive as to what percentage levels correlate to, 3 levels would make it much worse, I assume you will make 30% and 0% look the same, and anything between 31% and 99% or something, the exact threshold do not matter much really. You might as well make it binary at that point…

C) Distinguish low-completion by border & colour. If 4 levels are useful, we can represent the initial two states as empty circles. Representing the initial one with a thinner grey border and the second one with a thicker blue circle. This allows making the remaining states more visually distinct.

Let's put it like this, making more complete levels bigger and less complete levels smaller would indeed help in interpretation (this reminds me how in many (most?) countries including my own bigger bills are bigger than the smaller ones). But this should be done in addition to colour coding (as indeed is also the case for the bills), not instead of it.