Lists

Lists organize groups of UI controls or content that the user can interact with or browse through. Lists can span either horizontally or vertically.  When contents overflow a scroller will appear.

Behaviours & States

Behaviour

Lists can be organized either horizontally or vertically. 

 

When a List is first opened, or navigated to, the focus will default on the first List Item, whether a UI control or content, in the List. For a vertical List, this is the topmost List Item. For a horizontal list, this is the leftmost List Item.

 

As focus moves through the List via 5-way navigation, List Items remain stationary until the last fully visible List Item is in focus. For longer lists, once the user navigates past this List Item, the List shifts to accommodate the next List Item. For multiple offscreen List Items, this process is repeated until the end/beginning is reached.

 

Alternatively, users can use Scroll Bars for navigation when a List goes beyond the screen. Scroll Bars are only visible when a List Item is in focus.

States

Lists do not have states, content can be either in the normal or focus state. UI controls retain their usual states. In a typical list the focus starts by default on the topmost item in the list. As focus moves down a list the list items are stationary until the last fully visible list item is in focus. Subsequent down arrow presses move the focus one list item per 
press.

Scrolling

Lists can scroll horizontally or vertically.

 

Vertically scrolling lists require an 80 pixel area on the right side of the container to accommodate the scroller. Horizontal scrolling lists require an 80 pixel area on the bottom side of the container to accommodate the scroller.  The scroller is visible only when the focus is on the list container.

 

Two scroller arrow buttons appear when focus is over/inside a list. The buttons advance the content one 'page' each time the button is pressed. A page is defined as the visible content in the scrolling region.

 

The scroll indicator bar (a vertical line indicating the amount of content in a list) is non-actionable and only appears during scrolling action, even when focus is inside a list.

 

Accelerated Scrolling: With focus inside a list and the down/up arrow button on the remote control is pressed and held (long press) the list scrolling speed will increase over time. This allows for very fast and accurate scrolling on long lists. The same is true if the on-screen scroller pagination buttons are long pressed.

 

Illustration

List created with 'list item' that is repeated to create the list.

LISTS_Empty.png

 

Scroller is not visible when list has no focus.

LISTS_2.jpg 

 

When list has focus the scroller appears. In this example the list is at the top so only the down scroll button is visible.

LISTS_3.jpg 

 

The scroll indicator (vertical line) only appears while the list is being scrolled. Scroll button below is in focus. The scroll button advances the list one 'page' at a time.

LISTS_4.jpg

Navigation