Page MenuHomePhabricator

Add Sort and Search to talk pages
Closed, ResolvedPublic

Assigned To
Authored By
JTannerWMF
Dec 23 2021, 3:29 PM
Referenced Files
F34944076: giphy.gif
Feb 7 2022, 10:14 AM
F34941306: differences-1.png
Feb 3 2022, 12:13 PM
F34937915: Screenshot_20220131-154214.png
Jan 31 2022, 2:56 PM
F34937924: Artboard.png
Jan 31 2022, 2:56 PM
F34931383: Screenshot_20220126-115833.png
Jan 26 2022, 11:03 AM
F34931374: Screenshot_20220126-115001.png
Jan 26 2022, 11:03 AM
F34931380: Screenshot_20220126-115525.png
Jan 26 2022, 11:03 AM
F34930698: Screenshot_20220125-150945_Wikipedia Dev.jpg
Jan 25 2022, 11:15 PM

Description

Background
Across wikis there are different conventions for archiving a thread within a talk page. It is often used to reduce clutter and hide conversations that are no longer relevant to make higher priority conversations easier to find. In the Android app, archiving is quite tricky, and the process is generally not great on Mobile. However, we have the opportunity of creating a mobile first solution to the challenge of not easily finding talk pages.

User Story
As an editor of Wikipedia, I want to easily find if an edit I am planning to make is being discussed on the Talk Page, so that I can participate in the most relevant discussion or confidentially start a new one.

The Task
Maintaining consistency with the notification search capability, create a sort and search filter for talk pages.
Required:

  • Users can sort at a subject level of active discussions by date posted, most recently updated, and by which user posted it
  • Users can search active talk pages in the same way they can in notifications

Designs (Figma)

1) Current experience2) New experience3) Possible future
Talk pages sort + search.png (1×720 px, 124 KB)
Talk pages sort + search.png (1×720 px, 119 KB)
Talk pages sort + search-1.png (1×720 px, 116 KB)
Talk pages redesign.png (2×720 px, 148 KB)
  • The new design features a search bar with a filter button, which should work similar to searching notifications (T288068)
    • We likely move towards a design that features contents of a talk page message (two lines of text of the most recent message of a subject), please prepare the search for this scenario (see 3) Possible future screen)
    • We likely feature username(s) in user talk pages and 'Date updated' (if feasible) in the topics list, please prepare the search for this scenario (see 3. Possible future screen)
  • Once the filter button in the search bar is tapped, a menu with sort options appears:
    • 'Date published ↓' is the default sort option. If users tap the item again, newest topics are at the top of the list (reversed order) and the label changes to 'Date published ↑'
    • 'Topic name' sorts the topic list alphabetically (A-Z)
  • The app bar title uses Roboto 20px instead of Roboto 24px to accommodate the more of the title. For accessibility reasons, make sure to output the entire text string when users tap the app bar title, e.g. as a helper tooltip (similar design as long pressing a button)
  • Language icon/button is moved to the overflow menu to save space for the app bar title

APK for testing: https://github.com/wikimedia/apps-android-wikipedia/actions/runs/1785332981

Event Timeline

JTannerWMF triaged this task as Medium priority.Dec 23 2021, 3:29 PM
JTannerWMF created this task.
JTannerWMF added a subscriber: scblr.

@schoenbaechler can you provide some guidance and move this to ready for dev please

Hey @JTannerWMF — I updated the task with two variants. Note: I kept the “Sort by" label in the dropdown menu, since the filter icon might not imply that this is about sorting. Especially since we’re using it for advanced filter options in notifications already. I still think the icon is a good choice. Per our discussion, I also included a way to sort 'Date published' and 'Date updated' in ascending/descending order. Check out the visuals in the task’s description.

Per @Dbrant’s feedback, sorting by date might get tricky as we are currently not getting a timestamp when retrieving the topic list. So it might be good to create a SPIKE to investigate if sorting by Date published/updated is possible

Talked about this in Planning and the MVP version that @schoenbaechler will design for is "Reverse Order" since we can't do it by date. Once the designs are updated we can move this to ready for Dev. In the meantime, @MattCleinman will talk to PI about giving us what we need for the original designs.

scblr updated the task description. (Show Details)

Moved this to ready for dev! 👍

@JTannerWMF, could you please add details re: instrumentation for this task (CC @SNowick_WMF)? Thanks!

Hi @JTannerWMF

