975208 - Specify layout of Tile Grid (resize vs more/fewer rows/columns, screen sizes, etc)

Status: VERIFIED FIXED

(Firefox :: Tabbed Browser, defect)

Description

[Jennifer Morrow [:Boriss] (UX)]

The first iteration (Directory Tiles v1) of the Tiles project is intended to demonstrate a type of tile users will see (Directory Tile) and begin the process of gathering CTR and Impressions performance data on tile usage to determine if there exists value both for our users and partners.  Sponsored Tiles, which are paid to be include in the Tile Grid, are sourced from partners.

Specifying the layout of the Tile Grid will mean defining the exact behavior the grid displays, including at very large and very small screen sizes.  A limitation on this behavior will be the possible non-resizeability of Sponsored Tiles, if they conform to the IAB spec.

Comment 1

[Jennifer Morrow [:Boriss] (UX)]

I'll add a mockup describing this, but just to carry over discussion from Bug 975199, here's some thoughts on behavior:

* Tiles are normally 180x150, arranged in a 9x9 Tile Grid.
** 9x9 Tile Grid will be vertically and horizontally centered in Firefox window (assuming no search bar for now) 
** If the window is large enough (to be specified) to show tiles at larger 300x250 resolution, the tiles will expand to 300x250 but not bigger (similar to Chrome’s New Tab and Opera’s Speed Dial) 
* In v1, only 9 tiles are shown, but future versions will allow for scrolling down, progressively loading  more tiles
* A gutter of n pixels will be present between and around all tiles
* If the window is too horizontal or vertical to show 3 rows/columns of tiles with their gutters, 2 will be shown.  If too small for 2, then 1 will be shown (similar to Opera Speed Dial) 
* If the window is too small for one full tile, just the top right of the tile and gutter will be shown (similar to Firefox today)

Comment 2

[Ed Lee :Mardak]

And the site thumbnails should follow this same structure so using the 1.2 aspect ratio?

Comment 3

[Jennifer Morrow [:Boriss] (UX)]

