Many people who are building applications for iTV systems don’t fully understand the issues of developing for a TV display rather than for a computer monitor. I don’t pretend to understand all of the issues myself, but there are a few common ones that everyone needs to be aware of. Sometimes, developers will be asked to define user interfaces, and this page may help you to avoid some of the major errors. This is no substitute for an experienced graphics designer, of course, and your application will almost certainly look better if the developers and designers work closely together.
Colour space problems
Computers use the RGB colour space to represent colours, while television signals typically use the YUV colour space (some LCD televisions or high-definition sets can also support RGB, but this is less common). While most colours can be reproduced accurately by both systems, RGB does have a slightly wider range (or ‘gamut’) than YUV. Because of this, there are some RGB colours that can’t be reproduced well on a TV. Designers need to make sure that their colours look OK in the YUV colour space.
If you’re working with NTSC systems (e.g. in OCAP or ACAP) then life gets even more complicated. NTSC uses the YIQ colour space, which has a smaller gamut than YUV, and NTSC in general is rather worse at reproducing colours than the PAL system (hence the joke Never The Same Colour), and so designers need to take care that their colour choices can be reproduced in an NTSC signal. Luckily this is fairly easy, because most tools like Photoshop support some way of ensuring that an image only uses NTSC-legal colours. The general rule is that colours should have a saturation value lower than 240 (out of 255), although some people suggest that it should be no more than 192. An easy way to handle this in the RGB colour space is to make sure that the R, G, and B values of your colours are all between 16 and 236.
Colour resolution is also lower than you might expect – a typical 525-line NTSC display has a color resolution of about 40 lines, so many closely-spaced changes in colour will not display very well. For this reason, you should avoid complex background images, and avoid putting UI elements too close together. You should avoid using large areas of pure white, red or black as background colours because these colours are most likely to ‘bleed’ into other colours in your UI and distort the picture.
Colour choices
Apart from the problem of actually reproducing colours accurately, there are some colours that simply don’t work well in a TV display because of interlacing and ‘bleeding’ between areas of different colours. The general rule is to avoid sharp edges between highly-contrasting colours (especially bright colours next to dark colours), and to avoid ‘hot’ colours such as very saturated reds and yellows. These will bleed more easily than less saturated colours, or cooler colours such as blues and greens.
Fitting your image on the screen
Once we’ve got a colour scheme that looks good, we need to make sure that we can actually see the whole of our UI on the screen. CRT devices such as televisions do not display all of the picture that is transmitted. Typically, PAL video is transmitted at a resolution of 720×576 pixels, while NTSC video is transmitted at a resolution of 640×486 pixels. This full image is known as the production aperture. Within this, we have the area that corresponds to the aspect ratio of the content, which is precisely 4:3 or 16:9 – this is known as the frame raster edge.
Some parts of the TV production process will introduce some artifacts into parts of the picture that we may not want the viewer to see. For instance, subtitles and closed-caption information are often carried in the top few lines of the picture, along with Teletext information and other system information such as wide-screen signalling. Similarly, we will have horizontal and vertical blanking information carried on the sides and bottom of the picture. For this reason, we usually don’t want to display the entire picture. The area that is guaranteed to be free from any of this distortion or extra data is known as the clean aperture – within this, we will only see real picture information.
To avoid displaying anything outside the clean aperture, most CRTs use what is called overscan – displaying the picture slightly larger than the visible area of the screen, so that any distortions are hidden. Unfortunately, every TV has a slightly different amount of overscan, and so we can’t guarantee how much of the picture we’ll lose. To avoid this, any UI elements should be placed in the safe area. This defines the area of the screen that will be visible on every TV. There are actually two safe areas that we need to consider:
- The action safe area, which guarantees that all of the major features of the picture will be visible.
- The title safe area, which guarantees that graphics and text will be visible and not blurred.
Each of these areas will be different depending on the type of display you have: PAL or NTSC, normal or widescreen. All UI elements should ideally be within the title safe area, especially ones that the user will interact with. The tables below shows the pixels that are visible in each case.
| 4:3 (Normal) | 16:9 (widescreen) | |||
|---|---|---|---|---|
| horizontal | vertical | horizontal | vertical | |
| production aperture | 0-719
(720 pixels) |
23 – 310 & 336 – 623 (576 pixels) |
0-719
(720 pixels) |
23 – 310 & 336 – 623 (576 pixels) |
| frame raster edge | 9-710
(702 pixels) |
23 – 310 & 336 – 623 (576 pixels) |
9-710
(702 pixels) |
23 – 310 & 336 – 623 (576 pixels) |
| clean aperture | 9-710
(702 pixels) |
24 – 310 & 337 – 622 (573 pixels) |
9-710
(702 pixels) |
24 – 310 & 337 – 622 (573 pixels) |
| Action Safe Area | 44-675
(632 pixels – central 90% of clean aperture) |
38 – 295 & 351 – 608 (516 pixels – central 90% of clean aperture) |
25-677
(652 pixels) (central 93% of clean aperture) |
33 – 300 & 346 – 613 (536 pixels – central 93% of clean aperture) |
| Title Safe Area | 79-640
(562 pixels – central 80% of clean aperture) |
52 – 281 & 365 – 594 (460 pixels – central 80% of clean aperture) |
70-632
(562 pixels – central 80% of clean aperture) |
38 – 295 & 351 – 608 (516 pixels – central 90% of clean aperture) |
Not all viewers will have widescreen TVs, of course, and so producers often use a technique is called ’16:9 shoot-and-protect’, which guarantees that important information will be visible even if the picture is modified for a different aspect ratio. The two most common aspect ratios that are considered are 4:3 (normal) and 14:9 (a compromise between normal and widescreen). In practice, all that changes is the dimensions of the safe areas, and the table below lists the safe areas for shoot-and-protect.
| 16:9 shoot-and-protect 4:3 | 16:9 shoot-and-protect 14:9 | |||
|---|---|---|---|---|
| horizontal | vertical | horizontal | vertical | |
| Action Safe Area | 105-579
(492 pixels – central 70% of clean aperture) |
38 – 295 & 351 – 608 (516 pixels – central 93% of clean aperture) |
79-640
(562 pixels – central 80% of clean aperture) |
33 – 300 & 346 – 613 (536 pixels – central 93% of clean aperture) |
| Title Safe Area | 123-579 (456 pixels)
(central 65% of clean aperture) |
52 – 281 & 365 – 594 (460 pixels – central 90% of clean aperture) |
114-605
(492 pixels – (central 70% of clean aperture) |
38 – 295 & 351 – 608 (516 pixels – central 90% of clean aperture) |
Since NTSC screens have a different resolutions, these numbers don’t apply. NTSC digital TV systems typically use the values below:
| 4:3 (Normal) | 16:9 (widescreen) | |||
|---|---|---|---|---|
| horizontal | vertical | horizontal | vertical | |
| production aperture | 640 pixels | 486 pixels | 640 pixels | 486 pixels |
| frame raster edge | 640 pixels | 480 pixels | 640 pixels | 480 pixels |
| clean aperture | 640 pixels | 480 pixels | 640 pixels | 480 pixels |
| Action Safe Area | 576 pixels
(central 90% of clean aperture) |
432 pixels
(central 90% of clean aperture) |
595 pixels
(central 93% of clean aperture) |
446 pixels
(central 93% of clean aperture) |
| Title Safe Area | 512 pixels
(central 80% of clean aperture) |
384 pixels
(central 80% of clean aperture) |
512 pixels
(central 80% of clean aperture) |
432 pixels
(central 90% of clean aperture) |
Interlacing
Most CRT displays are interlaced, which means that only half of the lines on the screen are actually displayed at any one time. First, the TV will display all of the odd-numbered lines, and then all of the even-numbered lines. While this is generally good enough to fool the eye on moving images, doesn’t always handle graphics very well.
Thin lines suffer badly because of this – especially thin horizontal lines and small text. Generally, designers should avoid using thin lines in user interface, especially if the foreground and background colours contrast strongly. Ideally, horizontal lines should be at least 4 pixels wide.
Anti-aliasing will also help to remove some of the artifacts caused by TV displays. This should even be applied to text – while it may seem fuzzy on a computer display, it will look a lot better on a TV. Some recommendations that I’ve heard suggest applying a gaussian blur filter with a radius of 0.3 to your images. This should help avoid flickering.
Text display
We’ve already mentioned that interlacing can cause problems for drawing text. For this reason, text sizes should be much larger than may seem necessary – 18 point text is really as small as you can go on a TV display. In many cases, text sizes up to 28 point are more suitable. Similarly, it’s a bad idea to use fonts with thin strokes or serifs, because these will also run foul of interlacing problems. Serif fonts are especially vulnerable, and you should generally avoid them. Similarly, thick fonts may tend to ‘fill in’ any gaps, especially at smaller font sizes, and this can also make text less readable. Remember that viewers will typically be looking at the screen from much further away, and so clear fonts really help the UI to be more usable. The Tiresias font used in MHP and OCAP was specially designed to be legible, and so there are good reasons for sticking with this font in your applications. For Asian languages, the problems are even worse, and so you should choose your font very carefully to avoid problems.
Colour is also important when using text, just like it is when using other UI elements. Choose foreground and background colours that have a large difference in luminance (the ‘Y’ colour component). These will be much more readable. If you’re using a transparent background, then it’s best to use a contrasting edge around your text to make sure that it always stands out. This is especially true for subtitles and closed captions.
We hope that these tips will go some way to making your applications look better on television screens. Nothing that we’ve mentioned here is very time-consuming, and so designers should have no problems in applying these to their graphic designs.
If you know of any more tips that people should know about, please contact us and we’ll add them.