How to successfully design UI/UX for Smart TV apps

Designing Smart TV apps is a different and unique world

Desktop and mobile environments (browsers and app ecosystems) have matured and stabilized so that designers can rely on common conventions and techniques. This is not yet the case in the diverse Smart TV world. Even if you understand the limitations and basic design principles for TV screens, there are many other aspects you must consider.

As our Smart TV development expert Tommi Järvinen emphasizes in his blog post, apps designed for TV are mostly multiplatform applications that use common application code (HTML5, Javascript, CSS3) for different TV models and operating systems. Unfortunately, especially older TV models have limitations and even bugs that limit the possibilities for designing the user interfaces. For example, CSS-support for animation capabilities, transparency, transitions and performance vary quite a lot. Designing is more fixed to common resolutions and not responsive, but the designer must still consider things such as safe areas, different viewing environment, response times, focus states, etc. – Televisions are not like tablets and phones. Before designing, the supported models and platforms must be decided and that is the base for the choices in the UI design. Native Smart TV apps are one thing, but designing universal hybrid TV applications (HbbTV) has even more limitations.

Previously, different manufacturers had common buttons like color buttons in their remotes. Over the years manufacturers have evolved their remote controls in different directions, and as a designer, you must consider these variations. For example, Samsung has a minimal remote without direct access to color buttons and LG has a mandatory requirement for a mouse/pointer navigation support.

Deep knowledge, experience and a comprehensive testing environment are crucial factors to a successful project

In our experience, in Smart TV development projects, the designer doesn’t often have experience in the specific environment and actual devices. The prototypes are usually designed and previewed with a fast desktop PC with a high resolution, extensive color support and unfortunately a keyboard as the input device. As a result, the developers are forced to use lot of extra time solving previously mentioned limitations and problems in older models. They also have to excessively iterate with the designers and explain why something can’t be done or will not function properly in some devices. The process is much more fluent and less error prone if the designer has the needed knowledge right from the start and can make design decisions directly with the developers.

Testing, testing, testing

A good user experience can’t be ensured without an extensive test laboratory that has all the TV models selected to be supported in the project. Using emulators is not a sufficient way to test the applications. The actual devices still have a lot of differences to emulators, especially regarding performance.
Sofia Digital has a comprehensive Smart TV test laboratory with over 200 different devices, with industry leading in-house testing tools and professionals with over 20 years of experience in TV product and application testing. Read more about testing here.

Sofia Digital to the rescue

Sofia Digital has noticed the increased demand for specialized UX/UI design services. To serve our clients better, we have strengthened our design forces by welcoming back Janne Riihimäki as Sofia Digital’s Director of Service Design. Janne started his career in the interactive television field over 20 years ago at Sofia Digital and he has years of experience designing TV, mobile and web apps. He is responsible for leading and developing Sofia Digital’s UX design capability and making sure that Sofia Digital’s customers can avoid the pitfalls described in this article.

Sofia Digital can design and test applications as a whole or support and consult your designers to achieve the best results. Contact us to know more.

Read also

Designing Multiplatform Smart TV Applications by Tommi Järvinen

How to build your first Smart TV-application by Janne Lahtela