Your website on television

Although the number of computers in households is growing at a phenomenal rate, they are still complex and expensive pieces of equipment that can be difficult for the average user to get to grips with. Virtually all families in the UK own a television and it is the main source of information and entertainment in the household. Interactive Digital Television (iDTV) is undoubtedly going to become a popular way of viewing information contained on websites.

In principle it is easy for broadcasting companies to tie in information presented on screen to further, more detailed data within a website. Pressing a button on the remote control could access this data. Television, including digital TV, is regulated by the ITC, making these guidelines an additional source of guidance for the developers of websites.

Access to interactive pages via a television is achieved using either an in-built modem or a ‘set-top box’ (STB) attached to a cable television network. These relay any requests for pages through their system and out onto security systems via the Internet.At present there is no clear standard for producing and formatting information for this medium. Navigation through a website on the TV is done through either a television remote control or a keyboard. Be aware that a website designed
for accessing via a PC may not work on a television set or be available on a particular platform.

General

As many as two in three television viewer’s users may not have surfed the web previously using a computer. Therefore keep everything simple and clear. Don’t think of them as web pages; think instead of the way TV graphics look and feel.

This is what users expect. Phrases like ‘click here to…’ are not appropriate in a mouse-less environment. Where possible, refer to a ‘service’ rather than a ‘site’. Although the contents are built using Internet technologies and may be re-purposed from a website, viewers who have not experienced the Internet may be confused by the use of Internet terminology.

This example of a screenshot from the UK online Interactive service illustrates the power of simplicity.

Three main TV-friendly principles

Three main principles are the key to making TV-friendly websites.

Readability

The size of the fonts used by set-top boxes to render text on the TV needs to be larger than those rendered by web browsers, simply because people are watching TV from a lot further away than they are when viewing their computer monitors.

The user can enlarge the size of the text displayed by some set-top boxes (to improve readability on small TV sets), but the user cannot of course change the size of the window used for the general display (PC browser windows can be resized manually).

Simplicity

Human-factors research has shown that for most computing tasks the threshold of frustration is around 10 seconds. Web page designs employing complex layouts and ‘pretty’ graphics just will not work. Whilst some iDTV services use high-speed access to the Internet, phone line connections represent the only option for many users. Therefore, it is recommended that HTML pages should not exceed 50kB in size. They cannot include dozens of links where this can be avoided. Kiosk-like navigation (with large on-screen buttons) is recommended, being more intuitive than computer menus.

Television users do not have a mouse so imagine what it is like navigating around the page using only arrow keys. Frames and complex tables are not possible.

Avoid writing long pages: remember that the normal user will saturate their cognitive capacity if they have more than seven things to look at. Viewers are not used to scrolling, so it is entirely possible that items below the viewable area will be completely missed. If you cannot say it in 40 words - then do not use DTV.

Entertaining content

Televisions are far less business-like than computers. Users expect to be entertained as well as educated or informed. Boredom thresholds can be quite high, and this is typified by the viewing culture of channel hopping at the press of a single button. This is likely to be the fate of dry content that does not capture the imagination or encourage the viewer to read on. Keep detail to a minimum - if you cannot say it in 40 words - then this may not be the right medium - remembering to provide back buttons to return the viewer to the page they have just left.

Design

Design guidelines can be summarised in ten rules that can be applied to any of the three TV-friendly principles:

* Your site should look good on small screens.
* Beware of certain colour combinations - use TV safe colours.
* Use large sans serif fonts - TV safe fonts.
* Scrolling is not possible on some platforms.
* Simple navigation.
* Facilitate navigation with a remote control keypad.
* Avoid data entry, or limit to simple SMS
* Limit text to 40 words per page (screen).
* Be short, be simple, and be entertaining!
* Make use of video where the bandwidth permits.

Screen sizes

Scrolling is not simple or even possible for TV viewers. Most TV browsers will not support horizontal scrolling so pages that exceed the display window width may need to be reformatted to fit in. This can have unexpected effects on page layouts and may even result in parts of the page not being displayed at all.

Vertical scrolling is supported on most TV browsers, but viewers may miss items below the viewable area if they are not expecting them to be there. Examples of actual screen sizes are as follows:

* Telewest Active Digital - The width of a page is 640 pixels while the length is 400 pixels, excluding the title bar. If the page size exceeds this then the transcoder may either reduce the scale or add scroll bars.
* KIT (Kingston Interactive TV) - The actual screen size is 720 x 576 pixels. Not all of this is visible because of Overscan. This requires a ‘safe area’ which will appear on all TV sets. Important screen elements and all HTML have to be 600 x 480 to fit.

Colours

Colours for TV need to be PAL safe. This means developers should avoid using RGB values including 0-16 and 236-256. This can be done in, for example, Adobe Photoshop using the Levels function. Using 90 per cent of the true colour will reduce colour bleed and distortion.

Colours displayed on TV look a lot brighter and more saturated than they do on a computer monitor, and certain colours when placed in close proximity to each other can cause effects on neighbouring elements such as jittering (visible movement), chroma crawl (colour smearing) and interference. Try and use web safe colours for Liberate platforms.

Always check the colours on a TV before committing to a whole series of pages. Keep small items such as icons greyscale or mono as colour tends to bleed and distort on the TV. Some transcoders attempt to adjust colours on the fly to ensure that they are broadcast safe, but some combinations may still cause problems and different platforms may behave differently.

Overly bright colours may be limited by transmitter technology, resulting in grey, patchy colours.

Text

It is harder to read text on a TV screen. It takes a lot more concentration and can take up to 25% longer to read. The optimum common text font is a sans serif font of size 12pt. Where the platform has a transcoder (Liberate and Netgem) this will be automatically increased by 50 per cent to 18pt. Fonts are limited to those few available in the set top box (STB) so keep text clear and concise.

* Avoid the use of too many fonts.
* Lower case is easier to read for body text on screen.
* Italics can also be hard to read.
* There is only one embedded typeface for Liberate. This is Tiresias, which was developed in conjunction with the Royal National Institute for the Blind to ensure legibility for the partially sighted and also to remain legible when stretched to 16:9 wide-screen formats.
* Above all, keep it simple, avoid too many on-screen elements and try to focus attention on one area of the screen at anyone time. Work to a maximum of 40 words on a page.

Graphics

Authors should always present all images in either GIF or JPEG format.

All images are converted by the Liberate transcoder to a 15-bit palette, and dithered accordingly, but to optimize the quality to transfer delay ratio, images should be stored with a 256-colour palette (8-bit format).

Although TV browsers generally support imagemaps, they make the cursor very small and are almost impossible to navigate without a mouse.

Plug-ins

* RealVideo and RealAudio plug-ins are not supported.
* Flash and Shockwave plug-ins are not supported.
* AVI and MOV video formats are not generally supported. Those that are supported have limitations on the size of the clip owing to the lack of a hard drive and the relatively small amount of available RAM.
* MPEG 1 or 2 is the only video format commonly supported across set-top boxes. MPEG video has to conform to defined sizes and bit-rates and must also be stored on a special video server at the head end, so video clips cannot be played over the Internet or from external video servers.

Audio

* Some boxes play WAV and MIDI files.
* Liberate does not support sound.
* The best rate is generally 22kbps 16-bit mono.

Size is also an issue: limit file sizes to between 500kB and 1MB. They can be clicked on to play or they can play automatically in the background of a page. Both the standard embed and bgsound HTML elements function as normal.

Animation

Animated GIFs work well. They should have a plain background or one that matches the background of the HTML page. Keep the file size down, as large animations slow down the loading of the page.