Page MenuHomePhabricator

Generate a design that accommodates multiple comment- and topic-level actions
Open, Needs TriagePublic

Assigned To
None
Authored By
ppelberg
Jun 8 2023, 10:06 PM
Referenced Files
F37817942: Comment_v2-Mobile.png
Sep 27 2023, 7:12 PM
F37817935: Comment_v1-Mobile.png
Sep 27 2023, 7:12 PM
F37817922: Comment_Current-Mobile.png
Sep 27 2023, 7:12 PM
F37817906: Comment_v2.png
Sep 27 2023, 7:12 PM
F37817892: Comment_v1.png
Sep 27 2023, 7:12 PM
F37817883: Comment_Current.png
Sep 27 2023, 7:12 PM
F37817856: Topic_v2_mobile.png
Sep 27 2023, 7:09 PM
F37817854: Topic_v1_mobile.png
Sep 27 2023, 7:09 PM
Tokens
"Like" token, awarded by Esanders.

Description

DiscussionTools makes introducing a range of new comment- and topic-specific features possible.

Examples:

This task involves the work of developing a design strategy/spec that would enable a range of teams/developers to introduce features like those listed above while continuing to make it easy for people landing on talk pages to instinctively recognize and use them as places to communicate with other volunteers.

Mockups

See Figma File

Topic level

Currentv1v2
Desktop
Topic_Current.png (1×2 px, 642 KB)
Topic_v1_menu.png (1×2 px, 651 KB)
Topic_v2_menu.png (1×2 px, 641 KB)
Mobile
Topic_Current_mobile.png (1×829 px, 291 KB)
Topic_v1_mobile.png (1×828 px, 370 KB)
Topic_v2_mobile.png (1×828 px, 373 KB)

Comment level

Currentv1v2
Desktop
Comment_Current.png (1×2 px, 642 KB)
Comment_v1.png (1×2 px, 644 KB)
Comment_v2.png (1×2 px, 639 KB)
Mobile
Comment_Current-Mobile.png (1×829 px, 291 KB)
Comment_v1-Mobile.png (1×828 px, 367 KB)
Comment_v2-Mobile.png (1×828 px, 363 KB)

Related Objects

Event Timeline

ppelberg renamed this task from Generate a design to Generate a design that accommodates multiple comment- and topic-level actions.Jun 8 2023, 10:19 PM
ppelberg added a subscriber: Esanders.

An obvious solution might be an ellipsis overflow menu:

image.png (713×816 px, 156 KB)

@ppelberg is this task just for design, or are we ready to start engineering work? The Trust and Safety Tools Team Backlog would like to use an ellipsis menu for the "report" action in T339247: [Sub-epic] Create entry points for the Incident Report dialog with DiscussionTools (cc @JKieserman @Madalina)

ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)
ppelberg moved this task from Incoming to Doing on the Editing-team (Kanban Board) board.

Hi all, here is the spec for the first version of the Incident Report System. As you'll see, we use an ellipsis / action menu for reporting from a topic header (which reports the entire topic) or a specific comment on a User Talk page.

@ppelberg is this task just for design, or are we ready to start engineering work? The Trust and Safety Tools Team Backlog would like to use an ellipsis menu for the "report" action in T339247: [Sub-epic] Create entry points for the Incident Report dialog with DiscussionTools (cc @JKieserman @Madalina)

I'm sorry for the lag, @kostajh. This task represents the work of generating a design.

Per what @Madalina and I talked about offline, the Trust-and-Safety Team are welcome to begin the engineering work to introduce the functionality T339247 + T340138 describe provided we agree on the following: whatever y'all end up implementing in T340138 will need to be adapted to cohere with the design we converge on in this ticket prior to any deployment(s) to production.

hey @aishwaryavardhana – I think this Figma file (see the page named Overlow menu) will hopefully equip you all with the information you need to understand how the Editing Team sees topic- and comment-level actions being added to talk pages.

You'll notice the design file shows two iterations of the topic- and comment-level overflow menu designs...

The Next Implementation designs show versions wherein linking and reporting are available. And the Potential future designs show versions wherein other features that are not likely to be implemented in the near-term (e.g. Thanks) are present within these menus.

hey @ppelberg thanks for sharing the Figma file. I love seeing how your team works! for example, I've never seen this "spotlight" technique but it's definitely helpful!

