Introduction

Over the last ten years the concept of what we consider television has been evolving at an increasingly rapid pace. The increased processing power and flexible frameworks of TV-connected devices, tablets and mobile phones have driven a new era in how we navigate and consume video content. It’s no longer enough for a channel to produce great content—the perception of their brand is also dependent on the user experience and performance of their channel applications. Every person wants to dive into their favorite video quickly and smoothly without complicated channel flows, unclear logic and delays. In addition, channel applications introduce the opportunity for new discovery experiences that increase engagement and viewing time.

Among TV-connected streaming devices, Roku stands at the top with almost 50% of the market share (comScore, 3/16) and 13 million active users (Roku, 2/17). In addition, 13% of all new smart TVs sold in the U.S. are based on their platform (Roku, 2/17). As a long-standing Roku Developer Partner with over 50+ applications under our belt, GlobalLogic knows how to exploit the platform for its best features and performance, while avoiding the pitfalls that may snag less-experienced developers. In this paper, we’ll explain what’s new about Roku’s latest development framework Roku SceneGraph (RSG), and provide examples of the modern experiences it enables.

To download PDF version click here

Roku SceneGraph

What is Roku SceneGraph?

With the introduction of SceneGraph to the Roku platform, developers are given the ability to customize designs to almost any extent, and bring to life the freshest ideas to make user experiences better than ever. Roku SceneGraph (RSG), when compared to the previous legacy SDK, allows building UIs from such atomic components as posters, labels, rectangles and different types of grids, lists, keyboards, dialogs, etc. These components—although often having some restrictions—vastly reduce development time and increase performance.

While providing great customizability, RSG has introduced more complexity. As one of the early adopters, GlobalLogic has developed its own framework that continuously evolves, and has already been proven to be robust, extendable and effective for building channels of different size and complexity.

In addition, RSG has multithreading support that allows for the processing of different actions in parallel. This capability significantly increases user-channel interaction speed.


The RSG framework provides the ability to create custom channel designs and bring to life the freshest ideas for making user experiences better than ever.

Challenges Using RSG

RSG brings a lot of challenges when creating a channel. The most common problems developers stumble into are focus handling, data transfer between nodes, screen management and dealing with asynchrony. These are low-level concepts introduced by RSG which may pose real problems for less-experienced Roku developers.

Also, choosing the right application architecture is crucial while using RSG, because architectural mistakes made at the early stages of development may lead to a product that is neither fixable, nor production ready.

To overcome these pitfalls the GlobalLogic team has designed its own framework, including a set of optimal architectures and user flows for different user experiences (e.g. search, video navigation, playback, etc.). This framework minimizes the likelihood of focus- or synchronization-related issues. In addition, the GlobalLogic team follows proven techniques for making successful Roku apps and continuously improves them.

Unique Channels – Customized
Design

Every channel has a specific target audience and associated content: movies, music, education, kids, etc. Each of them needs its own design approach and style. For example, for kids channels it’s better to have a simple structure, big posters, colorful backgrounds and parental controls; movie or series channels can rely on genre or background posters, the structure can be deeper with categories and subcategories, fully loaded description pages, filters and search. Music channels demand using song lists and album posters which usually don’t have a lot of description. Also, music channels that don’t contain videos have a playback screen which is very different than channels with videos.

As a conclusion, every channel needs to have its own design based on channel structure and purpose. That’s why GlobalLogic’s team have created a variety of new RSG screen designs and flows to help customers choose a channel design that can perfectly match their needs. Our suggested design solutions meet common UI/UX practices on the Roku platform, while at the same time have a modern look to be competitive among other platforms. Still, every screen can be customized to include totally new features not shown before.


The GlobalLogic team has created a variety of new RSG designs and flows to fulfill all customers’ needs.

Typical screen types

The majority of channels have a similar structure and a number of typical screen types contained within. These screen types are Home, Pick Item, Description, Playback/Info HUD, Search, and the Electronic Program Guide (EPG). Screen types can vary based on the content and interface design, but still have the same purpose and work in a similar way. Let’s describe these screen types.

Home Screen

