Organize Homescreen by Channels Polish

[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 organisation 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

• There are 3 channels on the homescreen: pocket, pinned sites, settings
• Each channel has a title (TBD?)
• Each channel is a carousel of tiles
• There is an empty state when no tiles are in a channel Empty state for empty homescreen section #1168
  @aminalhazwani anything else to add? Also can you add the latest screenshots?

[aminalhazwani]

Here the current work in progress...

The blue overlay resembles the TV overscan.

[aminalhazwani]

Here some more details for the homescreen channels. 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. If available a remote hint is shown to enable users to find hidden remote features. A left caret is also displayed on the left side of the first program of a channel (going left with the d-pad opens edit mode).

When moving right with the d-pad the focus stays in position 1. This enable users to preview as many programs as possible.

As mentioned above moving left with the d-pad while on the first program of a channel reveals the edit mode. Edit mode enables users to move a channel up, down, or remove it from the homescreen. If a channel is in the first position it can be moved only down (and only up if it's in the last position). Focusing an edit button shows a tooltip for stronger clarity. In order to move or remove a channel users need to press SELECT on the focused edit button. This goes hand in hand with a restore settings option (a first proposal is visible here). More details on the edit behavior will be posted to the specific issue.

@athomasmoz if this looks good feel free to remove the ux label and unassign me.

[athomasmoz]

Thanks, @aminalhazwani ! Looks great

[aminalhazwani]

An addendum on the channel scrolling. 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.

[mcomella]

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.