1052933 - Update Top Sites layout to grid

Status: RESOLVED DUPLICATE of bug 1383734

(Firefox for Android Graveyard :: Theme and Visual Design, defect)

Description

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: Screenshot_2014-08-12-16-42-46.png

Current 'Top Sites' panel has some awkward padding and spacing that I'd like to start cleaning up. I wanted to start with something small (in scope) and work form there.

We can clean up about:home as we work onwards from here.

How does that sound?

Also, attaching screen shot with your build to show what it basically is looking like ATM.

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

^ I'll attach designs later just wanted to file a bug first :)

Also, we'll probably want to split this off into a separate bug but we should also clean up a lot of the assets as well as placeholder images and buttons such as "add a new site" (I think Ian was working on a different image when we were in London but not sure where that is...)

Comment 2

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: Mobile - XXHDPI (vert).png

Attaching a WIP (open on Nexus 5 to get a hands-on feel for the spacing)

Nothing too drastic, wanted to keep it simple still and not create a big (if any) learning curve for the user while allowing more room for the content to breathe and not compete so much with each other.

Comment 3

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: spec_structure_topsites.png

Started this to clean up the basic structure of the page. Nothing too major, I'll also need to attach a new image for the "add a site" block at the bottom. 

Would a "+" icon be all that's needed for that "add a site" block? Also missing, tapped state for these blocks.

Comment 5

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

I think this design spec has become dated. 

Renaming to be about updating the whole UI rather than just cleaning up the padding and sizes.

Comment 6

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Comment on attachment 8473123 [details]
Mobile - XXHDPI (vert).png

Updated designs to come.

Comment 7

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

I'm going to re-purpose this bug for a larger idea. I'd like to make "Top Sites" better. More touch friendly targets, with a possible 3 column layout.

The goal of this is to depend less on the screenshots that we've been having trouble with but also to improve it's usability for the "keyboard up" use case. Clearing up some of the proportions here also help establish a clearing information architecture that will make more sense. 

Finally, it'll also polishes up some of our older UI that doesn't exactly follow the guidelines of our product anymore around things like color, font size, padding and spacing.

Possible V2: adding an ability (likely inside Settings) to have this switch between 2 col or 3 col layout depending on our user's choice.

Comment 8

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_topsites_mock8b_used.png

Attaching WIP mock.

Note: Although each item is smaller, there's hopefully a clearer organization and structure. Each item also has room for 3 lines of "Page title".

Comment 9

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Once we land bug 1228680, the globe icons here can be replaced with the first alphabet of the TLD too

Comment 10

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_topsites_alexa5_3col.png

Updated mock of the Alexa Top 5 defaults

Comment 11

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_topsites_alexa5_3col_used.png

attaching preview of what it'll look like when users get more in their history.

Comment 12

[Sebastian Kaspari (:sebastian; :pocmo)]

(At least from the last mocks it looks like this depends on bug 1228680)

Comment 13

[Sebastian Kaspari (:sebastian; :pocmo)]

Let's make top sites great again!

Comment 14

[:Margaret Leibovic]

This isn't an experiment.

Comment 15

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_topsites_4col_grid.png

Comment 16

[Sebastian Kaspari (:sebastian; :pocmo)]

Attachment: DEBUG-tiles-nexus6p-portrait.png

Comment 17

[Sebastian Kaspari (:sebastian; :pocmo)]

Attachment: DEBUG-tiles-nexus9-landscape.png

Comment 18

[Sebastian Kaspari (:sebastian; :pocmo)]

Attachment: DEBUG-tiles-sony-z3c-portrait.png

Comment 19

[Sebastian Kaspari (:sebastian; :pocmo)]

@antlam: I uploaded some screenshots of devices with varying dpi and display sizes. Ignore the colors and icons for now. This is just about the tile size (yellow).

I'm trying to calculate the number of tiles and the size of the tiles dynamically to use the available (horizontal) space as much as possible. To avoid adding too many tiles or too big tiles I limit both and use the remaining space as padding (You can see that on the N9 screenshot, or in landscape on some devices. I can add more screenshots later).

The numbers need tweaking and don't match your mock yet, but this is what I use:

* maximum number of horizontal tiles = 6
* minimum number of horizontal tiles = 2
* max size of tile = 120dp
* min size of tile = 100dp

And then I calculate the number of tiles:

* available space = width - padding
* number of tiles =  (A) available space / minimum tile size
                  OR (B) maximum number of horizontal tiles (if A is too large)
                  OR (C) minimum number of horizontal tiles (if A is too small)
* size of tiles =  (A) available space / number of tiles
                OR (B) maximum tile size if (A) is too large
* use remainder for left/right padding = width - (size of tiles * number of tiles)


The result doesn't look too bad. But it needs to be adjusted to resemble your mocks. We can also use different input values (min/max tiles, min/max size) for phones/tablets.

What do you think?

Comment 20

[Sebastian Kaspari (:sebastian; :pocmo)]

Attachment: wip-topsites-tiles.png

progress

Comment 21

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to Sebastian Kaspari (:sebastian) from comment #19)
> @antlam: I uploaded some screenshots of devices with varying dpi and display
> sizes. Ignore the colors and icons for now. This is just about the tile size
> (yellow).

Chatted on IRC about the sizing here. We want to maintain a 15dp gutter on both sides of the panel.

> I'm trying to calculate the number of tiles and the size of the tiles
> dynamically to use the available (horizontal) space as much as possible. To
> avoid adding too many tiles or too big tiles I limit both and use the
> remaining space as padding (You can see that on the N9 screenshot, or in
> landscape on some devices. I can add more screenshots later).

We talked about maintaining the same number of tiles across devices. This will help users maintain a feeling of consistency. 

So, adding space rather than adding more tiles sounds right to me.

Comment 22

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

We roughly did this with AS.