The Home screen is what the user first sees after channel launch. Typically, it consists of a menu, video posters that relate to the selected menu item, the channel’s logo, and a “star” icon which usually describes the button that leads to search and options screens. For the background of the Home screen a simple picture can be used or a big poster which represents the selected video. These are examples of a Home screen.





  • Screen 1 of 7

    Home screen designed using a side menu and grid of posters related to the selected menu item. The number of posters in each row and their size are editable. Posters can have an overlay with description (title and additional info) if needed. The user presses Right on the remote to get to particular poster.

  • Screen 2 of 7

    This Home screen is similar to the first example, but with the addition that the posters are divided horizontally according to categories. The user presses Right on remote to get to a particular category or poster.

  • Screen 3 of 7

    Home screen designed using a side menu and icon related to the selected menu item. This home screen style is usually used for menu items which don’t have related posters (Settings, Subscription, Parental Controls) or when the selected menu item is a category which contains further subcategories. User presses Right on the remote to get to a particular subcategory or posters list.

  • Screen 4 of 7

    Home screen designed using a grid of posters divided by categories with a description of the selected item. A big background image can be used. The number of posters in each row and their size are editable. The user presses OK on the remote to get to the selected item Details screen.

  • Screen 5 of 7

    Home screen designed for channels with a deep structure. The user can navigate among the tabs and categories within each tab. Categories can have videos or subcategories inside. A big banner can be used for the main/newest videos. The user navigates Up/Down/Left/Right to select items and OK to go to the Details screen.

  • Screen 6 of 7

    Home screen designed using a side menu with icons and grid of posters related to the selected menu item. Posters can have an overlay with description (title and additional info) if needed. Posters can be divided by categories. The user presses Right on the remote to get to a particular poster, at which time the menu items become hidden, and only icons remain.

  • Screen 7 of 7

    Home screen designed for channels with a deep structure. User can navigate among tabs and categories inside each tab. Categories can have videos or subcategories inside. First row of posters is bigger and can show the newest/main items with their description. User selects item and presses OK to go to item Details screen.

Pick Item Screen

The user sees the Pick Item screen after they choose a menu item or category with subcategory on the Home screen. This screen usually consists of video posters and the user can choose any of them to watch or open the Details screen. Also on this and all further screens there are breadcrumbs to show the user’s navigation path. These are examples of the Pick Item screen.

  • Screen 1 of 6

    Pick Item screen designed using posters grid and list of buttons. Breadcrumb shows user navigation path. The selected item is highlighted by a focus ring. User can navigate among grid items by pressing Left/Right/Up/Down on the remote. User presses OK to bring up info box, and activate related buttons for items such as Buy, Play, Add to Favorites, etc. (see Details screen: example 1)

  • Screen 2 of 6

    Pick Item screen designed using posters grid. Grid may be divided by categories. Breadcrumb shows user navigation path. Selected item is highlighted by focus ring. User can navigate among grid items by pressing Left/Right/Up/Down. User presses OK to open Details screen.

  • Screen 3 of 6

    Pick Item screen designed using posters grid and description of selected item. Breadcrumb shows user navigation path. Selected item is highlighted by focus ring. User can navigate among grid items by pressing Left/Right/Up/Down. User presses OK to go to Details screen.

  • Screen 4 of 6

    Pick Item screen designed for when user has previously selected a subcategory. This screen shows included items using a row of posters and description of the selected item. Breadcrumb shows user navigation path. User navigates Left/Right and presses OK to see possible options for selected item.

  • Screen 5 of 6

    Pick Item screen designed using posters grid. Breadcrumb shows user navigation path. Selected item is highlighted by focus ring. User can navigate among grid items by pressing Left/Right/Up/Down. User presses OK to open Details screen.

  • Screen 6 of 6

    Pick Item screen designed with menu icons and posters grid that may be divided by categories. Selected item is highlighted by focus ring. User can navigate among grid items by pressing Left/Right/Up/Down or get back to menu by pressing Left or Back. User presses OK to open Details screen.

Details Screen

