Warn AMO users when visiting wrong platform site

[muffinresearch]

AMO users visiting the desktop site on a mobile device (and vice versa) will be warned about it and given the opportunity to switch.

The site being visited is determined in the URL:
https://addons.mozilla.org/firefox/ is the desktop site.
https://addons.mozilla.org/android/ is the mobile site.

This means that bookmarks or links from the web or other places can lead users to the wrong site they intended to visit. A recent mistake in a Fennec patch sent many mobile users to the desktop site, where they ended up having a bad user experience by being offered desktop add-ons that didn’t work for them.

We can probably use existing AMO components to build the warning, but can use UX consultation on placement, content, behavior, etc.

UX bug filed here: https://bugzilla.mozilla.org/show_bug.cgi?id=1582874

[kumar303]

We can probably use existing AMO components to build the warning, but can use UX consultation on placement, content, behavior, etc.

We currently use these Photon message bars.

Here is an example of a similar message we show on iOS:

Screenshot

[aaronrbenson]

@kumar303 yeah I think we keep with this pattern. Here's a spec for this particular issue: https://mozilla.invisionapp.com/share/V4UBSNTHMN2#/387093697_addons-Messaging-Platforms

[bobsilverberg]

@aaronrbenson In the spec I see an implementation for the home page and the add-on details page, but what about other pages on the site? There are lots of pages that a user could potentially land on via a link, just some examples of which are the Review Listing, the All Versions page and the Privacy Policy page.

Do we only want to:

1. Display the warning only on the home page and the add-on detail page.
2. Display the warning only on all pages.
3. Display the warning on some specific pages in addition to the home page and the add-on detail page.

cc @jvillalobos

[aaronrbenson]

Hey @bobsilverberg .. for the pages that aren't add-on detail pages, we can put the notice just under the main navigation bar as it's shown for the mock for the home page.

Would that work for all the other pages or are there any 'gotchas' there?

[jvillalobos]

Agree. The listing page should show the message below the install button, and other user-facing pages should show the other message.

[bobsilverberg]

Thanks @aaronrbenson and @jvillalobos. One more question for @aaronrbenson, the spec shows the current home page, but the new hero promos are going live next Thursday, so I think I should develop this to work with those. For the home page, I assume we'll want this warning to appear immediately after the nav bar (i.e., inside the primary hero gradient) as opposed to after the primary and secondary heroes, correct?

[aaronrbenson]

Yeah, I think that makes the most sense since this warning is a pretty high-level message. It's conveying that the information below it is filtered to either mobile or desktop, so putting it below the hero wouldn't really be accurate. Thanks @bobsilverberg!

[bobsilverberg]

@aaronrbenson The way I am implementing this, if a user is on the wrong platform then the link they see in the warning will take them to the exact same page, but on the correct platform, rather than just taking them to the home page on the correct platform. For example, if you are on https://addons-dev.allizom.org/en-US/android/search/?recommended=true&sort=random&type=extension, the link will point to https://addons-dev.allizom.org/en-US/firefox/search/?recommended=true&sort=random&type=extension, and if you are on https://addons-dev.allizom.org/en-US/android/addon/bitwarden/ the link will point to https://addons-dev.allizom.org/en-US/firefox/addon/bitwarden/. I think this is the optimal user experience for this feature, but I'm wondering if it means we should change the wording of the warning a bit.

I think that the wording for pages other than the Add-on Detail Page is fine (e.g., "To find add-ons compatible with Firefox on desktop, visit our desktop site."), but I think the current wording for the Add-on Detail Page could be improved. It currently says, e.g., "This add-on is not compatible with this platform. Browse add-ons for Firefox on desktop.", but perhaps something like "This add-on is not compatible with this platform. View this add-on on for Firefox on desktop." would be better. What do you think? I guess one potential problem with that is that there may not be a compatible version of said add-on on the other platform.

One other possible issue with the current wording on the Add-on Detail Page is that it's not necessarily correct. There are add-ons that one can view on the Desktop site that are also compatible with Android, so always showing a warning that says "This add-on is not compatible with this platform." could be overkill. Maybe that's something we want to consider as a follow-up to this, as it may be out of scope for what we're trying to accomplish here.

