Feature request: Muted post reasons. (contains rough styling solution)

[JamesKoenig]

Note this post discusses examples or topics of content a user might want to avoid

if you or someone you know is currently in a mental health crisis, and you have resources, like the suicide and crisis hotline.

Is your feature request related to a problem? Please describe.

As per the final paragraph of bug report #4707 (False Positives or otherwise inconsistent behaviors in Muted Tags/Words.) Whereas:

• Bluesky is a platform under active development, and giving users knowledge as to how and why a post is being muted may allow users to either refine their mutes, or to identify bugs in the implementation of mutes;

Whereas:

• Not all mute reasons are created equal. Opening up a show prompt to expand a post is an act of consent currently given without information as to what word caused the filter. A user who needs to be careful either due to a disabling phobia (ie. severe arachnophobia) or immediate psychiatric needs (ie. at risk of suicidal ideation), would at this point either need to use stronger features (ie. chrome addons that will affirmatively warn them of content). Alternatively, they would simply not use the muted posts for more minor annoyances (like muting an unwanted tv show title);

Whereas:

• A user who uses the mute topic and word list for both urgent or critical moderation requirements, as well as minor annoyances, runs the risk of developing a UX habit of expanding muted topics due to minor annoyances, which leads to the risk of having a negative user experience;

Describe the solution you'd like

The posts hidden by muted word should give a reason why either on hover or otherwise, and a rough idea of where the information lies. The users themselves have the knowledge of where their boundaries lie, so the granularity of scenarios should be up to the user to decide, like:

• 'post contains link with muted text: pinapple on pizza', may be something they want to expand, whereas the original post might not be.
• Posts which contain references to multiple blocked things. E.g. a user has blocked 'Jeopardy', a minor thing; 'SNL', also a minor thing; and 'eating disorder', a major thing, may give them contextual information as to whether they would want to expand the post or not; maybe the post is absurd, maybe they can deduce that it's about an SNL skit that they'd rather avoid. But this empowers them without risking them being exposed to material that they feel would put them at risk.

Describe alternatives you've considered

a disclaimer at the top of Muted Words that more critical muted information should use a given resource. Mobile application users would likely not benefit from this disclaimer.

Additional context

An example drilldown hover: An example drilldown prompt: rough concept showing it can be hovered and expanded: rough concept showing it can be expanded without hover:

Source of the above rough concept:

html:

<div dir="auto" class="css-146c3p1" style="font-size: 14px; letter-spacing: 0.25px; color: rgb(174, 187, 201); flex: 1 1 0%; text-align: left; font-weight: 500; line-height: 18px; margin-bottom: 1px;">Post hidden by Muted Text<span class="mute-details" style="padding-left: 7px;font-style: italic;display: inline-block;position: absolute;/*! background-color: gray; */"><span class="mute-details-prompt">(details)</span><div class="mute-details-dropdown">debate, chuck-e-cheeze. (in link preview)</div></span></div>

NB: the parent div above, is taken from inspect element of the existing show prompt. Also, when I was doing this quick draft I couldn't get rid of whitespace introduced by formatting before the deadline I gave myself, so it's all inline, sorry for that-- I'll post the non-oneline in a reply CSS:

.mute-details {
    padding-left: 7px;
    font-style: italic;
    display: inline-block;
    position: absolute;
}

.mute-details-prompt {
    position: relative;
}

.mute-details-dropdown {
    display: none;
    position: fixed;
    background-color: gray;
    z-index: 1;
}

.mute-details:hover .mute-details-prompt {
    display: none;
}

.mute-details:hover .mute-details-dropdown {
    display: block;
    border: 1px gray solid;
    border-radius: 2px;
    padding: 2px;
    font-style: initial;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

N.B. 'in link preview' in the above, is technically inaccurate, the child-linked-post has the muted term in the link preview, ALSO Note that Chuck-e-cheese is not in the content above, linked or otherwise, and is a fabrication.

Weaknesses of this rough implementation are that it has no overflow rules and its styling is ass. but it's a proof-of-concept.

Permission to use the post in the above screenshot was given here, and in private. This post, and the linked issue, may be edited if the permission is rescinded.

[JamesKoenig]

The above example html, formatted to display nicely, this was not done above because I couldn't get the styling to work right within the deadline I set myself (lol). So it will not render the same result as the screenshots.

<div dir="auto" 
        class="css-146c3p1" 
        style="font-size: 14px; letter-spacing: 0.25px; color: rgb(174, 187, 201); flex: 1 1 0%; text-align: left; font-weight: 500; line-height: 18px; margin-bottom: 1px;">
            Post hidden by Muted Text
            <span class="mute-details">
                <span class="mute-details-prompt">(details)</span>
                <div class="mute-details-dropdown">debate, chuck-e-cheeze. (in link preview)</div>
            </span>
</div>

[Nayelianne]

Agree!

Displaying which was the muted word in the post warning, like we have for the mute warnings generated by moderation lists, is super important (at least as an option), so people can make more controlled choices about what they want to view. (Eg. instead of "Post Hidden by Muted Word", we'd have "Post Hidden by Muted Word: [word]")

I have some muted words for content I don't want to see at all, but also for certain content that I'd just rather have a heads up before seeing, or mildly annoying things that were spammy on the discovery page / catching me off guard.

Not knowing which word is muting the post means one can accidentally open a jarring spoiler they were trying to avoid, or someone may open something they find traumatizing, just because there was no way to tell which of their mute words was in effect for that post until they unhide it.

PS: @JamesKoenig I think your previous thread title was actually easier to find/understand at a glance before opening the post, I almost created a new one because I wasn't finding anything similar to the issue I wanted to create, took some digging hahah.

[surfdude29]

I think this is a good idea, but I agree with @Nayelianne that the muted word which triggered the post being muted should be shown directly in the content hider.

Showing the reason on hover would work well on web, but I'm not sure how it would work on mobile?

[JamesKoenig]

PS: @JamesKoenig I think your previous thread title was actually easier to find/understand at a glance before opening the post, I almost created a new one because I wasn't finding anything similar to the issue I wanted to create, took some digging hahah.

Yeah I definitely overthought the title changes. Reverted.

Showing the reason on hover would work well on web, but I'm not sure how it would work on mobile?

long press and 3d touch functionality would definitely work for this.

An example solution would be to have a long press on the mute-context and to have a modal pop up (like the current modal for 'learn more' when a post is tagged with a modal.

Actually, on that note:

why not just add the existing learn-more functionality from moderation and labeler hides?

like instead of this

do this. It'd really bring together the feeling that the user is actually moderating their feed with the moderation settings, if the resulting ui reflects the moderation functionality and reasons.

[surfdude29]

FYI there is a PR open now which addresses this at #6041.