Updated the filter / list view designs based on @Dbrant’s input from yesterday (Wikis and Projects all in one list)

Can we add analytics for interactions with these settings? We can add events to MobileWikiAppNotificationPreferences schema. Let's discuss if this is possible,

@JTannerWMF @SNowick_WMF and I had a discussion about this ticket and these are the 3 main events that happen here:

1. Clicks on Search Notifications bar
2. Search strings when the user is actively searching
3. Clicks on the Filter icon
4. Filtering Notifications : What filters has the user turned on/off

Please discuss with Shay if you want to measure any of these, and we can add the required ones to MobileWikiAppNotificationPreferences schema as suggested by Shay above.

The ones I am especially interested in is #4 and #1 . @SNowick_WMF let me know if you think we should measure more, less or a different set?

@JTannerWMF Thank you for looking into this.

Hi @schoenbaechler Few qs wrt the filter:

1. Does the number next to the filter icon represent the selected wikis or the unselected ones? For ex: For screen 3) is it '4' or '1'
2. If I understand the color tint for the filter icon, will it be accent when at least one of the wikis is unselected, and base20 when all are selected?

One more question @schoenbaechler. Should the search be case-insensitive. Eg: when user searches "you" should only "you" be highlighted, or "You" as well?

@Sharvaniharan case insensitive sounds good to me (and consistent with searching wikipedia, history, my lists and find in page)

@Sharvaniharan I wanted to try out the search feature per our discussion yesterday, but this is what I see (an old, unfinished implementation?):

Could you help out, please? Thanks!

PS: I used this build: https://github.com/wikimedia/apps-android-wikipedia/pull/2810/checks

Hi @schoenbaechler Please try now... I have pulled in the list view changes too so it is easier to test. Please let me know if it is still giving problems. Build is correct.. my bad.. I hadnt updated it with list view changes

Thanks @Sharvaniharan — it worked!

I realized I haven’t updated the screenshots in this task to reflect the outcomes of the usability tests in T285787. The latest designs for the filter view are on Figma since the shareout in one our team meeting a few weeks ago. These are the updated designs:

I’ll update the task’s description accordingly. Sorry for the detour!

PS: Small note that the “source of truth” for all design work is always Figma (previously Zeplin)

Hi @schoenbaechler
I implemented the filter changes. And the filter icon and count colors and text look good now.. but only one case in which the empty text doesnt make much sense. It is when there are no filters in place, and search yields no results:

<Implemented "No Results">

You can also review it by building this branch: https://github.com/wikimedia/apps-android-wikipedia/pull/2837/checks

Hi @JTannerWMF ,

@SNowick_WMF and I met to discuss analytics wiring for this, and here are the things we will be tracking:

1. Click on "Search Notifications"
2. Clicks on Filter icon
3. Changes to filter types: An event sent only when the user makes changes to the filters. Which will also give us a chance to measure how many users did not change the filter preferences, if we analyze 2) in conjunction with 3).

@SNowick_WMF

I will be sending all 3 events to MobileWikiAppNotificationPreferences

1. Click on "Search Notifications" : I will send a '[{"search_clicked":true}]' to type_toggles field
2. Clicks on Filter icon : I will send a '[{"filter_icon_clicked":true}]' to type_toggles field
3. Changes to filter types: I will send a full list of filters along with their selection like : '[{"en":true},{"hi":false}, ... {"edit-thank":false},{"thank-you-edit":true},{"system-noemail":true}]'. And this event will be sent only upon a change in filter(s)

The only action item for you regarding this would be to change the background_fetch field to 'optional'.
Thank you Shay for thinking through this with me and valuable suggestions! :)

Please let me know if there are any questions.

@schoenbaechler this is ready for design review in parallel :)

Sounds great @Sharvaniharan

Thank you @JTannerWMF for confirming

Hi @schoenbaechler quick question

Do the "All wikis" and "All types" buttons toggle? For eg: if we click "All wikis" and select all wikis, and then click on it again, should it unselect all the wikis?

Thanks @Sharvaniharan, confirming that field background_fetch is no longer required in MobileWikiAppNotificationPreferences schema.

Thank you @SNowick_WMF . Updated the revisionId.

In T288068#7389852, @Sharvaniharan wrote:

Hi @schoenbaechler quick question

