Closed Bug 800654 Opened 12 years ago Closed 12 years ago

Things we can learn from the chrome store about gardening walls

Categories

(Marketplace Graveyard :: Consumer Pages, enhancement, P5)

enhancement

Tracking

(Not tracked)

VERIFIED FIXED
2012-11-29

People

(Reporter: krupa.mozbugs, Assigned: cvan)

References

()

Details

(Keywords: uiwanted)

Attachments

(7 files)

steps to reproduce
1. On your Firefox browser, open https://chrome.google.com/webstore/detail/amazon-for-chrome/pbjikboenpfhbbejgkoklgkhjpfogcam
2. Notice how they indicate device support (button and the banner)


Is this something we want to mimic?
Summary: Things we can learn from the chrome store about showing device support → Things we can learn from the chrome store about gardening walls
I also like how they show the "permissions", aka, "This extension can access:"
Assignee: nobody → msandberg
Keywords: uiwanted
Priority: -- → P5
Assignee: msandberg → cvan
Target Milestone: --- → 2012-11-15
Good find, definitely something we can consider. The button maybe won't scale for situations with apps that are compatible with multiple devices but good inspiration. 

Not sure what it means that cvan now owns this bug? :)
(In reply to Maria Sandberg [:mushi] from comment #2)
> Not sure what it means that cvan now owns this bug? :)

It's a race ;)

All I wanted to add was a "Download _Firefox for Android_" or "Upgrade _Firefox_" banner so users can get on Aurora and don't write **** comments in all our press about "WTH is an Aurora?" or "How do I get Aurora?" or "Why won't my Firefox work?"
Chris I think you bring up a really good point--we need to do a better job of messaging that the user will need to download Aurora (or whatever we are using for run time in the future) to use these apps. I came across this issue with the UX for the"Send to Phone" feature and added some call to actions and messaging to make this clear.
This is the current messaging we show users on mobile if they are not in Aurora (this is from default Android browser) just for reference. Personally I think it is easy to miss and hard to click on with your finger.
https://github.com/mozilla/zamboni/commit/0617eb8

You can view this on our dev/staging server: https://marketplace-dev.allizom.org This will go live next Thursday (11/22) at 2 PM PST.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Target Milestone: 2012-11-15 → 2012-11-22
cvan would you mind posting a screenshot of the banner? I gonna have our new visual designer Michael take a look. He might have a different close symbol we could use.

Also, just wanted to check some of the specifics of the interaction. 
1. Who will see the banner? Will it be on desktop and device? Or only shown to people on an Android device?
2. If I don't close the banner will I still see the banner if I scroll? It would be awesome if it was only visible when I was at the top of the page. 
2. If I dismiss the banner we have the feature that it will reappear if a user clicks the "Free" button. Is this only on the app details page or also in the list view? 

