Create callouts for the new Download Firefox button CTAs

[bobsilverberg]

For the experiment, the new CTAs will include callouts, which are elements which point to the existing buttons and draw the user's attention to them, from the Figma file at https://www.figma.com/file/7FnxRoHYpyEfMOIfob423s/Non-Firefox-Download?node-id=136%3A0:

[bobsilverberg]

Some screenshots of what I have so far for the Add-on Detail Page button:

Large screen

Supports RTAMO:  Does not support RTAMO: 

Medium screen

Supports RTAMO:  Does not support RTAMO: 

Small screen

Supports RTAMO:  Does not support RTAMO: 

[bobsilverberg]

@jvillalobos @verdi and anyone else interested, I have added some screenshots of the callout above.

[bobsilverberg]

For the Download Firefox button in the header, at a larger screen sizes, the spec includes this:

@verdi should I infer from that that the callout + download button are meant to be centered in the space that is available between the left side of the page and the beginning of the "Extension Workshop" link?

[willdurand]

@Verdi should I infer from that that the callout + download button are meant to be centered in the space that is available between the left side of the page and the beginning of the "Extension Workshop" link?

During a meeting, I think I heard about this button/banner being left-aligned with the menu below (Explore)

[bobsilverberg]

@verdi / @jvillalobos The callout text for the button in the header says "You'll need Firefox to use these extensions and themes", and there is also an example with a smaller screen that just says "You'll need Firefox to use these extensions". Is the assumption that, if the user is visiting the mobile site, we would use the latter text, because themes are not currently supported on mobile?

[jvillalobos]

Some screenshots of what I have so far for the Add-on Detail Page button

I know localization introduces a lot of variability, but maybe the yellow bubble should at least be as wide as the button, so they line up in many cases.

Is the assumption that, if the user is visiting the mobile site, we would use the latter text, because themes are not currently supported on mobile?

I don't know if that was the original assumption behind it, but it makes sense to me, and it's also shorter.

[bobsilverberg]

In the smallest view of the samples, there is an issue: The "Download Firefox" button has been moved below the "Register or Log in" link. While this looks good with the callout, once a user logs in the "Register or Log in" link becomes a menu. This won't work very well with the "Download Firefox" button below it (the button will be in the way of the menu).

One way to address this, which would actually simplify things in other ways too, would be to only show the "Download Firefox" button to users who are not logged in. While I realize we don't want to limit the cases where we show this button to users, it seems reasonable to think that anyone who has a Firefox Account and was therefore able to log in, probably has Firefox already.

If we don't want to take that route then I think we need to think of another way of making this smallest screen work.

Existing screen:

Suggestion from the mocks:

cc @Verdi @jvillalobos

[jvillalobos]

the button will be in the way of the menu

What does this mean? The button will appear on top of menu items?

[bobsilverberg]

the button will be in the way of the menu

What does this mean? The button will appear on top of menu items?

We could make it so that the menu appears over top of the button, when it's opened, but I still think that's a pretty bad experience.

[jvillalobos]

What's the bad experience? That the opened menu will cover the button? That doesn't seem to justify hiding the CTA for many users. Note that we know lots of users log in to the site for no discernible reason, so we don't really know if they're even Firefox users.

[bobsilverberg]

What's the bad experience? That the opened menu will cover the button? That doesn't seem to justify hiding the CTA for many users. Note that we know lots of users log in to the site for no discernible reason, so we don't really know if they're even Firefox users.

I might have not been clear with my intentions. Removing the button for logged-in users was, imo, a last resort. I was thinking more of a different design, but I will try implementing what is suggested here, and we can see how it looks.

[bobsilverberg]

Some new screenshots for the add-on detail page:

Some screenshots of what I have so far for the Add-on Detail Page button:

RTAMO version

ExtraLarge:  Large:  Medium:  Small:  ExtraLarge (theme): 

Non-RTAMO version

ExtraLarge:  Large:  Medium:  Small:  ExtraLarge (theme): 

Please let me know what you think @jvillalobos and @Verdi

[bobsilverberg]

Here is the latest mock from @Verdi:

https://firefox.michaelverdi.com/amo-header-info/

[jvillalobos]

The screenshots look good to me!

[bobsilverberg]

@jvillalobos @Verdi Some screenshots for the new header banner:

Small:

Medium:

Large:

[bobsilverberg]

@jvillalobos and @Verdi, do we want to show the the header banner on the add-on detail page, which will also include the new callout pointing at the "Download Firefox" button, or should we exclude the header banner if we are on that page? As they both have different appearances (a big yellow banner vs. a light yellow callout) it might make sense to still show both of them on the detail page. WDYT?

[jvillalobos]

I think the idea is to only use the header banner on non-listing pages. If you're on a listing page and made the decision to get Firefox, odds are that you want it along with the add-on, so we want to encourage that flow.

[bobsilverberg]

Here are some screenshots of the most recent version of the add-on detail page button:

Small:

Medium:

Large:

[ioanarusiczki]

@bobsilverberg I checked on AMO dev - with Chrome

1. Detail page messages:

• Recommended addons:

• Recommended themes:

• non -recommended extension: - I'll file an issue, the medium and large size screens are affected

• non-recommended theme:

• Android small screen: - half of the add-ons logo is visible but I don't see it as an issue

2. The message on the other pages:

• If I dismiss the message and refresh the page the message reappears, I don't know if that's expected:

• when I click "download Firefox URL" it will open https://www.mozilla.org/en-US/firefox/new/?utm_campaign=amo-fx-cta-new-cta&utm_content=banner-download-button&utm_medium=referral&utm_source=addons.mozilla.org in the same tab. If I navigate back the yellow message is still available, it can only be dismissed using "X". I hope that's fine.

[bobsilverberg]

@ioanarusiczki Thanks for the feedback. I have addressed the issue mentioned above which was opened as mozilla/addons#14103. The banner is behaving as expected. I don't think there are any other outstanding issues mentioned above, but correct me if I am wrong about that.

[ioanarusiczki]

@bobsilverberg I initially thought that after the banner is dismissed it should not re-appear back. I am sure that was happening at a full page reload, now I can't check it since the experiment is disabled. But then I realized the "download firefox" blue button is not available for the new cta group so this should be expected. Can you confirm?

[bobsilverberg]

@bobsilverberg I initially thought that after the banner is dismissed it should not re-appear back. I am sure that was happening at a full page reload, now I can't check it since the experiment is disabled. But then I realized the "download firefox" blue button is not available for the new cta group so this should be expected. Can you confirm?

The banner is expected to come back after a reload. We only save the dismissed state in the redux store, and don’t persist it on disk.

[ioanarusiczki]

@bobsilverberg Testing today a bit more on Android - small screen maybe as a UX is not quite ok when the banner overlaps the logo because that can be used for site navigation and now it's only partially visible.

Also the search bar and Register or log in button are completely hidden in this case.

Let me know what you think of this.

[bobsilverberg]

Thanks @ioanarusiczki. I think it’s fine because really we mostly expect people to either click on the link to download Firefox, or, if they really want to use the site, to dismiss the banner. The site isn’t particularly useful to someone on a mobile phone that isn’t Firefox.

WDYT @jvillalobos @Verdi

[Verdi]

Thanks @ioanarusiczki. I think it’s fine because really we mostly expect people to either click on the link to download Firefox, or, if they really want to use the site, to dismiss the banner. The site isn’t particularly useful to someone on a mobile phone that isn’t Firefox.

WDYT @jvillalobos @Verdi

Agreed. We designed it with this rationale.

[jvillalobos]

+1