Designing SmartTV applications: things to account for
While the whole world has figured out how to design and develop applications for the web, smartphones and even desktops… SmartTV is a relatively unknown field for many people out there. And as with every platform, there are certain things you have to account for when designing a friendly UI or figuring out the UX, for SmartTV apps. This blog should give you some starter points when you move over from the web and mobile when dipping your toes into the world of big-screen.
A static viewport
Contrary to designing for mobile and web, SmartTVs don’t actually require a responsive UI at all. The screen sizes for TVs are relatively set in stone, with the large majority of them simply sporting a 16 by 9 shape. This means that for your UI designs, you’ll roughly have to account for the following resolutions:
- 1280x720 (HD)
- 1920x1080 (Full HD)
- 3840x2160 (Ultra HD)
Funny though, designing for a single one of those resolutions is actually enough. In many cases (at the time of writing) SmartTVs actually don’t support applications rendered in UHD resolution and rather rely on FHD apps. Additionally, it’s very easy to calculate sizes from one resolution to another. Going from 1280x720 to 1920x1080 is a conversion of 1 to 1.5; with 1920x1080 to 3840x2160 being a conversion of 1 to 2.
Taking all that into account, designing your UI in a static 1920x1080 resolution is the safest bet; it’ll cover the majority of TV platforms and always allows room for conversion to be done by developers when needed. Yes, pages can of course scroll up, down, left, and right, but for key elements like a menu, video player and hero carousels, ensure they are fully visible in the 1920x1080 viewport.
Viewing distance
Have you ever seen anyone with a television in their hand? ;) The way we use TVs is significantly different from the way we use smartphones as well as laptops. While our personal handhelds are often very close to our eyes, the same cannot be said about TVs. They are sitting at the centre of our living rooms, often far away from the comfy couch we are sitting on. The logical effect of this is that elements on the screen need to be big enough to be comfortably read by the user.
Translating that into a user design, you’ll need to be careful with the font sizes, image sizes and iconography. Ensuring that icons don’t contain too many small doo-dads, fonts are large enough to be comfortably read, and images are clear enough to be seen from a distance — it’s all important when designing your UI.
Speaking specifically of fonts, Samsung has a very interesting overview of what they recommend for different use cases. The smallest font size they even recommend is 20 pixels, which is already considered large for mobile — to put it into perspective. Referring to the table from Samsung below should provide some useful insights.
Accounting for remote control
The biggest difference between handheld devices like phones, and TVs, is obviously the fact that TVs are controlled by a TV remote. Rather than being able to scroll by hand, users have to press the up, down, left, and right keys in order to navigate across the screen (these buttons are often referred to as the ‘D(irectional)-Pad’). That means your UI and UX have to account for navigating on the screen with those buttons.
There are many ways to account for directional navigation, but in principle, it’s best to rely on a few specific components that make up your UI. Similar to most apps for TV, that means using vertical and horizontal lists (also referred to as rows, carousels or swim lanes), grids and generic buttons. Let me show you a few examples from the Youtube SmartTV app, to understand how those can be used for your UI.
As you can see in the images above, the Youtube app uses a combination of those very core elements to build up its pages. And if you decide to scroll around some pages yourself, you’ll notice that they apply this principle across the entire app. It ensures the user can access the content in a concise and simple way; without too much hassle with the D-Pad.
Smaller tips and tricks
The above information should give you a great starting point for designing your UI and UX for SmartTV. There are however always some smaller topics to take into account, where it may depend on the type and brand of device you might want to support. So here are some smaller tips and tricks that might help you out in certain situations:
- Certain TVs require a safe margin (or safe area) around the app, where no element is placed. In the case of LG for example, they recommend not to place any elements within the first 20 pixels from the edges of the screen.
- The majority of TVs rely on the D-Pad for navigation. However, there are certain devices that have and actually require support for mouse interactions. That means you’ll have to think of how to handle hovering over items or dragging a video progress bar across the screen, for example.
- Not all TV remotes have a back button! Placing a back button somewhere in the UI to ensure your users can navigate back and forth between pages, is for that reason very important.
- Similarly, not all TV remotes have buttons to control playing, pausing or fast-forwarding and rewinding of video content. Ensuring there is a way to manipulate playback from the screen is another way to ensure users can interact with your app in the way they want.
Keep it simple!
Lastly, I want to give you a recommendation that has really helped me with the TV applications I’ve worked on. Keep it simple! Televisions are magnificent beasts, but they sadly often lack the power to really take applications to the next level. That means keeping animations to a minimum, and using shadows and gradients sparingly; even reducing the number of items on screen can have a major effect on the performance of the application. After all, your users want a nicely working app that doesn’t halt and stutter every time they try to navigate across the screen. Performance is key, which sometimes means having to accept not all the nice design elements you expect on the web or mobile are possible on SmartTVs.
Concluding
Designing for TV comes with many different topics and points you’ll have to account for. Whether it’s managing the different resolutions, ensuring users can navigate across the screen with the TV remote, or how big and small your font sizes can be — many things work differently compared to mobile and web. But that’s also part of the fun! Not many people have ventured into designing for TV apps, so if you do, it’ll be a nice change of pace compared to your potential normal design work.
I hope this blog has helped you gain some insights into things you might need to account for with your TV app design. I do also understand you might need some more insights or help! So if you do, feel free to email me at matthijs.langendijk@wearetriple.com, or message me on LinkedIn.
Thanks for reading!
Want to read more?
