Page MenuHomePhabricator

Adapt Translate Language header list design
Closed, ResolvedPublic

Description

Background

As of now, the translate languages list feels very heavy design-wise, as in it features a lot of emphasized design details.

  • A strong border,
  • two different background colors, although the two content parts, language headline (boldened) and languages list are dense in itself already
  • the information squares about translation progress and the mid dots separating the languages over-emphasizing the area between the languages over themselves
  • the translate message atop is set to x-small equaling 10px, which is below our own typographic recommendations

Current

image.png (736×1 px, 213 KB)

Quick proposal mockup

image.png (762×1 px, 223 KB)

Goal

Better fit the languages list to our current user-interface (Vector 2022) and underlying Wikimedia Design guidelines.

Event Timeline

This looks like a nice and simple improvement. Long-term I would like to move the list of languages to the new language selector in Vector. There are some considerations though like possible confusion between interlanguage and translation page links, especially if page has both, and how to handle the different location in other skins.

One thing that came to my mind was whether we should replace the colorful boxes–which indicate how complete the translation is–with single color circles where completion is indicated by how many degrees of the circle is filled.

One thing that came to my mind was whether we should replace the colorful boxes–which indicate how complete the translation is–with single color circles where completion is indicated by how many degrees of the circle is filled.

I could build on this alongside recommendations ion the ticket description. I do wonder if the circles would be a good option in terms of visibility. What kind of circles - filled or hollow?

@Pginer-WMF do you have some idea on how we could approach this or potential pitfalls?

As a side note, I remember @Amire80 mentioning that it would be a good idea to show a list of languages the content is not translated for as an entrypoint into content translation.

Wangombe changed the task status from Open to In Progress.Nov 29 2022, 8:13 AM
Wangombe claimed this task.
Wangombe moved this task from Incoming to In Development on the Design board.

@Pginer-WMF do you have some idea on how we could approach this or potential pitfalls?

Given that the indicator of completion can be repeated many times, I think it makes sense to simplify it to avoid the list to feel too crowded. Also the current one relies on highlighting the border of small squares so identifying smaller parts is required (which is not ideal).

If we simplify the shape, we may want to consider reducing the number of levels of completion we communicate.
Currently there are five levels (0 colored squares to 4 colored squares). One of the first questions would be to think on how many levels are needed and try to provide a clear meaning (and intention/expectations ) to each of those.

We can think of 4 levels:

  • (Almost or) Not translated. Nothing to consume. Please start translating.
  • Lightly translated. Hard to consume. Contributions very welcome.
  • Mostly translated. Can be consumed. Contributions still welcomed to complete it.
  • (Almost or) fully translated. Ready to consume.

A more radical approach could be based on 3 levels:

  • (Almost or) Not translated. Nothing to consume. Please start translating.
  • Incomplete translation. Consumption incomplete. Contributions welcome.
  • (Almost or) fully translated. Ready to consume.

With those levels, using circles partially filled can work well to be recognized. Representations of the different steps can use proportional increments or be more asymmetrical to make them more visually distinct. I tried three approaches illustrated below with some quick examples. There is still room to adjust sizes and pixel-align to improve visibility a bit, but I wanted to share early different directions to answer more fundamental questions first (can we do with three levels or do we need four?) .

Frame 427318204.png (145×362 px, 6 KB)

a) 4 levels (proportional)

4levels-proportional.png (381×978 px, 95 KB)

b) 4 levels (asymmetrical)

4levels-asym.png (381×978 px, 95 KB)

c) 3 levels

3levels.png (381×978 px, 95 KB)

What about going in the other direction: infinite levels? I’m not entirely sure, but I hope it’s possible to achieve with some CSS magic that exactly that many percents of the circle are filled that are translated, making a 5% translated page look differently than a 10% translated.

What about going in the other direction: infinite levels? I’m not entirely sure, but I hope it’s possible to achieve with some CSS magic that exactly that many percents of the circle are filled that are translated, making a 5% translated page look differently than a 10% translated.

I tried out your idea. At the size the circles are at, a percentage such as 10 is barely distinguishable from a 5 (see attached).