@SNowick_WMF and I met to decide analytics for this.
Events we are planning on capturing:

  • Click event on the filter
  • New sorting order choice picked
  • Search clicked

NOT capturing:

  • Search strings - for the lack of a use case

Please let us know if this sounds good.

@SNowick_WMF ,

Documenting our analytics plan:

We will be using MobileWikiAppTalk schema to capture events realated to sorting and searching as well.

  • Click event on the filter - ("action", "filter_clicked")
  • New sorting order choice picked - ("action", "filter_date"/"filter_topic")
  • Search clicked- ("action", "search_clicked")

Hi @schoenbaechler

The APK is ready for review now.

Some questions:

  1. Should we save the "sort by" preference?

Screenshot_20220125-150945_Wikipedia Dev.jpg (2×1 px, 292 KB)

  1. In the search mode, you can see the hint in the search bar is still "Search or sort message" due to the technical restriction. Would it be possible to change "Search or sort messages" to "Search messages" by default?

Screenshot_20220125-150957_Wikipedia Dev.jpg (2×1 px, 276 KB)

  1. Same screenshot above, I hide the "New topic" button when it's in search mode, is that what you want?
cooltey updated the task description. (Show Details)

Thanks @cooltey — this is great already!

  1. Should we save the "sort by" preference?

Screenshot_20220125-150945_Wikipedia Dev.jpg (2×1 px, 292 KB)

Yes, great idea!

  1. In the search mode, you can see the hint in the search bar is still "Search or sort message" due to the technical restriction. Would it be possible to change "Search or sort messages" to "Search messages" by default?

Screenshot_20220125-150957_Wikipedia Dev.jpg (2×1 px, 276 KB)

Search message

  1. Same screenshot above, I hide the "New topic" button when it's in search mode, is that what you want?

Yes, that’s a good idea. Can we also remove the 'Last edited' info when searching? I think it’s not necessary and takes up screen estate.

04) Change icon color next to the sort options to color_group_8

Screenshot_20220126-115001.png (2×1 px, 201 KB)

05) Add yellow highlight when searching text in messages (what we have in notifications)

Talk pagesNotifications
Screenshot_20220126-115525.png (2×1 px, 112 KB)
Screenshot_20220126-115833.png (2×1 px, 169 KB)

06) Question re: Topic name sorting, it seems a bit random at the moment (not A-Z or Z-A), but a mix of it. Could you look into it?

https://www.dropbox.com/s/rg7klf898somgsw/screen-20220126-115455.mp4?dl=0

Hi @schoenbaechler

Yes, great idea!

Done!

Search message

Done.

  1. Same screenshot above, I hide the "New topic" button when it's in search mode, is that what you want?

Yes, that’s a good idea. Can we also remove the 'Last edited' info when searching? I think it’s not necessary and takes up screen estate.

Done.

04) Change icon color next to the sort options to color_group_8

Done.

05) Add yellow highlight when searching text in messages (what we have in notifications)

Done. And I also add "no result" when there are no matching results.

06) Question re: Topic name sorting, it seems a bit random at the moment (not A-Z or Z-A), but a mix of it. Could you look into it?

I tweak it a bit, it looks fine now; there's one exception that if there is no name for the topic, it will remain on the top/bottom if sorted by topic name.

Ideally, we can sort by the topic content if there is no topic name, but it will definitely slow down the process, so I would leave it as the updated build.

Please download the APK to see the changes.

Thanks for all the great work, this is such a great improvement to talk pages @cooltey 👊

01)

Search message

Done.

Sorry, I think I didn’t finish writing up this one, my bad. I thought your suggestion (Search messages) was ideal!

02)

Question re: Topic name sorting, it seems a bit random at the moment (not A-Z or Z-A), but a mix of it. Could you look into it?

I tweak it a bit, it looks fine now; there's one exception that if there is no name for the topic, it will remain on the top/bottom if sorted by topic name.

Ideally, we can sort by the topic content if there is no topic name, but it will definitely slow down the process, so I would leave it as the updated build.

Makes sense to me, let’s keep it as is in the latest APK.

03) There’s a bug (visible 'Last edited' info and 'NEW TOPIC' button when entering a subject from the search view:

  1. Tap on search
  2. Tap on a talk page subject
  3. Tap back

Screenshot_20220131-154214.png (2×1 px, 126 KB)

📲 Video: https://www.dropbox.com/s/w458h2x4dmzyv40/screen-20220131-154623.mp4?dl=0

04) Alignment: please align the search field with other parts of the app, e.g. Explore and Search

