Page MenuHomePhabricator

Updates to user and article talk subject view and threading
Closed, ResolvedPublic

Assigned To
Authored By
scblr
Mar 8 2022, 11:27 AM
Referenced Files
F35221373: Screenshot_20220608-174234.png
Jun 9 2022, 9:35 AM
F35221421: Screenshot_20220608-174228.png
Jun 9 2022, 9:35 AM
F35148520: Screenshot_20220517-152930.png
May 17 2022, 1:30 PM
F35148481: Screenshot_20220517-152220.png
May 17 2022, 1:26 PM
F35148466: Screenshot_20220517-151600.png
May 17 2022, 1:26 PM
F35148500: Screenshot_20220517-152220.png
May 17 2022, 1:26 PM
F35119537: Screenshot_20220509-123945.png
May 9 2022, 11:28 AM
F35119581: Screenshot_20220509-125558.png
May 9 2022, 11:28 AM

Description

This is related to the explorations in T297617 (Figma 🎨)


Background

In the course of working on T297617, we’re making updates to the subject view of talk pages to provide a coherent experience.


Designs (Figma)

  • ⚠️ If you’re reading this it’s too late: All images used below might be updated by now. They’re here for demo purposes only. Make sure to check out the latest designs on Figma.

Before

Talk pages redesign.png (1×720 px, 211 KB)
Talk pages redesign 2.png (3×720 px, 631 KB)

After (Prototype)

010203040506070809
Talk pages redesign 3.png (1×720 px, 122 KB)
Talk pages redesign 4.png (3×720 px, 253 KB)
Talk pages redesign 5.png (4×720 px, 330 KB)
Talk pages redesign 6.png (5×720 px, 443 KB)
Talk pages redesign-1.png (1×720 px, 131 KB)
Talk pages redesign-2.png (1×720 px, 132 KB)
Talk pages redesign-3.png (1×720 px, 123 KB)
Talk pages redesign-4.png (1×720 px, 125 KB)
Talk pages redesign 5.png (1×720 px, 113 KB)
Changelog:
  • Smart threading: All threads are collapsed by default, only first level replies are shown. Check out the prototype to see it in action.
    • Through an 'Expand threads', respectively 'Collapse threads' option in the overflow menu (05, 06), editors can choose how they want to see the messages per thread (04).
  • Message anatomy:
    • Clicking the username (07), pops up the default dialog for user specific links (profile, talk page, contributions).
    • Replies to a parent message are indicated as such (04). E.g. if Cooltey replied to message from Dbrant, the header of the message is output like this: Cooltey to Dbrant. Tapping Dbrant in this case takes users to the parent message.
  • Inline replies: Allow editors to reply directly to specific messages (09). The call to action for the initial message of the thread is using a primary call to action. All other replies feature a secondary call to action to reply to messages. We want to enforce the behavior that people are reading the message first, and then reply. That’s why the FAB (floating action button) in the subject view has been removed.
  • Topic subscriptions: The topic subscription button allows users to subscribe to a specific subject and receive notifications. Once a topic has been subscribed, the button changes its style and uses different iconography (04). Once a topic has been subscribed, the editor receives notifications for it.
  • Find in page: The overflow menu (05) contains a 'Find in page' option to let users quickly find words in a specific thread. It works the same way as searching notifications, outlined in T288068
  • Overflow menu of a message features (08):
    • Edit functionality: Tbd if this is feasible right now and if we want to enforce this behavior. From a UX perspective → 'Edit' could take users to a structured approach to editing and reuse the same interface as outlined in screenshot 09.
    • Copy text: Copies the complete text of the message to the phone’s clipboard to allow editors to share answers from other users outside Wikipedia (e.g. messaging services like Signal)
    • Deep linking: In addition to sharing a thread via overflow menu (05), we provide a way to share an individual answer in the messages tree (08). If another users opens a link to a specific, individual answer in the Android app, the view scrolls to this specific answer.
  • Screen anatomy:
    • Talk: Climate change (link takes users to the Wikipedia article page)
    • Subject title
  • Animation:
    • Clicking 'Show replies' below a message changes the label from 'Show replies (%amountofreplies)' to 'Hide replies (%amountofreplies) and the icon from ▶ to ▼. Optional: it could be interesting to explore a variant that previews username’s that replied to a message, e.g. 'Show replies from %username1, %username2%, %username3, +4 (12)'.
    • To make sure that responses below a certain message are seen, the view should scroll-animate to the topmost message of a thread. As this is hard to convey with words → here’s a demo video of the transition / animation.

