[META] Organize Homescreen by Channels

[athomasmoz]

Why/User Benefit/User Problem

As a user, I want the tiles on the homescreen to be organized using both up/down arrows and side-to-side so that I can reach my desired tile faster given my FireTV remote.

We also assume that such organization will help users mental model and navigation. Up/Down to change channel, right/left to navigate content of a single channel. Embracing the d-pad navigation will also help users plan an action from point A to point B.

The titles bring deeper understanding for first time users. It enables them to identify what the content of a channel is about from first launch.

What / Requirements

Broken into following tickets:

• [1630] Implement pinned piles as first generic channel #2110
• [1630] Make Pocket a Channel - land after freeze #2111
• [1630] All channels have proper focus & scrolling behavior #2112
• [1630] Acquire UX requirements for persisted Pocket recs & updates (formerly: loading/error states) #2123 UX recs for Alternative to loading, error state (persist recs)
  • [1630] Source default Pocket content #2154 Source default content
  • [1630] Persist Pocket recommendations (instead of error/loading states) #2186 Persist Pocket recs
  • [1630] Reduce Pocket foreground fetch interval to conserve resources #2187 Reduce Pocket foreground fetch interval
  • [1630] Add overnight background fetch to Pocket channels #2188 Add background fetch
• [1630] Users can only remove pinned tiles #2125 Make sure removing pinned tiles still works
• Generic channel follow-up #2159 channel follow-up

When working on these issues: consider if the issues can be broken down further to increase parallelization.

Design Details

A channel is a scrollable row composed of content cards (aka programs). Programs can have different content types and states.

In the case of "Pinned sites" the content can be a website screenshot or the first letter of the website if screenshot fails (we could explore/test more around screenshots vs favicon vs apple touch icon in the future).

If the program title is too long the text overflows and automatically scrolls when the program is focused.

Channels can have different states:

• default
• focus
• focus + scroll
• edit

The default state displays the channel title plus the channel programs.

The focus state is enabled when a program is focused.

focus + scroll state: We always focus the program in position 1 until we reach the forth to last program. The focus then moves to position 2 for the third to last, position 3 for the second last and position 4 for the last one.

Technical Notes (from Mike)

Implementation tip: look into the leanback support libraries to see if there is a re-usable component for channel rows. Maybe RowFragment (as a sub-fragment?)?

Resources:

