In the summer of 2022, a client came to us with an idea to make a cross-platform IPTV cinema for the European audience. They wanted us to develop a mobile app, its web version, and most importantly, a smart TV app. It was our first project developing a design for TV operating systems. In this article, we will tell you how we managed this, what we read, and what hidden pitfalls we faced.
What IPTV is
For a start, let’s give some context. To get the idea of our app, you need to know the conditions in which Europeans consume TV content.
In Europe, subscriptions to TV services cost quite a lot. On average, the Europeans spend about €130 per month on them. About €30 from this sum goes to streaming services. Impressive, isn’t it?
Also, Europe has strict rules regarding copyright violation. There you can’t just watch a movie without paying for it. For example, watching some pirated series in Germany results in a €155-1000 fine. Even minor viewers are not an exception — they get fined as well.
One of the ways to save money on content without risking getting punished for piracy is to turn to IPTV playlist resellers.
IPTV is a type of Internet TV. The content is broadcasted via an isolated IP network. For it to work, a user must upload a playlist with links to the content.
Resellers distribute such playlists. They sell access not to the entire service, but to specific series, movies, broadcasts, or radio shows.
IPTV playlists are text files with links, and our app was supposed to pack them in a format resembling an online cinema. Users get a playlist, upload it right into the app, and get a nice UI with a functional video player instead of an illegible chaotic text. All these manipulations should be available on various devices including a smart TV.
What they write about TV app design
The Internet does not provide many articles and guides on apps for TV platforms. There were even fewer information sources when we started working on the project.
The official guides from the major smart TV producers came to our rescue then. See links to them at the end of the article.
As we had an Apple TV console in our office, we started developing an app for the tvOS, so that we could test updates right away. However, our app was supposed to work on various TV operating systems: Tizen, WebOS, and Android TV. That’s why we additionally studied guidelines from Samsung and LG.
We summed up the UI design principles we studied for the project and added a few of the less obvious insights from our practice. This is how we got the seven-point list below.
1. A UI must be readable at 3-3,5 meters
The distance between a viewer and a TV is far longer than you might think. On average, it equals three meters, but usually we lean back into the backrest or, sometimes, can keep watching while moving around the room. So, the distance gets longer.
Although TV screens are much larger than PC and smartphone monitors, some UI elements can be illegible at a distance. This mainly impacts our perception of texts, navigation icons, and marks.
This is why all the UI elements must be big enough for a user to be able to see them from afar. It’s particularly important in the case of the elements users must interact with.
Typical TV time conditions
To make a TV app’s UI big enough, start testing your design on devices as early as possible
When we were making mockups on small Figma Frames, it was challenging to understand the scale of a TV picture. Our team got used to working with desktop and smartphone screens — we had no experience with 50-inch TVs.
At the stage of the first tests, we understood that the typefaces we found big enough were hardly readable on a big device. Due to the early compilation and close cooperation with the development team, we noticed the mistake on time and corrected everything.
IPTV playlists contain no covers, trailers, or descriptions. The app finds the additional information and uploads it to the related card itself. This makes it easier for a user to find a movie to their liking
2. Use vivid focus state
The state of the focus element indicates the user’s current location on the screen. This can be a bright stroke, fluorescence, scaling up an object, and dimming or blurring the rest of the UI. Though focus is often used on other devices, it must be especially vivid on a TV screen because of its size.
The focus state is the most crucial part of TV UIs. It is mentioned in all the guidelines without exceptions.
The right focus emphasizes an object even at a long distance and helps users know where they are
In one of the guides, we read that it’s better to make a focus by increasing a preview and adding a shade. It turned out that this approach doesn’t work with a dark background — a viewer can’t see a shade, the fluorescence is hardly perceptible, and scaling up alone is not enough to emphasize content distinctly. Then, we added a contrasting stroke for all the cards with previews — it was a perfect solution.
Focus on a card — we scaled up the preview and added a contrasting stroke with fluorescence
3. Project navigation for a remote control
A remote control is the main way to manage a device, but its capabilities are utterly restricted. We must use this fact as a basis when building the entire navigation logic in the TV app.
As a rule, the navigation via remote control is managed with these elements: vertical and horizontal navigation, return, and exit. Sometimes, a cursor, touchpad, and voice input are added, but not all devices have them.
Navigation must be simple and predictable to make it easy for a user to find their way through the app even with a simple remote control. For this reason, all the smart TV content is usually laid out on a strict rectangular grid.
A standard remote control lets users navigate in four directions, which is why, diagonal content movement can bewilder users
💡If your app has features with complex control, you can cheat and transfer navigation to a smartphone or desktop
In our case, it was impossible to manage without additional devices since IPTV apps are more complex than usual streaming services. As mentioned, for our app to work, a user needs to upload a list with content links there. Trying to manage this with a five-button remote control would be a true challenge. We decided to solve this problem by linking all the devices into a single system. This way, if we change a playlist on our phone, it automatically updates on the TV.
4. Simplify app logics
A man in front of a TV wants to lean back and relax, not read a guide for the app users. Complex screen mockups and control elements with unclear functions confuse users. This is why a TV app UI must be user-friendly and have clear and accessible functions with minimum navigation across different levels.
A simple structure and minimalism: a clear UI is a must for any device, but it’s especially crucial on a TV screen
5. Dark theme only
A dark theme in a TV app is not an extra feature but a necessity. Users often watch movies and series in dark rooms, and the shows themselves can be gloomy. A light UI is going to burn users’ eyes in such conditions. Trust us, we checked this.
We selected a dark palette for the main theme and used purple and coral red accents for buttons and icons
6. Add a few user roles with different access options
Don’t forget that TV attracts quite a few people. Often, they are family members with different interests and likings. If an app contains a user’s personal info, it must be hidden on the initial screens.
For this same reason, users must be able to create their own profiles and switch between them quickly.
Quick profile change in the Netflix app
7. Check your design on TVs of different years, price ranges, and screen sizes
In their guidelines, the major producers prefer to show the most recent models. But people don’t buy a new TV every two or three years like they do with smartphones. Some devices your users may have can be considered outdated.
We noticed a UI peculiarity typical for old TVs. The colored stroke looked good on big objects like movie previews, but the graphic quality got much worse for small buttons and tags. It’s better to change their colors in the focus state entirely.
Focus on the Favourites button — we highlighted it with a contrasting red color for it to be visible on the old TV models
Useful links
At the end of the article, we want to share a few useful links. We provided links to the guidelines we mentioned and added checklists from the same companies. They list what an app must contain to be published in stores.
Checklists are good as they include small but important points that can be easily forgotten at the design stage. For example, they mention covers for the absent content. We didn’t know about it and initially got a black screen in the tab for TV channels. An app will not enter a store with those mistakes, so it’s a great idea to check your app against such lists to make sure everything is taken into consideration.
- Apple guideline
- Samsung guideline
- LG guideline
- Samsung checklist
- LG checklist
- Kind of an Apple checklist
