969244 - Implement device filtering UI

Status: VERIFIED FIXED

(Marketplace Graveyard :: Consumer Pages, defect, P1)

Description

[Wil Clouser [:clouserw]]

We want to let people easily browse for apps on the desktop for other devices (like their phones) but we also want to let them see only apps which are compatible with their desktop if they want.  This bug is to add a toggle to the browse and search pages of desktop (note: not mobile) which will let a user choose to view either set of apps.  If there is no saved setting, by default this should toggle to "Show all apps" when searching and "Show filtered apps" when browsing.  Once a user has toggled one way or the other we should preserve that value in local storage.

Comment 1

[Philip [:pwalm]]

Attachment: Marketplace-Mobile-and-Desktop-Toggle---140214.jpg

Here's a quick mock-up of how the toggle could work in two options: A) Platforms are represented on the toggle. As platforms are selected/deselected, they are shown/hidden on the toggle. B) All platforms are shown on toggle, but switch between active/inactive states based on being selected/deselected.

Comment 2

[Philip [:pwalm]]

Attachment: Marketplace-Mobile-and-Desktop-Toggle-Placement-140214.jpg

Proposed placement for platform toggle.

Comment 3

[Philip [:pwalm]]

Attachment: Revised button graphic

I revised and tweaked the button graphic to be less prominent, fit in a bit better with the Marketplace style guide.

Comment 4

[Wil Clouser [:clouserw]]

Works for me - can you attach the assets?

Comment 5

[Rob Hudson [:robhudson]]

In light of bug 978150 (and bug 969242) I'm a little confused by this toggle. Is this toggle only toggling the form factor (mobile, tablet, desktop, responsive) being applied? Or the platform (android, fxos, desktop)? Or some combination of both?

Comment 6

[Wil Clouser [:clouserw]]

Original plan was only form factor, but that's a valid question.  Tony/David?

Comment 7

[David Bialer [:dbialer]]

I personally like a binary toggle of 'all' or 'just my device' (or "only compatible" or something else) otherwise the a 2 stage filter starts getting complicated.

Otherwise, if we want to do this right to include all possibilities, then we need a 2 stage filter.  I worry about this scaling.  

Perhaps we would then need to add a compatibility in the app details section so that people can figure out why something is not compatible (grayed out buttong)

Comment 8

[Rob Hudson [:robhudson]]

I also like the simplicity of "all" vs "apps that work on my device".

Comment 9

[Wil Clouser [:clouserw]]

Philip - could you show us assets for all vs just my device? (comment 7)

Comment 10

[Philip [:pwalm]]

Attachment: Marketplace-toggle-140311.png

Proposed toggle switch for switching between "all apps" and "Just for my device".

Comment 11

[Philip [:pwalm]]

Attachment: marketplace-toggle-revised-140311.png

Tweaked the toggle switch to more closely follow the Firefox OS, added both states.

Comment 12

[Maureen Hanratty]

Sorry I'm a little late to the party but I have some questions/concerns. Where will this toggle be visible? Is it only on desktop? Or will it be visible on tablet or Android? How are we doing the filtering to determine "Just my device?" Are we just doing form factor or platform/features (this was discussed above by David but I don't understand what 2 stage filtering meant.) For example, if I am viewing Marketplace on Safari (no runtime) and I say "Just my device" what will show up?

For me the term "Just my device" is confusing for a user. It makes the user think for a split second. What device does it refer to? Is it the device I am on or a device I have like Firefox OS phone or Android phone? 

Here are some alternatives:

If we are filtering only on form factor:
"Just desktop apps" - This is the most clear and understandable to users. 

If we are platform/feature detecting:
"Just this device" - More clear than "just my device" but filtering this way is problematic, for example, what do we show no apps in the Safari use case? 

My 2 cents on the filtering would be to filter by form factor and show all the apps applicable to the form factor. So the user can see all the desktop apps even if they are on Chrome or Safari (we have the banner at the top to let them know they need Firefox to install the apps).

Comment 13

[Wil Clouser [:clouserw]]

This is visible only on desktop.  Filtering is by device form factor as well as feature detection.  If someone is using Safari and we can't detect features, well, we're doing the best we can.

I'm onboard for the "Just this device" wording.

Comment 14

[Philip [:pwalm]]

Attachment: desktop-toggle-segmented-control.png

