IPTV-Creating Usable interfaces

The best part of working as a Product manager is that you get equal chances to replicate or create. If you are working on a pure play web application then you get many benchmark products or portions that you can replicate, but if you are working on a relatively newer platforms like IPTV, then you have to create. It is extremely hard to find information on usability in newer domains.

For the past year or so I have had the opportunity to work on creating IPTV applications that work essentially on web technologies (HTML, CSS, and JS) that are displayed on a television through a STB (set-top-box) usually running a custom browser based on Mozilla.

What are we talking about ?

We are talking about applications that are based on web technologies running through a STB Browser, that has very limited capabilities as compared to your desktop browser, and are displayed on a TV screen instead of a computer monitor, and you use a remote control to navigate them instead of a keyboard and a mouse.

What are the look and feel issues that matter?

There are some basic but very important differences compared to the web.

1. Screen size: Although Television screens are larger than computer screens they have a lower resolution. You get very little real estate per screen as scrolls do not go really well on a TV screen. In case you have to keep the CRT monitor size into consideration as well then you loose another 20% of the available width and height.

2. Pixels shapes: TV pixels have a larger width making them rectangular in shape. So the designer needs to keep in mind that a circular button could end up looking like an Oval instead. This is a small factor that can change the whole characteristic of the design.

3. Flickering and fonts: Thin horizontal lines vibrate or flicker on CRT monitors because frames are made of interlaced fields. You have to use thick lines to avoid this effect. This also plays an important part when you need to display text on the screen. Font sizes lesser than 14 seem to flicker more and larger font sizes are also advised because of the increased reading distance (TVs are vied from a significant distance in a room). The font styles that are from the Sans Serif family look more stable as the letters do not bleed into each other.

4. Colours: The colour choice is restricted to a smaller range of colours on a TV because colours like Red bleed/bloat on most TV screens. Text is best presented in Black on a White background. Also avoid using bright colours next to each other. The control(or Selection) also displays a background colour as it moves from one control to another on the screen. This also needs to be factored in so that it doesn't' become an eyesore.

5. Sound: Websites also use sound but Television viewers expect sound as integral part of any thing they watch. You need to find ways and means to use Speech to be integrated into the navigation.

6. PIP: Avoid placing important text of information in the 'picture in picture' area of the TV.

7. Pictures: Do not use the pictures that you have clicked for a website for your TV application. Take new high resolution images. Its also advisable to use these images in the progressive format of JPG as this helps them to load along with the page on the TV screen.


How to make this design work?

Once you are able to create a layout and design that looks cool on a TV screen you need to make it work as well. This is what you need to keep in mind...

1. Navigation: There is no TV in the world that is navigated using a Mouse. The navigation tool for TV is the remote control. You also have to deal with the fact that the Cursor point is also defined in case of TV applications and it is the first action control from the top. This becomes more important in applications like shopping on TV where you have to show a variety of feature/ functionality on a single screen and the agenda is to make the buying process simple for the users.

2. Javascript and CSS: Versions of JS and CSS beyond the 1.2 and 1 respectively wont work. If you are well versed with these, you would be able to quickly adapt yourself to the limitations that the STB browsers present.

3. Functions: You would not be able to use even the common 'mouse-over' function. The 'on-click' would work though.

4. Flash: I have yet to come across a STB browser that supports Flash. Most of the browsers are also incapable of supporting Ajax functions like Div.

Is there a way to make this easier?

Ease of creation is in the ability to view what is being created. There are a couple of Emulators that reproduce what you are seeing on a computer screen to look the way it will on a TV screen. Use them at every step to avoid replicating mistakes. One such interesting tool is provided by the Virgin Media for its digital TV content partners.

Note: All images shown in this post are copyright protected property of Aksh Optifibre Ltd.