Page MenuHomePhabricator

Newcomer tasks: Fix back-then-close issue when using guidance with editing
Closed, ResolvedPublic

Description

User Job Story

When I am using guidance during editing and need to access an area obscured by the help panel,
I want to be able to quickly toggle the panel display (or otherwise move it out of the way)
So that I can easily complete the editing tasks whilst following the in-context tips.

Problem

The current design requires the user to first tap the “<“ button to return to the root screen before knowing to tap on the “X” button to minimise the dialog.
Note: This issue was introduced when we decided to “unify” the back button design (T248065) of Desktop and Mobile without due consideration of how this impacted usage of the panel during editing.

Proposed solution

  • Provide the ability for users to close the go back to the root screen in the header in Suggested edits by removing the settings/options menu under the ellipsis "..." icon from the header.
  • This is the proposed *short-term* solution that apples to both Desktop and Mobile versions of the help panel.
  • Another task details the Desktop-only enhancement for the long-term is detailed on T255255.
  • Note that all these changes apply to the help panel whether the user is in the suggested edits workflow or not.
Summary of proposed changes

1. Remove the overflow menu from the header entirely from the help panel

  • The "..." icon with menu options will no longer appear on the root screen nor any other sub-screen.
  • The links that were previously shown in the menu are placed below all the tile buttons on the root screen only
Root
image.png (600×408 px, 44 KB)
showing the option menu links below tile buttons

2. The close "x" icon is shown on the root, guidance, and general help screens in top right of the header.

  • "X" icon already on the root screen is moved to the RHS
  • Replace "..." in the General help and guidance screens with the "x" to enable closing the panel directly from these "sub-screens".
Root
image.png (600×408 px, 44 KB)
Guidance
image.png (600×408 px, 33 KB)
General help
image.png (600×408 px, 29 KB)

3. Update "<" left chevron ("previous") icon to use "arrowPrevious" icon instead on sub screens
The arrowPrevious icon is more apt for moving up to the root screen, as "<" is generally more utilized for previous step in a multi-step flow.

Ask a question (Post)
image.png (600×408 px, 41 KB)
Ask question confirmation
image.png (600×408 px, 29 KB)
Guidance
image.png (600×408 px, 33 KB)
General help
image.png (600×408 px, 29 KB)

4. Select "Done" on the Ask a question confirmation screen redirects user back to the root screen
Currently after a user submits a question, the "Close" button on the top right header on the confirmation screen closes the panel, and when the panel is reopened the confirmation is still shown.
Expected behavior is that the user is returned to the root screen with the help panel still shown on selecting "Done".

Ask question confirmation
image.png (600×408 px, 29 KB)
selecting "Done" returns user to the root screen.

5. Update link labels and targets according to the following

  • "Disable the help panel": should go to Special:Preferences#mw-prefsection-editing. This rewording may help the user find the correct preference even if they select this option from the suggested edits screen (which contains no mention of "help panel").
  • "About the help panel": should go to https://www.mediawiki.org/wiki/Special:MyLanguage/Growth/Focus_on_help_desk/Help_panel.
  • "About suggested edits": should go to https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Growth/Tools/Suggested_edits. Should only be in the list of links if the user is doing a suggested edit.

Event Timeline

MMiller_WMF subscribed.

@RHo -- does this design also work when the user is using the help panel outside of the context of suggested edits?

@RHo -- does this design also work when the user is using the help panel outside of the context of suggested edits?

Yes, adding the close button to be accessible on the Get help with editing page reverts back to the previous interaction before suggested edits was added as a sub-screen option.
The bigger change to exposing the more links on the root screen means users are more likely to notice the ability to turn off help from the root screen, but this is balanced out by the options no longer being "globally accessible" on the ".." menu.

Change 606240 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Help panel: rearrange close icon and cog menu

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

I increased the panel size to 580 px to accommodate the links.

The patch does not include change 4, that will be more convenient to do after Kosta's refactoring lands.

Hi @Tgr, can the panel height be reverted back to 528px? I think it's fine if there is some scrolling on the root screen sometimes rather than having the taller panel all the time.

I increased the panel size to 580 px to accommodate the links.

The patch does not include change 4, that will be more convenient to do after Kosta's refactoring lands.

"Disable the help panel":