Ok! Here is the newest version of the desktop toggle: A segmented control! Very clearly: All apps or Just my device. No need for any localization (other than the hover tool tip), big and bright and clickable. Also: Mouse pointer/finger friendly for any future implementations.

Comment 15

[Philip [:pwalm]]

Attachment: desktop-toggle-revised-140313.png

After a review with the team, we decided the utility of the segmented control would be more clear with a text label underneath that explains what is being shown when selected. So when you click the side with all the devices, it says "All devices", and when you click the other side it says "Just my device". I checked a bunch of languages and none of them run longer than the button, so we're safe in terms of localization. If everyone is cool with this version, we're good to go. Please let me know who I can provide assets to.

Comment 16

[Wil Clouser [:clouserw]]

Honestly, I kind of miss https://bug969244.bugzilla.mozilla.org/attachment.cgi?id=8389400 and I think that's because, firstly, this button seems very large and centerstage despite being something I might not even want to interact with, but mainly because I can't, at a glance, tell which one is chosen (which, I realize, is why the label is there, but that still feels like an afterthought).  The other toggle maybe isn't common on the desktop (arguably, neither is the latest...) but at least I know what it meant.  Sorry! :)

Comment 17

[Philip [:pwalm]]

Fair enough! I agree with you. However, another issue with the switch toggle is that it's normally used for on/off tasks, not switching states.

I think at this point we can do either (a) the switch (because while it isn't common, it's dead simple) or (b) a basic text only drop down which is standard for desktop, and also unobtrusive.

Comment 18

[Wil Clouser [:clouserw]]

A concise dropdown is interesting but I'm struggling with what the wording would be.

>  Show:  [all apps]
>         [apps that work on this device]

The second option is so long.  Which (switch or dropdown) do you recommend?

Comment 19

[Chuck Harmston [:chuck]]

A few pennies I found: I always imagined this as a simple checkbox on the settings page:

[ ] Hide incompatible apps

Comment 20

[Philip [:pwalm]]

Attachment: desktop-toggle-in-menu-130314.png

Let me just change it up for a second: What about putting the toggle in the settings menu?

Comment 21

[Wil Clouser [:clouserw]]

That's interesting.  If that's visible enough, I'm onboard.  I liked the "just this device" wording from above

Comment 22

[David Bialer [:dbialer]]

I think we can park this temporarily on the setting dropdown menu.  I don't think it is the long-term home for this.  Longer term, we should have it on a setting page as Chuck said.  As we add more things to a drop down - perhaps, my collections, account control, etc - it will seem out of place on the dropdown. I also like the simple toggle better, which is more consistent with the toggle expanded list view/compact list view.

Comment 23

[Philip [:pwalm]]

I think this kind of toggle will be better addressed in the new version of the desktop marketplace, so for now the dropdown menu makes sense. Does whoever is implementing this need a detailed mock up from me?

Comment 24

[Wil Clouser [:clouserw]]

No, I think what you have in attachment 8391426 [details] is fine.  Thanks.

Robhudson - were you wanting this bug?

Comment 25

[Rob Hudson [:robhudson]]

Sure, happy to take it. It falls inline with a lot of the things I'm working on at the moment.

Comment 26

[Philip [:pwalm]]

robhudson Holler at me if you need anything!

Comment 27

[Rob Hudson [:robhudson]]

Just to clarify... this settings option should only show up on Desktop, correct? Or are we adding the ability to toggle filtering on all platforms?

Comment 28

[David Bialer [:dbialer]]

Just desktop.  Doesn't really make sense for other platforms.

Comment 29

[David Bialer [:dbialer]]

Comment on attachment 8390931 [details]
desktop-toggle-revised-140313.png

Thumbs up.

Comment 30

[Christopher Van Wiemeersch [:cvan]]

"All devices" - does that mean screen size (form factor) or platform?

As a non-technical user, I could see myself confused. And does "All devices" vs. "Just my device" mean that you're going to show me apps that don't work on my device if I select "All devices"? Because it's not clear whether or not we'll hide the incompatible apps (based on feature detection) based on the toggle. (I assume that's separate, but I think it's ambiguous.)

Comment 31

[David Bialer [:dbialer]]

