Page MenuHomePhabricator

Integrate publish button into the document area of the translation view
Closed, ResolvedPublic

Description

In order to better align the translation view with the design guidelines, we want to have the main content in a single piece of paper, keeping the tools to the side of it. In order to achieve that, we need to integrate the publish button into the main piece of content.

Currently the publish button is inside a header (we'll refer to it as the "publish header") that goes edge to-edge of the screen. This is the case except when the user scrolls, when that happens, the header resizes to align with the main document.
The proposal is for the publish header to better integrate in the document as illustrated below:

In particular, notice that:

  • The header is connected to the document. On scroll the header will become sticky (but won't become narrower since it is already aligned with the document).
  • The publish button is at the top-right corner of the document and uses a flushed style (the button is expanded to the edges of the toolbar as in the Visual Editor)

Details

Related Gerrit Patches:
mediawiki/extensions/ContentTranslation : masterCX2: Integrate publish button
mediawiki/extensions/ContentTranslation : masterCX1: Make header bar on translation view sticky again
mediawiki/extensions/ContentTranslation : masterRemove the progressbar from the translation view in CX2

Event Timeline

@Pginer-WMF: Is the shown mockup for the mobile website, or on the desktop (or both)?

@Pginer-WMF: Is the shown mockup for the mobile website, or on the desktop (or both)?

In the mockup I used tablet proportions, so it may fit both desktop and tablets.

For smaller mobile devices we have two strategies:

  • In the short term fix issues and apply responsive design in some areas to make the tool to be easier to use on small screens (T155767).
  • In the long term, figure out how a translation experience fully focused on mobile would look like (T132900).

@Pginer-WMF I noticed the progress indicator is missing. Intentional?

@Pginer-WMF I noticed the progress indicator is missing. Intentional?

Yes. I think that in practice it is not providing as much help as intended. The progress bar we provide in the in-progress list at the dashboard may be enough (at that point it provides a good overview of how much you completed when you left the translation).

If anyone had or observed a different experience feel free to comment.

santhosh added a comment.EditedMar 10 2017, 9:21 AM

Ok, no objections from me. Eventhough we can get rid of progress display in translation view, we need to calculate it. For MT overuse detection and the dashboard.

Hmm... I need some explanations.

  • Why is the top gray bar mostly empty? I'd expect "All translations" to be outside of the document, for example. "Saved 2 minutes ago" probably does belong in the white area, because it's about the document, but "All translations" goes away.
  • How will it look when scrolled down?
  • Was the absence of the scroll bar tested with users? I'm not strongly opposed to its removal, but I wonder what do other users think.
Pginer-WMF added a comment.EditedMar 10 2017, 10:03 AM

Hmm... I need some explanations.

  • Why is the top gray bar mostly empty?

The top grey bar (the personal bar) is not part of this ticket. This ticket is about the publishing bar.
The idea with the personal bar is to get it closer to a unified view with the mobile web, but that is still an in-progress work. You are right in that we need to accommodate the different options currently provided there, but that is a story for a different ticket.

I'd expect "All translations" to be outside of the document, for example. "Saved 2 minutes ago" probably does belong in the white area, because it's about the document, but "All translations" goes away.

The publish bar acts as a toolbar to control the content of the document. Completing (publish) and postponing for later (going back to all translations) are the main directions forward/backward in the process.

Also, as shown below, this is exactly what we have today. We are just proposing to make the existing toolbar narrower before scrolling (and the publish button more prominent). More on this below.

  • How will it look when scrolled down?

It will look very close to what it looks right now. Currently when you scroll, the publish toolbar becomes aligned with the document. This ticket proposes to do so from the beginning:

Currently before scrollCurrently after scroll
  • Was the absence of the scroll bar tested with users? I'm not strongly opposed to its removal, but I wonder what do other users think.

I'm not sure if you refer to "scrollbar" or "progress bar":

  • If you mean "scrollbar", we don't plan to remove any, users are expected to scroll through the page exactly as they do now (it is just not drawn in the mockup since it is very Os dependent component).
  • If you refer to the "progress bar", there is no specific study, but the conclusion is reached form previous observations we did and realising that it is not a component people use, pay attention to, or consider to make decisions while they are translating.

I think all these changes are worth testing. However, I'm not sue we should do individual studies for each of them. I think it make sense to apply those changes as part of the "editing surface refactoring" branch and test the final experience before making that branch the default one.

I meant "progress bar". Thanks for the explanations.

Change 342442 had a related patch set uploaded (by Santhosh):
[mediawiki/extensions/ContentTranslation] Remove the progressbar from the translation view

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

Change 342442 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation] Remove the progressbar from the translation view in CX2

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

Arrbee moved this task from Backlog to QA on the Language-2017 Sprint 4 board.Mar 21 2017, 6:12 AM
Arrbee moved this task from QA to Done on the Language-2017 Sprint 4 board.Mar 24 2017, 7:02 AM
Arrbee lowered the priority of this task from High to Medium.Apr 5 2017, 6:38 AM
Pginer-WMF removed Pginer-WMF as the assignee of this task.Jun 27 2017, 8:00 AM
Pginer-WMF edited projects, added User-Petar.petkovic; removed Design.

Change 369000 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] CX2: Integrate publish button

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

Change 396281 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] CX1: Make header bar on translation view sticky again

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

Change 396281 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX1: Make header bar on translation view sticky again

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

Change 369000 abandoned by Petar.petkovic:
CX2: Integrate publish button

Reason:
Publish button integrated as part of Id77aa5be3e807f19021eca4eb21d2bb7d1d02bc3.

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

I checked the ticket in wmf.15 (testwiki) and cx-testing.

All specs seem to be in place.
Overall look


The positioning of the icon when the page is scrolled down

The progress bar is still present in wmf.15 - removing it is not the part of this ticket. Can @Pginer-WMF verify that it should be removed?

Etonkovidova closed this task as Resolved.Jan 3 2018, 10:59 PM
Petar.petkovic moved this task from QA to Done on the Language-2017-Oct-Dec board.Jan 3 2018, 11:00 PM