(In reply to Ed Lee :Mardak from comment #2)
> And the site thumbnails should follow this same structure so using the 1.2
> aspect ratio?

Yes.  Much as it's just... not a natural ratio for websites.  For others seeing this - we're looking into ways to make this more flexible and less IAB-ratio rigid.  This is only for v1.

Comment 4

[Jennifer Morrow [:Boriss] (UX)]

(In reply to Ed Lee :Mardak from comment #2)
> And the site thumbnails should follow this same structure so using the 1.2
> aspect ratio?

Actually, thinking this over, I've got a proposal:

Let's suppose that yes, we use the 180x150 IAB unit spec, but with a slight variation: a colored gutter on the left and right side of the tile in same color as the background of the unit (assuming the unit has a background).  This would mean that regular IAB units could be used, but in a far more visually pleasing ratio, particularly for thumbnails.

I just realized why the IAB was done in the ratio it is - old 4:3 TVs (http://www.iab.net/wiki/index.php/Aspect_ratio).

This would mean thumbnails would be in the 1.6190:1 ratio, and look a lot better as a result.

I'll attach a mockup to make this clearer.

Comment 5

[Ed Lee :Mardak]

(In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #1)
> * In v1, only 9 tiles are shown, but future versions will allow for
> scrolling down, progressively loading  more tiles
Does v1 support exactly 9 tiles or up to 9 tiles? There was a later comment about how rows/columns can be removed if they don't fit the width/height. And to clarify, is this row/column removal for v1?

(In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #1)
> ** If the window is large enough (to be specified) to show tiles at larger
> 300x250 resolution, the tiles will expand to 300x250 but not bigger (similar
> to Chrome’s New Tab and Opera’s Speed Dial) 
For v1, do we want to switch to the 300x250 image for a tile size of presumably 405x250?

Similarly, do we gradually scale the tile from 243x150 to 405x250 as the screen space allows?

From there, higher screen resolutions have a couple options:
1) add rows/columns as space allows for additional 405x250 tiles
2) scale up the 405x250 tiles to maintain the 3x3 grid

Comment 6

[Jennifer Morrow [:Boriss] (UX)]

(In reply to Ed Lee :Mardak from comment #5)
> (In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #1)
> > * In v1, only 9 tiles are shown, but future versions will allow for
> > scrolling down, progressively loading  more tiles
> Does v1 support exactly 9 tiles or up to 9 tiles? There was a later comment
> about how rows/columns can be removed if they don't fit the width/height.
> And to clarify, is this row/column removal for v1?

V1 will only have 3x3 tiles: 3 tiles horizontally and 3 tiles vertically, making 9 total.  Sorry, not a 9x9 grid, but a 3x3 grid of 9.

> (In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #1)
> > ** If the window is large enough (to be specified) to show tiles at larger
> > 300x250 resolution, the tiles will expand to 300x250 but not bigger (similar
> > to Chrome’s New Tab and Opera’s Speed Dial) 
> For v1, do we want to switch to the 300x250 image for a tile size of
> presumably 405x250?

This is really a nice-to-have for v1.  If we can't get it, it's still shippable.  If we can get it, it'll be largely an engineering decision - can we scale up elegantly enough from the artwork given to us by partners?  

> Similarly, do we gradually scale the tile from 243x150 to 405x250 as the
> screen space allows?
> 
> From there, higher screen resolutions have a couple options:
> 1) add rows/columns as space allows for additional 405x250 tiles
> 2) scale up the 405x250 tiles to maintain the 3x3 grid

Let's no add more rows/columns for v1.  That's because if we show more items via scaling, but do not allow scrolling, we put users in the weird position of needing to literally make their window larger to see more of the grid, as scrolling isn't available.

Comment 7

[Jennifer Morrow [:Boriss] (UX)]

Attachment: Mockup: Work-in-progress draft of layout and size variation

Comment 8

[Jennifer Morrow [:Boriss] (UX)]

Attachment: Mockup: Work-in-progress draft of layout and size variation

This should specify what happens at various sizes.  At very small sizes, no behavior change from current should take place.

Comment 9

[Tracy Walker [:tracy]]

Boriss, I qa- minused this, but if this is the bug where implementation will take place, please change to [qa+], thanks.

Comment 10

[Ed Lee :Mardak]

Boriss, what else do you think might change from attachment 8385835 [details] as it's labeled a WIP/draft. I've started filing development bugs, so I'm curious any area we should not focus on first because they might change.

Comment 11

[Jennifer Morrow [:Boriss] (UX)]

(In reply to Ed Lee :Mardak from comment #10)
> Boriss, what else do you think might change from attachment 8385835 [details]
> [details] as it's labeled a WIP/draft. I've started filing development bugs,
> so I'm curious any area we should not focus on first because they might
> change.

Nothing on that image should change for first iteration of Directory Tiles, except for a search bar being added (via Bug 962490, though that bug is now blocked).  The search bar will maintain this equally-sized gutter as though it were a short row of Tiles - the distance between it and the Tiles (under) and it and the top of the window (over) being the same 32px.

Bug 975213#c4 should give a few more details about what happens when tabs are removed manually via the Backlog.

The only other potentially relevant part I can think of is how the actual images are constructed via partners, which is described in Bug 975199, particularly attachment 8381884 [details].

I can list future behavior for further iterations, in case it is relevant for current development.  Please ignore the graphics/layout of these drafts: they're just meant to show the general user interaction:

- Adding a panel manually (http://people.mozilla.org/~jboriss/temp/new_tab_sketches/customizing_a_tile.png)
- Adding custom backgrounds (http://people.mozilla.org/~jboriss/temp/new_tab_sketches/change_background_image.png - 3b shows a dedicated Preferences page, but that's likely further out than background customization)
- Allowing tiles to have interactive or custom widget-like content, such as showing the weather or a new story
- Allowing the tabs to be responsive on hover (examples under Salient Image Mockups and Alternative Styles http://vtsatskin.github.io/TrippyThumbs/)
- Clicking to the right and left to reveal more panels (1d and 2 in http://people.mozilla.org/~jboriss/temp/new_tab_sketches/overall_flows_spec.png) and adding custom lists to those panels (http://people.mozilla.org/~jboriss/temp/new_tab_sketches/adding_a_new_content_panel.png) or having them suggested (http://people.mozilla.org/~jboriss/temp/new_tab_sketches/suggestions_for_lists.png)

Comment 12

[Ed Lee :Mardak]

(In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #11)
> Nothing on that image should change for first iteration of Directory Tiles
Great, thanks. I'll mark as fixed, we'll continue the implementation in the appropriate bugs.

Comment 13

[Ed Lee :Mardak]

What font should be used for Linux? The mockup says Segoe UI for windows and Lucida Grande for osx.

Comment 14

[Ed Lee :Mardak]

Fyi, I see devtools using a cross platform font-family declaration of:

Lucida Grande, Helvetica, Helvetica Neue, sans-serif

Should we just use the last 3 for linux? "font-family: Helvetica, Helvetica Neue, sans-serif" or the same 4 as devtools?

Comment 15

[[e-mail]]

I've set mine with 6 columns and 5 rows, which can easily fit to my window, and since 3 days ago, it shows me 6 colums and 4. It doesn't even show 5th row when I zoom it out, and it changes it to 5x5 instead...

I just want my 6x5... How to make it work?

Comment 16

[Jennifer Morrow [:Boriss] (UX)]

(In reply to Ed Lee :Mardak from comment #13)
> What font should be used for Linux? The mockup says Segoe UI for windows and
> Lucida Grande for osx.

Yes, exactly - let's use "font-family: Helvetica, Helvetica Neue, sans-serif" and see how it looks

Comment 17

[José Jeria]

(In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #0)
> Specifying the layout of the Tile Grid will mean defining the exact behavior
> the grid displays, including at very large and very small screen sizes. 

This is not the case now, please see bug 1016366, where the tiles look tiny in higher resolutions.