Page MenuHomePhabricator
Create Task
Maniphest T293147

Structured Tasks: Change how the inspector is collapsed on mobile
Closed, ResolvedPublic
Actions

Assigned To
• mewoph
Authored By
• mewoph
Oct 12 2021, 8:54 PM
Tags
Referenced Files
F34752119: IMG_0447.PNG
Nov 17 2021, 4:57 PM
F34752121: IMG_0446.PNG
Nov 17 2021, 4:57 PM
F34732080: minimize_image.gif
Nov 5 2021, 7:03 PM
F34732078: minimize_link.gif
Nov 5 2021, 7:03 PM
F34680112: image.png
Oct 12 2021, 8:54 PM
Subscribers
Aklapper
Etonkovidova
• mewoph
MMiller_WMF
• nettrom_WMF
RHo

Description

The following changes apply to both add a link and add an image tasks.

  • Header
    • The far right of the header has a "down chevron", which minimizes the inspector.
  • Minimize
    • When the user taps anywhere in the header, the inspector should animate down to just be one line at the bottom of the screen.
    • In minimized mode, the chevron should be pointing up.
    • When the user taps anywhere on the minimized header, it should animate back open.
    • The help panel button should be displayed above the image inspector, and should animate on down to the bottom of the screen when the inspector is minimized, staying above the inspector.

For add a link, clicking on the article surface should collapse the inspector (since clicking on the annotation views will expand the link inspector). For add an image, clicking on the article should not collapse the inspector.

Mockups as of 2021-08-30:

image.png (1×1 px, 1 MB)

NOTE: Refer to Figma for up-to-date detailed redline mocks and specs:
https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=3042%3A8783

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Structured Tasks: Expand/collapse functionality for StructuredTaskToolbarDialogmediawiki/extensions/GrowthExperimentsmaster+80 -150
Add a link: add expand and collapse actionsschemas/event/secondarymaster+436 -4
Customize query in gerrit

Related Objects
Search...

Event Timeline

• mewoph created this task.Oct 12 2021, 8:54 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 12 2021, 8:54 PM
• mewoph mentioned this in T290045: Add an image: image inspector.Oct 12 2021, 8:55 PM
• mewoph added subscribers: MMiller_WMF, RHo.

@MMiller_WMF @RHo FYI here is the task for updating how the inspector is collapsed both all structured task types.

• mewoph updated the task description. (Show Details)Oct 12 2021, 9:07 PM
• mewoph mentioned this in T292933: Help panel: lighter styling for help panel button.Oct 12 2021, 9:25 PM
• mewoph added a subscriber: • nettrom_WMF.Oct 12 2021, 9:41 PM

@MMiller_WMF @RHo @nettrom_WMF — I wanted to confirm the instrumentation for this change. For add a link, currently we have the following events (per the original task T287404):

  • close with active_interface=recommendedlinktoolbar_dialog when the user clicks outside the link inspector to close it
  • impression with active_interface=recommendedlinktoolbar_dialog when the link inspector re-appears
  • reopen_dialog_click with active_interface=machinesuggestions_mode when the user clicks on the robot button to re-open the link inspector

Would it make sense to re-use the same events here even though the UI has changed? The semantics might be a bit odd since the inspector isn't actually "closed" (just collapsed) and when an element expands & collapses, I'm not sure if an impression event should be recorded.

gerritbot added a comment.Oct 12 2021, 10:21 PM

Change 730357 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Structured Tasks: Expand/collapse functionality for StructuredTaskToolbarDialog

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

gerritbot added a project: Patch-For-Review.Oct 12 2021, 10:21 PM
MMiller_WMF moved this task from Incoming to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.Oct 13 2021, 1:30 AM

@mewoph -- thank you for creating the task!

kostajh triaged this task as Medium priority.Oct 18 2021, 7:28 AM
MMiller_WMF mentioned this in T294669: Image instrumentation: image inspector.Oct 29 2021, 10:23 PM
• mewoph added a comment.Nov 1 2021, 10:34 PM

Hi @MMiller_WMF @RHo @nettrom_WMF I wanted to confirm the timing of this change since this impacts existing Add Link UI and instrumentation. Once the patch is merged, the new UI will be applied to Add Link users before Add Image launches. Is that ok?

From the instrumentation side, I'm thinking it would be more clear for there to be new events expand and collapse with recommendedlinktoolbar_dialog/ recommendedimagetoolbar_dialog active_interface. This would mean that once these changes are on the train, these events for add link will no longer be sent:

  • reopen_dialog_click with active_interface=machinesuggestions_mode
  • close with active_interface=recommendedlinktoolbar_dialog

