How to make a Roku app that looks good

Given that 1 in 8 smart TVs in the US runs Roku OS, Roku is a great way to generate massive reach in the streaming market. It is one of the most popular streaming media players with roughly 14 million monthly active accounts. The Roku Ultra set-top box, a device that connects to the home network for Internet access and convert video from providers into TV signals, tops the list of overall streaming media players on Tom’s Guide as one of the few media players on the market that will let you watch Netflix, YouTube, Amazon Video and more in full 4K resolution with support for HDR color. Bringing a product to Roku can be a great decision, but it’s important for designers to keep pushing the platform’s UI limitations to make great TV experiences.

The operating system is not ideal as a TV interface. This is less of an issue for streaming set top boxes than TVs running Roku’s OS. When you turn on the TV, it defaults to the Roku home screen, not live TV as most sets do. Once you’re logged in, the TV updates its apps automatically, which can often be a lengthy process. To watch any content, you have to navigate to the appropriate app — a long scrolling grid of channels on the right side of the screen.

The majority of TV UIs are controlled by a D-pad, short for directional pad, limiting navigation to the four directions: up, down, left, and right. Grids become a natural UI structure for TV apps because of this limitation in navigation and force designers to be even more intentional with placing calls to action and layout of content. Long vertical blocks of content that you can’t select, say like a long block of text, doesn’t work well. Consider how you might not be able to ’scroll’ through it and how putting a selectable element at the bottom of it will make the navigation jumpy or inaccessible.

Limitations aside, platforms like tvOS, Android and Samsung TV face the same issues as Roku but haven’t allowed their UI to become dated. Here are some tips on creating a Roku app without forsaking quality UI:

  • Launch users straight into content upon entering an channel. This functionality requires practically no UI at all and gives the most similar experience to watching live TV. Streaming content inside controls on focus (like live tv channels) allows users to make informed choices and bridges expectations.
  • Utilize big and beautiful content as the center of the TV interface while designing for distance. The viewing distance for TV is much different than that of websites, tablets, and phones.
  • Don’t be confined by Roku’s default UI. Elements like the information tool tip will keep the UI looking outdated no matter how flashy your design is. This is a great opportunity to break away from the platform’s default UI and breathe new life into your Roku channel. Display only the most important text on each screen, like the title, and save the rest for a detail view.
  • It is paramount when designing for TV to keep default actions within one or two clicks. Every part of the experience should be simplified, due to the limitations in navigation. Reducing the number of calls to action can drive interaction to core functionality and keep the experience straightforward.
  • Since Roku is limited in that there are no shapes, no gradients, and limited app (or channel) size out of the box, NinePatchDrawable are scalable graphics that you can utilize to create such elements. Most commonly, Android uses these to automatically resize elements to accommodate the contents of the view. An example use of a NinePatch is the background of a button — buttons often grow to accommodate strings of various lengths. Using NinePatches when developing for Roku gives variable sized buttons, shadows, gradients, and shapes all working within Roku’s 4MB file size limit.
  • Don’t let limitations hinder you. There are many things that can be done to add delight to the experience of using an app like scroll animations, parallaxing content, and flawless timing on fading content, for example, shelves dropping away to reveal a fullscreen live player after inactivity.

Not only is there more television being produced than ever before, but we also have seemingly endless choice in how we watch our favorite shows. Like most things today, we can access these shows anytime and anywhere through our computers, tablets and phones. Nevertheless, TVs are still a mainstay in the homes of many. With services like Sling offering A La Carte channel subscriptions, the popularity of media streaming devices will undoubtedly continue. Remember that in comparison to computers mobile phones, designing UIs for TV is relatively new and fundamentally different. It is important for designers and product owners to keep pushing UI for TV to ensure users are getting the best experience possible.