839541 - Facelift the mobile reviewer queue page

Status: RESOLVED FIXED

(Marketplace Graveyard :: Reviewer Tools, defect, P1)

Description

[Wil Clouser [:clouserw]]

This bug is about implementing https://bug834147.bugzilla.mozilla.org/attachment.cgi?id=705749 .  See bug 834147 for the original planning/discussion around this feature.  Bram Pitoyo is point of contact for design questions.  The design notes are below.
--------------------------------------------------

This mockups visualizes what the queue page could look like on mobile.

Notable things:

* Current page is clearly marked (although the visual style may not yet be final). In this case, the user is currently at the ‘Queues’ page


* Search bar is moved up, so search can be performed on all tabs, not just one. Also note how the “Search” button is located to the right-side of the search field, to save vertical space.


* To toggle between tabs, user can tap on the “Apps (182)” text, or the Southeast-facing arrow, or the whole light brown area. Tapping this will trigger a menu that will let users select between tabs.

As an example, try opening up SUMO from your smartphone, on this page: https://support.mozilla.org/en-US/products/firefox/get-started — then tap the “Showing All articles” button. Toggling between tabs will have the same kind of interaction. But this interaction is not final yet. I’m just starting to think about what it could look like.


* The table does not contain a “Price” column, because the “Paid” price is already indicated by a coin icon. I’m not sure how we’re going to indicate apps with in-app payments (I’m thinking a plus ‘+’ icon?), but we should find an icon for it, so we don’t have to display the “Price” column.


* On a related note, how can we display compatible devices in a smart way, so that it’s  not overwhelming to look at?

  A couple of potential solutions:
  * Don’t display incompatible devices, so we reduce visual clutter (easy)
  * Display the device icons in a way that consumes less space
  * Find an entirely different representation of devices (hard)


* Navigational buttons (<<, previous, next, >>) look clickable, and are sized so they’re big enough as link targets.

That’s about it for today. Keep watch for more mobile mockups and screenshots when I get back from Firefox OS App Days Wellington this weekend!

Comment 1

[Kevin Ngo [:ngoke]]

https://github.com/mozilla/zamboni/commit/1cbb24d72ab4741fd11c248269ce63ce33d7ae7a
https://github.com/mozilla/zamboni/commit/4b6f96bc6262e509a21094855d31ee2b62610fe4
https://github.com/mozilla/zamboni/commit/77dabfa2c001f8460b7ec2f9bc29bec7c1d0ccb3
https://github.com/mozilla/zamboni/commit/b166d1f25866caf010dd22d274ca5b7e1d652c88
https://github.com/mozilla/zamboni/commit/81b990883ad03f80309310bfdbccb31b29ef5897

Notes:

I overlap some of the device icons to save space. Need design input on whether this is too clustered together ot not.

I import a Gaia building block for an action menu overlay.

We still need to have an icon to differentiate between paid apps and in-app paid apps in the flags column.