Thanks!
(In reply to Maureen Hanratty from comment #7)
> cvan would you mind posting a screenshot of the banner? I gonna have our new
> visual designer Michael take a look. He might have a different close symbol
> we could use.

Excellent - it also could use some work with the background/sizing on the homepage: http://cl.ly/image/3I1p1m3Q2k1I/o

(Other screenshots below...)

> Also, just wanted to check some of the specifics of the interaction. 
> 1. Who will see the banner? Will it be on desktop and device? Or only shown
> to people on an Android device?

desktop - if you need to upgrade Firefox or if you're using Chrome, etc.: http://cl.ly/image/0b1Q1L3E3J1J/o
mobile - if you need to upgrade Android for Firefox or if you're using the stock Browser, etc.: http://cl.ly/image/0x1a0e1Y0Y21/o

> 2. If I don't close the banner will I still see the banner if I scroll? It
> would be awesome if it was only visible when I was at the top of the page. 

The banner does not stay fixed if you scroll, no.

> 2. If I dismiss the banner we have the feature that it will reappear if a
> user clicks the "Free" button. Is this only on the app details page or also
> in the list view? 

On search and category and detail pages.

> Thanks!

You're welcome!
Since you cannot download apps to your desktop right now it probably make sense to have the same message ("You must use Firefox Aurora on your Android phone to install Firefox apps.") on desktop too. Don't want to fool people into thinking they can install FF Aurora on their desktop and start downloading apps.
VISUAL DESIGN

Updated the following:

Desktop

https://www.dropbox.com/s/t99igyjnhjdlkd7/Marketplace-%28Desktop%29-i01-Download_prompt_v2_mm.psd 

• The banner will utilize the "Learn more" hyperlink, as opposed to the "Download" 
  button.

• Banner height has increased and adopted the Marketplace color scheme.

• "Close" button has adopted the Marketplace iconography style.

• Hover/touch state, interaction defined

Mobile

https://www.dropbox.com/s/ugvvasjjoldkt5m/FX_Marketplace_Mobile_Download_Prompt.psd
 

• The banner will utilize the "Download" hyperlink, as oppose to the "Download" 
  button, affording the entire banner as a click-able object. 

• Banner height has increased and adopted the Marketplace color scheme.

• "Close" button has adopted the Marketplace iconography style.

• Hover/touch state, interaction defined

Let me know if you have any questions
Reopening to update per Michael's mocks - many thanks!
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Just FYI if we are now on Firefox Beta (as per https://bugzilla.mozilla.org/show_bug.cgi?id=813737) change all the links to "Install" rather than "Download" or "Learn More".
Target Milestone: 2012-11-22 → 2012-11-29
(In reply to Michael Maslaney from comment #10)
> VISUAL DESIGN

Thanks!

> Desktop
> 
> • The banner will utilize the "Learn more" hyperlink, as opposed to the
> "Download" 
>   button.

Where should desktop's "Learn more" button lead to?

https://market.android.com/details?id=org.mozilla.firefox_beta
http://www.mozilla.org/mobile/beta/
some article on MDN or something?

> • "Close" button has adopted the Marketplace iconography style.

Would it be possible to get a 2x version of this (for retina displays)?

> Mobile
> 
> • The banner will utilize the "Download" hyperlink, as oppose to the
> "Download" 
>   button, affording the entire banner as a click-able object. 

I'm now linking to https://market.android.com/details?id=org.mozilla.firefox_beta for mobile

Thanks, Michael - appreciate the help!
Since we are going to allow users to install apps to their desktop, the desktop banner will now be used to prompt users who are NOT on Firefox desktop browser to install it. 

See comment here: https://bugzilla.mozilla.org/show_bug.cgi?id=799671#c4
For folks who are running Firefox desktop but it is an older version (pre FF 16?) that does not support installing desktop apps show:

"You must use a more recent version Firefox to install Firefox apps to your desktop. Download"
Attached image Mobile Retina Assets
Retina assets for the mobile download banner:
https://www.dropbox.com/s/0dji1q07nffllt7/Download_Prompt.psd

Let me know if you need additional elements.
Michael, thanks for the quick turnaround!

The original close button was 21px (http://cl.ly/image/2O3h0p2e1t3F).

Because the version you've provided is 30px this is currently the smallest I can make the close button without it getting blurry: http://cl.ly/image/1L0e0M3n3x01

Would it be possible to provide a 42px version so retina can?

Many thanks!
Just wanted to list out all the use cases for the banners as it has gotten a little confusing. 

DESKTOP USE CASES (download link: http://www.mozilla.org/en-US/firefox/new/)
• User is on desktop and using FF 16 or higher - do not show banner.
• User is on desktop and not using FF - ""You must use Firefox to install Firefox apps to your desktop. Download"
• User is on desktop using older version of FF - "You must use a more recent version of Firefox to install Firefox apps to your desktop. Download"

MOBILE USE CASES (install link: 
https://market.android.com/details?id=org.mozilla.firefox_beta) 
• User is on mobile using Firefox Beta or Aurora - do not show banner
• User is on Android phone using FF release, Chrome, default browser, etc. - "You must use Firefox Beta on your Android phone to install Firefox apps. Install"
• User is on other non-Android mobile device - ""You must use an Android phone to install Firefox apps."

For the mobile version that directs user to the Google Play store can we put some secret sauce in the link so that when the user goes to open Firefox Beta it defaults to the Marketplace rather than the start screen? Let me know if I should file an additional bug for this or any of the above.
(In reply to Maureen Hanratty from comment #20)
> Just wanted to list out all the use cases for the banners as it has gotten a
> little confusing. 
> 
> DESKTOP USE CASES (download link: http://www.mozilla.org/en-US/firefox/new/)
> • User is on desktop and using FF 16 or higher - do not show banner.

Yes.

> • User is on desktop and not using FF - ""You must use Firefox to install
> Firefox apps to your desktop. Download"

We don't say this yet, but we will when I close bug 799671.

> • User is on desktop using older version of FF - "You must use a more recent
> version of Firefox to install Firefox apps to your desktop. Download"

We don't say this yet, but we will when I close bug 799671.

> MOBILE USE CASES (install link: 
> https://market.android.com/details?id=org.mozilla.firefox_beta) 
> • User is on mobile using Firefox Beta or Aurora - do not show banner

Yes.

> • User is on Android phone using FF release, Chrome, default browser, etc. -
> "You must use Firefox Beta on your Android phone to install Firefox apps.
> Install"

We say "You must use Firefox Beta to install Firefox apps. Download"

As mentioned above, since we're already on the phone, do we need to say "on your Android phone"? And "Download" - would you like me to change that to say "Install"?

> • User is on other non-Android mobile device - ""You must use an Android
> phone to install Firefox apps."

It says, "You must use Firefox Beta on your Android phone to install Firefox apps. Learn more"

> For the mobile version that directs user to the Google Play store can we put
> some secret sauce in the link so that when the user goes to open Firefox
> Beta it defaults to the Marketplace rather than the start screen?

Unfortunately, we can't. But that would be awesome sauce.

Thanks, Maureen, for the clarification.

Thank you for all your help, and Michael. You can view it live on https://marketplace-dev.allizom.org/ which will go to production this Thursday.
https://github.com/mozilla/zamboni/commit/4b3e6fe
https://github.com/mozilla/zamboni/commit/eadc938

Awesome - thanks for that, Michael. Everything's been updated!
Status: REOPENED → RESOLVED
Closed: 12 years ago12 years ago
Resolution: --- → FIXED
> • User is on Android phone using FF release, Chrome, default browser, etc. -
> "You must use Firefox Beta on your Android phone to install Firefox apps.
> Install"

"We say "You must use Firefox Beta to install Firefox apps. Download"

As mentioned above, since we're already on the phone, do we need to say "on your Android phone"? And "Download" - would you like me to change that to say "Install"?"

Yes, please change to "Install" so it matches the "Install" button on Google Play.
Just checked the dev site on Chrome. Looks great but noticed the "Learn More" link takes the user to this Mozilla site (https://www.mozilla.org/en-US/mobile/beta/) rather than the Google Play store. I thought we wanted to take users to the Google Play store, no?
(In reply to Maureen Hanratty from comment #25)
> Just checked the dev site on Chrome. Looks great but noticed the "Learn
> More" link takes the user to this Mozilla site
> (https://www.mozilla.org/en-US/mobile/beta/) rather than the Google Play
> store. I thought we wanted to take users to the Google Play store, no?

On Desktop we're not. This is because I haven't enabled desktop installs yet.
On Mobile it takes you to Google Play store (you can spoof your user-agent to see this). I can change it to both take to Google Play Store, but that's misleading since it says "on your Android phone."

This is all moot when we enable desktop installs next week. I can change the "Download" to "Install" but what do you think of the other changes?
I think we should show some interim messaging for desktop users who are on Firefox 16 or higher. We do not know what bugs might block us from enabling installs for desktop next week and it is prudent to not confuse users who may access our site right now.

Seeing disabled install buttons without any context is confusing for new users.


Until we enable desktop installs, we should show something like "For now, use Firefox Aurora/Beta on Android to install apps. Learn more about <Desktop Support>"
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(In reply to krupa raj 82[:krupa] from comment #27)
> I think we should show some interim messaging for desktop users who are on
> Firefox 16 or higher. We do not know what bugs might block us from enabling
> installs for desktop next week and it is prudent to not confuse users who
> may access our site right now.
> 
> Seeing disabled install buttons without any context is confusing for new
> users.
> 
> 
> Until we enable desktop installs, we should show something like "For now,
> use Firefox Aurora/Beta on Android to install apps. Learn more about
> <Desktop Support>"

Where should we link to for "Desktop Support"? The only page I know of is https://marketplace.firefox.com/developers/installation
What's nice about directing users to Google Play store (rather than a Mozilla site) in the desktop scenario is that the user can actually Install Firefox Beta to their Android device from the Google Play desktop store. I know this will change next week when we allow for desktop installs but in the interim this is a nice solution (but obviously not a high priority so please don't let it hold you up from other work.) If we make this change the link should also change from "Learn More" to "Install"
 
> Where should we link to for "Desktop Support"? The only page I know of is
> https://marketplace.firefox.com/developers/installation

that should work.
Chris - I'm meeting with Ibai on Friday to talk support pages and will mention that we need one for desktop installs.
https://github.com/mozilla/zamboni/commit/445ae77

(In reply to Maureen Hanratty from comment #29)
> Created attachment 686261 [details]
> banner on Chrome desktop
> 
> What's nice about directing users to Google Play store (rather than a
> Mozilla site) in the desktop scenario is that the user can actually Install
> Firefox Beta to their Android device from the Google Play desktop store.

Very good call! I've changed the link.

(In reply to Maureen Hanratty from comment #31)
> Chris - I'm meeting with Ibai on Friday to talk support pages and will
> mention that we need one for desktop installs.

We don't need this, that's fine. I'm just linking to the Android install page. Next week: the banner tells you to upgrade to Beta if you're on desktop.

And thanks, Krupa and Maureen, for fielding my questions.
Status: REOPENED → RESOLVED
Closed: 12 years ago12 years ago
Resolution: --- → FIXED
calling this fixed.
Status: RESOLVED → VERIFIED
> For the mobile version that directs user to the Google Play store can we put
> some secret sauce in the link so that when the user goes to open Firefox
> Beta it defaults to the Marketplace rather than the start screen?

According to Harald Kirschner we might be able to do this with referral links:

"Yes, Android has referral tracking! You refer some data (like "campaign", or something more elaborate) to the Play store and on first launch, the app will get that data as an Intent and can react to it.

You can find the technical nitty gritty here: https://developers.google.com/analytics/devguides/collection/android/v2/campaigns
"

If we could do this it would make us less dependent on banners and bookmarks in Firefox for Android to direct users to the Marketplace after installing Beta.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: