Designing & Developing Apps For Smart TV: Top 3 Tips

Yesterday we looked at the importance of planning and how to plan for success when developing apps for smart tv. We’ve dissected the smart tv app development process into 5 discrete stages, much like an mobile app development project. The stages are planning, design, development, testing and deployment. Yesterday we discovered that when planning for success in smart tv app development projects, there are some key considerations to take into account. You have to think about the user interface, browser/CPU capabilities and ensure you have a thorough pre-production plan in place before you start developing your smart tv app.

Today’s blog focuses on the importance of design when developing smart tv apps. Again, we’ve spoken to our resident smart tv app development specialists to get the lowdown on how to design and develop awesome smart tv apps. Here are our top 3 tips:

1.) Know Your Interface

Smart tv apps are HTML5. This means that you’re effectively designing a fluid user interface using web technology. Except the device you’re designing for is very different to what your average web technologist would be used to. Designing apps for smart tv requires an intricate knowledge of web technology and the ability to utilise these skills in a different way from the expected norm.

– You have to understand the constraints and limitations of the environment. Remember to use 1280 x 720 resolution. The average smart tv CPU cannot handle 1080p.

– Consider ‘overscan’. This refers to the area around the edge of the screen that may or may not be visible. This is a bit like ‘bleed’ when designing for print.

– Understand the SDK you’re working with and read all the documentation. The smart tv alliance specifies minimum text heights, button sizes etc.

2.) Be Aware You’re Not Designing For Mobile

Designing apps for smart tv differs hugely from designing apps for mobile. We’ve been developing web technology and mobile apps for over a decade, so it was important to understand the differences associated with smart tv. We touched upon this point yesterday, but it’s so important to remember that the user is sat at distance to the interface you’re designing. With UI design for mobile or web, the user is sat at arm’s length from the device. With smart tv that distance could be anywhere between 5 to 50 feet depending on the size of the living room. In addition, smart tv’s can range in size between 32” and 65” so there is a huge difference in screen ‘real estate’ size.

It’s always a good idea to test your designs on a real device before you start developing. What looks great on your monitor during development may look awful when you actually run it via a smart tv. You do not want to reach the end of your smart tv app development cycle having not tested on a real device. Run your design through a real smart tv, go out and invest in the right equipment. Once your design is up and running on the device, sit well back and see how it looks. Ask your colleagues to check it out and gather as much unbiased feedback as humanly possible. You’ll also find the colour rendering characteristics of smart tv’s differ hugely from traditional monitors and mobiles. Smart tv displays are brighter, more intense and less subtle. Again this underpins the fundamental importance of testing on a real device.

3.) You Need To Consider The Remote Control

The good old remote control. Think about it. The design of the remote control as we know it has not really changed in over 30 years. Too many buttons and difficult for grandma to use are common complaints. The design of the modern remote control is actually the antithesis of what Apple stood for when designing their own products and services. Anyway, let’s not digress. When designing your smart tv app interface, consider every gesture from the user input perspective. Remote controls for smart tv’s only have certain functions. You can move up, down, left and right. You can press enter. Already the constraints of your design hypothesis should be clear.

Different devices and smart tv’s will have different remote controls. Do your homework and understand which devices offer which remote controls. Learn about the remote control and understand the buttons that are available and the limitations and opportunities this creates when designing your smart tv app. Some smart tv’s use a ‘wand’ not dissimilar to what you’d find with a Nintendo Wii. Check if the device you’re developing for has motion control and factor this into your plans at design phase. The older remote control systems (and some of the new ones) are very poorly designed with too many small and fiddly buttons that never even get used. Consider this carefully when designing apps for smart tv.

Smart TV App Development v’s Mobile App Development

When you’re developing apps for mobile you have a few advantages compared to smart tv. Firstly you always have the device in your pocket. You also have millions of apps to use as a source of inspiration. The market for smart tv apps is less mature and there are far fewer apps. There are even fewer apps of exceptionally high quality but this is where the opportunity lies with budding developers. Our biggest piece of advice when designing or developing apps for smart tv is not to rely solely on the emulator for design and development. Test on a real device or you’ll end up with something that functions correctly but actually runs and feels like a pig. A very slow, difficult to use pig.


Share this article

Subscribe to Our Thoughts