Do the "All wikis" and "All types" buttons toggle? For eg: if we click "All wikis" and select all wikis, and then click on it again, should it unselect all the wikis?

Yes, exactly!

Thanks @Sharvaniharan, this looks great — minor feedback:

01) On a fresh install — the filter counter when search is enabled differs from the one in the main screen of notifications. The one on notifications home is the correct one in this case.

Video: https://www.dropbox.com/s/o2ct3uz2g8t6sla/20210930_103238.mp4?dl=0

02) For the sake of completion, the 'All' toggle

Hi @schoenbaechler quick question

Do the "All wikis" and "All types" buttons toggle? For eg: if we click "All wikis" and select all wikis, and then click on it again, should it unselect all the wikis?

Yes, exactly!

@schoenbaechler The above issues are fixed.. Please check and move the ticket.

Thx @Sharvaniharan, this mostly looks good — except for 👇

In T288068#7379217, @Sharvaniharan wrote:

Hi @schoenbaechler
I implemented the filter changes. And the filter icon and count colors and text look good now.. but only one case in which the empty text doesnt make much sense. It is when there are no filters in place, and search yields no results:

<Implemented "No Results">

You can also review it by building this branch: https://github.com/wikimedia/apps-android-wikipedia/pull/2837/checks

• I don’t see the “No results” indicator at the top of the screen?
• We are going to need this empty state screen to inform users:

Copy: Try removing %numberOfActiveFilters filters to see more notifications.

→ Tapping the blue link in the text leads users to the “Filter notifications” screen.

Hi @schoenbaechler

When there are 0 filters, the "No results" indicator text is shown, but I have hidden the empty image

https://youtu.be/kemB4NdkqvMhttps://youtu.be/kemB4NdkqvM

because the message "Try removing 0 filters to see more notifications" might not make much sense, and also at this point they just don't have any notifications with the search string, so no call to action.
What do you think about that? if you want the empty image anyway, I will add that back. Thank you.

Will fix the click leading to “Filter notifications” screen.

@Sharvaniharan — thanks for the context. Do I understand the current implementation correctly::

• If there are 0 filters and 0 search results, this is shown: https://youtu.be/kemB4NdkqvMhttps://youtu.be/kemB4NdkqvM

• If there are +1 filters and 0 search results, this is shown:

This would be *the ideal*. Also, please make sure the left align No results (similar to what we have when searching Wikipedia with no results)

One more thing @Sharvaniharan — the “back” arrow at the top left seems to move its position slightly (1 or 2 pixel) when enabling search, see the images and video below:

Video: https://www.dropbox.com/s/xizb9wpmfxntjbx/search-jump.mov?dl=0

Hi @schoenbaechler thank you for reviewing. I have fixed all issues but for the back button jumping. I feel it is a bug with the out of the box SearchView we are using, but will discuss this with the other engineers to see if there is a way to fix it...

Thanks @Sharvaniharan — great work so far!

01)

Do I understand the current implementation correctly::

• If there are 0 filters and 0 search results, this is shown: https://youtu.be/kemB4NdkqvMhttps://youtu.be/kemB4NdkqvM

• If there are +1 filters and 0 search results, this is shown:

This would be *the ideal*. Also, please make sure the left align No results (similar to what we have when searching Wikipedia with no results)

Ok, this works as expected now but can we make sure that the illustration and text adapts after applying filters? The keyboard overlaps it currently and it adapts only when the keyboard is collapsed and expanded, see this video.

02) Search functionality:

• Can the search be case insensitive? In this video, I tried to search the username (Jdx) and it wasn’t showing up.
• And in this video, I also searched for the username (Srittau) but it didn’t show up, whether I searched case sensitive or insensitive.
• In all cases, we need to make sure the visible contents of the notification are considered in the search, see screenshot below:

03)

Can the search transition be made more smooth? Similar to what @Dbrant did for search on Explore? Here’s a video that compares the transition with the one from Explore.

04)

I have fixed all issues but for the back button jumping. I feel it is a bug with the out of the box SearchView we are using, but will discuss this with the other engineers to see if there is a way to fix it...

Sounds good to me!

Hi @schoenbaechler