The current wording for the preference in English is Enable the editor help panel. Should we use the same language here, i.e. "Disable the editor help panel" (and then in QQQ tell translators to look at that message to make sure they use the same phrase so it's easier to find in preferences)? Or alternatively, maybe we should rename the English translation to "Enable the help panel"?

"Disable the help panel": should go to Special:Preferences#mw-prefsection-editing. This rewording may help the user find the correct preference even if they select this option from the suggested edits screen (which contains no mention of "help panel").

This links feels a little distracting, both because it's first in the list and because of the progressive (blue) link style. IIRC, hardly any newcomer disables the help panel so I wonder if we could just keep the "About the help panel" link which already has instructions on how to disable it?

Change 606240 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: rearrange close icon and cog menu

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

@Tgr I neglected to catch on initial review that the closing X on the right should have the more faded style, similar to the back arrow and X on the top left.

Change 606442 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Fix help panel close icon styling

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

Hi @Tgr, can the panel height be reverted back to 528px? I think it's fine if there is some scrolling on the root screen sometimes rather than having the taller panel all the time.

Done.

@Tgr I neglected to catch on initial review that the closing X on the right should have the more faded style, similar to the back arrow and X on the top left.

Done in a follow-up.

Change 606442 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Fix help panel close icon styling

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

Moving back due as I noticed the following issues related to the addition of the the links in the root screen:

[1] The root panel links are overflow into the bottom of guidance as well as all other help panel 'sub' screens.

Guidance
image.png (1×664 px, 65 KB)
Ask a question
image.png (1×638 px, 74 KB)
General help
image.png (1×618 px, 49 KB)

The last link text should not be visible and clickable below the guidance content, and note the footer should be fixed to the bottom of the guidance screen on Read mode.

[2] Unexpected vertical scrolling occurring in the Guidance screen.
This also seems due to the additional height from the root screen links.

[3] Reduce prominence of the links to be as per Design
Apologies I did not paste a Zeplin with specs, but it is now here.

Actual
image.png (316×672 px, 22 KB)
Expected (desktop)
image.png (606×994 px, 65 KB)

The details are:
a. Use the OOUI UI text style for the links, which is font-weight:regular with font-size 14px and 16px on Desktop and Mobile respectively.
b. Update the info icon to use infofilled from the OOUI icon set
c. Reduce the size of the icon to 16x16px (80% of the original size)

[4] Link icons do not correspond to the links
I've updated the link labels to make it clearer the expected match and order of links to be:
1st. Infofilled icon -> About help panel
2nd. lightbulb icon -> About suggested edits
3rd. settings icon -> Disable the help panel

Change 607043 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Help panel home screen menu item fixes

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

Change 607334 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Fix help panel "Done" button behavior

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

Change 607334 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Fix help panel "Done" button behavior

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

Change 607043 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel home screen menu item fixes

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

@kostajh -- a belated response to your question about the wording to disable the panel: I think we should definitely keep the wording in the help panel that we think is right for that moment, which is "Disable the help panel". I suppose, then, that the best change to make would be to change the label of the checkbox in preferences to "Enable the help panel" instead of "Enable the editor help panel". Do you think we should we do that? Or would that cause too many translations to need to be updated to make it worth it?

Checked in betalabs and testwiki wmf.38 (all patches up to https://gerrit.wikimedia.org/r/606442 (included) have been deployed). All seem according to the task specs.

Checking specs in @RHo comment.

[1] The root panel links are overflow into the bottom of guidance as well as all other help panel 'sub' screens.

Fixed - DONE

[3] Reduce prominence of the links to be as per Design

In betalabs it seems to be according to the specs.
Note: Should the latest fixes be backported?

betalabstestwiki
Screen Shot 2020-06-23 at 5.44.38 PM.png (537×511 px, 50 KB)
Screen Shot 2020-06-23 at 5.44.53 PM.png (556×509 px, 50 KB)

@kostajh @Catrope @Etonkovidova -- thanks for reviewing. I do think we should backport at least the changes for [1], about the link text overflowing.

image.png (697×409 px, 60 KB)

Change 607453 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@wmf/1.35.0-wmf.38] Help panel home screen menu item fixes

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

Change 607453 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@wmf/1.35.0-wmf.38] Help panel home screen menu item fixes

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

