Free Flicks. Smart TV & App UI Design Concept for Public Domain Movies.
By: Jasmine Harwood
Tags: Product Design, UX, Apps, UI Design, TV

Current Design Approaches & Guidelines

The Display

When designing for a Smart TV, it’s very important to take into account how information will be displayed on a screen. On all TVs, there is something called overscan that exists. This is where part of the TV picture is shown outside the screen boundary. To combat this, it is recommended to include a margin or a safe area. Apple recommend designing for a 1920 x 1080 pixel screen with a top and bottom margin of 60 pixels and 90 pixels on each side.

Navigation

The majority of Smart TVs are controlled with a remote, using a D-pad. This only allows users to navigate up, down, left or right. Due to this, most Smart TV interfaces follow a grid structure to ensure it’s quick and easy for users to navigate around this way. Apple also emphasise the use of consistent spacing between elements. Android go into detail regarding focused elements. They explain that there should always be an object in focus when navigating around the screen to ensure users know where they currently are. When an element is in focus it should be easy to recognise by using scale, shadow, brightness or opacity.

Many Smart TVs also offer voice input. Android suggest that voice input should be the default search method because it is the easiest way for a user to input queries. The Apple TV uses the Siri Remote which actually includes a voice control button to make this even easier for users.

Typography

Typography is very important when designing for TV. It is critical that users are able to read an interface when they are sat at a considerable distance away from the televison. A common recommendation is to design the TV interface to ensure it is legible from 10 feet away. Apple have a chart which defines recommended sizes for titles, headlines, subtitles and captions.

Apple TV Typography Guidelines

Android also have a set of typography guidelines for their Smart TVs, however these appear to be much smaller than the recommendations set out by Apple.

Android TV Typography Guidelines

Colour

When designing an interface for a Smart TV on a computer, there will be a variety of colours available. However, these colours don’t always translate properly to the TV screen. There are so many variances in colour depending on the TV manufacturer, brightness and/or display settings. Android recommend using colours from the 700–900 range of the colour palette which are much darker and easier on the eyes. It is often recommended to avoid using pure white as this is too bright for users.

Android Colour Palette Example

Apple don’t recommend any specific colour choices, however they do stress the importance of contrast. Contrast is especially important in ensuring content is legible and also to make the interface accessible for colourblind users.

Prototyping

There are a variety of prototyping techniques available which enable us to test and further develop a concept. These range from wireframes, storyboards, role-playing and physical mock-ups to creating prototypes out of lego. Each technique serves a different purpose therefore the technique you decide to use depends on what you’d like to achieve from the prototype. When I create my Smart TV player interface and corresponding tablet app, I will be using user personas, wireframing and flow charts. Here’s why:

A user persona is a fictional person, often based on research, which represents a certain type of user that may use your product or service. They enable you to understand user goals and frustrations, and solutions to these frustrations which in turn helps you create a good user experience.

Wireframing is also referred to as low-fidelity prototyping or sketching. It lays out the framework, content and core functions of a design. It is a free, easy and quick technique which allows early insight into the design and any issues there may be with usability.

Flow charts describe the user flow. This is the steps a user takes to allow them to complete a goal or task. They are often based on user personas and enable you to determine how a particular user might navigate around your site or interface. This is particularly useful in ensuring user needs are met.

Although pen and paper is always an option, there are a variety of other tools available to carry out these techniques including Invision, Figma, Adobe XD, Sketch, Webflow and Justinmind. These tools will be especially helpful when it comes to creating the final high fidelity clickable prototype. For this project, I will be using Figma. For a long time the most popular design tool appeared to be Sketch. However, after a bit of research, it appears many people are switching over to Figma. Holly Sunderland explains how the prototyping options in Figma are what convinced her to switch over from Sketch.

Figma offers a variety of prototyping features that these other tools do not. These include the ability to place overlays, horizontal and vertical scrolling, click or hover triggers, interesting transitions and also the ability to duplicate files whilst keeping the same linked up transitions. On top of this, Figma is free! As I am looking to create a clickable prototype for my Smart TV player and app, it makes sense to use the prototyping tool with the best features to ensure I get the best results.