1023863 - The divider spacing is too tall

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Homescreen, defect)

Description

[Patryk Adamczyk [:patryk] UX]

Attachment: 3 column grid, the spacing between the divider and app rows feels a bit too tall

The spacing between the icons is too tall... It feels slightly too tall on the 3 column grid, but far too tall on the 4 column grid.

Comment 1

[Patryk Adamczyk [:patryk] UX]

Attachment: 4 column grid, the spacing between the divider and app rows feels far too tall

Peter can you please check the specing, this doesn't feel right at all.

Comment 2

[Jason Smith [:jsmith]]

Not a blocker for shipping. We can get approval if we've got time.

Comment 3

[Peter La]

Attachment: Updated Layout Spec for Flame

Kevin,

This keeps the horizontal layout exactly as you have it on master.  The changes are with the vertical spacing.  Please contact me when you're ready to work on this, so I can help you make sense of it in terms that are more appropriate to the implementation (as we discussed last week).

Comment 4

[Peter La]

Attachment: Updated Layout Spec for 320x480

Kevin,

This is exactly the same as the one for Flame, except all the numbers have been divided by a scale factor of 1.5.

Comment 5

[Peter La]

Needinfo'ing Kevin as a reminder.

Comment 6

[Kevin Grandon :kgrandon]

Right, we will look into fixing this. Going to ni? on Cristian and Sam to see if either would be interested in picking up this UI work. Thanks!

Comment 7

[Sam Foster [:sfoster] (he/him)]

Yeah I'll take this.

Comment 8

[Sam Foster [:sfoster] (he/him)]

Attachment: home-dividers-3col-flame.png

Screenshot from flame, 3-col homescreen, with adjusted divider margins/pixelHeight

Comment 9

[Sam Foster [:sfoster] (he/him)]

Attachment: home-dividers-4col-flame.png

Screenshot from flame, 4-col homescreen, with adjusted divider margins/pixelHeight. How does this look Peter?

Comment 10

[Sam Foster [:sfoster] (he/him)]

Attachment: PR with changes to divider style and grid item pixelHeight

Does this look alright code-wise? See attached screenshots for preview of result

Comment 11

[Kevin Grandon :kgrandon]

Comment on attachment 8446242 [details] [review]
PR with changes to divider style and grid item pixelHeight

The four column looks a little strange to me, divider seems a bit low. Code generally looks fine, but clearing review for now until Peter chimes in.

Comment 12

[Peter La]

Attachment: Feedbackon4ColumnLayout.png

Hi Sam,

This is a good start.  My apologies, first of all, as I found a couple of mistakes in the spec that I posted.  I've created a small spec with these corrected, as well as outlining the differences between your screenshot and what it should be.  Please have a look and let me know if it makes sense.  I've tried to call certain things out more explicitly.

Note, I will be updating the full spec with this clearer format as well.  Stay tuned.

Comment 13

[Peter La]

Attachment: Updated Spec for FWVGA 480x854 (Flame)

Comment 14

[Peter La]

Attachment: Updated Spec for FWVGA 480x854 (Flame)

I've added a note in here about scaling to other resolutions.

I'm going to obsolete and stop supporting the HVGA (320x480) spec as it is simply dividing everything by 1.5, and is redundant, and creates more work.

Comment 15

[Sam Foster [:sfoster] (he/him)]

Attachment: 3 column, highlighting divider and icon height

I've plugged in the new numbers for 3-cols and heres how it looks

Comment 16

[Sam Foster [:sfoster] (he/him)]