The Details screen shows all the existing information about the item that the user has chosen. The information can be the description, duration, poster, cast and crew, genres, and episode (if applicable). Also, there are buttons for the main actions that the user can apply to the selected item, such as Play, Add to Favorites, Buy, Watch Later, Trailer, etc. These are examples of the Details screen.

  • Screen 1 of 10

    When user presses OK on the selected grid item, the focus moves from the selected item to the first button in the menu list, and info box appears as well. User can read info and navigate among buttons by pressing Up/Down. User presses OK to activate button, and Back or Left to get to grid items.

  • Screen 2 of 10

    Details screen designed using description box, buttons, and additional rows with items such as Suggestions, Seasons, Cast, etc. Landscape/portrait poster or full-screen background poster can be used.

  • Screen 3 of 10

    Details screen designed using description box, buttons and a list of items such as songs, episodes, etc., related to the selected item. Usually this style is used for music channels to show the list of songs in an album.

  • Screen 4 of 10

    Details screen designed using description box, action buttons and suggestions. User navigates among items by pressing Up/Down/Left/Right and presses OK to activate selection.

  • Screen 5 of 10

    Details screen designed using tabs, for channels with a large amount of related information. User can navigate among the tabs to see different types of information on separate pages (e.g. Details, Cast, Seasons, Recommendations, etc.) Landscape/portrait poster or full-screen background picture can be used.

  • Screen 6 of 10

    Details screen with tabs — Seasons tab selected.

  • Screen 7 of 10

    Details screen with tabs — Extras tab selected.

  • Screen 8 of 10

    User can navigate Up/Down to select Details and Seasons and press OK or Right button to select a particular episode. In that case, the menu labels are hidden; the icons remain and the description moves left (see next screen).

  • Screen 9 of 10

    Same as previous screen with Menu labels hidden.

  • Screen 10 of 10

    Same as previous screen with Season 1 selected.

Search Screen

A Search screen consists of a keyboard and search results. Users can press Play to watch content or OK to go to the Details screen. These are examples of Search screens.

Search flow 1 is designed in a way where the keyboard is displayed on the left side of the screen and search results are on the right.

  • Screen 1 of 3

    Search screen is designed with keyboard on the left and results on the right side. User starts typing keyword using remote and search results appear (see next screen).

  • Screen 2 of 3

    User sees search results and presses Right to select first item (see next screen).

  • Screen 3 of 3

    Once the user presses OK on the previous screen, the keyboard slides left and hides. Focus moves to the first item in the search results list and its description appears. Press OK/Right on remote to go to Details screen.


Search flow 2
is designed in a way where the keyboard is displayed in the center of the screen with the results below.

  • Screen 1 of 3

    User types search their word(s) using the remote. If no results are found, a ‘No Matches’ message is displayed.

  • Screen 2 of 3

    Once search results are displayed, the user presses down until the first search result item is focused. In that case, the keyboard dims and moves right, and the description appears (see next screen).

  • Screen 3 of 3

    Here, the keyboard is dim and placed to the right. The first search result is focused and its description is shown.

Search flow 3 is designed with a keyboard in the middle, the results below, and a left-side icon menu.

  • Screen 1 of 2

    User can navigate the keyboard symbols with Left/Right/Up/Down buttons on remote and select them with Ok.

  • Screen 2 of 2

    When a result item is selected, the keyboard is hidden. Results can be in a grid, and further divided by categories. The user presses UP to return to the keyboard.

Search flow 4 starts with the keyboard in the center and results below.

  • Screen 1 of 2

    User types search word(s) by using the remote. If no results are found, a ‘No Matches’ message is displayed.

  • Screen 2 of 2

    Once search results are displayed, the user presses Down to select the first item. The user can navigate the posters with the Right/Left buttons, and press OK to go to the Details screen or Play to start playback.

Search flow 5 also starts with a keyboard in the center and results below.

  • Screen 1 of 2

    User types search word(s) by using the remote. If no results are found, a ‘No Matches’ message is displayed.

  • Screen 2 of 2

    Once the search is activated, the keyboard is hidden and the search results are divided by categories displayed as tabs. The user navigates left and right within the tabs. Up reveals the keyboard and Down goes to the first item within the selected tab.

Playback Controls and Info HUD (Heads Up Display)

While the user is watching channel content they can use Playback Controls (Play/Stop/FF/REW) or press OK to see the Info HUD with main video information. These are examples of Playback Controls and Info HUD.

  • Screen 1 of 6

    Simple playbar design with just title and duration (passed/remaining time). It can be evoked by pressing FF/REW/Right/Left/Play/Pause on the remote.

  • Screen 2 of 6

    Playbar is designed with progress bar and video controllers. User can navigate within the playbar to control the video, or use remote buttons. User can also navigate to the previous/next content.

  • Screen 3 of 6

    Playbar invoked by pressing Play/Pause/OK on the remote. Duration indicated, as well as playback status and item title with description. User sees tip on how to manage closed captioning during playback.

  • Screen 4 of 6

    Playback info can be invoked by pressing OK on the remote. Title, description, short info and poster are shown. Press OK one more time to hide it.

  • Screen 5 of 6

    Press Down on remote to invoke playback info. Current item title, status, description and other suggested items are shown. User can navigate within posters with Right/Left buttons on the remote.

  • Screen 6 of 6

    Playback info invoked by Down/OK/Pause/FF/REW press on remote. Video title, info and closed captions control are shown.

