Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

This document highlights Roku's approach to TV UIs, with progressive levels of requirements which are crucial to pass Roku's Channel Certification process as well as create a well-designed Roku Channel. While channels that do not implement all best practices may still be deployed on the Roku platform, the

...

practices outlined here are known to improve the user experience, which directly affects the engagement and value of your channel on our platform.

Table of Contents

Table of Contents

Introduction

This document highlights Roku's approach to TV UIs, with progressive levels of requirements which are crucial to pass Roku's Channel Certification process as well as create a well-designed Roku Channel. The document is structured to introduce the developer to the By the end of these Design & User Experience Guidelines, you will be familiar with the following topics: 

  • What to keep in mind when designing for a TV UI.
  • What are the proven design principles and guidelines Roku uses when designing UIs that
    • Are, simple, powerful, useful, and familiar?
    • Encourage more TV viewing?
    • Have high customer satisfaction (NPS)?
  • What are the best practices for designing Roku Channels (aka Appsapps)?
    • Roku has an SDK comprising of various UI components – how are they expected to be used?
    • What are the key features that streaming users expect in a good Roku Channel?
  • What does Roku require for Channel certification?
    • Some features and UI paradigms are required because the Roku brand represents a certain expectation of quality and usability for the customers.
      • E.g., Require Instant Replay buttons support and specific trick mode features

General TV UI Philosophy

Roku experience is designed for a mass market – kids, through adults. One day most TVs in the world will have Roku. We need to keep in mind that television displays are communal and different from computers, phones, and tablets. For starters, people lean back and relax while watching TV, which means they don't expect to use anything complicated requiring training or mental acrobatics (i.e., minimize cognitive load). This makes it important for a TV UI to be invisible. 
A UI is invisible when users remain focused on their goal of navigating and watching the content instead of figuring out how to use or operate the UI. An invisible UI never draws any unnecessary attention to itself; it's effortless to use because everything about it is evident, requiring very little learning or energy. In its cognitive economy, users are never confused about

...

Key Design Principals

