Directory

⚓ T275729 Comment permalinks: design and implement user experience
Page MenuHomePhabricator

Comment permalinks: design and implement user experience
Closed, ResolvedPublic

Assigned To
Authored By
ppelberg
Feb 25 2021, 3:41 AM
Referenced Files
F41562694: image.png
Dec 5 2023, 1:32 PM
F37727050: image.png
Sep 15 2023, 9:45 AM
F36822541: image.png
Feb 12 2023, 5:50 PM
F36822539: image.png
Feb 12 2023, 5:50 PM
F36822537: image.png
Feb 12 2023, 5:50 PM
F36822534: image.png
Feb 12 2023, 5:50 PM
F36822530: image.png
Feb 12 2023, 5:50 PM
F36822532: image.png
Feb 12 2023, 5:50 PM
Tokens
"Stroopwafel" token, awarded by whym.

Description

This task is about introducing the ability for people to be able to link to specific talk page comments.

This surfaced again in the context of T264885.

Stories

  • As someone who is wanting to reference a specific thing someone has said now, and at any point in the future, I want to be able to generate a permanent link to any individual comment posted on a wikitext talk page, so that I, and anyone else in the future (including my future self!), can revisit the comment and better understand the context the link to said comment may be embedded within.

Open questions

  • 1. What happens in cases where people have expressed a preference for the timestamp in their signature to contain a link?
    • See more context in the comment @Tacsipacsi posted in T275729#8181528.
    • ES: Timestamps which are already links will be left unmodified, meaning the permalink feature will not be available for them. Our thinking behind this is:
      • This is likely to be a rare edge case.
      • If this is problematic for communities, it can be fixed by changing policy (disallowing linking of timestamps), or the issue can be re-raised with the Editing team.

Requirements

⚠️ Draft-state. The requirements in this section will finalized, and this disclaimer removed, once the === Mockups below are finalized.

Meta

  • Platform(s): Desktop + Mobile
  • Skin(s): All
  • State of Show discussion activity setting: Enabled and Disabled
  • Comment permalinks/URLs should work regardless of how the context around the comment changes
    • E.g. the name of the topic/section in which the comment exists changes, the page on which the comment exists changes, etc.
  • Comment URLs/permalinks should be human-readable

User Experience

  1. People for whom the timestamp that appears within their signature is NOT a link will become a permanent link.
    • Note: how exactly these linked timestamps appear will be specified in the Mockup(s) section below.
  2. People for whom the timestamp that appears within their signature is a link...requirement to be completed by way of Open question "1." above.
  3. Once someone clicks/taps the link requirement "1." introduces, the permalink to said comment should automatically be added to the device the person is using's clipboard without the page reloading
  4. Upon clicking/tapping the link affordance, people should be made aware that a link to said comment has been added to their clipboard and be shown the specific comment for which the permalink was generated

The requirements above are – in large part – inspired by the permalinking gadget @Esanders implemented which you can experiment with by following these instructions.

Approaches

Approach #1: Show a link/button for copying comment links
This is the approach the first version of the gadget @Esanders wrote and Flow take. Github and Reddit implement this in addition to timestamp linking.

GadgetFlowGithubreddit
Mobile#todo#todo#todo#todo
Desktop
Screen Shot 2022-08-22 at 4.32.08 PM.png (372×1 px, 98 KB)
Screen Shot 2022-08-22 at 4.30.51 PM.png (632×1 px, 171 KB)
Screen Shot 2022-08-22 at 4.30.25 PM.png (704×1 px, 189 KB)
Screen Shot 2022-08-22 at 4.28.45 PM.png (410×740 px, 71 KB)

Approach #2: Embed the affordance for copying comment links within each comment's signature/timestamp
Suggested by @nayoub, this is the approach the second version of the gadget @Esanders wrote (see this demo), Twitter, Facebook, Phabricator take. Reddit and Github also implement this in addition to dedicated buttons.

GadgetTwitterFacebookPhabricatorGithubReddit
Mobile#todo#todo#todo#todo!!#todo#!!#todo#
Desktop
image.png (310×764 px, 92 KB)
image.png (106×631 px, 25 KB)
image.png (240×427 px, 39 KB)
image.png (188×420 px, 31 KB)
image.png (130×478 px, 21 KB)
image.png (156×513 px, 18 KB)

Mockup(s)