Electronic Programs Guide (EPG) Screen

This screen is shown when the user clicks OK on the remote while watching Live TV (if available). It depicts the current program, upcoming programming and associated times.

  • Screen 1 of 4

    EPG designed using sidebar with guide information. User can see video posters, short description, timing and navigate among them via Up/Down buttons on the remote.

  • Screen 2 of 4

    EPG designed using bottom bar with guide information. User can see video posters, short description, timing and navigate among them via Left/Right buttons on the remote.

  • Screen 3 of 4

    EPG designed using bottom bar with guide information for more complex channels, which includes other channels or streams. User can see a variety of channels with posters of currently streaming videos. After channel selection, user sees related videos. User can navigate among channels and videos via Left/Right/Up/Down buttons on the remote.

  • Screen 4 of 4

    EPG designed using bottom bar with guide information for more complex channels which includes other channels or streams. User can see a variety of channels and videos in rows. User can navigate among channels and videos via Left/Right/Up/Down buttons on the remote.

Channel Maps

A channel map is similar to a sitemap for a website. It shows all the available screens for a particular channel and how they interconnect and flow. All screens described in the “Typical Screen Types” section can be assembled in the channel map. Channel maps can vary widely in channel structure and complexity. Examples of simple and complex channel maps are shown below.

Map of a Simple Channel

Simple channels usually consist of only 2-3 screen types, such as Home, Description and Playback HUD.

Map of a Complex Channel

Complex channels include all or a majority of the screen types. They have many categories, subcategories and 5 types of screens can be used: Home, Pick Item, Description, Playback Controls and Info HUD screens.

Channel Examples with Navigation

With channel mapping, different channel user flows can be created. They can be unique in their design, but comply with two main rules (templates) of navigation: 1) utilizing PanelSet (Sliding Panels template) and 2) using a general screen-based approach (Grid template). A mix of these two can be implemented as well.

The PanelSet approach is similar to Roku’s device home screen UI. The channel consists of Panels (which could be grids, lists, posters, etc.) sliding from the right edge of TV to the left, replacing the previous screen via pressing OK or Right on the remote. As a part of RSG, Roku has built a number of components which simplify the creation of such designs, thus saving some efforts when building the channel flow.

The second approach is based on Grid template, and works in a way where every next screen instantly appears, replacing the previous screen via pressing OK. This design is more similar to ones used on Android TV and Apple TV.

While the first approach provides a more consistent experience for Roku users and simplifies development, the second one gives more flexibility and brings a more modern-looking UX.

However, it’s important to keep in mind that screen-based (Grid template) architecture requires implementation of a custom screen manager that may be challenging for less-experienced developers.

Various channel flows based on these approaches are presented below with descriptions and recommendations taking into account channel complexity, structure and type.

Flow Based on Sliding Panels Template

Flow 1 – with simple details page

This flow type is used for simple channels—primarily with square/portrait posters.

  • Screen 1 of 5

    User wants to select video item from grid.

    User presses OK or Right

  • Screen 2 of 5

    User navigates among video items and selects one.

    User presses OK

  • Screen 3 of 5

    User sees Details page. He/she navigates among buttons and chooses Play Now button.

    User presses OK

  • Screen 4 of 5

    User watches video.

    User presses OK

  • Screen 5 of 5

    User sees Info HUD. User waits a few seconds or presses OK to hide the HUD.

Flow 2 with Complex Details Screen

This flow type is used for channels with many categories and a complex Details screen.

  • Screen 1 of 5

    User wants to select video item from grid

    User presses OK or Right

  • Screen 2 of 5

    User navigates among video items and selects one.

    User presses OK

  • Screen 3 of 5

    User sees Details page. He navigates among buttons and chooses Play Now button

    User presses OK

  • Screen 4 of 5

    User watches video.

    User presses Fast Forward button

  • Screen 5 of 5

    User sees and navigates playback controls.