Take pride in a UI that looks and feels like common sense! Constantly ask these key questions about your UI as you're designing and reviewing it.

  • Is your UI getting in the way? TV viewers want to relax, have a beer in one hand, and a remote in the other. Then with as few actions and decisions as possible, watch something great. No one wants to use a UI; they just want to watch something entertaining. So, remember that your UI needs to be a delightful and useful tool.
  • Is it easy to use? The most common design mistake is making the UI too complicated. People not only need to operate the individual onscreen UI elements (micro-usability) smoothly but be able to accomplish their goals (macro-usability) easily. People need to know where they're at and where to go next which means the navigation must be simple and obvious. Reducing complexity is more important than reducing the number of steps. Simplicity trumps speed.
  • Is it snappy? The system must respond immediately to every user action with clear and distinct feedback. The UI needs to be highly responsive; otherwise, interactions will be frustrating. Transitions, animations, and load times must all be optimized for performance.
  • Is it easy to learn? No one expects or wants training on how to use their TV! Instructions on how to use the UI are usually a sign of a weak design. Patterns and consistency mean actions and outcomes are predictable, which enables users to carry what they learn from one screen to other screens. Can you describe how to use your UI with the fewest number of "always true, simple rules"? The more exceptions there are to the general behavior of your system, the more complicated it is to learn and use.
  • Does it look simple? The look of a UI also contributes significantly to its delight and ease of use! Ensure people can easily tell where the focus highlight is and where it can go. Create visual hierarchy so what's important has prominence and what's secondary is pushed back, demanding less attention. Keep screen information density low; blank space is essential, giving screen elements room to breathe and reducing a user's anxiety.
  • Is there too much? More is not always better; more features, more choices, more information can lead to more work, noise, and complexity. Start with less to keep it simple and approachable; focus on the few things that have a significant impact and are relevant to users and their tasks. Eliminate all others. Later look for signs or evidence of what more is needed.
  • Does it flow? Not only do you need to ensure that the sequence of steps a user must take from screen to screen flows in a logical and predictable order, but there should also be a consistent and natural flow on the screen itself. Avoid screen designs in which users must jump their gaze and focus all over in an unorganized or poorly choreographed order. A single pass top-down, left-right flow is the best when it comes to the final actions towards the right and/or bottom of the screen. The size, color, contrast, and placement of each element work together, creating a clear path to understanding your interface.
  • Is it seamless? Jumping or cutting from one state to another forces people to re-evaluate the new state and re-orient themselves. So, use simple, clean, and minimal animations to help users see and follow the system's transition from one state to another. However, never make people and their interactions with the system wait on animations (UI animations should not act as a governor to throttle the pace of the interaction). As your UI transitions from screen to screen, ensure a relevant element from the first screen carries over to the next screen for continuity of the context.
  • Is it focused? To ensure better clarity and simplicity for any given screen, design each screen to have one specific purpose and make sure everything on that screen serves that single purpose. Don't overload screens and try to do too much at once. One screen, one purpose.
  • Is it forgiving? No matter how clear your design is, people will make mistakes. You should handle user errors with as much attention to simplicity as the rest of the UI. Ensure users can easily back up, resume, and avoid dead-ends; always provide a way forward. Use error messages as a teachable moment and avoid technical language, placing blame, or making people feel stupid. Users must have a sense of comfort and trust at every step.
  • Is it entertaining and engaging? Remember, you're creating an entertainment experience, so the UI itself should also be engaging and a joy to use. Be more visual and celebrate artwork and images, like movie posters, and make them big. Keep the UI experience human, approachable, light-hearted and comfortable throughout the screen. Pay attention to the tone and the wording of the text. People are fearless when playing games; they don't worry about breaking it. We too are creating an entertainment experience, and our system needs to be as approachable and forgiving as possible.
  • Is it legible? People sit an average distance of 10 feet (3 meters) from their TV screen. While the TV screen may seem like a large display with plenty of UI screen real estate, from 10 feet away, the relative size of the TV screen can be smaller than a phone held 1 foot away from your face. Therefore, ensure everything is easy to read with high contrast and large text. The larger text has the added benefit of forcing you to be concise and reduce the total amount of information shown (information density) to just what's important.
  • Is it overscan safe? TVs were made of cathode ray tubes (CRT) in anticipation of overscan that produced inconsistent images across TV sets, especially along the screen edges. To compensate, CRT TVs used overscan, which slightly enlarged the image itself so those bad screen edges would be outside the viewing area. You should avoid showing any critical information too close to the edge of the TV screen. Since overscan still exists even on HDTVs, Roku recommends you set at least a 5% margin within which to keep all of your UI to ensure its visibility. For a standard HDTV with 1920x1080 pixel resolution, this means having a 90 pixel left/right side margin and a 60 pixel top/bottom margin.

11 Rules to Live By

Follow these rules, and you'll have a great Roku Channel:

...

Channel launches to fully rendered homescreen within:

      • Recommended: 15 seconds on Roku Express (Litlefield)
      • Required: 20 seconds on Roku Express (Littlefield)

Channel is responsive to user navigation, search, and playback of content at a reasonable speed expected on all target Roku platforms. Specifically as measured on Littlefied:

      • Tile-to-tile navigation within 250 ms
      • Chanel response to remote button press within 250 ms
      • Video starts playing within 5 seconds of initiation
      • If animations are present, they must be at least 30 fps
      • Scene-to-scene transitions are within 3 seconds
      • App works with Fast Video Start to allow for pre-buffering of content and improve playback performance where applicable (E.g., On a springboard page)

...

        6. Properly advertise your Channel

...

7. Try before you buy

...

8. Make Channel Sign-Up easy

...

      9. Properly Monetize your Channel

...

10. Offer Diverse Ads

...

11. Design for the High-End Device, accommodate the Low-End

    • With a range of Roku products in the market, different devices will have varying levels of horsepower and varying display qualities (e.g., 1080p vs. 4K).
    • Instead of designing for the lowest-common denominator and producing a compromised experience for everyone, consider creating a great design that work great on the high-end products while gracefully degrade for the lower-end products.
      • For example, use higher resolution artwork and images that easily scales down.
      • For example, use nice transition animations that can be skipped or abbreviated for lower end devices.

Remote Control Buttons

4-way Directional Pad (dPad)
Conventional uses of the Roku Remote's buttons:

...

  • Use the directional pad to move the onscreen focus highlight up/down/left/right from one screen element to another.
  • Alternatively, in a "fixed-focus" model, use it to move the content or choices into the focus highlight.

...

OK

  • While on a standard UI screen:
    • Selects or activates the item in focus.
  • During video playback:
    • Preferred: OK button should reveal a Heads Up Display (HUD) containing video-relevant information and actions (which should dismiss when it times out or when the Back button is pressed).
    • Alternative: Toggle between video play and pause.