Release Notes

DO NOT MERGE UNTIL T304856 HAS BEEN RESOLVED

Event Timeline

scblr renamed this task from Updates to user and article talk subject view to Updates to user and article talk subject view and threading.Mar 8 2022, 11:27 AM

This is great so far @Dbrant 🚀

01 ) I noticed that users don't see the message when tapping a new notification, either coming from 'Notifications' home or via 'Push notifications'. We need to make sure they’re seeing it. And ideally, highlight the message too.

What should the behavior be, then? The thread in which the message has been posted should be expanded, the view should scroll to the message, and ideally highlight it (e.g. with a color_group_55 background.

So instead of this...Users should see this
Screenshot_20220509-123945.png (2×1 px, 116 KB)
Screenshot_20220509-124519.png (2×1 px, 158 KB)

02 ) Increase tap target for 'Show/Hide reply' to 48dp

Screenshot_20220509-123945.png (2×1 px, 162 KB)

03 ) Improve tap target size of username to 48dp

Screenshot_20220509-130044.png (2×1 px, 164 KB)

04 ) Can we show this dialog below the username for context?

DesignvsImplementation
Talk pages redesign.png (1×720 px, 119 KB)
Screenshot_20220509-130152.png (2×1 px, 128 KB)

05 ) Letter spacing of this button seems off, please make sure to apply 0.5sp, see specs on Figma

Screenshot_20220509-124759.png (2×1 px, 171 KB)

06 ) Remember the 'Expand threads' and 'Collapse threads' preference (across all user and article talk page threads)

Screenshot_20220509-125053.png (2×1 px, 195 KB)

(If we don’t remember people’s choice here, they will get angry).

07 ) De-emphasize when input is empty:

Screenshot_20220509-125550.png (2×1 px, 181 KB)
Screenshot_20220509-125558.png (2×1 px, 88 KB)

08 ) Remember what a user has typed in the text input from a previous session:

https://www.dropbox.com/s/507w9b8kd2sxmj7/screen-20220509-125823.mp4?dl=0

What opportunities do we have here? The way Phabricator handles this (via cookies?) would be ideal.

09 ) Only the username should be a link here (User talk should be black AND remove User: string from the username

Screenshot_20220509-131107.png (2×1 px, 267 KB)

10 ) Reduce space between talk page name and subject, see specs on Figma

Talk pages redesign.png (1×1 px, 385 KB)

11 ) Add the talk page subject title to the app bar earlier, currently – users have to scroll down quite a bit before it’s revealed, see this video:

https://www.dropbox.com/s/vcl0skle8jklf0z/screen-20220509-132017.mp4?dl=0

Just spoke with Robin and we want to have expand by default and if users change their settings we honor and maintain that

@scblr Updated build:

https://github.com/wikimedia/apps-android-wikipedia/actions/runs/2307313968

01 ) I noticed that users don't see the message when tapping a new notification, either coming from 'Notifications' home or via 'Push notifications'. We need to make sure they’re seeing it. And ideally, highlight the message too.

👍

02 ) Increase tap target for 'Show/Hide reply' to 48dp

👍

03 ) Improve tap target size of username to 48dp

👍

04 ) Can we show this dialog below the username for context?

This is a standard component that pops up on top of the element that was tapped, and cannot be modified.

05 ) Letter spacing of this button seems off, please make sure to apply 0.5sp, see specs on Figma

👍

06 ) Remember the 'Expand threads' and 'Collapse threads' preference (across all user and article talk page threads)

👍

07 ) De-emphasize when input is empty:

👍

08 ) Remember what a user has typed in the text input from a previous session:

👍

09 ) Only the username should be a link here (User talk should be black AND remove User: string from the username

Screenshot_20220509-131107.png (2×1 px, 267 KB)

👍 Done, but how did you arrive at that specific screenshot above? The double namespace inclusion ("User talk:User:...") shouldn't happen.

10 ) Reduce space between talk page name and subject, see specs on Figma

