Page MenuHomePhabricator

Search and Filter in list view on notifications home
Open, MediumPublic

Description

Designs
1)2)3)4)5)6)
Search and Filter 1.png (1×720 px, 103 KB)
Search and Filter 2.png (2×720 px, 72 KB)
Search and Filter 3.png (2×720 px, 71 KB)
Search and Filter 4.png (1×720 px, 48 KB)
Search and Filter 5.png (1×720 px, 39 KB)
Search and Filter 6.png (1×720 px, 29 KB)

👉 Link to designs on Figma

Notes
  1. The notifications list view consists of a search bar and a filter option (icon in the search bar). Tapping the search bar leads to view 4). Tapping the filter/tune icon leads to screen 2).
  1. Filter disabled: By default, all wikis, projects or types are enabled (= nothing has been deselected by users)
      • 'All wiki' enables/disables all items in 'Wiki filter'
      • 'All type' enables/disables all items in 'Type filter'
    • 'Wiki filter' only shows languages and projects in which the user has been active before.
    • 'Type filter' displays the same categories as in T287477 (please sync with @cooltey on this)
  1. Filter enabled:
    • If users deselect an item (wiki, project or type), list view filtering is enabled, see screen 3).
    • Multiple wiki, project or type filters can be enabled at once (checkbox)
  1. Enabled filter in list view: If a filter is enabled (= a wiki, project or type is deselected), the icon turns into accentColor and a number of how many filters are enabled is added next to the filter icon.
  1. Search: Tapping the search bar leads to this view. It searches the user’s list of notifications.
    • If a filter is enabled, it searches within the filter. In addition, the active filter indicator from the search field is displayed (top right in the app bar) to make sure the user is aware that a filter is active.
    • Found search terms are highlighted in yellow (same as for 'Find in Page'
  1. Empty state: No results found
    • If filters are active, show an illustration with helper text that a filter is active and also contains a direct link to the filter view (screen 3)
    • If no filters are active, show the “No results” text (same as for Wikipedia’s search)

Event Timeline

schoenbaechler renamed this task from Search for notifications home list view to Search for list view on notifications home.Aug 4 2021, 11:04 AM
schoenbaechler claimed this task.
schoenbaechler renamed this task from Search for list view on notifications home to Search and Filter in list view on notifications home.Aug 10 2021, 10:04 AM
schoenbaechler updated the task description. (Show Details)
schoenbaechler added a subscriber: Dbrant.

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?

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?):

2021-09-23 17.19.51.png (2×1 px, 52 KB)
2021-09-23 17.20.41.png (2×1 px, 49 KB)

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:

Search and Filter 2.png (2×720 px, 72 KB)
Search and Filter 3.png (2×720 px, 71 KB)

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:

zero.png (2×1 px, 128 KB)

<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 :)

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.

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.

2021-09-30 10.33.42.png (2×1 px, 210 KB)
2021-09-30 10.33.14.png (2×1 px, 198 KB)

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!

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

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:

zero.png (2×1 px, 128 KB)

<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:

zero.png (2×1 px, 128 KB)

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 +1 filters and 0 search results, this is shown:

Search and Filter 6.png (1×720 px, 29 KB)

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:

Screenshot_20211011-112740.png (2×1 px, 223 KB)
Screenshot_20211011-112740.png (2×1 px, 167 KB)

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 +1 filters and 0 search results, this is shown:

Search and Filter 6.png (1×720 px, 29 KB)

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:

Screenshot_20211013-174652.png (2×1 px, 223 KB)

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:

Thanks @Sharvaniharan — great work so far!

01)

Do I understand the current implementation correctly::

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

Search and Filter 6.png (1×720 px, 29 KB)

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:

Screenshot_20211013-174652.png (2×1 px, 223 KB)


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

2021-10-15 11.33.19.png (2×1 px, 96 KB)

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

2021-10-15 11.34.08.png (2×1 px, 101 KB)

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

Group.png (1×720 px, 96 KB)

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

2021-10-15 11.33.39.png (2×1 px, 157 KB)

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:

Thanks @Sharvaniharan — great work so far!

01)

Do I understand the current implementation correctly::

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

Search and Filter 6.png (1×720 px, 29 KB)

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:

Screenshot_20211013-174652.png (2×1 px, 223 KB)