(In reply to Christopher Van Wiemeersch [:cvan] from comment #30)
> "All devices" - does that mean screen size (form factor) or platform?
> 
Form factor and platform (both).  So this would include desktop, Tablet (FxOS & Android), Phone (FxOS & Android).

> As a non-technical user, I could see myself confused. And does "All devices"
> vs. "Just my device" mean that you're going to show me apps that don't work
> on my device if I select "All devices"? Because it's not clear whether or
> not we'll hide the incompatible apps (based on feature detection) based on
> the toggle. (I assume that's separate, but I think it's ambiguous.)
The use case is for a desktop user who is browsing the marketplace for all apps vs a desktop user who is only interested in apps that he/she can install on the desktop.  We would hide incompatible apps based on the toggle.

Does that make sense?  I am not exactly sure what you meant in the comment about being ambiguous.

Comment 32

[Wil Clouser [:clouserw]]

Robhudson - You're still a go for comment 24 - 28 for v1 implementation.  If discussion of v2 continues past the end of the bug we can split into another bug or take it to the mailing list.  Just making sure there is no confusion, carry on. :)

Comment 34

[Wil Clouser [:clouserw]]

Moving this to a P1 and CCing ddurst as it blocks about:apps.  

To be specific:  not showing non-desktop apps by default is the blocker.  If the menu toggle makes that a significantly harder patch I'll file another bug for it.  Just let me know.  Thanks.

Comment 35

[Mathieu Pillard [:mat]]

I ended up doing the splitting clouserw mentioned in comment 34 - the bug to implement the filtering on desktop (to unblock about:apps) is bug 1054981. It's not significantly harder to implement the UI to toggle between filtering and not filtering, but it's significantly easier to do bug 1054981 first and then worry about the toggle.

Comment 36

[Mathieu Pillard [:mat]]

I'm having issues implementing the UI from the mockups, because:
- The dropdown menu doesn't show up for logged out users (We show a "log in" link instead). So attachment 8391426 [details] won't work for them.
- We need the toggle in search results and not just the homepage. So attachment 8390931 [details] isn't enough either, we need something for both pages.

ni? Philip for design input.

Comment 37

[Philip [:pwalm]]

Attachment: dropdown-menu-states.JPG

Could we display the gear icon all the time and have it change based on the login state (and probably move "Sign in" out of the dropdown)? Also, I'll have to revisit this design and tweak the colours, this dark ui doesn't work.

Comment 38

[Mathieu Pillard [:mat]]

Back to P1, we'll do everything in this bug.

Philip, there are some screenshots showing were I am right now here: https://github.com/mozilla/fireplace/pull/606

What do you think ? What should we tweak ?

Comment 39

[Philip [:pwalm]]

Attachment: dropdowns.png

Looks good, Mat! Let's change the dark colour theme to match the lighter category dropdown in the new nav, and swap out the Eye of Sauron radio button for a nicer blue version. :)

Comment 40

[Mathieu Pillard [:mat]]

Attachment: Screenshot with the new dropdown background color

The Eye of Sauron radio button is just because my system theme is the default Ubuntu theme which is orange/brown/black, Windows & Mac OSX users shouldn't see this :) The alternative is to use extra markup and images, so I'd prefer to avoid changing this if possible.

But the most important issue is the dropdown background color. I've changed it to white, but it doesn't play well with the fact that the gear icon is on the first row of the header, which is white too - so you can't see where the dropdown starts and where it ends (see attached screenshot).

The styleguide doesn't cover this, as the only dropdown example is the one with the categories - and it doesn't have this problem because it's activated when you hover the second row, which is grey. 

Random ideas I have to fix this:
- Change the background-color of the dropdown ;
- Change the background-color of the first header row ;
- Change the background-color of the header, but just for the part where the gear icon is ;
- Move the gear icon to the second row.

What do you think ? Any other alternatives ? What do you think we should go with ?

Comment 41

[David Bialer [:dbialer]]

I prefer changing the background color of the dropdown.  The color contrast makes it clear that the user has a dropdown open.  I think this is how it is now.

Comment 42

[Philip [:pwalm]]

Attachment: dropdown-with-outline-140825.png

- Never mind on the radio button then. :)

- Attached is a simple but I think effective solution: outline the dropdown with a 1px blue stroke. Helps it stand out on white, and the blue line suggests that this dropdown is (more) important.

Comment 43

[Christopher Van Wiemeersch [:cvan]]

(1) Is the blue for the radio button supposed to be different than the blue used for the drop-down's border?

