Page MenuHomePhabricator

Newcomer tasks: notice to switch to VE within guidance
Closed, ResolvedPublic

Description

Problem

From the parent task T254823, there may be some situations where a newcomer is shown the wikitext editor when they select to edit a newcomer task article. This is potentially quite confusing for the user since because the guidance content is written to help users to edit using the Visual Editor instead.

Proposed solution

  • Any time a user is detected to be in the wikitext editor, whether on desktop or mobile, show a notice within the guidance content that lets users know they should switch to VE for more accurate help.
  • The notice should contain a link to switch to VE directly in the notice itself.
  • We should log an event for if the user switches the editor by clicking the link.
  • Use visual treatment D in the image below, in which the notice is about the "Quick start tips" header.
  • The copy should say, "You are using the source editor. These editing tips are most helpful with the visual editor. Switch to the visual editor." The third sentence should be link that switches the editor.
  • Note that there may be wikis in the future that will want this to be the other way around; they may want the default to be the source editor and for the notice to encourage the user to switch from the visual editor to the source editor. We should build such as to handle that in the future. The copy for this will be, "You are using the visual editor. These editing tips are most helpful with the source editor. Switch to the source editor.

Visual treatment options:

  • Visual treatment A - Re-uses the help panel footer
  • Visual treatment B - Re-uses the help panel footer with additional "warning" styling
  • Visual treatment C - Places the warning notice above the tips tabs, and re-uses styling from the guidance text supplement example text box.
  • Visual treatment D - Like C, but place the notice about the tips header.
NOTE: We are implementing visual treatment D

Event Timeline

RHo created this task.Jun 10 2020, 8:04 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 10 2020, 8:04 PM
RHo updated the task description. (Show Details)Jun 12 2020, 6:24 PM

hi @MMiller_WMF - I've created some different visual treatments for the nudge to VE notice on the task description for discussion and decisions.
My preference is for visual treatment C as it is more likely to be noticed by the user than being in the footer, and it is also hierarchically makes more sense as a warning shown above the tips.

@RHo -- could you please add a fourth visual treatment, one in which the banner is above the "Quick start tips" header? Then we can look at all of them together.

RHo updated the task description. (Show Details)Jun 15 2020, 3:48 PM
RHo added a comment.Jun 15 2020, 3:52 PM

@RHo -- could you please add a fourth visual treatment, one in which the banner is above the "Quick start tips" header? Then we can look at all of them together.

Done. Per out chat offline D makes more sense as we forsee future guidance content in here also being tailored to a VE audience.

MMiller_WMF renamed this task from Newcomer tasks: Add nudge to switch to VE within guidance to Newcomer tasks: notice to switch to VE within guidance.Jun 16 2020, 1:25 AM
MMiller_WMF removed RHo as the assignee of this task.
MMiller_WMF updated the task description. (Show Details)
MMiller_WMF updated the task description. (Show Details)
MMiller_WMF added subscribers: Catrope, kostajh, Tgr and 4 others.
RHo updated the task description. (Show Details)Jun 18 2020, 12:37 PM

Note that there may be wikis in the future that will want this to be the other way around; they may want the default to be the source editor and for the notice to encourage the user to switch from the visual editor to the source editor. We should build such as to handle that in the future.

@RHo @MMiller_WMF could you please provide copy for this so I can include it in the translation strings?

Also, do you want the click to the link to be instrumented?

Change 606686 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] WIP: Help panel: Add warning if user is in non-preferred editor

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

One more question: I don't think we can make the icon yellow unless we create an ship our own (which is doable of course). A possible alternative might be to use the @background-color-warning--framed background color? It seems like that might be more in line with how warnings are presented elsewhere in MediaWiki but not totally sure. If you prefer the yellow warning icon, could you please provide a SVG for it?

MMiller_WMF updated the task description. (Show Details)Jun 22 2020, 5:09 AM

@kostajh -- I added copy to the description for the future potential case of when the user is encouraged to switch from VE to source editor. And yes, we should instrument the link. I added that the to the task description, too.

@RHo can answer about the icon.

I'm moving this into code review although the "Switch" link is not implemented on mobile in the current patch. The code needed to do that is going to be very similar to what we write for T254823; I'll try to come back to it but it made sense to split it out for now. Here's how it looks with the current styles / colors (@RHo please let me know about the icon color when you have a moment; also is there a screen in Zeplin that corresponds to the mockups from the task?):

Desktop

Mobile (no link)

RHo added a comment.Jun 22 2020, 3:18 PM

Thanks @kostajh - so the icon color would be using the same one as used in the inline warning message on OOUI, which is in color #fc3. If it helps, the direct link to the icon via the OOUI MessageWidget is alert-warning.svg (and here's the fallback PNG)

Also, I just exported a Zeplin here, but the idea is this uses the same styling as the supplement example quick tips styling, so the same fixes noted in T254527 would apply here in regards to spacing around the icon and the tip, etc.

I'm moving this into code review although the "Switch" link is not implemented on mobile in the current patch. The code needed to do that is going to be very similar to what we write for T254823; I'll try to come back to it but it made sense to split it out for now. Here's how it looks with the current styles / colors (@RHo please let me know about the icon color when you have a moment; also is there a screen in Zeplin that corresponds to the mockups from the task?):

Desktop

Mobile (no link)

Change 606686 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Add warning if user is in non-preferred editor

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /606686

Etonkovidova updated the task description. (Show Details)Fri, Jul 10, 8:26 PM

The notice should contain a link to switch to VE directly in the notice itself.

On mobile there is no link "Switch to the visual editor" - the explanation is in comments, e.g. https://phabricator.wikimedia.org/T254823#6296671 (and on the patch https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /606686)

Some screenshots (for general illustrations, no issues are found):

desktopmobile

Thanks @Etonkovidova, this LGTM including having no switching to VE on mobile per comment T254823#6296671.

The notice should contain a link to switch to VE directly in the notice itself.

On mobile there is no link "Switch to the visual editor" - the explanation is in comments, e.g. https://phabricator.wikimedia.org/T254823#6296671 (and on the patch https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /606686)

Some screenshots (for general illustrations, no issues are found):

desktopmobile
MMiller_WMF added a subscriber: Urbanecm.

@kostajh -- this looks good, except for one weird thing: the link doesn't work on Czech Wikipedia. It works on all of our other wikis. See the attached gif.

FYI @Urbanecm

@MMiller_WMF hmm, it worked for me. Are you able to reproduce it consistently? If so, could you please open your inspector in Chrome (right click anywhere on the page and select "Inspect Element", then click on Console) and reproduce the issue; you should then see some error in the console.

MMiller_WMF closed this task as Resolved.Tue, Jul 14, 4:36 PM

@kostajh -- I figured out the problem. I had syntax highlighting turned on, and so it didn't work per this bug: T257627: "Syntax highlighting" option in source editor prevents switching to VE from guidance panel link. There is a question on that one for you.

Otherwise, this is now resolved.