Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Note
Note: These guidelines outline best practices for partner channel design on the Roku platform from the user experience perspective

...

Note
Note: These practices are guidelines, , but are not requirements. While channels that do not implement all best practices may still be deployed on the Roku platform, the experience for users 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 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 Apps)?
    • 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


  • What do I do now?
  • How do I do it?
  • Where am I?
  • Where is that?
  • How do I get there?

...

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:

...

    • Within Roku's Channel Store, be sure to offer a great summary, description, clear pricing, and a variety of screenshots.
    • Screenshots should show all aspects of your channel: home screen, content browsing, content details page, as well as the video playback with transport controls visible.
    • When creating an ad, follow Roku's Ad Guidelines to make big beautiful content images with minimal text and standard call-to-action.
    • Expose your Channel as much as possible by offering as many doorways from Roku's main UI to your Channel (E.g., Search, My Feed, Ads, etc.).
    • When running on-device promotional ads, ensure that you use relevant targeting to show the right promotional ad to the right user.
    • Use Roku Marketing Framework (RMF) to collect in-app event data and target users who did not engage with your app through promotional ads on the device. Contact dlaudiencedevelopment@roku.com for more information. 
    • Ready to promote your channel now? Visit http://selfserve.roku.com to get started.

7. Try before you buy

    • For Channels requiring payment or purchase, at minimum, you have to let users browse your content in front of the paywall so users can see or sample what they will get for their money.
    • Ideally offer a free trial, UI and content browsing, or some free content. The best way to convince users into a free trial is to let them explore, learn about and watch your content. 

...

    • 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:

4-way Directional Pad (dPad)

  • While on a standard UI screen:
    • 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.
  • During video playback:
    • dPad left/right: Pauses the video, reveals a horizontal row of BIFs or video key-frames, and users can navigate backwards/left and forward/right through the video via these key-frames: 

       

    • A single dPad pressed for left or right moves 1 key-frame in the corresponding direction. Continual press and hold of the left/right key scrolls horizontally through the row of key-frames. Pressing OK or Play/Pause resumes video playback from the key-frame in focus.
    • dPad up/down: Some Channels with playlists use up/down key to navigate to the previous or the next video.

...

  • 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:

...

  • 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


Users experience your Channel within the Roku UI experience. Creating a level of harmony between these two linked spaces will benefit the user. Below is a list of considerations.

...