Page MenuHomePhabricator

Provide better education and guidance for template editing
Open, MediumPublic

Description

As Content Translation allows to translate templates (T139332), users will be exposed to the "template" concept which may require some context to understand.

Although initial research (T146419) showed that users are able to access and edit templates, some of the users were not familiar with the concept of a template and a bit overwhelmed by the complexity of the concept (e.g., indicating that when they normally edit would just use plain text instead).

Some quick education and guidance that introduces the concept of templates (in the translation context) could help to clarify which is the purpose of these elements users cannot edit directly. Given that users would be in the middle of a translation, the education should require minimal time and cause minimal distraction.

Proposed solution

For the first time that the user access the template editing mode, an introduction panel will be shown with basic information about templates and translation. After closing the panel, a tooltip from the close action will be shown to explain how to go back. More details on each step below:

Welcome message

  • The panel is non-blocking and is shown integrated in the template translation area. Users can scroll and continue the translation ignoring the panel.
  • The panel shows the following text:

Translating templates
Templates help to keep the information consistent across different pages. A template will format nicely the data you provide.

Below you have available the data of the template in both languages for you to translate. Note that not all templates are available or use the same fields in all languages.

  • A "Learn more" link is provided to access the information wiki page about translating templates.
  • Once the user clicks on "Ok, got it" or closes the whole template editing mode, the panel won't be shown again in any template or translation. After clicking the button, the panel will disappear making the layout to readjust smoothly (making cards to move up to occupy the space left by the panel).
  • The image used in the panel is an animation (file available at F5058209) as shown below:

Next step tooltip
After clicking on the "Ok, got it" button from the welcome panel, a tooltip will be shown pointing to the close action and remaining visible for a few seconds. The tooltip shows the following text:

Anytime you can go back to the document and check how your changes are displayed

Related Objects

StatusSubtypeAssignedTask
OpenNone
OpenNone
OpenNone
OpenNone
Resolved Petar.petkovic
OpenNone
Resolvedsanthosh
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
ResolvedPginer-WMF
OpenNone
OpenNone
OpenNone
Resolvedsanthosh
ResolvedNikerabbit
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone

Event Timeline

I guess that for sprint 5 this can only be relevant for design. Tagging for discussion.

Pginer-WMF removed a project: Design.
Pginer-WMF updated the task description. (Show Details)

I added details for the proposal and the animated image to be used. Removing the "design" tag and assigning to Amir for review.

Generally nice, but some comments and questions:

  • Will it be shown ONLY for the first time? Maybe there should be a button to show this help panel at any time?
  • The location and the functionality of the "X" might change (e.g. T152770, T150953).
  • We should add a link or two more, to give communities opportunities to link to relevant help pages. I'd go for making the first word "Templates" a link to the local help page about templates, and "Learn more"—a link to the CX Templates help page. The URLs must be configurable per site, but with reasonable defaults (this is easy to do using messages).

Generally nice, but some comments and questions:

  • Will it be shown ONLY for the first time? Maybe there should be a button to show this help panel at any time?

The idea is to show it the first time, since it is just a brief intro. I agree that there is value in making it possible to find the help link ("learn more") again. We can consider adding it as part of the template card, or just make sure it is easy to find when users get to the main documentation page for the tool.

  • The location and the functionality of the "X" might change (e.g. T152770, T150953).

Even if it changes, the pattern here is to show a tooltip pointing to it with a message that explains you can use it to go back. I don't think that would be affected by the linked tickets although it is always good to keep related tickets in mind.

  • We should add a link or two more, to give communities opportunities to link to relevant help pages. I'd go for making the first word "Templates" a link to the local help page about templates, and "Learn more"—a link to the CX Templates help page. The URLs must be configurable per site, but with reasonable defaults (this is easy to do using messages).

Ideally we should have a CX-specific wiki page about translating templates, which can be CX Templates help page. That page can contain other links to cover related areas. However, adding those at the top level forces the user to make decisions they may not have enough information to do (e.g., should I click on "templates" or on "learn more" to learn more about translating templates?).