Would this be ok?

• mewoph mentioned this in T294586: Add an image: adapt existing UI for desktop.Nov 1 2021, 11:12 PM
RHo added a comment.Nov 2 2021, 12:24 PM
In T293147#7473433, @mewoph wrote:

Hi @MMiller_WMF @RHo @nettrom_WMF I wanted to confirm the timing of this change since this impacts existing Add Link UI and instrumentation. Once the patch is merged, the new UI will be applied to Add Link users before Add Image launches. Is that ok?

Assuming this is the same with the new help floating icon button styling everywhere too (mobile and desktop)? If so, that sounds good to me.

From the instrumentation side, I'm thinking it would be more clear for there to be new events expand and collapse with recommendedlinktoolbar_dialog/ recommendedimagetoolbar_dialog active_interface. This would mean that once these changes are on the train, these events for add link will no longer be sent:

  • reopen_dialog_click with active_interface=machinesuggestions_mode
  • close with active_interface=recommendedlinktoolbar_dialog

Would this be ok?

Makes sense to me too, but will defer to @nettrom_WMF and @MMiller_WMF.

gerritbot added a comment.Nov 5 2021, 6:53 PM

Change 737114 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[schemas/event/secondary@master] Add a link: add expand and collapse actions

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

• mewoph added a comment.Nov 5 2021, 7:03 PM

Here are the UIs with the latest changes:

Add Link

minimize_link.gif (1×886 px, 1 MB)

Add Image

minimize_image.gif (1×886 px, 1 MB)

• mewoph moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Nov 5 2021, 7:07 PM
gerritbot added a comment.Nov 8 2021, 10:24 AM

Change 737114 merged by jenkins-bot:

[schemas/event/secondary@master] Add a link: add expand and collapse actions

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

kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Nov 8 2021, 10:33 AM
gerritbot added a comment.Nov 8 2021, 10:54 AM

Change 730357 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Structured Tasks: Expand/collapse functionality for StructuredTaskToolbarDialog

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.9; 2021-11-16).Nov 8 2021, 11:00 AM
Maintenance_bot removed a project: Patch-For-Review.Nov 8 2021, 11:10 AM
• nettrom_WMF added a comment.Nov 8 2021, 10:26 PM
In T293147#7473433, @mewoph wrote:

From the instrumentation side, I'm thinking it would be more clear for there to be new events expand and collapse with recommendedlinktoolbar_dialog/ recommendedimagetoolbar_dialog active_interface. This would mean that once these changes are on the train, these events for add link will no longer be sent:

  • reopen_dialog_click with active_interface=machinesuggestions_mode
  • close with active_interface=recommendedlinktoolbar_dialog

Would this be ok?

That change makes total sense to me, so as far as I'm concerned please do move forward with it!

Etonkovidova updated the task description. (Show Details)Nov 11 2021, 1:47 AM
Etonkovidova moved this task from QA to Design Review on the Growth-Team (Sprint 0 (Growth Team)) board.Nov 11 2021, 1:52 AM
Etonkovidova subscribed.

For Design review - checked, works &looks exactly as in @mewoph's comment - https://phabricator.wikimedia.org/T293147#7486339

One note: in collapsed state, the header for Add image is not as in the figma mockup ("Add a suggested image") , but "1 suggested image found".

RHo added a comment.Nov 11 2021, 11:54 AM
In T293147#7497650, @Etonkovidova wrote:

For Design review - checked, works &looks exactly as in @mewoph's comment - https://phabricator.wikimedia.org/T293147#7486339

One note: in collapsed state, the header for Add image is not as in the figma mockup ("Add a suggested image") , but "1 suggested image found".

Hiya, thanks @Etonkovidova, the interaction LGTM 👍🏻 and I gather that the header text is just copy that needs to be updated, is that right @mewoph? Happy to resolve once that's sorted.

• mewoph added a comment.Nov 12 2021, 4:41 PM

Hi @Etonkovidova @RHo the copy changes have yet to be merged (https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/737784).

Etonkovidova closed this task as Resolved.Nov 17 2021, 4:57 PM

Checked testwiki wmf.9 - the inspector works & looks as per the specs. The messages are updated.

IMG_0446.PNG (1×640 px, 127 KB)
IMG_0447.PNG (1×640 px, 163 KB)
Urbanecm_WMF added a project: GrowthExperiments-NewcomerTasks.Wed, Jan 21, 2:38 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits