Usability: Make different language versions more different in the backend

[ballaschk]

At the moment, language versions are separated only by a pink line in the page editor. This can be a nuisance when a page has a lot of content and the pink language indicators are outside the display area. This can happen when the editor section becomes so long that is not visible at a glance which language version the user is editing at the moment.

Different solutions are possible and could be discussed:

• put different language versions in different tabs on the top
• indicate the language by a different background color (but which color should be used for which language)
• hide the other language with an accordeon menu (arrow icon at the very left of the pink bar) when editing content in a given a language
• language indicator with flag icon/emoji
• pink indicator bar that sticks to the top of the screen ...

I'm not sure which idea or combination of suggestion would work best.

[donald]

My references above where not targeted at this issue but at #10.

[donald]

The problem is, I'm a lousy visual designer. See my abysmal attempt in beb03c8 :

Help wanted.

[donald]

Alternative... Whenever the focus is in a german or english editor field, just show "English" or "Deutsch" in a absolute positioned box.... Working experiment in fe05f3b

[donald]

Looks like

now. I don't think, it will get any better (at least if I do it). Merge?

[ballaschk]

Hi Donald,

I'm not a visual designer either, mind you!

I liked the colorful version somewhat because the information is right where you need it – next to / behind the text field. I think I would not really pay too much attention to the box in the top left corner (sorry). And I can see why you didn't put it in the main input area on the right, because it would hide stuff underneath it.

What about having a different background color in the respective languages (English/standard laguage: standard grey background; German/additional language: a very light version of the standard green color like #cfe2e2). But maybe this still is too subtle. I guess the difficult task is to balance the aesthetic design with some additional attention-grabbing alert color ...

What about having a flag icon inside the pink ribbon above every input field (just where we have the somewhat cryptic [DE] / [EN] right now?) That would make the visual barrier much more distinctive.

What do you think?

Best,
Martin

[donald]

?

[donald]

[donald]

Last picture is #68. This takes to much time already...

[ballaschk]

Hm. I see the idea with the different colors was not a particularly bright one. This is even more disorienting and the letters in the background don't really help.

I think this is because we have two layers of information (languages) where only one is expected. The display is very linear and the alternation between languages competes with the alternation between different text fields and different input types.

Do we maybe have to remove the two languages from each other? And hide the other one while editing the first?

Is it possible to add some space at the top for a switcher? To be consistent with the logic of the system, this would have to appear inside the "Inhalt"/"Content" tab.

[donald]

Everything is possible. But this might take me two or three days, which I don't have.

[ballaschk]

Let's go with #68 (your last suggestion), then. And let's add the emoji in the pink ribbon ;)

[donald]

Remove the "EN" and "DE" background text?

[ballaschk]

I'd leave it in. :)

[donald]

Closed by #68