Align incompatible Firefox version error with non-Firefox browser CTA

[jvillalobos]

If you look at an add-on listing page on AMO with an old version of Firefox, you might run into this situation:

We (re)discovered this while working on the new Firefox Download CTA in https://github.com/mozilla/addons/issues/14027. We should align the incompatible message with the new UX, since they both lead to a Firefox download:

I'm proposing we don't show the red box anymore, and instead use the same UX as above, but with a modified message on the yellow bubble: You'll need a newer version of Firefox to use this extension.

We can use the same UTM params we use for non-fx clients for now, until we can have more flexibility with utm_campaign.

/cc @Verdi @MeridelW for feedback

[Verdi]

+1 on the flow. Maybe "You'll need the latest version of Firefox to use this extension." I'll leave that up to Meridel.

[bobsilverberg]

Getting into the weeds here, do we care about the minimum required version? In the example above, we say they need "at least version 48.0". Is the expectation that we'll just be telling them to download the most recent version, as @Verdi suggests? I think that makes the most sense as well, but just wanted to call out that we are currently telling them the minimum version they need.

[MeridelW]

The context is that someone is browsing AMO on an older version of Firefox and needs to update Firefox to get the extension, right?

Can we simplify and just have the blue button (no yellow call-out) and have it say: Download the newest version of Firefox to use this extension

[jvillalobos]

Getting into the weeds here, do we care about the minimum required version?

I don't think we need to call out the version the user has or the minimum version needed. Getting the latest should be the only recommendation needed.

The context is that someone is browsing AMO on an older version of Firefox and needs to update Firefox to get the extension, right?

Yes

Can we simplify and just have the blue button (no yellow call-out) and have it say: Download the newest version of Firefox to use this extension

The issue with that is the size of the button, especially in other languages. The yellow call-out is better suited to have longer text and multiple lines if needed.

[jvillalobos]

Here's an example in Italian:

[MeridelW]

Do we know what the character limits are — i.e., at what point text length becomes a problem for the button?

If we shorten the button string to: "Update Firefox and get the extension" would that work? It's 36 characters while "Download Firefox and get the extension" is 38 characters.

[bobsilverberg]

Do we know what the character limits are — i.e., at what point text length becomes a problem for the button?

Deciding an optimal length for English doesn't necessarily address the problem as there are many languages where the translation will be longer, so I think the question is moot.

If we shorten the button string to: "Update Firefox and get the extension" would that work? It's 36 characters while "Download Firefox and get the extension" is 38 characters.

This is a valid point. If we are currently okay with the button text being "Download Firefox and get the extension", then "Update Firefox and get the extension" should be acceptable, but I'm a bit concerned about a couple of things:

1. We're not really leading them to an "update" per se. It would be a new download and installation.
2. There is an expectation, based on how the site behaves most of the time for a user using Firefox, that this blue button would install an add-on. I'm concerned that changing the behaviour to "download firefox" from "install an add-on", without anything directing the users' attention to this difference (i.e., the yellow callout) might cause confusion.

[bobsilverberg]

@jvillalobos There are two cases and two different messages that can be generated that include a download link. One is the case described above, where the add-on requires a version of Firefox that is greater than the user's current version.

The other case is a "catch-all" case that happens when we detect that an add-on is incompatible, but none of the specific reasons we check for apply. My belief is that this will likely never happen, but it's good to have code in place to catch this in case it does.

The message that is displayed currently, if this catch-all is reached is "Your browser does not support add-ons. You can download Firefox to install this add-on."

I think it makes sense that we include this catch-all case in this change as well, so that if that condition does arise, instead of showing the red error message with an embedded link, we use the new download Firefox CTA in place of a disabled install button.

Do you agree? If so, we need to decide what to display in that case? Perhaps we can just display the exact same thing we're using for the minVersion case described in this issue, as we do know that the user is detected as being on Firefox, otherwise we wouldn't have reached this catch-all case.

[MeridelW]

I want to make sure I understand functionality: in the case of someone needing to download and install a newer version of Firefox, does selecting the blue button start the download process AND install the desired add-on? If that is the case, here are potential new strings based on Bob's concerns above:

1. Download a new Firefox and get this extension
2. Download the new Firefox and get this extension
3. Download the new Firefox to get this extension

[jvillalobos]

The message that is displayed currently, if this catch-all is reached is "Your browser does not support add-ons. You can download Firefox to install this add-on."

Is this what we use on Firefox for iOS, or would that use a different code path? I want to make sure we don't mix up our mobile messaging with our compat messaging.

does selecting the blue button start the download process AND install the desired add-on?

There are two variants for the button: one that only says "Download Firefox" and another one that says "Download Firefox and get the extension". That's because at the moment only Recommended add-ons are offered to the user post-install. We plan to expand that feature to all extensions, but that's still in the future.

I think that's another reason we might want not to make changes to the button copy, since this would create 4 variants instead of 2, for a relatively minor use case.

[MeridelW]

How does someone download the newer version of Firefox for non-recommended add-ons? Will there be a link within the yellow box? And, will the blue button be disabled?

Here is my recommendation for that yellow box copy (assumes there is a link within yellow box and that blue button is disabled):