Editing, permalinks, Reporting, and Settings all make sense in a menu
Topic level reporting looks good
Comment level reporting looks good

QQ: why the vertical ellipses instead of horizontal? feel free to point me somewhere if this discussion has happened elsewhere.

Down the line/in the potential future we'd def wanna keep Thank and Report far apart, which I see y'all did. Overall, I think we're headed in the right direction for sure... and WOW is this going to be a big change to the site when it's deployed. Very excited!

hey @ppelberg thanks for sharing the Figma file. I love seeing how your team works! for example, I've never seen this "spotlight" technique but it's definitely helpful!

All credit to @nayoub ^ _ ^

Editing, permalinks, Reporting, and Settings all make sense in a menu
Topic level reporting looks good
Comment level reporting looks good

QQ: why the vertical ellipses instead of horizontal? feel free to point me somewhere if this discussion has happened elsewhere.

I think @nayoub is best positioned to speak to this...

Down the line/in the potential future we'd def wanna keep Thank and Report far apart, which I see y'all did. Overall, I think we're headed in the right direction for sure...

Ok, wonderful.

and WOW is this going to be a big change to the site when it's deployed. Very excited!

The underlying suite of talk page design changes are available by default at some Wikipedias on desktop (e.g. de.wiki and mw.org) and all wikis on mobile!

hey @ppelberg thanks for sharing the Figma file. I love seeing how your team works! for example, I've never seen this "spotlight" technique but it's definitely helpful!

All credit to @nayoub ^ _ ^

Editing, permalinks, Reporting, and Settings all make sense in a menu
Topic level reporting looks good
Comment level reporting looks good

QQ: why the vertical ellipses instead of horizontal? feel free to point me somewhere if this discussion has happened elsewhere.

I think @nayoub is best positioned to speak to this...

Friendly ping to @nayoub... As Ed noted in Figma, the vertical ellipsis doesn't exist in OOUI or Codex; can we go with horizontal ellipsis for now?

hi @kostajh & @aishwaryavardhana, apologies for missing your comments.

For the ellipsis, the vertical version is currently used on mobile for the "action bar" or main toolbar close to the header of the talk pages so I'm not sure how it was implemented (I would have imagined that it exists at least on OOUI – given it is also present as a component in our Figma library).

The rationale for using those at the topic level was more of a "structural" aspect – vertical at the higher level, all the way to horizontal at the granular level [1]. That being said, we can go with horizontal for now at the topic level and revisit this if needed in the future :)


[1] it is more noticeable/disruptive on desktop as the ellipsis coexists with the subscribe button.

In topic-level v2, I see “Thanks” buttons. I don’t think they should be there – one can thank an edit, and the (mostly) 1:1 correspondence is between an edit and a comment, not an edit and a topic. If one wants to send thanks for starting the topic, they should thank the comment starting the topic, not the topic itself. It may be a bit less discoverable, but way less confusing in terms who receives the thanks. (The person starting the topic? Everyone who has commented in the topic?)

This looks good overall! I was about to make a similar comment to @Tacsipacsi's, though, about "thanks" being a weird option in the topic-level menu. If it is retained there, changing the text to something like "thank topic creator" might clarify a bit.

one can thank an edit, and the (mostly) 1:1 correspondence is between an edit and a comment

You can actually thank anything you can generate an ID for. I agree it might not make sense to thank topics, although this will be an implementation detail for T249893. The examples in the design are just examples.

You can actually thank anything you can generate an ID for.

For a thank to be delivered, you need a recipient as well. I didn’t think it’s technically possible to thank something that’s neither an edit nor a log event; but thanking something that has no single author is conceptually impossible without spamming users.

I agree it might not make sense to thank topics, although this will be an implementation detail for T249893.

I don’t agree. What users can and cannot thank should be a product/design decision informed by technical possibilities, not a purely technical decision.

Change 965151 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[mediawiki/extensions/DiscussionTools@master] overflow menu: Display next to comments on desktop

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

Change 965151 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] overflow menu: Display next to comments on desktop

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

Test wiki created on Patch demo by DJacksonA using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/1d5ea690f0/w

Test wiki created on Patch demo by DJacksonA using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/6740a8095e/w

Test wiki on Patch demo by DJacksonA using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/1d5ea690f0/w/

Test wiki on Patch demo by DJacksonA using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/6740a8095e/w/