Content Warning UX Improvements - Increase transparency

[eszter007]

Problem

I would propose suggestions for the current content warning experience. In the current solution, content warnings are not visible as such for users, as there is a lack of context. For instance, you only see the reason for the content warning (e.g. Personal) but you cannot see that this post is actually a content warning. The UI with the CTA “Show more” can be mistaken for a harmless post as CTAs like these are usually shown to view more detailed information such as reading the whole article after seeing a summary, etc. The purpose of content warnings however is to beware users of content that they might not want to see or might mentally not be able to see and thus protecting their psychological safety. Thus, content warnings should be easily recognizable as such to help users decide whether they are ready or want to see the content.

Another issue with the current content warnings is the CTA design. Currently, a Primary CTA is used which is very prominent (it takes the entire screen width & solid background color). CTAs like these are typically used for primary actions you want the user to take. This pattern is so common that users are subconsciously pushed towards clicking it as it is the most visible action on the screen. However, in this context, you don't want users to click a content warning subconsciously and rather help them make an informed decision by providing them context and also making the CTA less prominent.

Third, the UX of seeing content warnings is complex as well currently. The user can set a content warning for a text only, for a photo & text and only for a photo. Especially in the case where both the text & the photo have a content warning, you have to click first either on the photo or text and then on the other component to view the entire thing. However, this behavior adds unnecessary complexity due to multiple necessary button clicks to view all and thus possible UX issues since I don't think it is necessary to view the picture & text independently if both have a content warning.

Last, the icon in the top right corner of the screen is ambiguous. You can already uncover the content by clicking on the content itself, and the top right action does not add any additional functionally. Plus, it is shown in every single post detail screen even if there is no content warning at all (and does it do not do anything). A button which replicates functionality, which redundancy does not give additional value or does not do anything, is not necessary. I think we can remove it.

Here you can see some screenshots of the current behavior:

Current: CW for text only	Current: CW uncovered

Current: CW for photo only	Current: CW for text only

Current: CW for photo & text	Current: CW for photo uncovered	Current: CW for photo & text uncovered

Solution

To simplify the behavior and add context to increase the transparency of content warnings and help users recognize them, I would suggest the following solution:

• use a content warning component which shows
  • that this is a content warning and also the type of the content warning ("Content warning:" + {reason}", e.g. "Content warning: Personal")
  • context with explanatory text to help the users understand what this means and also that this is an action done by the author. Otherwise it may be confused with moderated content (e.g. that the author did not follow rules) which might leave a negative impression
  • CTA to uncover the content. Here I propose a tertiary CTA which is not prominent so that the user takes a step back before clicking it
  • simplify behavior of CW display
    • if there is only a text, add a general content warning component above the text
    • if the CW is only for the picture, blur only the picture and add the explanation within the blurred space.
    • if the CW is for both the picture & text, blur both components together
• if the user decided to click the "Show content" CTA, show the content.
• remove the eye icon in the top right corner on all screens

The suggestion I made here is used similarly by other services like Instagram and Twitter. As the majority of the users is probably familiar with these platforms due to their popularity, this pattern also builds on this familiarity.
Furthermore, I think we can remove the case that a media CW & text content warning can be unhidden independently. In the currently implemented version, when setting a text CW and adding a media, the media content warning is required and there is no opt-out possible. Thus, if the text is critical, then the media probably is as well and the user probably does not want to see the media only in this case.

New: CW for text only	New: text CW uncovered

New: CW for image & text	New: CW for image only	New: CW uncovered

Alternatives

If there are more visual design ideation, feel free to suggest them. I thought about the benefits to still give the users the option to hide a CW post if they want again, however after checking other apps, I saw that this is not a common behavior. I think thus if the user wanted to see the content, the likelihood that they want to hide it again is very low as they already saw it. This is an assumption though and can be checked with tracking (if applicable) or by asking users about it.

Out of context suggestions

When looking at the visual design, you can see that I also increased the margin on the right and left. Currently, it is at 8 — however for mobile apps a margin of 16 on the sides is more common and also helps the design “breathe” better and feel less cluttered.

Next steps

Feel free to research more, ideate and challenge this idea. Furthermore, if this idea is generally approved, we need someone with coding skills which I cannot provide as a UX designer :)

[alexbbrown]

I love this detailed proposal.

I personally appreciate the ability to disclose text and picture separately, and to re-hide pictures I don't want to see.

for example, a picture may include objectionable content which is triggering, disturbing to look at or NSFW that I need to hide for the comfort of myself or others.

In that case I want to hide it as soon as possible.