Remote controlled experiences

Users often prefer to watch content on a big screen, especially Live sports and other big events. If you include TVs in your lineup, you can reach a far bigger audience, and TV consumers tend to stay longer with the content than mobile and web.

Reach smart TVs, streaming boxes and streaming sticks

Ease Live uses web technology, and can reach most TV-platforms built on that technology. Just install our SDK for your specific platform(s), and you can start to use Ease Live for TV.

Supported platforms

• Smart TVs with Android TV
• Android TV STBs
• Fire TV 4K Stick
• Fire TV 4K Max Stick
• Fire TV Cube
• Apple TV
• Roku

Coming up

• Samsung Tizen TVs
• LG TVs

Core concepts

Designing for remote controlled experiences differs from mobile and web in a few key areas. Mobile and web UIs rely on the user observing the screen, finding navigational elements like buttons, and then clicking or tapping these interactive elements. With a remote controlled UI on the other hand, the user moves a selector around the screen to interactive elements, and then tapping OK on the remote to activate.

With mobile and web it is really easy to select items on different parts of the screen quickly, while with remote control you need to actually move a selector across the screen, making it a slower experience. You should take these differences into consideration when you create TV experiences.

You build remote controlled UIs in Ease Live Studio in the same way you build for mobile devices and web, but there are a few features you need to familiarize yourself with...

Focusable items

A focusable item is a element in EL Studio that can be selected by the remote control. This element will know when it is selected and not, and as a designer you can decide what this element should look like when it is seleced and not. Typical indicators for selection are change of background color, outline around the element etc. You can also add animations when the element is turned on or off.

Components

You cannot set up any visual element in EL Studio to be focusable - For an element to support focus you need to set it up as a component. Click here for an introduction to components. When you have created a component, you can set the component to "focusable: Yes" - From now on this component can be navigated to and triggered by remote control.

Focus and blur

A component that is selected need to "light up", so that the user, with little effort, can keep track of where it is on the screen. This is where the Focus and Blur animations come into play. Every focusable component gets two animation types added: Focus and Blur. The focus animation is triggered when the components receive focus, and the blur animation is triggered when the component looses it's focus.

Lists

You can navigate lists in the same way as components, since lists consists of multiple components. Focus and blur animations are defined in the list component source. Navigating between list components is handled automatically.

Navigating in a scene

Scenes are the main building blocks of Ease Live, and often a user will navigate between focusable components within a scene.

Ease Live Studio has logic to figure out where the next (up, down, left right) button press should take you based on the position of the components in the scene. If this logic does not work as expected, it is also possible to override where each button is supposed to take you.

Starting focus

Ease Live assumes the first focusable component in the layer tree should have focus when the scene opens. This can be overridden on scene level.

Performance

There are lot's of different smart TVs, streaming boxes and streaming sticks out there, both old and new. If you compare the price for streaming devices like a Fire TV with mobile phones, you will notice big price differences. Streaming devices and Smart TVs have cheaper components and lower performance than Smart Phones, and it is important to take this into account when designing a TV UI.