• Getting started (doesn't seem to helpful to dissect support lib components): https://developer.android.com/training/tv/
• Minimal docs in leanback package overview: https://developer.android.com/reference/android/support/v17/leanback/package-summary
• Support lib samples: https://github.com/googlesamples/androidtv-Leanback

I think using the samples might be the best way to figure out how these things work.

[brampitoyo]

All the design details that @athomasmoz has outlined are correct.

Amin’s proposal has covered the scenario where 5 tiles are shown on the screen at one time (plus half-tiles on its left and right):

This proposal is good and doesn’t need to be rethought. We just need to expand it. Why?

1. In the future, we might accommodate video content and want bigger tile sizes
2. In the future, we might have so many channels, that we need a sidebar to serve as navigation aid
3. In the future, we might have many tiles that list playable media; they need to look cinematic and inviting

1. Expanded system should accommodate rows of many different sizes:

It’s prudent to keep Amin’s initial tile size – 150x84px – as a baseline. This size can show 5 tiles at a time (plus half-tiles on the left and right).

To future-proof it, we also want 4, 3, 2 and maybe even 1-tile rows. But we still want to keep the padding-between-tiles consistent.

What should the sizes of these rows be?

By using these sizes:

• The padding between tiles will stay consistent at 24px, no matter the row size
• We will always have a space to show half-tiles on either sides, no matter the row size
• The last program before half-tiles will always line up, no matter the row size

2. Expanded system should accommodate a sidebar

We don’t have a sidebar today, but we might have one in the future. To future-proof our current design, we need a system that can easily accommodate a sidebar.

Thankfully, no further change is necessary. Note that our current design has a side padding of 57px:

This is enough space for a minimised sidebar that’s 33px wide, with a 24px padding-between:

And when the sidebar is maximised to 270px wide, we can keep the 24px padding-between values without causing any problem to the rest of the layout:

3. Expanded system should look and feel cinematic

3a. Tiles should be readable without words

We were originally planning to have titles below our tiles:

To future-proof it, we want to make the tiles themselves more readable by showing site logo/logotype, instead of relying on titles underneath.

Note: it’s still very important to have alt value for each tile, so Android Talkback is able to read it aloud.

3b. Active channels should clearly be distinguished

Currently, a tile can either be:

1. Focused: has blue ring
2. Not focused: no blue ring

To future-proof it, we want to make all inactive channels look faded out.

The formula is pretty simple:

1. Draw a box overlaying each tile in the inactive channel
2. Give it a value of grey-90 60%

That covers my proposal of expanding the system without changing our current proposal too much.

What do you think?

[athomasmoz]

Thanks @brampitoyo , that looks great!

• What parts of this expanded vision do you see as MVP (if any)?
• For 3a, I love how clear the tiles are. I was thinking about edge cases.. what should this look like for user pinned tiles? Will we be able to get a site logo like that for any site? And what happens if the user pins two pages from the same site (ie. global/sports and global/live)

[mcomella]

Thanks Bram! These designs all seem reasonable to me and (hopefully) not too challenging to accommodate! A few questions/thoughts:

• "In the future, we might accommodate video content and want bigger tile sizes". What do you mean by "video content"? Will the tiles just having playing videos inside of them?
• When sidebars expand normally, they overlap the content. In item 2, instead it looks like the content unconventionally translates to the right to make room for the expanded sidebar: is that correct?
• In Increase size of focused item to make them more apparent #784, Tif discussed increasing the size of the focused tile (i.e. "zooming") to make it more apparent what's focused: is that something we still care about?

[brampitoyo]

@athomasmoz wrote:

What parts of this expanded vision do you see as MVP (if any)?

For MVP, two features are important:

1. Home screen has channels across a wide range of categories
2. Each channel contains popular video sites

They’re both not in this expanded vision.

Two features in the expanded vision are nice to have:

1. Cinematic tiles
2. Faded out inactive channels are both nice to have

(3. “Zoomed” focused tile)

@mcomella wrote:

In #784, Tif discussed increasing the size of the focused tile (i.e. "zooming") to make it more apparent what's focused: is that something we still care about?

Do you have any input on how to do this easily? I’d be happy if we can use the scaling value used on Fire TV OS homescreen.

And two features aren’t immediately important:

1. Rows with different sizes: only important when we decide to show video preview.
2. Sidebar: only important when we have so many categories, that it’s hard to get an overview without scrolling a lot.

---

@athomasmoz wrote:

For 3a, I love how clear the tiles are. I was thinking about edge cases.. what should this look like for user pinned tiles? Will we be able to get a site logo like that for any site? And what happens if the user pins two pages from the same site (ie. global/sports and global/live)

Actually, this isn’t an edge case. Users can bookmark any page on the internet, and there’s no way for us to fetch high resolution logo for each site.

So I wonder if we should take this approach:

1. If a pinned tile has been selected/pre-populated by us, then we will give it the cinematic treatment
2. If a pinned tile is user-created, then we will take a screenshot of the page, and give it a title
3. All other channels are pre-populated by us, so they will get the cinematic treatment

---

@mcomella wrote:

What do you mean by "video content"?

It means that some tiles will directly link to the video (ie. it will open a video player), instead of web pages that lists videos.

These tiles need to be descriptive. For example: its publication and video title should be shown, and there should be enough space to accommodate the video duration. For these reasons, the tiles may need to be larger than the normal size.

---

@mcomella wrote:

When sidebars expand normally, they overlap the content. In item 2, instead it looks like the content unconventionally translates to the right to make room for the expanded sidebar: is that correct?

That’s correct. In Android TV, the sidebar doesn’t overlap the content. Instead, it pushes the content to the right.

[mcomella]

In #784, Tif discussed increasing the size of the focused tile (i.e. "zooming") to make it more apparent what's focused: is that something we still care about?

Do you have any input on how to do this easily? I’d be happy if we can use the scaling value used on Fire TV OS homescreen.

Yep! We're doing this on the pocket screen right now. We just specify a scale multiplier like so:

firefox-tv/app/src/main/res/animator/pocket_video_item.xml

Lines 9 to 13 in 9066aab

	<objectAnimator
	android:duration="@android:integer/config_shortAnimTime"
	android:propertyName="scaleX"
	android:valueTo="1.05"
	android:valueType="floatType"/>

As for getting the scale value from the Fire OS homescreen, I think we'll have to calculate that ourselves (e.g. by taking screenshots and measuring).

[mcomella]

Do you have any input on how to do this easily? I’d be happy if we can use the scaling value used on Fire TV OS homescreen.

Yep! We're doing this on the pocket screen right now. We just specify a scale multiplier like so:

I spoke with Bram: we should use this multiplier (1.05) on our homescreen.

[liuche]

@athomasmoz this doesn't look like it's immediately actionable for the MVP, but this should be broken up into individual bugs. Let us know if we can help.

[athomasmoz]

Yep, I'll break out those additional pieces into new stories.