777022 - Categories block on homepage

Status: VERIFIED FIXED

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

Description

[krupa raj[:krupa]]

Attachment: screenshot

steps to reproduce:
1. Load https://marketplace.allizom.org/en-US/
2. Notice the categories block

a) Category icon and name are too close to each other. We need to reduce the icon size
b) Category name shouldn't be in white on a grey background. It is barely visible.
c) [suggestion] We shouldn't show all the categories. Listing nearly 20 categories is not helpful. We should randomly select and display 6 categories

Comment 1

[Potch [:potch]]

Janus?

Comment 2

[Potch [:potch]]

Most of this is a function of needing the updated category icons from the mockup. Maria, is there a full icon set available in the updated color scheme?

Comment 3

[Maria Sandberg [:mushi]]

(In reply to Potch [:potch] from comment #2)
> Most of this is a function of needing the updated category icons from the
> mockup. Maria, is there a full icon set available in the updated color
> scheme?

Fingers crossed they will land with the rest of the updated visuals this week!

Comment 4

[Potch [:potch]]

(In reply to Maria Sandberg [:mushi] from comment #3)
> (In reply to Potch [:potch] from comment #2)
> > Most of this is a function of needing the updated category icons from the
> > mockup. Maria, is there a full icon set available in the updated color
> > scheme?
> 
> Fingers crossed they will land with the rest of the updated visuals this
> week!

Any thoughts on point c? How many categories should we be displaying on the homepage?

Comment 5

[Maria Sandberg [:mushi]]

I've pinged Stephen to get the category icons. We should display 6 categories on the home screen, I'm waiting to hear back from the Marketing team on exactly which ones we should use.

Comment 6

[Christopher Van Wiemeersch [:cvan]]

(In reply to Maria Sandberg [:mushi] from comment #5)
> I've pinged Stephen to get the category icons. We should display 6
> categories on the home screen, I'm waiting to hear back from the Marketing
> team on exactly which ones we should use.

We could display 6 random categories, since we have Martell-supplied glyphs for all them. The ones from Stephen are a bit inverted + gradient overlayed + shrunk, so we'll need a new set if we want to go that route. Just an option.

Comment 7

[Maria Sandberg [:mushi]]

(In reply to Chris Van Wiemeersch [:cvan] from comment #6)
> We could display 6 random categories, since we have Martell-supplied glyphs
> for all them. The ones from Stephen are a bit inverted + gradient overlayed
> + shrunk, so we'll need a new set if we want to go that route. Just an
> option.

We are getting a new set, as mentioned above :) Random is fine for now.

Comment 8

[krupa raj[:krupa]]

Attachment: screenshot

Also, the border between category blocks shouldn't be white as per the designs.

Comment 9

[Potch [:potch]]

Adjusted the border- waiting on additional resources to complete this.

Comment 10

[Wil Clouser [:clouserw]]

The thing left to do here is:

> a) Category icon and name are too close to each other. We need to reduce the icon size

Does comment 9 mean you're waiting on new icons?  I thought this was the new set.

Comment 11

[Maria Sandberg [:mushi]]

(In reply to Wil Clouser [:clouserw] from comment #10)
> Does comment 9 mean you're waiting on new icons?  I thought this was the new
> set.

We are still waiting, I've re-pinged shorlander about this today.

Comment 12

[krupa raj[:krupa]]

Until we have the optimum set of category icons, we should revert to using the old ones. Right now, not all category icons look the same which is disconcerting. See http://cl.ly/image/2J410n2T1J26

Comment 13

[Maria Sandberg [:mushi]]

Latest I heard we might get them today.

Comment 14

[Wil Clouser [:clouserw]]

(In reply to krupa raj 82[:krupa] from comment #12)
> Until we have the optimum set of category icons, we should revert to using
> the old ones. Right now, not all category icons look the same which is
> disconcerting. See http://cl.ly/image/2J410n2T1J26

No need to revert, let's just get the new ones.

Comment 15

[Andrew Williamson [:eviljeff]]

With only displaying 6 there should be some way to see more of them.

Could we have the additional categories (the other 9 in addition to the 6 randomly chosen) visible with a left (or right) swipe?  I.e. a carousel style.  (I'm not 100% how we'd handle 15 not being a multiple of 6.  Empty boxes?  Continuous categories (..14,15,1,2..)? )

Comment 16

[Maria Sandberg [:mushi]]

(In reply to Andrew Williamson [:eviljeff] from comment #15)
> With only displaying 6 there should be some way to see more of them.
> 
> Could we have the additional categories (the other 9 in addition to the 6
> randomly chosen) visible with a left (or right) swipe?  I.e. a carousel
> style.  (I'm not 100% how we'd handle 15 not being a multiple of 6.  Empty
> boxes?  Continuous categories (..14,15,1,2..)? )

We are starting with 6. I expect future versions might need to deal with displaying more than that. This is a conscious design decision on my part and I'm aware of what consequences it will entail :)

Comment 17

[Christopher Van Wiemeersch [:cvan]]

When I coded this I picked 6 random categories with public apps. But what are the desired heuristics for showing the categories?

And FWIW - this is all changing with the desktop designs.

Comment 18

[Maria Sandberg [:mushi]]

Good news - I have the glyphs :)
Download here:
http://cl.ly/1v300O013M0n

Comment 19

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/zamboni/commit/dbc4344 

Thanks, Maria, et. al.!

Comment 20

[Victor Carciu]

Verified as fixed : http://screencast.com/t/UBRf1voE