Designing for interactive television © BBC 2005. All Rights Reserved 1

Designing for interactive television v 1.0 BBCi & Interactive tv programmes

Vibeke Hansen - Head of interactive television design © BBC 2006. All Rights Reserved

Enhanced television - Doctor Who

BBCi, 24/7 - ‘Bridge’

Designing for interactive television © BBC 2005. All Rights Reserved

When designing for the BBC interactive television there are a few things

that are worth keeping in mind:

BBC Interactive TV services currently include two key areas:

• Enhanced Programmes (e-TV)

• BBCi, (24/7)

The BBC’s interactive TV services are available across all BBC channels - for free.

The audience of our services is diverse. All services should be easy to use for the

audience, from the young through to the elderly. One in 30 of our audience has a

visual impairment. When creating graphics, large clear fonts should be used, and

colors that show a good contrast between text and the background. As a general

guide all our services should be clean, clear and consistent to cater for all our

audiences.

Introduction

2

3

Television design A basic introduction

Designing for interactive television © BBC 2005. All Rights Reserved

2

Designing for interactive television © BBC 2005. All Rights Reserved

Television sets have a central, visible screen area. Around the outside, surrounding

edge of this area there is an extra volume of screen space which varies in

dimension according to the set manufacturer’s specifications. Graphics and text

placed in this ‘unsafe’ area can fail to display. The BBC employs two universal safe

margins to guarantee that all content is visible.

Picture Safe Defines the largest region of screen that viewers are likely to see.

However, because screens vary considerably, background graphics (those that do

not hold vital information) may continue to the edge of the screen.

Text Safe Defines the boundaries of the area in which vital information such as logos and

text can be placed. These specifications are based on the PAL (Phase Alternative

Line) Standard Screen Size.

As a BBC technical requirement, all BBC programmes must be 16:9

widescreen. Widescreen programmes must be 16:9 FHA (full height/anamorphic)

(ex. ref. BBC technical standards document.).

Designing for television: Safe margins

4

16:9 Safe

14:9 Safe

4:3 Picture Safe

4:3 Text Safe

Designing for interactive television © BBC 2005. All Rights Reserved

Digital images are made up of grids of coloured blocks or “pixels”

(a contraction of the words “picture” and “elements”). These units are the

smallest individual elements of the image.

Computer monitors use pixels that are square; on a television screen they are

slightly rectangular, roughly 1.067 times as wide as they are tall. Consequently,

images that have the same number of pixels across their width and height will

appear slightly stretched horizontally on a television screen, when compared to

their display on a computer monitor. The effect is most obvious when observing

regular geometric elements such as circles, which would appear on television as

ellipses if translated directly from a computer screen.

To get around this disparity, all images destined for television but initially created

on a computer should be saved out at 768 pixels wide by 576 pixels high. Then,

the image is reduced horizontally to 720 pixels in width. When broadcast on

television, the wider pixels of the TV screen will ‘stretch’ the design back to the

correct proportions.

Designing for television: Pixel size

5

Computer Pixel

Television Pixel

x 1.0667x

x

Computers generate square pixels so you need more of them in a TV Line.

Designing for interactive television © BBC 2005. All Rights Reserved

Television screens are designed to display moving images and cause a variety of

problems for still graphics and photographs. Because there are fundamental

differences between television and computer screen displays, it is important to

constantly test PC or Mac-generated work on a variety of TV screens.

Flicker The image on a television screen is composed of interlaced odd and even scan

lines, which alternate at a rate of 50 times per second. Any single pixel (or line of

pixels) falling onto a single scan line will flicker. A similar, distorted effect occurs

when thin lines in text characters and single pixels in dithered photographs appear

on screen. Because the overall resolution of a television screen is lower than that

of a computer monitor, even the sharpest images will appear fuzzy in comparison.

Different set top boxes can further exaggerate negative effects.

Bloom Each scan line is made up of an analogue signal, which controls changes in colour

and value across the screen. Strong contrasts in hue or luminance along these

lines can cause distortion, throwing the display of vertical edges out of alignment.

The resulting “bloom” causes curves or waves to appear in vertical lines. To avoid

this problem, designers should avoid making strong changes in colour along

vertical edges. Text in strong colours near rectangular edges can cause especially

bad distortion.

Designing for television: Display

6

Flicker

Bloom

Designing for interactive television © BBC 2005. All Rights Reserved

Colour display on television Use of colour has to be considered carefully. Television screens have a more

limited overall gamut than computer monitors and a much higher gamma value.

This results in much higher contrast and saturation levels during display. To achieve

parity in terms of colour intensity, images should be toned down and desaturated

when taken from the computer to the television screen. ‘Hot’ reds and oranges

cause particularly bad distortion and pure white and black should always be

avoided. The strongest white used for television display should hold a value of

around 95%, or 240/240/240 in RGB terms. The darkest black conventionally

used should hold a value of 5%, or 16/16/16 in RGB terms.

Moiré Single pixels can cause flicker, therefore applying dither to images that are

converted to limited colour index tables (such as 8-bit GIF or PNG files) should

be avoided. The designer should refrain from using intricate patterns on screen,

as this will cause a ‘Moiré’ distortion. This ‘shimmering tartan’ effect is a common

problem and occurs when regular patterns such as grids or dots are rotated away

from the true vertical. Large, clearly defined regions of cool desaturated colours

tend to work best on television screens. Curves are less liable to distort than

straight lines and as a rule, movement diminishes the impact of all television

display problems.

Designing for television: Display

7

Colour

Moiré

Designing for interactive television © BBC 2005. All Rights Reserved

What is widescreen For historical reasons television has settled with the 4:3 format (1.33:1), the

word 'widescreen' is used to describe a picture that is wider than the norm.

Hence any image that has a higher Aspect Ratio (AR) than the norm (1.33:1)

could be described as widescreen. The broadcast industry have decided that

their definition of ‘widescreen’ is an AR of 1.78:1 (16:9). It is important to

remember that this is all the word ‘widescreen’ means.

Digital, HDTV, DTT and numerous other bits of broadcast jargon do not

necessarily imply the use of widescreen images. The BBC is committed to

widescreen as an integral and important part of our digital service proposition.

Even Widescreen hasn’t escaped from our desire to create our own terminology,

here are some words and phrases you may hear:

Tall and thin - 16:9 material shown on a 4:3 television.

Short and fat ( or wide) - 4:3 material shown on a 16:9 television.

Black bits - top & bottom - 16:9 letterboxed on a 4:3 television.

Full Height Anamorphic - A distorted projection or drawing of anything which, when viewed from a particular point or by reflection from a suitable mirror,

appears regular and properly proportioned; a deformation.

Designing for television: Widescreen

8

16:9

4:3

Designing for interactive television © BBC 2005. All Rights Reserved

Tall and thin 16:9 material shown on a 4:3 television

Designing for television: Widescreen

9

Short and fat (or wide) 4:3 material shown on a 16:9 television

This is a 16:9 DLB transmitted (tx.) onto a conventional analogue set.

4:3 transmited(tx) on to a widescreen television - Pillarbox.

Designing for interactive television © BBC 2005. All Rights Reserved

Black bits - top and bottom 16:9 material displayed on a 4:3