Page MenuHomePhabricator

Newcomer tasks: Enable easier toggling to open and close Desktop help panel
Open, LowPublic

Description

This task is to add an enhancement to enable easier toggling open and closing the help panel on Desktop when using it for guidance during editing.

From the parent task, this proposal is for the following user 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.

Proposed solution

Use the help panel call to action button as single toggle button to open and close the help panel.
designs forthcoming

Proposed changes

1. Move position of the help panel to sit above help CTA button and always visible.

2. Make the CTA the single button to toggle opening and closing the help panel.
Currently the CTA only opens the help panel, we want to also make it toggle closing the help panel.

3. Update the design of the CTA button when the panel is open

Mocks:

Panel open
Panel closed

4. Add animation transition on loading the page to show how the help panel opens up and closes from the CTA

a) Panel opening

open full screen to see animation
or else view on https://youtu.be/LrkB765Hfik
Description of the animation:

  • Animation starts only after the page has finished loading
  • Panel fades in upwards/outwards from the CTA button
  • "?" icon rotates 90 degrees counter-clockwise and fades out whilst the expand icon simultaneously fades in and rotates counter-clockwise from 45 degrees to 0 degrees

b) Panel closing
open full screen to see animation


or else view on https://youtu.be/lbi62ttyhI4

Description of the animation:

  • Triggered when either close button or help panel CTA button is selected
  • Panel fades out down and inwards to the CTA button
  • Expand icon rotates clockwise to 90 degrees and fades out, whilst the "?" icon simultaneously fades in and rotates clockwise from -45 degrees to 0 degrees

Event Timeline

RHo created this task.Jun 12 2020, 11:33 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 12 2020, 11:33 AM

@RHo is going to add designs on here.

@RHo -- in a conversation with @Dyolf77_WMF and @Urbanecm, we were looking at the early designs for this change, and they like the new design, but they also recommended that we consider reducing the button to just a question mark, instead of the full "Get help with editing" call-to-action. They say it's because the button is very long in some languages. Having just the question mark is what we do on mobile. Here it is in French:

What do you think?

RHo triaged this task as Low priority.Jun 19 2020, 7:19 AM
RHo updated the task description. (Show Details)Jun 22 2020, 5:34 PM
RHo updated the task description. (Show Details)Jun 22 2020, 5:36 PM

Also, closing the help panel logs a CTA impression now. We probably don't want that.

I agree that we don't want that. Should we file a task for it? Could you file it please?

Since T255255: Newcomer tasks: Enable easier toggling to open and close Desktop help panel is happening soon, this will probably take care of itself (the extra impression is only happening because we are removing / readding the CTA button now).

@Etonkovidova -- let's make sure this is taken care of with this task.

Change 608509 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Make the CTA button a toggle

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

Change 608510 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Move white background back down to the dialog

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

The attached patch implements 1-3, but not 4 (the animation part), because there's not enough information in the task about what the animation would be (and there are no links to mocks or specs or anything that would tell me).

The patch does the following:

  • Move the help panel up, to above the button
  • Remove the text from the button, and make the button a circle with a diameter of 42px (3em)
  • While the help panel is open, no longer hide the button. Instead, change its icon from ? to ^ and make clicking it close the help panel
  • Increase the font size of the button (from 12.25px to 14px). It was set to 0.875em twice and that compounded, which was likely a mistake (16 * 0.875 * 0.875 = 12.25; 16 * 0.875 = 14)

The slide up animation for the help panel is unchanged, except that it now travels a greater distance (from the bottom of the viewport to a higher position than before). There is currently no animation while closing the help panel.

Change 608510 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Move white background back down to the dialog

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

This patch undoes part of T244546#6087058, see T244546#6266354 for an explanation. It fixes an existing issue that would otherwise be made worse by this task.

Change 608510 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Move white background back down to the dialog

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

RHo added a comment.Jun 30 2020, 12:25 PM

The attached patch implements 1-3, but not 4 (the animation part), because there's not enough information in the task about what the animation would be (and there are no links to mocks or specs or anything that would tell me).

[...]

There is currently no animation while closing the help panel.

Sorry @Catrope - let me add the animation for *both* opening and closing the panel shortly.

RHo updated the task description. (Show Details)Jun 30 2020, 8:38 PM

hi @Catrope - I've just added the animation details in the task description. Happy to separate out into a different subtask if you prefer.

Change 609245 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Transitions for the CTA button

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

The attached patch implements the animations mostly the way you asked for, but slightly differently. There's an asymmetry in the spec, saying the icons rotate from +/-90 to 0 when fading in, but from 0 to +/-45 when fading out. It was much easier to implement this with CSS transitions rather than animations, but transitions have to be symmetrical, so what I've implemented for now is a symmetrical version where the icons also rotate 90 degrees when fading out.

I used a transition duration of 400ms, because that's what the duration of the existing transition on opening the help panel was, and I thought the durations of these two transitions should match. We can easily change this though (I've pulled the 400ms number out into a variable, so we can update it in one place to change the duration of both transitions in lockstep).

The underlying CSS is here (starting at line 29), in simplified form it's basically:

.mw-ge-help-panel-cta a.oo-ui-buttonElement-button .oo-ui-iconElement-icon {
    transition: transform 400ms, opacity 400ms;
    /* Implicitly: transform: rotate( 0 ); opacity: 1; */
}

.mw-ge-help-panel-cta a.oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
    transition: transform 400ms, opacity 400ms;
    transform: rotate( 90deg );
    opacity: 0;
}

.mw-ge-help-panel-opened.mw-ge-help-panel-cta a.oo-ui-buttonElement-button .oo-ui-iconElement-icon {
    transform: rotate( -90deg );
    opacity: 0;
}

.mw-ge-help-panel-opened.mw-ge-help-panel-cta a.oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
    transform: rotate( 0 );
    opacity: 1;
}

(the "icon" is the ?, the "indicator" is the ^; fun fact: my life was made a lot easier by the fact that ^ is one of only four indicators listed at the bottom of this page)

RHo added a comment.Jul 3 2020, 10:48 AM

The attached patch implements the animations mostly the way you asked for, but slightly differently. There's an asymmetry in the spec, saying the icons rotate from +/-90 to 0 when fading in, but from 0 to +/-45 when fading out. It was much easier to implement this with CSS transitions rather than animations, but transitions have to be symmetrical, so what I've implemented for now is a symmetrical version where the icons also rotate 90 degrees when fading out.

I used a transition duration of 400ms, because that's what the duration of the existing transition on opening the help panel was, and I thought the durations of these two transitions should match. We can easily change this though (I've pulled the 400ms number out into a variable, so we can update it in one place to change the duration of both transitions in lockstep).

Thanks @Catrope for adding the animations, it looks great in the above GIF! Sounds good regarding being able to update the transition duration, think 400ms seems right but would want to assess in situ.

kostajh added a subscriber: kostajh.

I've +2'ed the patches here, but moving into needs more work to address this observation:

I do see an odd issue with the help panel CTA button resizing on the initial click, though, which I've tried to capture in this file:

It happens after clicking on a suggested edit from the homepage.

Change 608509 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Make the CTA button a toggle

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

Change 609245 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Transitions for the CTA button

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

Tgr added a comment.Wed, Jul 22, 4:40 PM

If you visit an article via the suggested edit card on the homepage, and then reload the page, the help panel icon will disappear (the panel itself won't).

If you visit an article via the suggested edit card on the homepage, and then reload the page, the help panel icon will disappear (the panel itself won't).

Note for future testing oo-ui-iconElement-icon oo-ui-icon-help oo-ui-image-invert is not displayed after reloading a page with open guidance panel.