👍

11 ) Add the talk page subject title to the app bar earlier, currently – users have to scroll down quite a bit before it’s revealed, see this video:

👍

looks good to me @Dbrant — one thing I noticed in this talk page subject:

Screenshot_20220517-151600.png (2×1 px, 245 KB)

is that there are underlines for links — can we remove them in the app bar? also make it consistent with the output here:

Screenshot_20220517-152930.png (2×1 px, 187 KB)

(if a link is used in the title, use blue too)


Screenshot_20220517-152220.png (2×1 px, 283 KB)

Also, when sharing (copying) a link via overflow menu, this is what I get:

https://en.wikipedia.org/wiki/User_talk%3ASadads#<a_rel="mw:WikiLink"_href="./Petroleum"_title="Petroleum"_id="mwDFs">Petroleum</a>

and this is the desired output:

https://en.wikipedia.org/wiki/User_talk%3ASadads#Petroleum

also, can we make sure that all these deep links work in the app and web?

(this one too 👇)

Screenshot_20220517-152220.png (2×1 px, 283 KB)

thanks!

there are underlines for links — can we remove them in the app bar? also make it consistent with the output here:

👍

(if a link is used in the title, use blue too)

👍

Also, when sharing (copying) a link via overflow menu, this is what I get:
https://en.wikipedia.org/wiki/User_talk%3ASadads#<a_rel="mw:WikiLink"_href="./Petroleum"_title="Petroleum"_id="mwDFs">Petroleum</a>
and this is the desired output:
https://en.wikipedia.org/wiki/User_talk%3ASadads#Petroleum

👍

also, can we make sure that all these deep links work in the app and web?

👍

(this one too 👇)

👍

thanks!

https://github.com/wikimedia/apps-android-wikipedia/actions/runs/2339691226

Hey this task isn't able to pass PM Sign off. There are quite a few things that aren't showing up in Beta the way it was represented in the design and requirements.

I am putting this in Design Review for Robin to respond to the requirements that haven't been fulfilled with possible solutions.

Here are the issues found with threading:

  • The reply button to the main thread should be blue, but the ones after, to my understanding are not. Visit the White Swamphen article on EN Wikipedia to see it on your device
    Screenshot_20220608-174234.png (2×1 px, 210 KB)
    (@scblr
  • Edit source doesn't allow the person to edit the full talk page (don't know if this is a technical limitation? @Dbrant )
  • The first message on the White Wwamphen article of EN looks like it isn't being parsed correctly (this may be a technical limitation? @Dbrant )
    Screenshot_20220608-174228.png (2×1 px, 234 KB)

Hey this task isn't able to pass PM Sign off. There are quite a few things that aren't showing up in Beta the way it was represented in the design and requirements.

You've found an edge case that exposes multiple extreme edgecasey things:

  • The reply button to the main thread should be blue, but the ones after, to my understanding are not. Visit the White Swamphen article on EN Wikipedia to see it on your device

The blue button is for the top-level (initial) comment in the thread. This thread has more than one top-level comment (because it was edited manually on Desktop, not using DiscussionTools).

  • Edit source doesn't allow the person to edit the full talk page (don't know if this is a technical limitation? @Dbrant )

This particular topic ("GA Review") in this particular article is special, because it's not actually a discussion in the article talk page. Instead, it's a template that is transcluded from a subpage of the talk page. If you look at the wikitext of that talk page, the discission is not there:
https://en.wikipedia.org/w/index.php?title=Talk:White_swamphen&action=edit

The GA Review discussion took place in this subpage:
https://en.wikipedia.org/wiki/Talk:White_swamphen/GA1

There is no logic on our end that could possibly tell us to go to a different subpage from a transcluded template.

  • The first message on the White Wwamphen article of EN looks like it isn't being parsed correctly (this may be a technical limitation? @Dbrant )

Now that is a genuine style parsing issue that we can fix on our end, and.... done.

  • The reply button to the main thread should be blue, but the ones after, to my understanding are not.

[done]

  • The first message on the White Wwamphen article of EN looks like it isn't being parsed correctly

[done]