Artboard.png (1×2 px, 1015 KB)

05) Animation: can use the animation from 'Explore' and 'Search' for all search bars in the app for a consistent experience?

📲 Video: https://www.dropbox.com/s/5h1r2dgo9m09c95/screen-20220131-155255.mp4?dl=0

In T298250#7663913, @schoenbaechler wrote:

Thanks for all the great work, this is such a great improvement to talk pages @cooltey 👊

01)

Search message

Done.

Sorry, I think I didn’t finish writing up this one, my bad. I thought your suggestion (Search messages) was ideal!

Updated and done.

02)

Question re: Topic name sorting, it seems a bit random at the moment (not A-Z or Z-A), but a mix of it. Could you look into it?

I tweak it a bit, it looks fine now; there's one exception that if there is no name for the topic, it will remain on the top/bottom if sorted by topic name.

Ideally, we can sort by the topic content if there is no topic name, but it will definitely slow down the process, so I would leave it as the updated build.

Makes sense to me, let’s keep it as is in the latest APK.

👍

03) There’s a bug (visible 'Last edited' info and 'NEW TOPIC' button when entering a subject from the search view:

  1. Tap on search
  2. Tap on a talk page subject
  3. Tap back

Screenshot_20220131-154214.png (2×1 px, 126 KB)

📲 Video: https://www.dropbox.com/s/w458h2x4dmzyv40/screen-20220131-154623.mp4?dl=0

Fixed.

04) Alignment: please align the search field with other parts of the app, e.g. Explore and Search

Artboard.png (1×2 px, 1015 KB)

Done.

05) Animation: can use the animation from 'Explore' and 'Search' for all search bars in the app for a consistent experience?

📲 Video: https://www.dropbox.com/s/5h1r2dgo9m09c95/screen-20220131-155255.mp4?dl=0

The animation cannot be applied easily since it is not actually change the page. It would be help if we can create a separate ticket for it, thanks!

I tried the APK in the task’s description @cooltey but the issues mentioned in T298250#7663913 are still the same. Is it updated yet?

I rebuild the APK, please try a refresh install on the latest one and let me know if you don't see the changes.

Thanks @cooltey — the APK worked now (the link you sent on Slack was different though, I added it to the task’s description)

03) There’s a bug (visible 'Last edited' info and 'NEW TOPIC' button when entering a subject from the search view:

  1. Tap on search
  2. Tap on a talk page subject
  3. Tap back

Screenshot_20220131-154214.png (2×1 px, 126 KB)

📲 Video: https://www.dropbox.com/s/w458h2x4dmzyv40/screen-20220131-154623.mp4?dl=0

Fixed.

Now, the back button takes users to the overview page (not the active search anymore). The article search handles it differently (and better, as it preserves the user’s input, selects the text in the search field and shows the keyboard), see video below:

https://www.dropbox.com/s/yq9py3rk9vbft7h/screen-20220203-130212.mp4?dl=0

Can you look into optimizing the behavior?

04) Alignment: please align the search field with other parts of the app, e.g. Explore and Search

Artboard.png (1×2 px, 1015 KB)

Done.

It’s better, but no 100% aligned yet, see comparison below. Could you adjust it so its identical?

differences-1.png (1×2 px, 505 KB)

Thanks @cooltey — the alignment of the input field is perfect now.

Now, the back button takes users to the overview page (not the active search anymore). The article search handles it differently (and better, as it preserves the user’s input, selects the text in the search field and shows the keyboard), see video below:

https://www.dropbox.com/s/yq9py3rk9vbft7h/screen-20220203-130212.mp4?dl=0

Can you look into optimizing the behavior?

This is fixed but the search page shows the 'Last edited' and '+ NEW TOPIC' info again. Steps to reproduce from an earlier comment 👇

03) There’s a bug (visible 'Last edited' info and 'NEW TOPIC' button when entering a subject from the search view:

  1. Tap on search
  2. Tap on a talk page subject
  3. Tap back

Screenshot_20220131-154214.png (2×1 px, 126 KB)

📲 Video: https://www.dropbox.com/s/w458h2x4dmzyv40/screen-20220131-154623.mp4?dl=0

Hi @schoenbaechler

This is fixed but the search page shows the 'Last edited' and '+ NEW TOPIC' info again. Steps to reproduce from an earlier comment 👇

Nice catch! Fixed and please check the latest APK to see the changes.