Improve display of sensitive images on search result views

[zackkrida]

Problem

Sensitive images show up as a blurred gradient in the search results grid. When hovered, they show the CC licenses hover "tooltip" behind the sensitive blur.

These blurred results may not clearly indicate that they are sensitive results enough. An example I've shared previously is cases where someone might be searching for gradient backgrounds:

However, even in cases where users are searching for results that do not look like blurred gradients, I think we should still consider adding additional visual indication for sensitive results.

Google, for example, uses an eye icon over the result itself:

Description

Add the existing eye icon for show/hiding images to unblurred sensitive results on the search view. Fix the license hover to show above the blur.

Alternatives

Additional context

CC @fcoveram for design ideas and suggestions.

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.

[fcoveram]

Your suggestion makes total sense.

Do we have the capacity to implement it once we land on a solution? IIRC, we decided somewhere to pause frontend implementations. Also asking this to revisit my backlog and priorities.

[zackkrida]

Do we have the capacity to implement it once we land on a solution?

In general, I think we can always have designs prepared even if we aren't ready to build the frontend code. Particularly for a fairly small feature like this, it might even be possible for a community contributor to work on.

[sarayourfriend]

If we want to find a community contributor, @madewithkode knew someone who was interested in getting involved contributing to Openverse design work, IIRC.

[madewithkode]

Sure @sarayourfriend! I can point them to this if @fcoveram needs an extra hand.

[fcoveram]

In general, I think we can always have designs prepared even if we aren't ready to build the frontend code.

Absolutely. My point was primarily about when to have the mockup given that there are currently about 9 tickets open and labeled with design ready that can be started to be implemented and I don't have the bandwidth to take this in about a week.

I'm currently addressing other requests, but by the end of the next week I can share a proposal. The design certainly doesn't involve many changes, but it might require a revision by all of us.

[sarayourfriend]

@fcoveram can you confirm that you do not need a community contributor to look at this? Want to respect your time and the effort it takes to usher designs through. If it's a small change, this could be a good entry point for someone else to start being able to contribute directly to new designs, but I can also understand that it might be a lot of work to onboard someone if you're already busy with work.

[fcoveram]

Any design contribution is always welcome. It's not strictly needed, but more hands are indeed helpful.

The change is small so it's a good entry point for sharing design ideas. The onboarding should not be hard task if the individual is familiar with Figma and Design Libraries. Openverse Design Library has all components and most pages to assemble a visual idea and share it here.

[fcoveram]

Here is an idea for this in light and dark mode

Sensitive.content.in.image.component.mp4

While designing the mockups, I noticed the eye icon doesn't provide much info for users that have not open the safe browsing settings, so I replaced the CC icons with a label describing the eye meaning during hover. It felt strange showing the license restriction of a content that you can not see.

What do you think of this?

[zackkrida]

I replaced the CC icons with a label describing the eye meaning during hover. It felt strange showing the license restriction of a content that you can not see.

Excellent 👍 I think that is perfect.

Can you clarify something about light and dark mode @fcoveram? Is there a subtle color overlay (white in light mode, black in dark mode) over the blurred images to guarantee sufficient contrast with the eye icon? That is what it looks like, and I think it's a great idea.

[fcoveram]

Is there a subtle color overlay (white in light mode, black in dark mode) over the blurred images to guarantee sufficient contrast with the eye icon?

Yes.

To reach a similar surface contrast feeling between light and dark, I added a blurred layer over the image with a background color called bg-blur. The alias and respective colors were added in the Design Library's variables as it goes

Colors

• white-88: #FFFFFF at 88%
• black-72: #000000 at 72%

Alias

# Light theme

:root {
	bg-blur: var(white-88);
}

# Dark theme

:root {
	bg-blur: var(black-72);
}

[fcoveram]

Here are all mockups marked as ready for dev.

I modified all components involving images by including the blurred layer for the sensitive content. I will create the issues requesting those changes.

[fcoveram]

The following issues were created requesting updates in some components:

• Improvement over image component #4777
• Improvement over audio component #4778
• Improvement over global player component #4779