Page MenuHomePhabricator
Create Task
Maniphest T292320

[QA task] Sticky header impact on SE tasks
Closed, ResolvedPublic
Actions

Assigned To
RHo
Authored By
Etonkovidova
Oct 1 2021, 9:37 PM
Tags
Referenced Files
F34698770: sticky_header.gif
Oct 19 2021, 10:55 PM
F34672158: Screen Shot 2021-10-04 at 12.11.19 PM.png
Oct 4 2021, 7:27 PM
F34671947: image.png
Oct 4 2021, 4:21 PM
F34671940: image.png
Oct 4 2021, 4:21 PM
F29375272: Screenshot 2019-06-07 15.47.38.png
Oct 4 2021, 4:21 PM
F34671942: image.png
Oct 4 2021, 4:21 PM
F34671950: SE toolbar sticky header.webm
Oct 4 2021, 4:21 PM
F34664394: sticky_header_conflict.gif
Oct 1 2021, 10:04 PM
View All 10 Files
Subscribers
Aklapper
• alexhollender_WMF
Etonkovidova
• iamjessklein
kostajh
• mewoph
MMiller_WMF
View All 9 Subscribers

Description

Based on T283505: [EPIC] Fixed "sticky" site header (the MVP is not fully done yet) I did some testing to evaluate the impact on Structured and un-Structured tasks (and on overall Newcomer experience). Although no major issues have been found, let's keep this task as a QA task to monitor the possible issues.