cc @jvillalobos

[jvillalobos]

Maybe it should be something along the lines of "This listing is not intended for this platform. Browse add-ons for Firefox on desktop."

[aaronrbenson]

Yeah, I think a more contextual message would be great to have. Depending on whether we can tell if there's a compatible version of the add-on, having the message read:

"This version of the add-on is not compatible with this platform. Click here for the desktop version."

And if we're not able to tell if there's an alternate, or there isn't one, a more generic message that clues them into understanding they are on the wrong platform site is probably adequate.

[bobsilverberg]

Yeah, I think a more contextual message would be great to have. Depending on whether we can tell if there's a compatible version of the add-on, having the message read:

"This version of the add-on is not compatible with this platform. Click here for the desktop version."

And if we're not able to tell if there's an alternate, or there isn't one, a more generic message that clues them into understanding they are on the wrong platform site is probably adequate.

It's probably possible to determine if a version exists for the other platform, but I think that falls outside of the scope of this issue. That sounds like something to consider along with #12293 as a second step.

If all are in agreement about that, what would you like the more generic message on the Add-on Detail page to say?

[aaronrbenson]

I thought what we had now was the generic version: "This add-on is not compatible with this platform. Browse add-ons for Firefox on desktop."

[bobsilverberg]

I thought what we had now was the generic version: "This add-on is not compatible with this platform. Browse add-ons for Firefox on desktop."

Fair enough, although @jvillalobos suggested "This listing is not intended for this platform. Browse add-ons for Firefox on desktop." What do you think of that, @aaronrbenson?

[aaronrbenson]

Yeah, that works for me

[ioanarusiczki]

@bobsilverberg I verified this issue on AMO stage with FF70 (Win10) and FF68.2.0 (Android 8.0).

• the pages display the messages as shown by the pull request

• all frontend pages will contain To find add-ons compatible with Firefox on desktop, visit our desktop site. below the main navigation bar.

Three observations:

• landing on a link for Android on Desktop for an add-on not compatible for /firefox will look like this:

I don't see it as an issue, but this is the case when the add-ons compatibility is set to Firefox or Android from dev hub (when the add-on is not compatible on both platforms).

• once I dismiss the message with x it will not show up on other pages unless I refresh the page.
  Is the x really needed? I'd take it out. It would encourage more the user to click the "Browse add-ons for Firefox on desktop." to use the correct platform instead.

• (UX) the dismiss x on small devices is not centered

[bobsilverberg]

@bobsilverberg I verified this issue on AMO stage with FF70 (Win10) and FF68.2.0 (Android 8.0).

Thanks @ioanarusiczki!

Three observations:

• landing on a link for Android on Desktop for an add-on not compatible for /firefox will look like this:

I don't see it as an issue, but this is the case when the add-ons compatibility is set to Firefox or Android from dev hub (when the add-on is not compatible on both platforms).

That is a bit unfortunate, but it is a result of us sending them to the same page they were on, as opposed to back to the home page. I think in general this is the behaviour we want. I'm not sure what, if anything we can/should do to address the fact that they can end up on a desktop page that shows an incompatible add-on.

• once I dismiss the message with x it will not show up on other pages unless I refresh the page.
  Is the x really needed? I'd take it out. It would encourage more the user to click the "Browse add-ons for Firefox on desktop." to use the correct platform instead.

The idea here is to make it friendlier for people who intended to be on the "wrong" site, so they don't keep seeing the message on every single page. As you mentioned, the messages will go away until they refresh the page, or leave and return to the site, which I think is fine. If someone actively dismisses this message, I think we can take that as an indication that they do not wish to switch to the "correct" site. @jvillalobos What do you think?

• (UX) the dismiss x on small devices is not centered

Can you please file an issue for this?

[jvillalobos]

I think we can take that as an indication that they do not wish to switch to the "correct" site. @jvillalobos What do you think?

Yeah, I think that's correct. At the very least the user is now informed that they're on the "wrong" site, and there are other ways to switch.

[ioanarusiczki]

@bobsilverberg Ok, if X stays I filed #13572

This issue is verified on AMO dev with FF70(Win10) and FF68.2.0 (Android 8.0).