Page MenuHomePhabricator

Add "Mark all as read" button for Notification badge in mobile
Closed, ResolvedPublic

Description

Opening the panel in mobileweb used to mark all notifications as read, but that is no longer true.
We could add a "Mark all as read" button in the mobileweb panel.
Also, the background of the number of notifications should be grey instead of red when there are no unseen notifications (similar to desktop).


Original description:
No matter how many times I open my notifications on mobile, the badge never resets to 0 (and there doesn't seem to be any way to reset it manually, as there is on desktop).

Event Timeline

Perhaps you are expecting notifications to automatically be marked as read when you open the notifications list? This happened on desktop in one of the dropdowns (but not the other), but I'm not sure if this ever happened on mobile. Anyway, the number reflects the number of unread notifications, so to decrease it you need to mark notifications as read. You can do this by following them (i.e. clicking on them and letting that take you to the relevant page), or using the blue dot on the right-hand side of each notification.

(Speculatively closing as invalid on the assumption that this is reporting correct/expected behavior)

Jdlrobson added subscribers: Mooeypoo, Jdlrobson.

Not true. I flagged this to @Mooeypoo when the notifications were switched to an OOjs UI widget. Previously visiting the overlay would mark all notifications as read. This has been annoying me too since the behaviour changed. The only way I can clear older notifications is via visiting Special:Notifications (there is no mark all as read button)

@Catrope: There's no way I'm going to click on every single thank and link notification I get. There should be some easy way to mark them all as read (as there is on desktop). Ideally, just opening the slide-out pane should do it, but I'm open to other suggestions.

Ugh, I didn't realize there was no "Mark all as read" button on mobile, as there is on desktop. Also thanks for pointing out that this used to work differently. I don't think it's likely that we'll bring mark-read-on-open back, but we should certainly provide some sort of mark-all-read button/feature somewhere.

Quiddity renamed this task from Notification badge in mobile never resets to Add "Mark all as read" button for Notification badge in mobile.Jul 26 2016, 11:59 PM
Quiddity updated the task description. (Show Details)
Quiddity subscribed.

(updated title/description based on discussion thus far)

@Catrope: That would work for me. You might also want to consider changing the color of the badge from red to grey after opening the overlay (as happens on desktop), even if the number doesn't reset.

@Catrope: That would work for me. You might also want to consider changing the color of the badge from red to grey after opening the overlay (as happens on desktop), even if the number doesn't reset.

Yes, good point, the badge should only be red if there are unseen notifications.

The mobile view now has the "cog" menu with an option to mark all as read in the current wiki.

A minor issue:
The cog menu option says: "Mark all read in selected wiki:English Wikipedia", but user do not have the option to select any wiki on mobile version of Special:Notification page.
Should we edit the wording for that menu option?

Working on seenTime in mobile now (the badge should display grey numbers if seen)

A minor issue:
The cog menu option says: "Mark all read in selected wiki:English Wikipedia", but user do not have the option to select any wiki on mobile version of Special:Notification page.
Should we edit the wording for that menu option?

We are tentatively planning to reconsider the design and allow for the sidebar to appear as a drawer, so we may want to hold off on a secondary message.

Change 301713 had a related patch set uploaded (by Mooeypoo):
Show seen vs unseen background in mobile notification badge

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

Change 301713 merged by jenkins-bot:
Show seen vs unseen background in mobile notification badge

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

Mooeypoo added a subscriber: Pginer-WMF.

Sending the 'seen' and 'unseen' behavior in the mobile badge to QA review. When that's done, we can put this ticket in Product/Design for @Pginer-WMF to decide whether we should add a 'mark all read' button in mobile popups, and where.

Note for QA -- the commit changed the mobile badge to show as grey background for the counter when all notifications are seen and red only when you have unseen notifications. The 'mark all read' button requires design decisions and wasn't added.

It definitely needs a "mark all read" button. I get several notifications per day, and it's a chore to have to go through multiple clicks to reset my counter (currently 4 clicks unless you dismiss them individually).

The badge in mobile is always displayed grey - checked the 'Welcome' page (http://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page) on iphone 6 (iOS 9.3.2), desktop (inlc the emulator).

1.Desktop- Log in as a user who has unseen/unread notifications.

  1. Make sure that the landing page is 'Main page' - the badges displayed red/blue (depending on the type on new notifications). Do not perform any actions - e.g. opening the flyout, going to the pages that triggered notificaitons, or to Special:Notificaitons.
  2. On mobile device, log in as the same user as in #1. The Welcome page will display the bell notification icon as grey.

Or,
3a. On desktop, change the link for 'Welcome' page to http://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page - the bell icon will be displayed as grey.

The screenshots for the case:

the badge should display grey numbers if seen

IMG_1573.PNG (1×640 px, 87 KB)

99+ Notifications

IMG_1570 (1).PNG (1×640 px, 117 KB)

Change 302298 had a related patch set uploaded (by Mooeypoo):
When fetching combined seenTime, get 'min' value rather than max

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

This is a product of us checking for maximum seenTime rather than minimum (and is reflective of some other issues we have defining 'seen time' in general)

After discussing this with @Catrope, we agreed that for the mean time, the test for seen time in combined view (this is only used in mobile for now anyways) will return the *lowest* seen time rather than the highest.

Change 302298 merged by jenkins-bot:
When fetching combined seenTime, get 'min' value rather than max

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

Checked seenTime - returning to Product/Design Work.

Sending the 'seen' and 'unseen' behavior in the mobile badge to QA review. When that's done, we can put this ticket in Product/Design for @Pginer-WMF to decide whether we should add a 'mark all read' button in mobile popups, and where.

The "mark all as read" feature makes sense, but for the notification panel on mobile it makes sense to be minimal to avoid distraction. These two strategies seem to fit there:

Top-bar action

Providing a minimal icon-only action on the top-right corner aligns with the placement of the read status indicator, the general hierarchy and the way we surface the action on desktop.

mobile-mark-read-button.png (579×986 px, 91 KB)

When there is a large number of unread notifications, we can add a "230 notifications will be marked as read" confirmation message after the user triggered the action.

Contextual action

As pointed in T141404#2512114 the lack of a "mark all" action leaves the user with the path of marking notifications individually. We can align the "mark all as read" with that behaviour.

After the user marks as read an individual notification, an option to "mark all" will be provided. In this way, we identify the potential user intent and provide the tool at hand only where it may be most needed. Users making the most common use of notifications (opening them one by one to read their content) are not taxed with additional choices.

mobile-mark-read-post-action.png (579×1 px, 140 KB)

Change 306287 had a related patch set uploaded (by Mooeypoo):
Add confirmation popup widget

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

Change 306288 had a related patch set uploaded (by Mooeypoo):
[wip] Add 'mark all read' button to the notification overlay

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

Change 306287 merged by jenkins-bot:
Add confirmation popup widget

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

Change 306288 merged by jenkins-bot:
Add 'mark all read' button to the notification overlay

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

@Mooeypoo The confirmation message counts the number of notifications wrong. It shows the total number of local notifications visible in the popup, rather than the number of notifications that were just marked read. Easy way to reproduce: mark all as read, mark one notif as unread, mark all as read again. The second confirmation message will have a number >1.

Change 308815 had a related patch set uploaded (by Mooeypoo):
Add method to get local unread notifications in the manager

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

Change 308817 had a related patch set uploaded (by Mooeypoo):
Count local unread notifications when mark-all-read is clicked

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

@Mooeypoo The confirmation message counts the number of notifications wrong. It shows the total number of local notifications visible in the popup, rather than the number of notifications that were just marked read. Easy way to reproduce: mark all as read, mark one notif as unread, mark all as read again. The second confirmation message will have a number >1.

Sorry, that is my bad; I counted the number of local notifications rather than the number of local unread notifications. In the patches above I've added a method to get those directly from the manager and corrected the call in the MobileFrontend code.

Change 308815 merged by jenkins-bot:
Add method to get local unread notifications in the manager

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

Change 308817 merged by jenkins-bot:
Count local unread notifications when mark-all-read is clicked

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

Change 308922 had a related patch set uploaded (by Catrope):
Count local unread notifications when mark-all-read is clicked

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

Change 308923 had a related patch set uploaded (by Catrope):
Add method to get local unread notifications in the manager

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

Checked in betalabs for

  • the screenshots show the icon "Mark as read" and the confirmation message "22 notifications marked as read"

IMG_1657.PNG (1×640 px, 100 KB)

IMG_1658.PNG (1×640 px, 101 KB)

  • the counting of marked as read notifications was checked for
    • new unread messages (bundled, non-bundled (incl. the case with multiple edits)
    • marked read messages as unread and then use the icon '"Mark all as read"

Change 308923 merged by jenkins-bot:
Add method to get local unread notifications in the manager

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

Change 308922 merged by jenkins-bot:
Count local unread notifications when mark-all-read is clicked

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

Mentioned in SAL [2016-09-07T18:44:38Z] <thcipriani@tin> Synchronized php-1.28.0-wmf.18/extensions/Echo/modules/model/mw.echo.dm.ModelManager.js: SWAT: [[gerrit:308923|Add method to get local unread notifications in the manager (T141404)]] (duration: 00m 45s)

Mentioned in SAL [2016-09-07T18:46:39Z] <thcipriani@tin> Synchronized php-1.28.0-wmf.18/extensions/MobileFrontend/resources/mobile.notifications.overlay/NotificationsOverlay.js: SWAT: [[gerrit:308922|Count local unread notifications when mark-all-read is clicked (T141404)]] (duration: 00m 44s)