Back

  • While on a standard UI screen:
    • Navigate users to a previous screen. Note that there are at least two different back-navigation schemes:
      • Hierarchical: Navigate to the screen that is one level up in the UI hierarchy.
      • Historical: Navigate to the previously viewed screen, regardless of where that screen is within the UI's map/hierarchy.
      • Users expect and more easily understand the 'historical' model. Where it is important to navigate to other screens or levels of the UI hierarchy, offer better on-screen navigation choices.
    • While users can press the Back button to exit a popup dialog, Back is not used to navigate from a screen to a popup dialog.
  • While on your Channel's home screen:
    • It is critical that people be allowed to exit your Channel via the remote's Back button. This ensures they can get to the original Roku UI screen from which they launched into your Channel.
    • Consistent exit strategy: Users can press the Back button enough times to eventually get to your Channel's home screen. From there, one more press of the Back button should reveal an "exit opportunity". For example:
      • A Popup Dialog asking for exit confirmation.
      • A menu offering "exit" as a choice.
    • Hence, pressing Back from your Channel's home screen should either exit your Channel or reveal a way to exit your Channel (E.g., A popup dialog confirming a user's intent to exit).
  • During video playback:
    • Exit video playback and return to the referring screen (E.g., Content details page).

Instant Replay/Skip-back

  • While on a standard UI screen:
    • No system-response
  • During video playback:
    • Auto rewind the video ~10 seconds and resume playback.
    • The amount of time required to rewind takes into account that users may need to reach for a remote, find, and then press the Instant Replay button.
    • Note that within the Roku settings users can set Closed Captioning to be on during instant replay. The idea here is that most people skip back because they didn't hear what was said. Hence, when Instant Replay is pressed, the last 10 seconds are replayed with Closed Captioning on only during that replayed portion of the video.
    • Some Roku remotes do not have an Instant Replay button. If you want the functionality to be available consistently, you could also offer it via the first dPad left press during video playback. If users press dPad left more than once in rapid succession, then revert to standard dPad behavior during video playback.

Star/Options

...

  • It is used to access a popup menu of contextual and/or global options or information.
  • Options can be contextual to the screen and/or the screen item in focus.
  • Global options can be navigational (E.g., Home, Search) or features/settings.
  • While the popup menu is visible, pressing the Star button again should dismiss it.

...

  • The Star button reveals a Roku options menu offering users standard options, like Closed Captioning, and audio tracks.

...

Play/Pause

  • While on standard UI screen:
    • Can be used as a shortcut to activate or play something.
      • For example, showing a featured item elsewhere on the screen and activating/selecting it without having to move the focus highlight to it.
      • For example, when highlighting a movie poster within a grid, pressing OK would select it and take you to the movie's details page, but Play could just play the movie or its trailer.
  • During content video playback:
    • If the video is playing, a button press pauses the video (and reveals BIFs).
    • If the video is paused, a button press resumes video playback.
    • If the video is rewinding or fast-forwarding, pressing the Play button switches to video playback at the current rewind or fast-forward position.
  • During ad video playback:
    • Allow users to play/pause advertisements.
    • Play/pause behavior should be the same as with content video.

Rewind/Fast-forward

  • While on a standard UI screen:
    • When focus is on a vertical or horizontal list of text or images: 
      • Rewind: Vertical pages list up and horizontal pages list left. 
      • Fast-forward: Vertical pages list down and horizontal pages list right.
  • During content video playback:
    • For long-form content (E.g., 30 minute TV show), usually 3 rewind/fast-forward speeds are offered.
    • For short-form content, it's okay to reduce the number of speeds to 2 or just 1.
    • Each press of the rewind button increments the rewinding speed by one step: Current state >> Rew x 1 >> Rew x 2 >> Rew x 3 >> Rew x 1 >> Rew x 2 >> etc.
    • Each press of the fast-forward button increments the forwarding speed by one step: Current state >> Ffwd x 1 >> Ffwd x 2 >> Ffwd x 3 >> Ffwd x 1 >> Ffwd x 2 >> etc.
    • Pressing and holding the rewind or the fast-forward button accelerates the video to the fastest speed: Current state >> Rew x 3 or Current state >> Ffwd x 3.
    • Note that in all the cases above, the "current state" could be: video paused, video playing, rewinding, or fast-forwarding.
  • During ad playback:
    • Usually, users are not allowed to fast-forward an ad that is playing.
    • Users should be allowed to rewind within an ad, and even rewind past the ad back into the content video.
    • If users are rewinding or fast-forwarding from content video playback, they must be allowed to go past any point an ad would normally play. For example, users can fast-forward from the 5-minute mark to the 45-minute mark, passing by several ad play points.
    • If they do fast-forward past an ad play point, when playback is resumed the system can play an ad first before resuming the content video (As compensation for having fast-forwarded over an ad).

