External Media: remove duplicate "generate with AI"

[annezazu]

Currently, there are two "Generate with AI" options added into the Image block when using Jetpack:

Similar to #39933, this adds a bit of clutter to the experience as is. Curious what design thinks or why it's best to have this option twice! As is, I'd be keen to see it only in the dropdown when selecting an image as that ensures consistency across interacting with images, including setting a featured image or using a tiled gallery.

[jeherve]

This was introduced in #38123. It does seem like we could remove the extra entry point indeed. cc'ing @Automattic/jetpack-agora on this.

[grbicsanja]

This additional entry point was intentional, to get more visibility for the AI tool. The rationale is that we already have separate entry points for upload, add image via link, and select image from a list of services, generating with AI would be an additional category - conceptually.
Is there a guideline we follow for the options there? I would rather remove 'Insert from URL' and move it into the menu to avoid clutter, and leave Generate with AI in both spots. @vianasw do we acquire a lot of users through this path, do you know? cc: @keoshi

[annezazu]

Is there a guideline we follow for the options there? I would rather remove 'Insert from URL' and move it into the menu to avoid clutter, and leave Generate with AI in both spots.

Insert from URL is from Core. I'd prefer we don't touch the Core items when possible and instead consolidate duplicate options currently in the interface from JP!

[grbicsanja]

I can only speak to what I think is best for Jetpack users and revenue, so I recommend leaving the entry point. Not sure if we have any processes around what to prioritize and who makes these decisions.

[pablohoneyhoney]

I’m happy to support you all on the best UX; do we have any specific metrics on how people interact with what choices? We could base our decision making also on numbers we could have.

What I read or sense above:

• Clutter and paradox of choice. Agreed.

• Potentially tier the options, either AI or URL under the dropdown panel, though it'd need to be very well structured there. Currently the taxonomy and the visual equilibrium to parse choices don't make a lot of sense.
  

• AI is becoming a norm and can be a fine option when JP installed. I suppose this eventually will diffuse however in benefit of a more integrative and united AI experience (Big Sky).

Some issues I see:

• The UX isn't continuous and connected and we show a feature in a singular place but make it hidden or invisible later. AI image generation isn't available when replacing or even in the JP sidebar (notice that the similar tool available is for featured image only).
• The AI experience isn't at par with current standards and could use some refinement in the panel. See images below, where verbiage is redundant, spacing ample, we have multiple focal points (buttons), placeholder text isn't aligned within the field, etc.

