Page MenuHomePhabricator

Newcomer tasks: animate transitions between panels
Closed, ResolvedPublic

Description

Splitting out the requirement for the panel swiping animations that can be seen in the prototype (https://oacaib.axshare.com/#id=iqfam8&p=02_article-lamington) when transitioning between states on Desktop.
Note: Redline mocks are on the Growth Zeplin board (tagged with Guidance v1.2)

Detailed description of transitions

1. Loading article with guidance open from the homepage
Action: Click on a Suggested edit article from the homepage
Expected transition: Guidance panel fades in and slides up from the bottom of the browser window

Guidance-transition loading article from SE module.mov.gif (1×2 px, 2 MB)
Open full screen for animated gif
or view video at https://youtu.be/ylVoZyWw9xQ

2. Guidance panel switching between states from Read to Edit mode
Conditions: Guidance is open on Read mode
Action: Click edit to see switch in states animation
Expected transition: Guidance suggested edits screen transitions to the Guidance root screen by sliding right.

Guidance-transition when open changing from Read to Edit root screen.mov.gif (1×2 px, 2 MB)
Open full screen for animated gif
or view video at https://youtu.be/fc-wXE7J97U

3. Navigating to and from the Guidance root screen menu items
Action: Click on a button in the root screen, click on the back "<" button in the header of the SE, Mentor, and General header screens.
Expected transition: The header and contents should slide in from the right when advancing and then move back to the left when going back.

Guidance-transition to and from root screen.mov.gif (1×2 px, 2 MB)
Open full screen for animated gif
or view video at https://youtu.be/8jXCPfQB2Tw

Event Timeline

@RHo the prototype doesn't have the settings cog, but I assume it should also be part of the components that are animated in and out.

RHo updated the task description. (Show Details)

@RHo the prototype doesn't have the settings cog, but I assume it should also be part of the components that are animated in and out.

Hey @kostajh - short answer yes, but I would like to use the ellipsis icon "..." instead of the cog (seeing as there are other things besides preferences under this menu).
Note: I've updated the Axure prototype to the correct v1.2.1 link (it was previously using an older version). Also the Zeplin mocks show redlines and should be the source of truth for the individual screens.

@RHo -- does this mean the ellipsis should replace the cog in the help panel generally, even outside the context of suggested edits?

@kostajh -- I have prioritized this in the Ready for Development column under the other guidance tasks. But that does not necessarily mean it is lower priority than parts of the other guidance tasks that you might end up preferring to break out into their own subtasks.

MMiller_WMF renamed this task from Animate transitions between panels to Newcomer tasks: animate transitions between panels.Mar 19 2020, 6:05 AM

@RHo -- does this mean the ellipsis should replace the cog in the help panel generally, even outside the context of suggested edits?

Yes

Change 595456 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Animate transitions between panels

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

Change 595456 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Animate transitions between panels

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

This patch implements #3. This also takes care of the animation part of #2, because it's the same animation as switching from the suggested-edit panel to the home panel. I will work on #1 tomorrow.

Change 596804 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Animate guidance panel in from the bottom

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

Change 596805 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Switch from suggested-edits to home panel when editor opens

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

Change 595456 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Animate transitions between panels

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

Change 596804 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Animate guidance panel in from the bottom

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

Change 596805 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Switch from suggested-edits to home panel when editor opens

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

For Design review

  • all three points were checked and they look fine to me

1. Loading article with guidance open from the homepage
2. Guidance panel switching between states from Read to Edit mode
3. Navigating to and from the Guidance root screen menu items

  • as usual, there are some display problems in IE11 - filed as T253363

    Notes:
  • users might feel confused when clicking back to Read from Edit and not seeing the Guidance panel (it feels rather abrupt).
  • the Accessibility audit complains about low contrast in the Guidance panel
  • the issue with displaying a narrow Help panel is still present - T250310

Thanks @Catrope and @Etonkovida - I agree the animations look good! A couple of questions for @Etonkovidova though:

[...]

  • as usual, there are some display problems in IE11 - filed as T253363

Can you tell if these problems related to the implementation of the animations or might they be due to some other reason?

Notes:

  • users might feel confused when clicking back to Read from Edit and not seeing the Guidance panel (it feels rather abrupt).

IMHO this is OK because if the user has made a decision to exit out of editing after seeing the panel in Edit mode, they likely don't want to see the prompt to edit again in read mode. Presumably if they had exited from Edit by accident or change their mind, they would click "Edit" again where they will see the help panel with the task guidance. @MMiller_WMF might have other ideas on if we could manage this differently though when he reviews.

  • the Accessibility audit complains about low contrast in the Guidance panel

Is this to do with difficulty level tags which you've filed a task for at T253706? Can we perhaps use that task to collect any other low contrast issues identified in the guidance panel?

  • the issue with displaying a narrow Help panel is still present - T250310

I'm a little confused by this one. Per T250310#6085877 we'd updated the description that this was a bug regarding the height of the panel, not the width. Maybe we can pop this on the sprint to discuss and fix soon since it is directly related to the guidance panel?

Notes:

  • users might feel confused when clicking back to Read from Edit and not seeing the Guidance panel (it feels rather abrupt).

IMHO this is OK because if the user has made a decision to exit out of editing after seeing the panel in Edit mode, they likely don't want to see the prompt to edit again in read mode. Presumably if they had exited from Edit by accident or change their mind, they would click "Edit" again where they will see the help panel with the task guidance. @MMiller_WMF might have other ideas on if we could manage this differently though when he reviews.

Actually in this comment, we decided that the help panel should remain open if the user toggles back and forth from Edit to Read. @kostajh
may still be working on that: T244431#6154520

@Etonkovidova -- I'm actually not able to experience the guidance root screen transition in beta. When I click "Edit" on the suggested article, the help panel does not give me the option to transition to the root screen. (Hopefully that is being worked on in other tasks). Are you able to see it?

The animations look good in production!