Every Channel's Must-Have Features

Roku has a Channel Certification Checklist to help you better understand what is required to publish your Channel. Here's a summary list of these features:

  1. Simple sign-up/in flow
  2. Some content/experience in front of paywall
  3. Trickplay with BIFs
  4. Pick up where you left off (Resume playback within a title, watch next, recently watched)
  5. Watchlist
  6. Roku Billing
  7. Roku Search
  8. Deep Linking (From ads, Search, etc.)
  9. Back button Channel exit (Exit confirmation is okay)
  10. Roku Ad Framework
  11. Roku Connect

More Details

These requirements have an additional set of considerations. Attraction and retention of users may be primarily based on your content. However, their ability to easily interact with your channel will also play a big part in retention and frequency of use/re-use. Easy interactions go beyond the design of the UI and into features and capabilities. Below is a list of capabilities that users expect and features that will enhance the value of your channel.

...

  • Browse
    • There are many different ways to organize and present your content. The key is to understand your audience and how they think about your content and how they would want to access it.
    • Your Channel can offer a mix of organizational schemes. For example, one or more of the time sensitive and personal schemes, plus one consistent and predictable scheme as a fallback:
      • Time based (Updated frequently):
        • Showcase or featured (E.g., Curated topics or content, but it must be updated frequently)
        • Time oriented (E.g., New releases, latest episodes, new this week, etc.)
        • Popular or trending (E.g., Algorithm based content)
      • Personal (Updated based on usage):
        • Recommended
        • Recently watched
        • Watchlist
      • Consistent and predictable (Updated based on library changes):
        • Logical or categorical (E.g., Genres)
        • Alphabetical (However, categorical browsing may be better/faster for large libraries)
  • Search
    • If your content library exceeds 200 items, then your Channel should offer users the ability to search for content.
    • Note, on-screen keyboards are tedious to use and so to help make it easier, we recommend:
      • QWERTY key layout which is great for physical keyboards when touch-typing is possible. For on-screen keyboards, an alphabetic arrangement is preferred.
      • Provide search results for every character typed in. So, to minimize typing, users can type until the result they're looking for appears. This implies that your Channel must return results very quickly.
    • Be forgiving with the input search terms
      • Don't force users to key in "The" (E.g., "Walking Dead" should work as well as "The Walking Dead")
      • Capitalization is not necessary
      • Allow users to input any word or part of a phrase in any order (i.e., Don't require the phrase to be input in order - the first word first, etc.)
    • Mixed search results (E.g., Combining movies and TV shows) are fine so long as you provide cues for users to tell items apart.

Pivoting

  • Once users have found a piece of content or finished watching it, make it easier for them to pivot to and find similar or related content.
    • For example, from the details page of a specific:
      • TV episode, make it easy for users to get to all episodes and seasons
      • Piece of content, make it easy for users to get to similar content (i.e., "more like this")
      • Piece of mainstream content, make it easy for users to see the cast and crew and pivot to a specific cast member's filmography
  • Pivoting is a great way to keep users engaged with a topic in which they've already expressed interest.

Deep Link Support

  • Users expect to enter your Channel and go directly to any specific piece of content that they have selected from the Roku UI.
  • For example, when selecting an ad for a movie, users expect your Channel to launch and take them to the selected movie.
  • This type of deep-link support involves more than just jumping to the content of interest; it also means creating a navigation scheme that enables people to move around effectively even if they didn't come in via the front door i.e., your Channel home page. 

Picking up where you left off

  • When users find content of interest, provide an easy and fast way for them to find it again.
    • Common features that accomplish this include:
      • Adding an item to a 'watch list'; for episodic content, make it easy to add the TV series, not just a specific episode
      • A list of 'recently watched' items
      • 'Watch next' is great for episodic content (See below)
      • 'Resume watching' is great for unfinished content (See below). However, in order for 'resume watching' to work effectively, 'watch list' and/or 'recently watched' need to be offered as well.

Resuming Video Playback

  • Users may start a video and then stop it before finishing it. Your channel must make it easy for users to easily and quickly:
    • Find this recently watched video again
    • Resume playback from where they left off
    • Restart playback from the beginning of the video (Without having to rewind)
  • Since Roku users tend to own more than one Roku player/TV, it is important that the information needed to support this capability be server-based so that it can be accessed and used regardless of the playback device being used.
  • When resuming playback, be sure to actually start the video a few seconds back from the actual resume point (E.g., 3-5 seconds back). This will help users identify a familiar scene and acknowledge that the system is truly picking up where they left off.

Playing the next logical item

  • For any episodic content or playlist scenario, once the current video finishes, the system should make it super easy to watch the next episode or item in the playlist.
  • Many Channels are seeing an increase in viewing hours and general Channel stickiness when providing this sort of functionality.
  • This is usually done in one of two ways:
    • Auto-play
      • Playlist Scenarios: The Channel automatically begins playback of the next item in the playlist. In such cases, be sure the next video is introduced (E.g., Buffering or loading screen shows video title).
      • Episodic Content Scenarios: The Channel provides information about the next episode to be played and a countdown timer. Users can exit back into the Channel's main UI, or press OK to accept and start playback of the next episode, or do nothing and let the timer expire so playback starts automatically.
    • Play next
      • Content finishes playing and users are returned to the UI and offered an easy way to play the next item.
        • For example, users are returned to that content's details page which offers a simple option to play or go to the next episode, or go to the full list of episodes.
  • If your Channel offers episodic content, then it must show users which episodes have been watched already.
    • Typical solution involves showing a progress bar with each episode
    • Users can see if they have watched an episode completely, partially, or not at all
    • This is an easy manual way for users to see which episode to watch next

BIFs/Trick Mode

...

Instant Replay

  • The ability to press a single button and have the system automatically skip back about 5-10 seconds and resume playback is a very convenient and loved feature.
  • Additionally, most use this feature because they did not hear a piece of dialog. Roku's closed-captioning's default setting is to show on instant replay. Activating instant replay enables the user to see/read what they may have not heard.

Simplified transactions

  • Requiring users to supply credit card information during your Channel's set up may cause some users to drop-out.
  • Waiting and asking users to supply credit card information right before a transaction (E.g., Movie rental) is a hurdle many are not willing to jump.
  • Obviously, you would be creating speed-bumps with either route, but there is a more simple and pain-free route for your audience; Roku billing makes it as easy as one-click to set up an account, maximizing the number of users signing up and transacting.

Work With Roku's Master UI

...

Pathways to your Channel

There are several ways users can launch into your Channel from the Roku UI. Not all pathways lead users to your Channel's home page. This means your Channel's overall navigation scheme must be flexible enough to enable users to effectively start at any layer of your UI and move around from there.

  • If your Channel is not already installed:
    • All pathways to your Channel will always lead to a sign-up/in flow first
  • Ads:
    • Can launch and deep-link to almost any level of your Channel
      • For example, launch and jump straight to a home page, a category or collection page, or a details page for a specific item
  • Search and Follow:
    • If launching the Channel takes the user to the sign-up/in flow first, then immediately afterwards the Channel should still remember to take users to the specific content that was selected and kicked off this whole process.
    • Otherwise, Search and Follow can launch and deep-link to a specific piece of content.
      • For example, a movie or TV episode details page, or a TV show season/episode collection page
  • Channel store:
    • Can launch your Channel to its home page.
  • Partner buttons
    • Can launch your Channel to its home page.

...

There are several ways users can exit your channel. Some are immediate and beyond your control, and a few are more controlled. All forms of exit fall into one of two categories:

  1. Exit and take me to a new place (E.g., Home button).
  2. Exit and return me to where I was prior to launching your Channel (E.g., Back button).

Some more specific information

  • RokuTVs may auto-power off after a certain amount of time of no user-activity.
  • Roku will launch a screensaver when there is no video playing and there is no user-activity.
  • Users can activate any of the following, which will immediately exit your Channel regardless of where the user was or what the user was doing:
    • Roku remote's Home button
    • Roku remote's Partner buttons (E.g., Netflix button)
    • Selection of any channel from Roku mobile app's My Channels
    • Selection of any Roku mobile app function that will take over the TV screen (E.g., Miracast, Play on Roku, selection of a movie trailer, etc.)
  • Users can take any explicit exits you offer through your Channel's own UI.
  • Users must also be able to implicitly signal a desire to exit your Channel via the Roku remote's Back button:
    • While Back is also a mechanism to navigate within your UI, there are specific conditions in which Back should exit
    • If users deep-link into your Channel, pressing Back could either exit your Channel back to the referring screen, or navigate them to your Home screen
    • From your Channel's home screen, pressing Back should either exit or offer a menu/opportunity for users to explicitly confirm and choose to exit
  • On occasion, it's quite possible that users may accidentally exit your channel. Hence, it's important for your Channel to save its state to make recovery easy for the returning user (E.g., Video-playback resume, recently watched, watchlist, etc.).

Settings

  • There are values within Roku's settings that should be queried and leveraged by your Channel. 
    • For example:
      • Closed Captions
      • Language/Localization

...

Star/Options button is a great button to reveal menus and popup dialogs with contextual options. However, there is a restriction for this button:

  • Within your Channel, during full screen video playback, pressing the Roku remote's Star/Option button will reveal a Roku popup dialog offering users various standardized options (E.g, Closed captioning, audio tracks).
    • This is necessary in part to comply with various regulations.
  • Do not design your Channel to use the Star/Option button during video playback.

Graphics

Channel Poster

The Channel Poster is the image shown on the Roku OS home screen when your channel is installed and is also used in your Channel Store listing displayed alongside the channel details.

Image Removed

Channel Splash Screen

Splash screens are full size graphics displayed while the channel is loading from the Roku OS home screen. It's the first visual viewers will see as a channel completes rendering.

Image Removed

Safe Zones

Preparing for how various TVs render your channel requires an understanding of Title and Action "Safe Zones". These are the recommended areas to ensuring the edges of your TV screen do not cut off the interface.

Image Removed

We've also created a sample channel that shows these safe zones in action.

Title Safe Zone

Keep text that you intend the audience to read within the Title Safe Zone - 80% scale of UI resolution

  • The FHD Title Safe Zone is 1534x866, offset from the upper left corner (0,0) by 192, 106.
  • The HD Title Safe Zone is 1022X578, offset from the upper left corner (0,0) by 128,70.
  • The SD Title Safe Zone is 576X384, offset from the upper left corner (0,0) by 72,48.

Action Safe Zone

Keep important visual elements within the Action Safe Zone, content outside the Action Safe Zone risks being cut off by the edge of the screen - 90% scale of UI resolution

  • The FHD Action safe zone is 1726x970, offset from the upper left corner (0,0) by 96, 53.
  • The HD Action safe zone is 1150X646, offset from the upper left corner (0,0) by 64,35.
  • The SD Action safe zone is 648X432, offset from the upper left corner (0,0) by 36,24.

Tool: Safe Zones Overlay

To help developers with testing their titles and action spaces, we've created a simple function that overlays these screens on their channel. Great for UX testing on FHD and HD.

You can find the project at https://github.com/rokudev/safe-zone-overlay

Performance and Presentation

Performance

Best PracticeRationale | Benefits
Optimize your channel code to provide smooth transitions and animationsJerky or blocky transitions erode the seamlessness of the Roku user experience and feel unfinished or “broken” to users.
Minimize perceived latency by providing active feedback during all operations that may take longer than a second to complete.Keeping users entertained and informed during routine time-intensive operations like video buffering and channel loading gives the illusion of added performance, and positively impacts users’ perception of channel quality.

Presentation

Best PracticeRationale | Benefits
Design your application to work in both 4:3 and 16:9 TV formats. Roku can scale HD applications for SD but expect some cropping to occur.Users select their display types using the Roku Settings menu, which includes only formats that their player model will support. Designing your application to work in SD and HD formats ensures that it can be optimally displayed on any Roku player.
Strive to provide graphics for every “thumbnail” and preview image in your channel.Content graphics help users make faster decisions around what to watch. They’re also visually interesting and fun to browse.
Ensure that all active UI has sufficient contrast to make it readable in sunny environments.Without sufficient contrast, users will have trouble correctly reading screens and using your channel. Most applicable to channels with custom UI.
Strive to push timely updates to your channel for any 2nd screen events that update user data: purchases, rentals, watch / history list updates, and so on.Data that is out of sync across screens confuses users and can erode trust in the system. Good synchronization is a nice touch that builds user trust in your channel.

Navigation

Best PracticeRationale | Benefits
Use the remote navigation buttons consistently within your channel.Channel-wide UI consistency helps provide a seamless, content-focused user experience
Respect platform conventions and assign remote navigation button behavior consistent with the Roku system UI wherever applicable.Again, system-wide UI consistency helps provide a seamless, content-focused user experience.
Strive for “minimum clicks to consumption”. Make it trivial for users to find and watch what they want.Users want to watch videos, not navigate the UI. Fast access to content delights users and increases time spent in a channel.

Content organization

Best PracticeRationale | Benefits
Provide audience-focused editorial categories, both automated (Top Stories, New This Week…) and curated (Critics’ Picks, Classics…) on or directly under your Channel Home.Catering to your users with content organized “their way” delights them, builds loyalty and increases use over time.
Don’t just imitate or force fit information architecture from any second screens your channel may utilize (e.g. Web, mobile…) Instead, optimize for the 10-foot “On Roku” consumption experience, including platform standards and design conventions, wherever possible.Content is king; finding, discovering, browsing and watching it should be as friction free as possible to give your channel’s users a Best On Roku experience.
Tag your content so that it will appear as appropriate during search, discovery, deep linking, and recommendation activities.Properly tagged content is able to be utilized in and out of your channel, not only for ease of discovery and location but also for alignment with user expectations. For example, if a user likes show X, Roku’s recommendation for “You might also like A, B and C” should be as accurate and relevant as possible.

User Engagement

Ad Experience

Best PracticeRationale | Benefits
When presenting mid-roll ads, strive to insert the ads into scene cuts rather than randomly.Seamless content presentation is as important as seamless UI navigation. A cut to commercial in the middle of a dialogue or a climactic scene disrupts the entertainment flow and annoys users.
Consider front-loading ads in pre roll to minimize interruption of videos.Fewer content interruptions mean happier users.
Consider not increasing the frequency of mid-roll ads as users progress through content.From a business perspective this policy makes sense. Users who have invested time and attention into a show are a more captive ad audience. More importantly, from a user perspective it is very intrusive and frustrating to see more and more ads as a story is reaching its conclusion. You will “win the battle, but lose the war” as users seek entertainment elsewhere.

In-app Purchasing

Best PracticeRationale | Benefits
Provide clear pricing for any and all purchase options prior to entering Purchase workflow.Simply put, users want to know prices before buying. Not providing this information will have a direct negative impact on sell-through.

Deep Linking

Best PracticeRationale | Benefits
Consider providing appropriate metadata to support deep linking (ads, Roku Search…)Deep linking gives users another way to discover your channel, increasing content consumption and time spent in your channel.
Best PracticeRationale | Benefits
Support incremental search (refresh results as characters are input)Incremental search is becoming a de facto standard - users expect to see results from partial searches without waiting. This behavior makes Search more efficient and reduces the friction between UI interaction and content consumption.
If your channel supports Search, provide one Search entry point in the Home screen of your channel and (optionally) one in the “global” section of your channel’s Options menus.To users, Search is not a channel specific behavior (though they may expect channel specific results). Making this consistent everywhere allows users to leverage learned behavior in your channel, again removing friction in regular use.

Settings and Options

Channel Settings

Best PracticeRationale | Benefits
If your channel supports Settings, it’s recommended to provide a single entry point in the Options dialog of your Home screen.Settings are rarely used, and do not belong in primary UI such as the Home screen of your channel.
If your channel supports Settings, follow the Roku platform model: a flat Settings screen with one click access to specific sub screens.Following the platform interaction model means that there is no need for users to learn additional layout or navigation behaviors.

Options menu(s)

Best PracticeRationale | Benefits
“Search (channel name)” is recommended as a global option if your channel supports in-app Search.Users may decide to find another piece of content at any time. Providing Search globally prevents users from having to navigate to a Search jumping-off point within your channel UI.
“(channel name) Home” is recommended as a global option.Users may want to restart their browsing, or locate a specific content item or category from memory, at any time. This option enables that behavior. Adding the channel name ensures that users do not confuse this option with the Roku Home screen.
Strive to limit the Options menu to no more than 4 local options and 2 global options.Stuffing the Option menu with too many choices slows down users’ interaction with your channel UI and goes against Roku’s core principle of simplicity. If you find that there are too many features in your Options menus, consider refactoring your channel’s UI or removing features not essential to your channel experience on the Roku platform.