Page MenuHomePhabricator

Warning message for CAT (translation) interface should not move UI elements
Open, Needs TriagePublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • On MetaWiki, go to any translatable page
  • Click Translate this page
  • Click on any segment
  • Start typing a parenthesis but do not close it or save the segment

(After you see what happens please delete the parenthesis and cancel your change.)

What happens?:

  • Observation: After 3 seconds, the “Publish translation” and “Skip to next” buttons, as well as the text field for the commit message, are pushed down one line
  • Significance: If the translator at this point closes the parenthesis *and* then tries to write a commit message, the segment is saved with no commit message

What should have happened instead?:
The position of important UI elements should not move. There are two ways I can see that can achieve this:

  1. Reserve a blank line where the warning is currently displayed. The blank line stays visible but blank (e.g., visibility: hidden or content: "") until a warning is displayed. The warning thus takes up a fixed amount of space and would not push UI elements down.
  2. Move the warning to *below* the Publish and Skip buttons so that when the warning is added/removed these buttons will not move.

Option 2 is probably the better solution, since Option 1 might not be compatible with some languages; alternatively, if visibility of the warning above the active segment is deemed important, a hybrid option (a reserved space for a warning icon + a detailed warning below the Publish button) can be considered.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Note: it was suggested that I filed this as a feature request, but this is technically a bug, since it is an accessibility issue and actually *causes* user errors.

Original discussion: https://meta.wikimedia.org/wiki/Meta:Babel#Usability%20of%20the%20CAT%20interface%20here

Event Timeline

I just want to add that this is a pretty serious problem from the translator’s POV. Programmers might think putting up a disruptive warning is a good thing, but this disrupts our thought process, taking us out of “flow” (not to mention a timeout of 3 seconds is unreasonable, especially when we’re typing template calls); so in addition to potentially causing user errors, the current way of presenting the warning can have the potential to cause translation errors.

Per T164306: There should be a longer wait before displaying `There is an uneven amount of parenthesis`, the timeout was 500 ms, then increased to 2000 ms, then decreased to 1000 ms again. Then there is additional delay from network latency and request processing in the backend.

I’d like to add that this one-second timeout applies after the last keystroke, so if you’re typing continuously, the warning won’t appear, only once you stop typing.

I would like to comment that non-Latin languages exist. In CJK languages input is typed via an IME. Even if we typed continuously (from our POV) the system wouldn’t see input as being continuous. This is essentially a form of Euro-centric discrimination.

It also doesn’t change the fact that disrupting the display takes us out of flow. Therefore if your goal is to have us type “continuously” (very unreasonable in the first place, since we need to think) having the display disrupted is counter-productive.

Not to mention this is also an accessibility issue. Not everyone types through a keyboard. Any response-time-based assumptions are ableist.

This issue of "UI elements move the block I'm typing in" has frustrated me before, too. The warnings can be helpful, especially in long blocks of text, but the way they appear/disappear can cause problems with mis-clicking on the $tvar variables and Discard changes button, as well as the Publish button.
I think either of the proposed changes/solutions in the Description would be great.