User experience is how a user feels when using a system – a website, mobile application, desktop software, or basically any conceivable interface people interact with. It’s multi-faceted and quite hard to grasp, yet critical for the app’s success.

We don’t fully acknowledge the impact of user experience until it’s so bad you notice something’s wrong. As users, we often take user experience for granted, but its importance in the design process cannot be overestimated. The positive impression of user interfaces may be pretty intangible, but it’s essentially what makes users stick to the app or website, continue using a service, or recommend it to others.

The birth of TV user experience

While the traditional cable TV is on the decline, television is by no means dead – it’s just evolving to embrace new trends and emerging technologies like advanced TV. Slowly but steadily, TVs are on their way to becoming the preferred hardware platforms running interfaces. And they are governed by the same usability rules as the whole internet. However, perhaps even more so that in the case of web interfaces, TV apps call for the sleekest and fluid user experiences, supporting the publishers in their fight for dominance.

The primary purpose of the TV user interface should be to enable users to watch the TV programs that they want. In this article we discuss the key principles that apply in the user experience in TV apps: browsing, locating, and accessing shows.

The challenges of designing for TV

The experience of watching TV has to evoke positive emotions by offering users frictionless interaction, providing quick and smooth access to their preferred content. But designing such a positive experience may be exceptionally difficult in the case of TV interfaces. This stems from a couple of technical limitations and challenges typical for TV:

  • Remote controls are very simple input devices. This means that, if possible, it’s best to avoid asking users to type any passwords or usernames, or search queries.
  • There is a lack of industry-wide standards for remote controls (e.g. button layout and naming vary from device to device). Don’t assume a Sony remote has the “back” button in the same place as an LG one.
  • TV screens are usually very big, but may come in smaller sizes too. This requires designing properly sized UI elements and fonts. Also, TV is often watched from a distance.

Good user experience requires careful consideration of the above idiosyncrasies, and understanding of all the restrictions they impose on the design process of TV apps.

The Home Screen

The app’s home screen puts the most interesting and up-to-date information in one place: new episodes, recently watched shows and recommendations are based on user’s previously watched content. The home screen has to be welcoming, intuitive, fast, and must ensure quick onboarding by following the expected navigation patterns users may know from other, similar applications.

Because the home screen’s real estate is pretty limited (and the amount of new content grows exponentially), it takes a good recommendation engine to display just the right shows the user might be interested in. From there, they must be allowed to start watching, the very moment they see the thumbnail.

Netflix does an extraordinary job here. Its users certainly recommend new shows to others offline, but they also discover new shows through platform’s own recommendation system. And it goes without saying that recommending bad shows can sabotage the user’s loyalty.

To boost its recommendations, Netflix applies its AI and machine learning wizardry. The engine’s algorithm uses a combination of implicit and explicit data. “Explicit data’’ is what the user explicitly marks as “interesting” – by liking or adding to “watch later”. Majority of the recommendations are based on implicit data, i.e. inferred from the user’s behavior.

Navigation

Good navigation is crucial in TV platforms. But because typing on a remote is usually a gruelling experience, good design should go all lengths to save users the trouble.

Good TV app interfaces are typically restricted to navigation using the “cross” and “OK button” of the remote, or use voice control. But remotes have many buttons, why not use more of them? The answer is relatively simple. There are multiple brands producing TV’s, and the remotes come in all shapes and sizes. They are rarely compatible and don’t speak the same design language.

But the cross is pretty much the staple, the lingua franca of user interaction used across every TV model. It is also the cornerstone of navigation in any TV app. All TV interfaces must be built around it and follow similar patterns to enable users frictionless navigation.

Lack of touch and the importance of focus

At the same time, TV users are devoid of the most intuitive means of interaction – touch.

This also determines the way TV interfaces are crafted. One of the indispensable elements of design is the focus state – i.e. a way of indicating which element is selected.

Focus state is very important for smart TV platforms as there is no mouse pointer or touch interaction to simply tap the desired item. Focus state can take multiple forms:

  1. A color frame around the selected object
  2. Important elements of the interface should be placed in the center so the viewer doesn’t have to navigate to reach them
  3. Focus and highlight of the selected object
  4. Change of selected elements of the interface

Focus state helps users find their way around the interface and understand what action will be performed upon clicking the “OK” button.

Font size

TV apps have to be designed to allow legibility and comfortable interaction from the other end of the room, i.e. typically from about three meters away. The distance at which we watch TV screens determines the size of the fonts used on the screen. This may have an impact on how much content and description can be displayed on the TV.

Simply put, font sizes on TV screens, according to TopTal’s Pascal Potvin, should not be smaller than 18px for nonessential labels, and for all the important elements of the interface be no less than 24 pts.

Overscan and interlace

In the CRT-era television overscan was a way to ensure that images consistently fill up all the available space of the screen. For some obscure reasons, however, this practice persists today to adapt the non-standard content formats. Specific TV’s “bleed” content outside the screen to make it look better and fill up the entire screen.

While the benefit in the form of elimination of black strips may appeal to some, the payoff here is that putting UI elements too close to the edges may put them at risk of being chopped-off on some TV sets.

Apple TV interface keeps a safe distance from the edges

Good practice tells that designers should “stay away” from the edges. Apple TV, for example, reserves a buffer zone of 60 pixels from the top and bottom, and 90 pixels on either side of the screen. No interface elements are placed there for consistency.

When designing TV user interfaces, it is important to consider the display technology. Interlaced scan line are another good example here – because some of the older TVs display interlaced image. This means that drawing a one-pixel thin line may result in unpleasant flickering, and damage the user experience.

Color

When designing for TV’s, you have to pay special attention to the technical characteristics of the screens. This is particularly important in terms of color. TV screens are usually brighter than computer screens, which may make the experience of watching white-ish interfaces extremely hard on the eyes, especially in a dark room.

Because people often watch television in the dark, pure white or intense, saturated colors can cause flickering a “halo” effect around other, darker elements.

Television is all about entertainment

People turn on TVs primarily to relax and forget about the hardships of the day. This should be reflected in the interface – quick onboarding, and spot-on recommendations. On the visual end, great user experience involves pleasant colors, smooth transitions, subtle parallax effects and beautiful textures. Simply anything that eliminates distraction, and creates a pleasant environment helping to get straight to the content the user would like to watch.

Navigating the home screen and finding interesting content should require as little typing as possible. This may necessitate a very good recommendation system to be in place. The faster the user can find the content relevant to them, the better the overall experience of watching TV.

Last words

Content is no doubt the most important draw of each OTT platform. But designing an app that’s easy to use and pleasant to navigate is instrumental in helping the content reach its full potential and reach the right amount of eyeballs.

While advertising and content attract people to install an app, it’s the role of UI/UX to keep users subscribing to the platform.