Screen Shot 2022-11-30 at 11.11.14 AM.png (131×452 px, 15 KB)
Screen Shot 2022-11-30 at 11.11.23 AM.png (640×627 px, 108 KB)
Using 3-4 levels makes more in this case as they are definite and distinguishable values to work with and we could add a title=percentage% to them - but that wouldn't be ideal for mobile as the touch targets are too small

Change 862641 had a related patch set uploaded (by Wangombe; author: Wangombe):

[mediawiki/extensions/Translate@master] Simplify language header list design

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

Using 3-4 levels makes more in this case as they are definite and distinguishable values to work with

But what do these “definite and distinguishable” values mean? 25% and 75% are not less distinguishable just because there may be other values in between, and definiteness makes only sense if it really has a meaning. I don’t think @Pginer-WMF’s classification works in all cases: for example, given a technical description or people list page with two or three paragraphs of introduction (each a single translation unit), and dozens of translation units that usually don’t need to be translated but sometimes need to be (e.g. technical terms that are untranslated in most languages or person names that need to be transliterated mostly in non-Latin-script languages), a 10% translation rate (the introduction) may be ready to consume, while a 90% translation rate (everything but the introduction) may be useless. I know this is an extreme example, but there are many pages where the size of the translation units varies a lot.

and we could add a title=percentage% to them - but that wouldn't be ideal for mobile as the touch targets are too small

Actually, the tooltips of the links themselves already contains this information (e.g. Leitfaden zur Barrierefreiheit für Entwickler (73% translated)), although this is hidden by the Navigation popups gadget if you have it enabled.

Screen Shot 2022-12-05 at 15.38.56 PM.png (245×1 px, 37 KB)

As per ticket recommendation, here are the results.

Just a note (it probably doesn’t affect how the languages bar works), you seem not to have the latest version of Vector – the watchlist star has been black instead of blue for some weeks now.

Just a note (it probably doesn’t affect how the languages bar works), you seem not to have the latest version of Vector – the watchlist star has been black instead of blue for some weeks now.

Updated comment screenshot. We can also move the recommendations by @Pginer-WMF to another ticket as this particular one shouldn't be covering the functionality in which the conversation took direction.

Another screenshot

image.png (567×1 px, 42 KB)

the information squares about translation progress and the mid dots separating the languages over-emphasizing the area between the languages over themselves << This is not done. I think we can atleast remove the mid-dots.

the information squares about translation progress and the mid dots separating the languages over-emphasizing the area between the languages over themselves << This is not done. I think we can atleast remove the mid-dots.

I don’t think they should be removed. If they’re simply removed, the progress indicators become kind of separators between the two languages, instead of belonging to one of them:

Screenshot 2022-12-06 at 10-23-47 „Wikidata Glossary” változatai közötti eltérés – Wikidata.png (163×1 px, 79 KB)

(this is just a quick screenshot from live Wikidata, without any of the changes in the in-progress patch). What could work is replacing them by blank space, as seen on @Pginer-WMF’s sketches as well:
Screenshot 2022-12-06 at 10-27-05 „Wikidata Glossary” változatai közötti eltérés – Wikidata.png (181×1 px, 83 KB)

This comment was removed by Wangombe.

As tested on Vector Legacy Theme:

Screen Shot 2022-12-08 at 11.06.13 AM.png (135×1 px, 23 KB)

As tested on Timeless theme:

Screen Shot 2022-12-08 at 11.05.09 AM.png (183×1 px, 33 KB)

@Pginer-WMF Do you have additional input on this? I believe we are ready to merge.

@Pginer-WMF Do you have additional input on this? I believe we are ready to merge.

Nothing to add. this looks good to me. We can consider the other ideas such as simplifying the symbols when we are up for a larger change of this language selector.

Change 862641 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Simplify language header list design

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

abi_ moved this task from For Review to Done on the Design board.

Marking this as done now.

There’s one thing we didn’t take into account: red links. Priority languages appear in the header even if they don’t exist yet (example). Being non-existent, they don’t get any progress indicator, so they have no separator anymore (this is especially confusing when two red links appear next to each other, like Arabic and Persian in the example). Maybe a zero-percent progress indicator should appear next to red links?