• We need to consider what's best for different use cases beyond our biased JP-installed A8c environment. What's best for various cases and how do we provide an elegant solve for all?
• If we introduce a feature (and we agree it's needed) we need to reconsider how that affects the Whole UX; two examples:
  The descriptions both in the placeholder and the sidebar aren't connected, and neither description is connected to the behaviors we present forward to the user. If we introduce a button there, shall the description adapt?
  Similarly, if I engage with Help Center to learn more (let's say I used the AI generator and don't see it again to change the image generated), the docs aren't not updated with this affordance; I suppose those are Dotcom specific but JP is part of Dotcom so worth considering that node in the whole UX.

Duplication is not a big deal if it's considered with care and it doesn't add paradoxes.

--
Sidenote: the button hover isn't working as ideal (similar footprint)

over

[grbicsanja]

Thank you, @pablohoneyhoney, for the thorough feedback! We already have a planned task to improve the AI image generation UI, and all your notes are super helpful. @keoshi and I reviewed all the points, noted the problems, and added them to the issue, which we will work on in the next few weeks.

do we have any specific metrics on how people interact with what choices? We could base our decision making also on numbers we could have.

100% Agree! For the Jetpack AI numbers, @vianasw do you have them? Or maybe someone on @Automattic/jetpack-agora? Let's make sure we are aware on the impact on our metrics before removing an entry point.
@annezazu I understand that the core components are not what we want to mess with right now, but if we want to declutter, we could look at the usage of all the options. Are you able to obtain these numbers? Having this button not hidden inside the menu is a great advantage for both Jetpack and our customers; it's a way to provide immediate value.

[vianasw]

I looked into the track events and the more visible entry point gets order-of-magnitude more clicks when comparing unique daily usage, and it's abysmal when comparing overall usage:

Based on that, I wouldn't remove the duplication.

[annezazu]

I understand that the core components are not what we want to mess with right now, but if we want to declutter, we could look at the usage of all the options. Are you able to obtain these numbers? Having this button not hidden inside the menu is a great advantage for both Jetpack and our customers; it's a way to provide immediate value.

I'm not able to pull these numbers as we don't do tracking for this on WordPress Core. The best option is to pull tracking from Jetpack and/or WordPress.com.

I looked into the track events and the more visible entry point gets order-of-magnitude more clicks when comparing unique daily usage, and it's abysmal when comparing overall usage:

I'm a bit surprised we're taking up precious real estate with duplicated options added onto the Image block. It makes sense that if you add an option for the same thing in more places, you'll get more clicks, especially for an option as visible as being in the placeholder. What about the experience for the user though? If we are offering the same thing twice, how is the user to make sense of that? As it stands, I'd expect them to do different things. To make things more complex, we show the options to generate with AI when you choose "select image" but not when you choose "add image". All of these add up to create friction.

[jasmussen]

Hey, thanks for opening this issue. For me, it's a visual challenge. I don't understand how we're okay with shipping something that looks like this:

• Buttons are not the same style
• Buttons are not the same height
• Buttons are duplicated, so which one is the right one?

If we had a solid design that looked great, and handled every use case, it would be much harder to refute the numbers. But as is, this is trash pickup territory. If you need to make change to the Image setup state in order to better accomodate this duplication, feel free to open core pull requests, you have a two week window before the next plugin release.

[keoshi]

I'm a bit surprised we're taking up precious real estate with duplicated options added onto the Image block.

@annezazu Curious what makes this real estate precious, as it seems we have plenty of space in the placeholder?

In my perspective it's about two things:

Surfaced button in placeholder

As @grbicsanja mentioned above, bubbling up the “Generate with AI” option is a nice way to immediately surface the value Jetpack provides. If we consider the end-to-end experience, starting with WordPress and adding Jetpack afterwards, it becomes clear that AI is part of the added value in Jetpack tooling.

The metrics above indicate this is the preferred way of interacting with it and it makes sense considering it's prominent visibility. Removing this option would therefore get rid of an important entry point.

Duplicated option in the dropdown

What we see in the image block as a duplicated option, actually serves a much broader goal of aligning all media manipulation instances.

This dropdown shows up in multiple places as a unified set of actions, so it would be good to keep the options the same. Even if it causes duplication in some blocks. That seems like a fair UI compromise in service of honorable goals: discovery, value.

Image block	Gallery block	Featured image

If you need to make change to the Image setup state in order to better accomodate this duplication, feel free to open core pull requests, you have a two week window before the next plugin release.

We'll take care of this as soon as possible.

[jeherve]

As a I was testing my latest changes with the image block, I wanted to surface what may be an additional argument to remove the extra entry point for the "Generate with AI" button. It's worth noting that i some languages, the text is longer and we end up having to break onto 2 lines of buttons. That's not pretty imo:

[keoshi]

I believe this was mentioned in some of these issues, but what about making “Insert from URL” part of the dropdown of “Select an image”. That way, other media blocks could benefit from this extra option being offered universally.

Again, given the number above it doesn't seem like a great idea to remove an important entry point.

Sidenote: it would be great to think about an affordance to make it clear the “Select image” button contains more options. Not sure if the chevron has been used in conjunction with text. Perhaps there's a better pattern?

[jasmussen]

I definitely think there's a design exploration that involves reducing the URL option substantially. The main challenge here is that with no plugins active, the button is called "Media library", and opens it directly:

For people without extensions, it's unclear if the consolidation is worth the extra click.

Stepping back, though, the Image placeholder is an "onboarding opportunity", and despite having had many iterations already, it's fully open to being revisited, refined yet again, should any of you have cycles.