We will intiailly be using approach #2, so the timestamp becomes a muted link:

image.png (91×353 px, 11 KB)

References

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)

Approach #2: Embed the affordance for copying comment links within each comment's signature/timestamp
This is the approach @nayoub suggested and this demo @Esanders wrote takes.

Is it impossible for a recognized signature’s timestamp to be already a link? What if one’s signature (in preferences) is

[[User:Alice|Alice]] ([[User talk:Alice|talk]]) [[Special:Contributions/Alice|{{subst:#timel:H:i, j F Y (T)}}]]

and the user signs with five tildes instead of four? Is the resulting Alice (talk) 12:00, 24 August 2022 (UTC) not recognized as a signature?

By the way, the black link on Patch Demo is hard to discover, it took me half a minute to find it despite me knowing that it should be somewhere there. If taking this approach, the signature should have some CSS that makes it recognizable as an interactive element.

By the way, the black link on Patch Demo is hard to discover, it took me half a minute to find it despite me knowing that it should be somewhere there. If taking this approach, the signature should have some CSS that makes it recognizable as an interactive element.

I think this is intentional, with the idea being that this is an advanced feature and we don't want to distract from other more important links. Other sites use similarly muted styling (Twitter, Phabricator etc).

That said if we want to call more attention to this feature we could break with what those sites have done, or maybe just using grey text will alert experienced users that something has changed.

Approach #2: Embed the affordance for copying comment links within each comment's signature/timestamp
This is the approach @nayoub suggested and this demo @Esanders wrote takes.

Is it impossible for a recognized signature’s timestamp to be already a link? What if one’s signature (in preferences) is

[[User:Alice|Alice]] ([[User talk:Alice|talk]]) [[Special:Contributions/Alice|{{subst:#timel:H:i, j F Y (T)}}]]

and the user signs with five tildes instead of four? Is the resulting Alice (talk) 12:00, 24 August 2022 (UTC) not recognized as a signature?

We found this case in T252059 where the timestamp links to a diff for unsigned comments. It's an edge case so not a huge problem. We could either:

  • not add permalinks to these comments
  • overwrite the link with our permalink
  • add another link next to the timestamp, e.g. "(link)"
  • modify the offending templates to generated an un-linked timestamp, followed by another link, e.g. "(diff)"

I think this is intentional, with the idea being that this is an advanced feature and we don't want to distract from other more important links. Other sites use similarly muted styling (Twitter, Phabricator etc).

@Esanders I agree, its goal is to be "muted" on the page and it is widely adopted in that way across other platforms. It's a well-spread pattern.

We found this case in T252059 where the timestamp links to a diff for unsigned comments. It's an edge case so not a huge problem. We could either:

  • not add permalinks to these comments
  • overwrite the link with our permalink
  • add another link next to the timestamp, e.g. "(link)"
  • modify the offending templates to generated an un-linked timestamp, followed by another link, e.g. "(diff)"

My first intuition would be to overwrite the link with our permalink for consistency and optionally follow by a "(diff)" link if needed.
To avoid double parenthesis, would it be possible to include UTC close to the hour maybe like this? Username (talk) 12:00 UTC, 24 August 2022 (diff)
This would also make more sense and add consistency with (talk) interaction so both talk and diff have the same treatment.

By the way, the black link on Patch Demo is hard to discover, it took me half a minute to find it despite me knowing that it should be somewhere there. If taking this approach, the signature should have some CSS that makes it recognizable as an interactive element.

I think this is intentional, with the idea being that this is an advanced feature and we don't want to distract from other more important links. Other sites use similarly muted styling (Twitter, Phabricator etc).

That said if we want to call more attention to this feature we could break with what those sites have done, or maybe just using grey text will alert experienced users that something has changed.

Other sites (or even Flow) highlight the date with placement. On wikitext talk pages, the placement does not highlight, so there needs to be something else. It doesn’t need to be very prominent, gray text would suffice IMO, but it needs to be noticeable.

We could either:

  • not add permalinks to these comments

It’s certainly possible, but it would make the new feature less useful.

  • overwrite the link with our permalink

I’d avoid this, as these links may provide important information (or may not, but we don’t know, since it’s user-generated content).

  • add another link next to the timestamp, e.g. "(link)"

It doesn’t look nice, but I think it’s the least bad option of the three.

  • modify the offending templates to generated an un-linked timestamp, followed by another link, e.g. "(diff)"

This can certainly be done, and may be preferable in order to reduce the number of such edge cases, but this can be used only in combination with one of the other three options, since it’s never guaranteed that all offending templates have been modified.

My first intuition would be to overwrite the link with our permalink for consistency and optionally follow by a "(diff)" link if needed.

This is not an option. The two options are that we append our link (“(link)”) in parentheses, or templates append the diff link (“(diff)”) in parentheses. We can’t append a link titled “(diff)” pointing to wherever the template-generated link pointed, because the template-generated link may, or may not, have pointed to a diff. (In my hand-crafted example, it pointed to the user’s contributions, not a diff.)

To avoid double parenthesis, would it be possible to include UTC close to the hour maybe like this? Username (talk) 12:00 UTC, 24 August 2022 (diff)

Signature dates are generated by MediaWiki core. If we’d reformat them on display, it’d be confusingly different among users who opted out and who haven’t; if we’d change them in wikitext, it’d be confusingly different between old and new comments, which would also break the comment parser (it can’t currently handle multiple date formats).

Change 818579 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/DiscussionTools@master] [WIP] Turn comment timestamps into permalinks

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

@Lectrician1 writing on T329454:

Feature summary (what you would like to be able to do and where):
Provide a dedicated menu or button to copy the link to a reply
Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):
The timestamp of a topic reply being the link to get the link to the reply/copy it to your clipboard is not intuitive. Newbies are still likely to ask how to get the link to the comment.
Benefits (why should this be implemented?):
Better user experience.

The timestamp of a topic reply being the link to get the link to the reply/copy it to your clipboard is not intuitive. Newbies are still likely to ask how to get the link to the comment.

I think this is increasingly becoming a common design pattern found on many major websites (see task description). I agree it is not as clear as a dedicated labelled button, but there is a balance to be struck in cluttering the UI for a feature that is more likely to used by senior contributors.

I think this is increasingly becoming a common design pattern found on many major websites (see task description)

I also don't think GitHub or Reddit are going to be removing their "Copy link" buttons anytime soon.

more likely to used by senior contributors.

So senior contributors are more-likely to be able to decipher unintuitive designs than newbies? I don't think so. People are going to continue to ask "how do I get the link to a comment" at some point if there is not a button no matter how much experience they have. Nobody wants to keep answering that question.

cluttering the UI

Why can't we just have a horizontal 3-dots button next to the Reply link? Not only could it be used to open a dropdown that would have a button to copy the link, but it could also contain links to copy the text, edit, or delete the comment. This seems so basic.

Approach #2, embedding within timestamps, seems reasonable to me.

I'm merging T273341 into this task as a duplicate.

Reason: to start [i], the user experience for generating a permanent link to a comment and topic will be one and the same...

People will generate permanent links to both by clicking/tapping, what will soon become, the links that appear in peoples' signatures. [ii]

Longer-term, there WILL be distinct affordances to generating links to comments compared to topics. That work will happen by way of T338534 and T340138.


i. T302011#9212812
ii. Note: there is an exception we still need to figure out about what happens when someone's signature already contains a link. See "Open question #1" in the task description for more.

Change 818579 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Turn comment timestamps into permalinks

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

@nayoub It seems that this is done. Do you want to close this?

Ryasmeen moved this task from QA to Ready for Sign Off on the Editing-team (Kanban Board) board.
Ryasmeen edited projects, added Verified; removed Editing QA.

I don't think it was warranted to make timestamps a light grey colour, and especially not one of the colours from OOUI/Codex. Can the responsible devs look into fixing the latter?

Making timestamps gray seems reasonable to me. The time a comment was posted is info secondary to the actual contents of that comment.

There are some questions about this now at https://ru.wikipedia.org/wiki/Википедия:Форум/Технический#Серенькая_дата_в_подписях_в_обсуждениях
@Sdkb: to clarify, I’m mostly asking to switch to a colour from Codex instead of something not based on anything. I don’t feel too strongly about this issue.

Support to keeping it gray but one from Codex indeed.

Thank you all for your feedback!
Yes, I agree with using a color from Codex for the timestamps. After discussing with Design Systems team members, we should use Gray500 #72777d to keep the distinction with the text.

Change 1003578 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/DiscussionTools@master] Use standard gray color for timestamp links

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

Change 1003578 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Use standard gray color for timestamp links

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