(In reply to Sam Foster [:sfoster] from comment #15)
> Created attachment 8447359 [details]
> 3 column, highlighting divider and icon height
> 
> I've plugged in the new numbers for 3-cols and heres how it looks

Hold that thought, I've got my 4 and 3 col dimensions mixed up. I'll update shortly.

Comment 17

[Peter La]

Attachment: Updated Spec (with proper coordinates)

Comment 18

[Sam Foster [:sfoster] (he/him)]

Attachment: home-dividers-3col-flame.png

Updated to latest spec, with 10rem item height, 5rem divider total height

Comment 19

[Sam Foster [:sfoster] (he/him)]

Attachment: home-dividers-4col-flame.png

Updated to latest spec, with item height at 10rem, divider height 5rem

Comment 20

[Sam Foster [:sfoster] (he/him)]

(In reply to Sam Foster [:sfoster] from comment #18)
> Created attachment 8447425 [details]
> home-dividers-3col-flame.png
> 
> Updated to latest spec, with 10rem item height, 5rem divider total height

Ack, not helping! I mean 12rem item height, 6rem divider total height for the 3-columns case

Comment 21

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 8446242 [details] [review]
PR with changes to divider style and grid item pixelHeight

See notes in GH, slight update on various values per latest spec. Same approach.

Comment 22

[Sam Foster [:sfoster] (he/him)]

Attachment: home-dividers-4col-flame.png

from IRC: 15:25 <peterla> .. Ive come up with a rule that would make the 3 column and 4 column more consistent
15:25 <peterla> the 3 column divider area is 6 rem total height
15:26 <peterla> if we just put the top of the divider 1/3 of the way down
15:26 <peterla> that would mean 2, 0.2, 3.8 for a total of 6 rem
15:26 <peterla> for 4 column
15:26 <peterla> if you could do
15:26 <peterla> 1.6, 0.2, 3.2 for a total of 5 rem
15:27 <peterla> that would make them both feel about the same
15:28 <peterla> (it’s actually 1.667, 0.2, 3.133, but i rounded it)

For 3 cols, these are the exact values I was using already. I've updated the 4 col margin values and updated the screenshot. It looks pretty bang on middle to me...

Comment 23

[Kevin Grandon :kgrandon]

Comment on attachment 8446242 [details] [review]
PR with changes to divider style and grid item pixelHeight

Looks fine to me, thanks!

Comment 24

[Peter La]

Comment on attachment 8447524 [details]
home-dividers-4col-flame.png

This lines up perfectly with the spec!  Nice job!

Comment 25

[Peter La]

Comment on attachment 8447425 [details]
home-dividers-3col-flame.png

Hey Sam,

This is really close but the divider is about 0.3 rem too high, and the app labels are also 0.3 rem too low.

See attachment after this comment for comparison.

You're really close!

Comment 26

[Peter La]

Attachment: SamFeedbackJune30

See this screenshot for feedback on 3-column layout.  It's really close.

Comment 27

[Peter La]

Attachment: SamFeedbackJune30.png

Oops.  Accidentally attached photoshop file instead of png.

Comment 28

[Sam Foster [:sfoster] (he/him)]

Attachment: home-dividers-3col-flame.png (updated 07/01)

Screenshot of 3-column homescreen. I've got this lined up against the spec and it seems pixel-perfect to me?

Comment 29

[Sam Foster [:sfoster] (he/him)]

Attachment: home-dividers-4col-flame.png (updated 07/01)

Screenshot of 4-column homescreen from Flame. I've lined this up against the spec and it seems pixel-perfect to me?

Comment 30

[Chris Lord [:cwiiis]]

I think it would be nicer if there was a little bit more spacing underneath the search bar and a little less around the divider, so that they matched. It feels that the space around the first row of icons on the top and bottom should be symmetric.

Comment 31

[Patryk Adamczyk [:patryk] UX]

Comment on attachment 8448872 [details]
home-dividers-4col-flame.png (updated 07/01)

Thanks Sam, this matches Peter spec!
https://bugzilla.mozilla.org/attachment.cgi?id=8448304

Comment 32

[Patryk Adamczyk [:patryk] UX]

Comment on attachment 8448869 [details]
home-dividers-3col-flame.png (updated 07/01)

Please refer to Peter's spec: https://bugzilla.mozilla.org/attachment.cgi?id=8448304

The text labels and the dividers should be moved up 3px
Thanks!

Comment 33

[Patryk Adamczyk [:patryk] UX]

Attachment: 3columns.jpg

This is the flame sized screenshot from Peter's spec. There are 2 issues:
1. The app labels are 3px (0.3rem) too low
2. The divider is 3px (0.3rem) too high

Comment 34

[Patryk Adamczyk [:patryk] UX]

Attachment: 3columns.jpg

Comment 35

[Sam Foster [:sfoster] (he/him)]

Attachment: home-dividers-3col-flame.png (updated 07/02)

Update eleventy-billion. Sorry as changes to either column configuration can affect the other I have to update both screen caps.

Comment 36

[Sam Foster [:sfoster] (he/him)]

Attachment: home-dividers-4col-flame.png (updated 07/02)

And the 4-col. In this one I essentially unapply the scaling to normalize the labels. Also applying that 0.75 scaling to the divider height seemed to get a result that matched the mockup (though as this is a fractional pixel value we should double check it on a 1:1 pixel ratio device)

Comment 37

[Sam Foster [:sfoster] (he/him)]

We're all good to go. I'm out until July 8th, if you or someone gets a minute could you land and request uplift? Otherwise I'll do it when I'm back next week

Comment 38

[Kevin Grandon :kgrandon]

(In reply to Sam Foster [:sfoster] from comment #37)
> We're all good to go. I'm out until July 8th, if you or someone gets a
> minute could you land and request uplift? Otherwise I'll do it when I'm back
> next week

Thanks for sticking with this Sam!

Master: https://github.com/mozilla-b2g/gaia/commit/0a217d24a7b21fef96bc8057d644f49f79068bfe

Comment 39

[Kevin Grandon :kgrandon]

Comment on attachment 8446242 [details] [review]
PR with changes to divider style and grid item pixelHeight

We would like to have these style changes in 2.0 for the vertical homescreen.

Comment 40

[Ryan VanderMeulen [:RyanVM]]

v2.0: https://github.com/mozilla-b2g/gaia/commit/bb0dba68d7f2e1673797db53845f4f8476e11c14

Comment 41

[Peter La]

(In reply to Sam Foster [:sfoster] from comment #37)
> We're all good to go. I'm out until July 8th, if you or someone gets a
> minute could you land and request uplift? Otherwise I'll do it when I'm back
> next week

Great work Sam!  Thanks for sticking with this!