Blog / UI and Design / UI/UX

How to Design UI/UX for Smart TV apps

  • Rating — 4.9 (119 votes)
  • by Tony
  • Updated on October 30, 2019
  • Read —
    4-5 minutes
test-pattern-TV

There is a forgotten ad made by LG Electronics back in 2014. It throws few interesting facts right from the start. Fact #1: 53% of people are unaware how much they can do with a Smart TV. Fact #2: 75% of people think Smart TVs are too complicated. Obviously, the solution proposed in the ad is a better UX/UI made by Korean tech giant.

Unfortunately, LG failed to deliver a better usability. It’s TV sales plummet over the next 2 years period. Frankly speaking, Samsung and Sony haven’t cracked the idea of smart TV usability.

smart-Remote to rule them all

One remote to rule them all

The industry leader, Samsung have heavily invested in smart remote technology. But all it made is a universal remote with a touch-button and poor voice control.

  1. How to design UI/UX for your Smart TV app?
  2. Tips on UI Design for various Screen Sizes
  3. Tips on UX Design for Smart TV
  4. Smart TV App Control and Input
  5. Bottom Line

How to design UI/UX for your Smart TV app?

Despite the fact that some TV manufacturers did publish design guidelines for their Smart TV systems, their documents cover only basic topics or date back to 2015.

It must be acknowledged that our design team hasn’t found much help in these manuals. Although there are some “tactical” tips worth mentioning like fonts.

Tips on UI Design for various Screen Sizes

Take a closer look at numbers behind screen resolutions. There is a distinct pattern in numbers that keep working across all popular screen resolutions, starting from smartphones’ tiny screen, ending with 4K TVs. The majority of screen resolutions can be divided by eight. The only unfortunate exception to this rule is iPhone 6 screen resolution, which is 375 x 667.

screen resolution sozes
The majority of screen resolutions are divisible by 8

  • Concerning this fact it’s a good practice to build a multiple of the 8-pixel grid and make all the icons with regards to this number.
  • Also, keep in mind that different screens have a different active zone where the navigation of cursor is possible. That is why all manufacturers advise setting a safe zone (at least 20-24 px) around the edge of the screen, in order to make sure that your app will be 100% visible on the screen.
  • In addition, don’t hesitate of checking color palette against different TVs, because their color rendition may vary from screen to screen.

4x4 grid system

Tips on UX Design for Smart TV

On top of that, there is Wild West in all concerning usability and UX for TVs. Partly because there are too many intricacies and problems related to the development process itself.

  • Don’t make user journey more than three levels deep.
  • Use one-vector navigation if it’s possible. For example, a horizontal user journey where all folders and subfolders open only to the right.
  • Always indicate navigation symbols like “back”, “home”, “cancel”, “select”, unless you want users to hit the “exit” button each time they get stuck somewhere.
  • The testing environments are too slow and buggy. Don’t use them to run app performance tests.
  • It’s preferable to test on the device itself, otherwise, you’re risking to miss critical latencies that occur on while using the remote control.
  • If you’re building a Web App, don’t rely on libraries like jQuery or fancy frameworks like AngularJS, Ember JS, Backbone, etc. Most of their feature won’t be supported by Smart TVs. Also, those libraries can greatly slow down the app (jQuery performed 6 million times worse than simple script).

do it yourself

No one will take care of your Smart TV app UX except you!

Smart TV App Control and Input

input methods smart tv

Finally, let’s talk about how you want users to interact with your application? There are at least 4 types of Smart TV input options.

  • Gestures.
  • Voice Control.
  • Standard remote control.
  • Bluetooth keyboard/mouse.

Gestures and Bluetooth-connected devices are used by 1% of users. Voice Control system is still not mature enough and doesn’t use much by users either. Also, the Voice Control system is not an option if you’re building a cross-platform app.

The hard part about remote controls is that you’ll end up with hundreds of devices, each with unique Key Codes. For example, Panasonic, LG, and Samsung, all have different key codes for number “1” button.

In such case, you should develop a Key Map with all Keys and devices supported. This map will be a “translator” and transcribe the signal from the remote control to the app based on the device it is currently running on.

On the other hand, you can develop or integrate a ready-made smartphone application that works instead of remote control. In such use case, the user will be able to control their TVs with the help of smartphones.

input method smartphone

Although, it is not necessary to develop a smartphone remote control app if you don’t have such use cases:

  1. Your app heavy relies on text input/search field.
  2. You need a seamless cross-device experience.
  3. Want to deliver a gaming-like experience.

If you’re not intending to use your app one of these ways, don’t bother building a dedicated mobile remote control interface for Smart TVs. Your app will be just fine with the standard remote control interface. In addition, there are third-party solutions we can integrate later instead of inventing the wheel.

Bottom Line

Smart TVs, as well as 4K TVs, are gradually replacing old screens and gain greater user base. And building mobile or web apps that can be used through TV is not such an exclusive thing to do nowadays. But it requires great attention to User Interface and User Experience while developing Smart TV app.

The aforementioned design tips are just a tip of an iceberg. They are called to emphasize the importance of design and comprehensive approach to the development of interfaces and applications. Although you just need to leave your request and leave the details to us!

Already have an awesome app idea?

Tony Tony Sol is the business development manager of GBKSOFT, overseeing the production of all writings for both internal blog and external platforms. He is technical-driven person always looking for new benefits of merging business and software.

One comment

Leave a comment
Close

Leave a Reply


Kate
Jul 20, 2020 at 2:59 PM

Great article. Thanks!

reply

Related services

Categories

All articles Business Company News Marketing Tips StartUp App Ideas Tech UI and Design

People are talking about

You've got
a project in mind

What's next?

Send us a message with a brief description of your project.
Our expert team will review it and get back to you within one business day with free consultation and next steps.

Testimonials

Nothing can be better than getting a review from our happy clients
who recommend us and trust us their business.

Raphael
My Project with GBKSOFT gave me the ability to develop my software while keeping a busy schedule. Ana, who was my project manager, was very professional and was always understanding of my vision and what I wanted. I would recommend GBKSOFT again to any other company or person who has a vision for their web application. Thank you GBKSOFT! Recommend
Aaron
I’ve been using GBK Soft for the past 3 years and they have been great. Communication is unparalleled to other app development companies. I’ve continued to return to them to improve my iOS app countless times and I will continue to do so in the future. I highly recommend this company! Improve
Dave
GBKSOFT’s performance has been very strong. We've referred them twice, which says all anyone needs to know about them. A referral is the ultimate signal we can give that these guys are great. Strong
Jonathan
More good work from team GBKSOFT. All well executed. The support within GBKSOFT is excellent. Communication is good too, spoken English as well as written. Support
Andy
I think they do great work. I haven’t yet given them something that they were unable to do. Great
Gireesh, USA
One word...EXCELLENT.
Very well thought out and articulate communication. Clear milestones, deadlines and fast work.Patience. Infinite patience. No shortcuts. Even if the client is being careless (me). The best part...always solving problems with great original ideas, especially with this strange project where we are making up new words every day!
Excellent
Tao
GBKSOFT did a good job to manage the project. They put in a good effort to communicate with us and make it easier for us to communicate with developers. Good Job
Garrett
They proved to be very good and they’re very reliable as well. They are quite conscientious. They will go the extra yard to make sure we're happy. Reliable
Devan
They write clean code, adhere to deadlines, and communicate extremely well. I strongly recommend anyone from the GBKSOFT agency and hope to work with them again myself. Clean Code
19
spinner