Flow 3 for Music Channels.

This flow type is used mainly for music channels with many categories, small item descriptions and track lists.

  • Screen 1 of 6

    User wants to see associated content for selected menu item.

    User presses OK or Right

  • Screen 2 of 6

    User sees subcategories and selects one of them.

    User presses OK or Right

  • Screen 3 of 6

    User navigates among tracks (albums, radio stations, video items) and selects one.

    User presses OK

  • Screen 4 of 6

    User sees Details screen. He/she navigates among buttons and chooses Play Now button

    User presses OK

  • Screen 5 of 6

    User listens to track/radio station (or watches video). If watching video user wants to see how much he already
    watched.

    User presses OK

  • Screen 6 of 6

    User sees playback controls with video title.

Flow Based on Grid Template

1. Flow for Simple Channels

This flow type is used for channels with landscape posters and a complex Description page.

  • Screen 1 of 5

    User navigates among subcategories and wants to see associated content in selected category.

    User presses OK

  • Screen 2 of 5

    User sees videos inside chosen subcategory and selects one of them.

    User presses OK

  • Screen 3 of 5

    User sees video description and wants to watch video. He selects Play Now button.

    User presses OK

  • Screen 4 of 5

    User watches video. User wants to see how much of the video he’s already watched.

    User presses OK

  • Screen 5 of 5

    User sees playback controls and info, then presses OK to hide them.

2. Flow with Tabs for Complex Channels

This flow type is used for very complex channels with a deep structure and an extensive Description page.

  • Screen 1 of 7

    User navigates among tabs, subcategories and videos and wants to see what is in the first subcategory.

    User presses Down two times and OK

  • Screen 2 of 7

    User sees videos inside chosen subcategory and selects one of them.

    User presses OK

  • Screen 3 of 7

    User sees video description and wants to go to Seasons.

    User presses Right

  • Screen 4 of 7

    User wants to go to Extras.

    User presses Right

  • Screen 5 of 7

    User sees extras and wants to view one of them.

    User presses Down and OK

  • Screen 6 of 7

    User watches video. User wants to see related videos.

    User presses OK

  • Screen 7 of 7

    User sees Info HUD with suggestions and presses OK to hide.

3. Flow with Side Menus

This flow type is used for very complex channels with a deep structure and an extensive Description page.

  • Screen 1 of 8

    User navigates among menu items and wants to select a video.

    User presses OK or Right

  • Screen 2 of 8

    Side menu shrinks and user can navigate among videos. User selects one.

    User presses OK

  • Screen 3 of 8

    User sees Description page. User wants to select a button.

    User presses Right

  • Screen 4 of 8

    Side menu shrinks and user can navigate among buttons and suggestions. User wants to go back and select an episode.

    User presses Left and Down.

  • Screen 5 of 8

    User sees episodes of Season 1 and wants to select the first one.

    User presses Right

  • Screen 6 of 8

    User selects first episode and wants to watch it.

    User presses OK or Play

  • Screen 7 of 8

    User watches video. User wants to see related videos.

    User presses OK

  • Screen 8 of 8

    User sees Info HUD with suggestions and presses OK to hide it.

Is it Possible to Upgrade an Old Roku App?

With Roku’s announcement about gradual deprecation of their legacy framework, the necessity of updating existing apps to RSG is raised. Availability of an existing Roku app does simplify development of a new RSG version, but in all the cases the new app has to be built from scratch, as the new framework radically differs from the old one. Although some modules and content parsing functions can be copied, code reuse is going to be minimal. Besides taking into consideration that with RSG the developer has to program on lower levels of abstraction than before, the amount and complexity of code will double or even triple.

Regarding the app backend, there have been no changes in API requirements or content retrieval from the Roku platform. The Roku platform fully supports REST API and recently HTTP/2 support has been added. Thus, there is no need to have a custom API for a new Roku app, since existing APIs, used by Android, iOS, Web, or any other app, can be integrated.

Conclusion

GlobalLogic — as one of the early Roku SceneGraph framework adopters — has the ability to create any channel with wide customization, modern design and a navigation approach to fulfill all customers’ needs. Now with RSG, programmers can create channels built to be both visually appealing and developed in a way to get the most out of built-in components—minimizing development time and increasing performance.

GlobalLogic is always implementing new features, and seeking innovative ways to improve on existing frameworks. Contact us for a consultation on your next OTT application.