(2) IMO we shouldn't we say "Desktop only" because the user could be on a tablet or a TV. And we have no way of knowing the device is actually a desktop. We can make (and do make) educated guesses though.

Also, is "Desktop only" actually accurate? Does toggling this radio mean we show

  (a) "apps that are compatible for your device" or
  (b) "apps that are designed to fit on desktop screens" or
  (c) "apps with features (buchets) that are compatible with common desktop devices"?

Comment 44

[Mathieu Pillard [:mat]]

I haven't made new screenshots yet but my PR ( https://github.com/mozilla/fireplace/pull/606 ) has been updated with the white dropdown with blue outline. 

(1) The radio button will follow your system theme for now

(2) We've been back and forth in this bug on the wording, I'm not sure we have a better one. In any case, toggling the radio will mean we'll show apps that are marked by the developer as compatible with Firefox Desktop. Nothing about buchets (which are currently deactivated) or screen sizes.

To make the educated guess a little more reliable, maybe I could add a check on the existence of `capabilities.webApps`, and not show the toggle (and not filter) if it's false. What do you think ?

Comment 45

[Mathieu Pillard [:mat]]

Latest UX mock is at http://people.mozilla.org/~ehunt/desktop_marketplace/ui_platform_filtering.pdf

Comment 46

[Mathieu Pillard [:mat]]

A couple quick questions about the pdf in comment 45:

- On Desktop, the dropdown says "All Apps, Desktop Apps, Tablet Apps, Mobile Apps". It doesn't mention Firefox OS / Android, so how is the user supposed to know the difference ? And actually, what should be shown exactly when you select 'Tablet Apps' or 'Mobile Apps' ? Should Firefox OS apps show up ? Note that currently Marketplace has Desktop, Firefox OS, Android mobile and Android tablet options - there is no distinction between tablet and mobile for Firefox OS.

- On Android, we are currently filtering differently for mobile/tablet. Shouldn't 'Android Apps' be 'Android Mobile Apps' or 'Android Tablet Apps' depending on your device ?

Comment 47

[David Durst [:ddurst]]

Attachment: dropdown_desktop_filter.png

From Philip: full spec coming, but this is the idea

Comment 48

[Elizabeth Hunt[:ezoehunt]]

Ok here are the final values.

For Desktop: All Apps, Desktop Apps, Firefox Mobile Apps, Android Mobile Apps, Android Tablet Apps.

For Firefox users on mobile/tablet: All Apps, Apps for My Device 

For Android users on mobile/tablet: All Apps, Apps for My Device

For Firefox and Android, we believe that users in these contexts (mobile and tablet) are looking for stuff that works on their device. They don't need a choice to see apps that don't work on their device. If they do, they can find those via "All Apps."

We will measure and evaluate these options after it launches and see how the values perform. We can change them if we notice issues.

Comment 49

[Mathieu Pillard [:mat]]

Pull Request (with screenshots) : https://github.com/mozilla/fireplace/pull/658

Comment 50

[Mathieu Pillard [:mat]]

Fixed in https://github.com/mozilla/fireplace/commit/1307fe685408ecc2c78a0b6c770b1d0ec1c10ea2

This will be available shortly on -dev for testing. QA, look at the PDF from comment 45.

Comment 51

[Madalin Cotetiu]

There is one small issue when using Inari (FFOS 1.3) In the new and popular tabs and in the search results page the dropdown menu overlays a few pixels over the white background
Please view this screencast: http://screencast.com/t/GIlOYF13

Comment 52

[Mathieu Pillard [:mat]]

Alignment fixed in https://github.com/mozilla/fireplace/commit/70bb1b8753c6a35f027e0fd9fc2bf94726609a39

Comment 53

[Madalin Cotetiu]

Verified using Inari (FFOS 1.3). The bug is reproducing when using the dev or the stage app and is also reproducing in the browser.
Please view this screencast: http://screencast.com/t/XqOVJe4vlw   http://screencast.com/t/LDS45rwDKIZt
Reopening.

Comment 54

[Mathieu Pillard [:mat]]

-dev didn't auto-updated, I pushed the update manually. I tested it on my Flame running master.

Comment 55

[Madalin Cotetiu]

Verified as fixed.
Screencast: http://screencast.com/t/G1kVLMGz6C6
Closing.