Page MenuHomePhabricator

New Impact module empty state - minor improvements
Closed, ResolvedPublic

Description

The new Impact module default state (no edits and no Thanks) was additionally checked for the following older browsers on mobile:

  • Android 7.1, Android 5.1, Samsung (Galaxy S10) Android 4
  • iPhone 6s (12.4)
  • No noticeable issues in performance and no major UI display issues were found

These screenshots are for comparison/references (from T330614):

Old Impact moduleNew Impact Module
Screen Shot 2023-02-26 at 6.51.37 PM.png (374×1 px, 201 KB)
Screen Shot 2023-02-26 at 6.52.11 PM.png (472×1 px, 196 KB)
Screen Shot 2023-02-26 at 6.59.01 PM.png (1×1 px, 511 KB)
Screen Shot 2023-02-26 at 6.57.56 PM.png (1×1 px, 426 KB)
Observations

The minor issues listed below might befiled already (or are part of some other tasks). I list them here to review their possible impact on overall user experience:

(1) the Impact module is not visible in the viewport on older mobile devices (Android 5.1, Samsung (Galaxy S10), Android 4, iOS 6s):

Screen Shot 2023-04-18 at 1.38.18 PM.png (1×716 px, 327 KB)
Screen Shot 2023-04-18 at 1.22.43 PM.png (1×714 px, 261 KB)

(2) the New Impact overlay presents the info of updated design to a newcomer

Screen Shot 2023-04-18 at 1.23.04 PM.png (1×714 px, 299 KB)

(3) the New Impact module overlay is not displayed fully on older mobile devices:

Screen Shot 2023-04-18 at 1.38.38 PM.png (1×710 px, 342 KB)
Screen Shot 2023-04-18 at 1.20.52 PM.png (1×704 px, 352 KB)

(4) The footer of the New Impact module is placed much lower than in the old one:

Screen Shot 2023-04-18 at 5.31.36 PM.png (1×646 px, 135 KB)

(5) The tooltip is not fully visible

Screen Shot 2023-04-18 at 5.26.02 PM.png (1×604 px, 139 KB)

Acceptance Criteria:

Fix for observation #2: wasn't this already solved? T330692: Impact Module: don't show "Updated design" info drawer to new users
Given I'm viewing the Impact module (on mobile or desktop),
When the empty state is displayed,
Then I don't see the "Updated design" notice.

Fix for observation #5
Given I'm viewing the Impact module on mobile,
When I tap the info icon,
Then the tooltip info is fully visible (AKA doesn't display offscreen)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
KStoller-WMF renamed this task from [QA task] New Impact module default state to New Impact module empty state - minor improvements.Apr 19 2023, 4:47 PM
KStoller-WMF removed Etonkovidova as the assignee of this task.
KStoller-WMF added a subscriber: JFernandez-WMF.

Thanks, @Etonkovidova !
I'll chat with @JFernandez-WMF about this today.

Thanks for filing these @Etonkovidova! Kirsten and I agreed that (2) and (5) should be top priority to fix. If (3) is an easy fix, then that would be great too (so this probs needs Engineering input)

KStoller-WMF triaged this task as Medium priority.
KStoller-WMF updated the task description. (Show Details)
KStoller-WMF lowered the priority of this task from Medium to Low.Apr 28 2023, 6:15 PM

I'm trying to take action on this issue but the variety of observations and expectations is tricky. An important disclaimer is that the comparison table on the description is comparing two different views in the full screen pictures. On the left the view shown is what we call the mobile details view whereas on the right the view shown is the mobile overlay. Users can end-up accessing one or the other depending on how fast the Javascript of the mobile summary view loads. This might seem confusing but is implemented in this way so users without Javascript enabled or very old browsers still get something rendered on the screen. While we may want to give some level of support to this user niche, there was some team consensus on removing this view (and just inform users without Javascript enabled or old browsers with a message "Please enable JavaScript to view this component"), see T264992: Remove mobile-details mode from Special:Homepage.

As I understand the current status, the comparison table for "old impact" vs "new impact" fullscreen mobile views would look as follows:

View/ModuleOld impactNew impact
mobile summary (scrolled)
Screenshot 2023-06-14 at 12.04.44.png (1×762 px, 138 KB)
Screenshot 2023-06-14 at 12.05.01.png (1×770 px, 153 KB)
mobile details
Screenshot 2023-06-14 at 11.51.16.png (1×764 px, 187 KB)
Screenshot 2023-06-14 at 11.50.53.png (1×758 px, 182 KB)
mobile overlay
Screenshot 2023-06-14 at 11.49.53.png (1×764 px, 162 KB)
Screenshot 2023-06-14 at 11.50.06.png (1×786 px, 175 KB)

All screenshots taken from en.m.wikipedia.beta with abrowser simulated iPhone6 resolution 375px x 667px

In regards the observations:

  1. Old mobile screens are short, the WP header + the "Hello Username" heading + an eventual banner + the "add email" module consume half of the screen. There's room for improvement but unclear what's the expected outcome from the task description, I would consider opening a dedicated issue if we find it relevant and involve design.
  2. I'm failing to reproduce the issue in beta enwiki and testwiki registering a new user, could we specify more the steps to reproduce? And maybe re-open T330692: Impact Module: don't show "Updated design" info drawer to new users since it seems a regression on that issue.
  3. The screenshot shows definitely something wrong since the footer should be fixed to the bottom. There are some known issues for Android 4-4.3 but I don't think our case is hitting one of these, I will investigate forward.
  4. Isn't this expected behavior as mentioned in (3)?
  5. This is a known gap from our Vue custom implementation of the tooltip component, there's not overflow control at all. I filed an internal task T339106: Add overflow control to CPopover component so we can provide a quick fix for "new impact". The ideal scenario would be to have a Codex component which has overflow control.
Sgs changed the task status from Open to In Progress.Jun 15 2023, 4:50 PM

Thanks for investigating these issues, @Sgs !

I just tested several different scenarios and I can't replicate #2 either. As far as I can tell, this issue was resolved.

Given that you've added a separate task for resolving #5, and the Acceptance Criteria for task only asks for fixes for #2 and #5, I think you can resolve this task (or move to QA if you want to give @Etonkovidova a chance to replicate #2).

Sgs changed the task status from In Progress to Open.Jun 21 2023, 4:43 PM
Sgs moved this task from In Progress to QA on the Growth-Team (Sprint 0 (Growth Team)) board.

Thanks, @Sgs and @KStoller-WMF - after some testing, closing the task.