Download a newer version of Firefox to use this extension [hyperlink "newer version of Firefox"]

[bobsilverberg]

The message that is displayed currently, if this catch-all is reached is "Your browser does not support add-ons. You can download Firefox to install this add-on."

Is this what we use on Firefox for iOS, or would that use a different code path? I want to make sure we don't mix up our mobile messaging with our compat messaging.

No, it's a different code path. Here's what it looks like on Firefox for iOS:

[bobsilverberg]

How does someone download the newer version of Firefox for non-recommended add-ons? Will there be a link within the yellow box? And, will the blue button be disabled?

Here is my recommendation for that yellow box copy (assumes there is a link within yellow box and that blue button is disabled):

Download a newer version of Firefox to use this extension [hyperlink "newer version of Firefox"]

I believe the proposal is that the UX for someone on an older version of Firefox for non-recommended add-ons would be the same as what exists on the site currently, except for a different message in the yellow box. They would still download via the blue download button, and they wouldn't see an install button. It would look something like this:

[MeridelW]

Thanks for sharing the screenshot, Bob. That helps.

If we must keep the yellow box, can we remove the information icon? I don't think it's necessary — just adds more visual noise in an already colorful experience (and in Proton/MR1 we have been reducing usage of icons where possible). But, if using these icons is a standard pattern on AMO, we can leave it.

I maintain that the yellow box does not seem necessary from a content perspective. The cleaner experience would be no yellow box and just have a blue button with the copy below. If maintaining these variants is messy on the back-end, I understand and we can keep the yellow box.

Copy for blue-button-only experience: Download the new Firefox to use this extension

[jvillalobos]

If we must keep the yellow box, can we remove the information icon? I don't think it's necessary — just adds more visual noise in an already colorful experience (and in Proton/MR1 we have been reducing usage of icons where possible). But, if using these icons is a standard pattern on AMO, we can leave it.

The yellow box is entirely new. We introduced it as part of the new UX for non-Firefox users, per @verdi's design. We can remove the icon, but we should probably do that across the board since I don't think this compatibility case is different to the others. Removing the box would require more testing to make sure we don't regress conversions and would make the callout less prominent, so I don't expect us to change that soon.

[MeridelW]

Icon is not a big deal — it can probably stay.

As for the yellow box, I would be curious to know if removing that and having a blue button only would help with conversions. If you go that route and want content support please let me know.

[Verdi]

The hypothesis for the yellow box was that if we added context for people - why are they downloading Firefox and not the extension - they would be more likely to complete the Firefox installation.

[MeridelW]

Yep, I am just wondering if we can provide that context within the button itself.

[bobsilverberg]

We could potentially run another experiment to see what happens if we remove the yellow callout altogether, but we don't really have the bandwidth to do that anytime soon. We have a different experiment we're hoping to roll out in the next few weeks, and we have some back end work to do before we can run another experiment that changes the visual design of the site.

Based on that, I think we need to settle on something for now to allow us to implement the feature. It's true that having another version of the text for the blue button does make the code a bit more complicated, as there are even more options, but that's not a blocker. From an engineering perspective I'm fine with either

• removing the yellow callout (just for this use case) and changing the button text, or
• keeping the button text the same and changing the message in the yellow callout

It sounds like we're agreed on keeping the icons for now for consistency, but we could remove them in the future if desired.

[jvillalobos]

Let's keep the yellow callout (with the icon) for consistency with all Download buttons and think about removing it in the future (separately). It performed better than the old blue button, but the copy was different so other variables were involved.

I think the copy for the callout You'll need a newer version of Firefox to use this extension is okay with everyone, so what's left to decide is the button copy.

We can either do:

1. Download Firefox / Download Firefox and get the extension (current copy we use for non-fx users)
2. Download the new Firefox / Download the new Firefox and get the extension (proposed by Meridel, with some tweaks for consistency)

If doing (2) is not a big deal on the engineering front, let's go with that.

Finally, let's include the catch-all case that was mentioned before, using the same copy.

[MeridelW]

I made some small tweaks so the yellow call-out and button copy is not so redundant:

Yellow call-out: You need an updated version of Firefox for this extension Button: Download the new Firefox and get the extension

[ioanarusiczki]

@bobsilverberg I verified on AMO dev with FF89 - I uploaded an add-on compatible with FF90 (or 91) to make sure I get the new message so this is the result:

UX when the addon is not recommended

UX when the addon is recommended

The download Firefox button redirects to : https://www.mozilla.org/en-US/firefox/new/?experiment=20210531_download_funnel_experiment&utm_campaign=non-fx-button&utm_content=rta:bGFuZ3BhY2stYXN0aXByb3NlY29AZmlyZWZveC5tb3ppbGxhLm9yZw&utm_medium=referral&utm_source=addons.mozilla.org&utm_term=amo-fx-cta-620607-current-link&variation=current-link

There's the new-link also available on -dev (because of the funnel experiment). So the download button behaves the same way as for non-FF browsers (edge/chrome) where the CTA experiment is active right now.

The UX for this addon on non-FF browsers did not change, with Edge:

Let me know if I should be testing more around the experiment cookie on FF.

[bobsilverberg]

Thanks @ioanarusiczki! I don't think any other testing is needed for this particular issue.