I have fixed all the issues. However, there is not much we can do about the 04) back button jump as it is an issue with the component itself, and 01) the keyboard adapting issue is very device specific, and was not happening on any of my devices... but I have put in a blind fix to hide the soft keyboard when we go to the filters screen... but if that doesnt check-out on your end, there wont be much to do there either. Rest should work .
Could you please test it from the PR: https://github.com/wikimedia/apps-android-wikipedia/pull/2898/checks since it is still in review.

Thank you :)

Thanks @Sharvaniharan

A) These look good to me now. Also the button jump is gone! 👏

03)

Can the search transition be made more smooth? Similar to what @Dbrant did for search on Explore? Here’s a video that compares the transition with the one from Explore.

04)

I have fixed all issues but for the back button jumping. I feel it is a bug with the out of the box SearchView we are using, but will discuss this with the other engineers to see if there is a way to fix it...

B) The app crashes when trying to use the search with this build — see this video:

https://www.dropbox.com/s/ega8ookqx8lw21o/20211015_112811.mp4?dl=0

So I can’t check if these issues are fixed:

In T288068#7425074, @schoenbaechler wrote:

Thanks @Sharvaniharan — great work so far!

01)

Do I understand the current implementation correctly::

• If there are 0 filters and 0 search results, this is shown: https://youtu.be/kemB4NdkqvMhttps://youtu.be/kemB4NdkqvM

• If there are +1 filters and 0 search results, this is shown:

This would be *the ideal*. Also, please make sure the left align No results (similar to what we have when searching Wikipedia with no results)

Ok, this works as expected now but can we make sure that the illustration and text adapts after applying filters? The keyboard overlaps it currently and it adapts only when the keyboard is collapsed and expanded, see this video.

02) Search functionality:

• Can the search be case insensitive? In this video, I tried to search the username (Jdx) and it wasn’t showing up.
• And in this video, I also searched for the username (Srittau) but it didn’t show up, whether I searched case sensitive or insensitive.
• In all cases, we need to make sure the visible contents of the notification are considered in the search, see screenshot below:

C) Re: when filters are active in the default view and there’s nothing to show...

... can we display the illustration and text from the empty search results? (without the 'No results' label though)

But only in the case when there are filters active. When no filters are active still show this illustration:

D) Just noticed that this copy might be inaccurate for this screen:

Please change it from:
Try removing X filters to see more messages

To:
Try removing X filters to see more notifications

Thanks!

@cooltey @Sharvaniharan — nice! C) + D) are fixed 🎯

Still can’t test B) as the app crashes when trying to use the search — I’ve used this build (uninstalled the app, cleared storage/cache, rebooted the device and updated the OS multiple times with no luck...):

B) The app crashes when trying to use the search — see this video:

https://www.dropbox.com/s/ega8ookqx8lw21o/20211015_112811.mp4?dl=0

So I can’t check if these issues are fixed:

In T288068#7425074, @schoenbaechler wrote:

Thanks @Sharvaniharan — great work so far!

01)

Do I understand the current implementation correctly::

• If there are 0 filters and 0 search results, this is shown: https://youtu.be/kemB4NdkqvMhttps://youtu.be/kemB4NdkqvM

• If there are +1 filters and 0 search results, this is shown:

This would be *the ideal*. Also, please make sure the left align No results (similar to what we have when searching Wikipedia with no results)

Ok, this works as expected now but can we make sure that the illustration and text adapts after applying filters? The keyboard overlaps it currently and it adapts only when the keyboard is collapsed and expanded, see this video.

02) Search functionality:

• Can the search be case insensitive? In this video, I tried to search the username (Jdx) and it wasn’t showing up.
• And in this video, I also searched for the username (Srittau) but it didn’t show up, whether I searched case sensitive or insensitive.
• In all cases, we need to make sure the visible contents of the notification are considered in the search, see screenshot below:

Moving to merged and waiting after getting an okay from Robin offline :-)

Looks good to me on 2.750383-beta-2021-11-08

Corrected build number

So there is a bug on this.

If you search something in notifications and it has no result. Sometimes the "No Result" test in the top doesn't display because it is scrolled out of place.

After investigating please also check the behavior of this in RTL language

Hey @Sharvaniharan feel free to create the new task for Ready for Dev about my last comment and move this along

Thanks @JTannerWMF and Done: https://phabricator.wikimedia.org/T296261