The sticky header seems to be a default now on betalabs, so any article will display it for logged in users (e.g. https://en.wikipedia.beta.wmflabs.org/wiki/The_New_Blue_of_Yale) or a url parameter useskinversion=2 can be used.

(1) The Suggestions mode bar gets replaced as soon as the scrolling (or auto-scrolling) happens on a page.
(click to animate the gif)

suggestion_mode2.gif (777×1 px, 2 MB)

Note: Per comment from @alexhollender in T292320#7398850 

"this hasn't been sorted out yet on beta, but the sticky reading header will not be present while editing"

(2) For the un-Structured task - the blue dot should accommodate the new edit button.
See the mockup - https://di-community-round-2.web.app/Audre_Lorde); on betalabs the edit buttons haven't been implemented yet.

Screen Shot 2021-10-01 at 12.15.42 PM.png (252×1 px, 52 KB)

(3) The tooltips are not present yet, so newcomers might be confused connecting the icons to the functionality. Even with the tooltips, it's an additional learning effort for newcomers to identify the functionality behind the icons.

Related Objects

Event Timeline

Etonkovidova created this task.Oct 1 2021, 9:37 PM
Restricted Application added a project: Growth-Team. · View Herald TranscriptOct 1 2021, 9:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Etonkovidova moved this task from Inbox to Needs Discussion on the Growth-Team board.Oct 1 2021, 9:42 PM

Moving to Needs Discussion/Analysis to follow up on

  • if the sticky header functionality needs some adjustments from Design
  • if the coordination is needed on deployment timeline for the sticky header so some additional testing would be done for the impact on GrowthExperiments features.
• mewoph added a comment.Oct 1 2021, 10:04 PM

For (1), it looks like this is not unique to Suggestions mode. Regular VE toolbar gets covered by the sticky header as well.

sticky_header_conflict.gif (1×1 px, 3 MB)

RHo added subscribers: • iamjessklein, • alexhollender_WMF.Oct 4 2021, 10:53 AM
In T292320#7395914, @mewoph wrote:

For (1), it looks like this is not unique to Suggestions mode. Regular VE toolbar gets covered by the sticky header as well.

sticky_header_conflict.gif (1×1 px, 3 MB)

Agree with @mewoph - the Suggested mode toolbar should follow the regular VE toolbar and not be covered by the sticky header. I would argue the sticky header should not appear on Edit mode as it is confusing/distracting to the main task of editing, but perhaps there is a way to integrate the sticky header elements into the VE toolbar on scroll – adding @alexhollender @iamjessklein for thoughts and clarifications.

• alexhollender_WMF added a comment.Oct 4 2021, 2:43 PM

@Etonkovidova @mewoph @RHo thanks for raising these questions.

  1. How can I see the Suggested mode toolbar?
  2. "The tooltips are not present yet, so newcomers might be confused connecting the icons to the functionality" — can you help me understand what this means?
  3. "Regular VE toolbar gets covered by the sticky header as well." — this hasn't been sorted out yet on beta, but the sticky reading header will not be present while editing
RHo added a comment.Oct 4 2021, 4:21 PM
In T292320#7398850, @alexhollender wrote:

@Etonkovidova @mewoph @RHo thanks for raising these questions.

  1. How can I see the Suggested mode toolbar?

Hi @alexhollender - the Suggested edits mode toolbar is shown when users open an "Add a link" structured task – see screencast:

  1. "The tooltips are not present yet, so newcomers might be confused connecting the icons to the functionality" — can you help me understand what this means?

I think @Etonkovidova is referencing either:
(a) the guide tour pop-ups that point to the newcomer homepage per referenced in T222852:

Screenshot 2019-06-07 15.47.38.png (1×2 px, 1 MB)

and/or
(b) the pulsing blue dot that shows up on the Edit tab the first time when a user opens a non-structured task.
image.png (154×356 px, 10 KB)

  1. "Regular VE toolbar gets covered by the sticky header as well." — this hasn't been sorted out yet on beta, but the sticky reading header will not be present while editing

OK cool, I think that actually solves issue 1 since the Suggested edits toolbar is the same placement and behaviour as the VE toolbar.

Suggested edits mode toolbar:
image.png (1×2 px, 414 KB)
VE toolbar
image.png (598×2 px, 144 KB)
• alexhollender_WMF added a comment.Oct 4 2021, 4:36 PM

@RHo ok great, thanks for the clarifications. Is there anything you need from us currently on this task?

RHo added a comment.Oct 4 2021, 4:44 PM
In T292320#7399441, @alexhollender wrote:

@RHo ok great, thanks for the clarifications. Is there anything you need from us currently on this task?

Hiya, since the sticky reading header won't be shown in editing I think nothing more here for you, but will add the note to the task for when @Etonkovidova QAs again further down the line.

RHo updated the task description. (Show Details)Oct 4 2021, 4:46 PM
Etonkovidova added a comment.Oct 4 2021, 7:27 PM
In T292320#7398850, @alexhollender wrote:
  1. "The tooltips are not present yet, so newcomers might be confused connecting the icons to the functionality" — can you help me understand what this means?

Actually I was referring to the tooltips that the mockup shows (https://di-community-round-2.web.app/Audre_Lorde). The tooltips are not present yet on betalabs.

Screen Shot 2021-10-04 at 12.11.19 PM.png (332×1 px, 67 KB)

Etonkovidova edited projects, added Growth-Team (Sprint 0 (Growth Team)); removed Growth-Team.Oct 18 2021, 1:50 AM
Etonkovidova moved this task from Incoming to QA on the Growth-Team (Sprint 0 (Growth Team)) board.
Etonkovidova moved this task from QA to Design Review on the Growth-Team (Sprint 0 (Growth Team)) board.Oct 19 2021, 10:55 PM

Re-checked

(1) The Suggestions mode bar gets replaced as soon as the scrolling (or auto-scrolling) happens on a page.

This is not the issue - the sticky header is not present in Suggestion mode.

(2) For the un-Structured task - the blue dot should accommodate the new edit button.

@RHo - below is the gif to show the blue dot gets replaced with the sticky header. The user impact seems minor to me. Moving for Design review to confirm that this behavior is fine.

sticky_header.gif (931×1 px, 2 MB)

Etonkovidova updated the task description. (Show Details)Oct 19 2021, 10:56 PM
RHo added a comment.Oct 22 2021, 2:30 PM
In T292320#7442825, @Etonkovidova wrote:

Re-checked

(1) The Suggestions mode bar gets replaced as soon as the scrolling (or auto-scrolling) happens on a page.

This is not the issue - the sticky header is not present in Suggestion mode.

(2) For the un-Structured task - the blue dot should accommodate the new edit button.

@RHo - below is the gif to show the blue dot gets replaced with the sticky header. The user impact seems minor to me. Moving for Design review to confirm that this behavior is fine.

sticky_header.gif (931×1 px, 2 MB)

Thanks @Etonkovidova – I agree it's OK, but I will also file a task to add the blue dot on the sticky header's edit pencil icon in this situation.

RHo closed this task as Resolved.Oct 22 2021, 2:35 PM
RHo claimed this task.
RHo mentioned this in T294126: Newcomer tasks: Add blue pulsing dot on the new Vector's sticky header edit button for non-structured newcomer tasks.
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