Mentioned in SAL (#wikimedia-operations) [2020-06-24T12:03:10Z] <awight@deploy1001> Synchronized php-1.35.0-wmf.38/extensions/GrowthExperiments: BACON: [[gerrit:607453|Help panel home screen menu item fixes (T255254)]] (duration: 01m 06s)

Re-checked in testwiki wmf.38 - all is in place.

Additional notes:

  • if a user minimizes (click 'X' on the guidance panel in reading mode), it's not preserved. Next SE article will display an open guidance screen again.
  • it could be great if a user can select a next SE article from the guidance/help panel not only from the post-edit dialog.

Use case: a user goes to a SE article; in a reading mode scans the article; realizes that probably another article would be a better editing opportunity; would click somewhere in the guidance panel for the next SE article.

Whilst most of the design review items from my comment T255254#623223 are fixed, I've just notice the close "x" button is still inconsistently place on the LHS of the root screen:

Root screen
image.png (1×658 px, 75 KB)

It is important that it is consistently in the same position in the header (always on the right hand side), esp. for mobile when it is covering the whole screen.

Also, I am able to overscroll past the guidance footer on desktop, but assuming that is will be fixed by T255850:

image.png (1×776 px, 95 KB)

Change 607882 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Fix help panel close icon positioning

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

Change 607882 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Fix help panel close icon positioning

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

hi @Tgr - I just noticed another minor thing missed in the update that was in the mocks but not specifically called out, which is that the panel header should be text left-aligned (for LTR languages) in this new design.
This is especially noticeable on the root screen as being a bit funky when using centre-aligned:

Expected
image.png (600×408 px, 44 KB)
Current Betalabs
Screen Shot 2020-07-01 at 5.41.16 PM.png (485×365 px, 31 KB)

Would you prefer to update on this task or for me to file a separate one?

@RHo this task is fine. How important it is, though? I looked into it but the label is laid out by OOUI dynamically in a way that's not very intervention-friendly, and messing with it would add to maintenance debt (we'd have to maintain our own fork of this method, unless I'm missing a better option), so if it's just a minor thing, I'd rather not do it.
(FWIW, OOUI does left-align on mobile.)

@RHo this task is fine. How important it is, though? I looked into it but the label is laid out by OOUI dynamically in a way that's not very intervention-friendly, and messing with it would add to maintenance debt (we'd have to maintain our own fork of this method, unless I'm missing a better option), so if it's just a minor thing, I'd rather not do it.
(FWIW, OOUI does left-align on mobile.)

Ok that's fair, thanks for the explanation. It is more important for mobile so this is fine to stay centred on desktop.

The following fix's been checked on testwiki wmf.39.

(1) Done

Whilst most of the design review items from my comment T255254#623223 are fixed, I've just notice the close "x" button is still inconsistently place on the LHS of the root screen:

Root screen
image.png (1×658 px, 75 KB)

It is important that it is consistently in the same position in the header (always on the right hand side), esp. for mobile when it is covering the whole screen.

  • the 'X' button is consistently placed:
Screen Shot 2020-07-07 at 5.44.06 PM.png (555×374 px, 53 KB)
Screen Shot 2020-07-07 at 5.44.00 PM.png (579×375 px, 52 KB)

(2) I cannot anymore reproduce the following issue - seems that it's fixed.

Also, I am able to overscroll past the guidance footer on desktop, but assuming that is will be fixed by T255850:

image.png (1×776 px, 95 KB)

Too easy, thanks!

The following fix's been checked on testwiki wmf.39.

(1) Done

Whilst most of the design review items from my comment T255254#623223 are fixed, I've just notice the close "x" button is still inconsistently place on the LHS of the root screen:

Root screen
image.png (1×658 px, 75 KB)

It is important that it is consistently in the same position in the header (always on the right hand side), esp. for mobile when it is covering the whole screen.

  • the 'X' button is consistently placed:
Screen Shot 2020-07-07 at 5.44.06 PM.png (555×374 px, 53 KB)
Screen Shot 2020-07-07 at 5.44.00 PM.png (579×375 px, 52 KB)

(2) I cannot anymore reproduce the following issue - seems that it's fixed.

Also, I am able to overscroll past the guidance footer on desktop, but assuming that is will be fixed by T255850:

image.png (1×776 px, 95 KB)

Thank you! This is was the most important improvement we wanted to make to guidance after its release.