Antes del apagón analógico y su implementación en el país, Colombia debe prepararce para afrontar el cambio que traera la televisión digital terreste y para familiarizarnos con ella vamos a conocerla más a fondo.

1. ì
Guía
Estilos
Televisión
Digital
José
Alejandro
Franco
Calderón

2. Agenda
1. Área y elementos de diseño
2. Colores y fuentes
3. Imagen corporativa y logos
4. Principios de navegación
5. Disposición de la pagina
6. Escritura y redacción

3. Agenda
1. Área y elementos de diseño
2. Colores y fuentes
3. Imagen corporativa y logos
4. Principios de navegación
5. Disposición de la pagina
6. Escritura y redacción

4. Área
y
elementos
de
diseño
Algunos televisores, especialmente los CRT, recortan parte de la imagen
debido a ello se han definido unos márgenes de seguridad para asegurar
que todo el contenido es visible.
Ejemplo: Pal 720 X 576
Pixeles aprox. 10%
Área
Segura
Las aplicaciones
interactivas deben
diseñarse de modo que 600
toda la información
relevante esté dentro
476
del los márgenes de
seguridad

5. Área
y
elementos
de
diseño
Para ahorrar espacio se procurará que todas las pantallas de la aplicación
lleven la misma imagen de fondo
Imagen
de
fondo
aplicación
EPG
Diversas
imágenes
de
la
aplicación

6. Área
y
elementos
de
diseño
El
vídeo
o
el
contenido
es
el
REY
por
ello
debe
estar
presente
en
todo
momento
durante
el
uso
de
la
aplicación,
salvo
que
la
can?dad
de
información
a
mostrar
lo
haga
inviable.
En
general
se
preferirá
el
vídeo
en
pantalla
completa
al
vídeo
escalado.
En
esta
úl?ma
opción,
se
preferirá
1⁄4
de
pantalla
en
el
margen
superior
derecho.
En
este
caso
no
es
necesario
respetar
el
margen
de
seguridad.
Aplicación
Aplicación
Posición
preferente
video
escalado
a
1⁄4
de
vídeo
en
pantalla
completa
vídeo
en
1⁄4
de
pantalla
pantalla

7. Área
y
elementos
de
diseño
SI
NO
Para evitar el fliqueo (Parpadeo de
texturas) las líneas y los bordes de los
distintos elementos tendrán un mínimo
de 3 píxeles y máximo de 8 píxeles
En las esquinas de los distintos
3
px
elementos de usarán preferentemente
las formas cuadradas, mejor que las
redondeadas

8. Agenda
1. Área y elementos de diseño
2. Colores y fuentes
3. Imagen corporativa y logos
4. Principios de navegación
5. Disposición de la pagina
6. Escritura y redacción

9. Colores
y
fuentes
Para el diseño de los elementos
se empleará la paleta gráfica
estándar de MHP de 256
colores.
Sin embargo, para el diseño
de la imagen de fondo se
podrán utilizar imágenes con
una profundidad de color de
24 bits

10. Colores
y
fuentes
Los cambios fuertes de color o
contraste entre dos elementos pueden
BOOM ocasionar distorsiones en las fronteras
verticales
0,0,0
22,22,22
Deben evitarse el uso del blanco y
negro “puros”. En su lugar se utilizará,
respectivamente, los valores RGB
255,255,255
232,232,232
22,22,22 y 232,232,232.

11. Colores
y
fuentes
Efecto
“Moiré”
En el diseño de los
elementos y los fondos
debe evitarse el uso de
tramas intrincadas, para
evitar el efecto “Moiré”
Fondo
no
deseable
También deben evitarse las amplias
zonas de colores muy saturados,
especialmente rojas. En general se
prefieren las amplias zonas
claramente limitadas de colores poco
saturados

12. Colores
y
fuentes
En aquellas aplicaciones en las que se representen los botones de
color del mando a distancia, bien sea como objetos o como palabras
coloreadas, estos deberán tener lo siguientes valores
ROJO
191,31,0
VERDE
63,255,0
AZUL
63,191,255
AMARILLO
255,255,255

13. Colores
y
fuentes
Como fuente para los texto se utiliza Tiresias, una fuente
desarrollada específicamente para la televisión y que ha sido
adoptada como estándar para la televisión digital
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
Abcdefghijklmnñopqrstuvwxyz
0123456789.,;:?!@ €%&(*)[+]

14. Colores
y
fuentes
La
pantalla
del
televisor
no
es
el
medio
más
adecuado
para
la
presentación
de
textos.
Por
ello
se
establecen
las
siguientes
reglas
de
legibilidad:
ü El
cuerpo
de
texto
general
no
debe
ser
inferior
a
24
ppp
ü No
debe
emplearse,
en
ningún
caso,
tamaños
inferiores
a
18
ppp
ü La
mayor
legibilidad
se
ob?ene
con
texto
claro
sobre
fondo
oscuro
ü El
interlineado
debe
ser
superior
al
empleado
en
un
texto
escrito
ü Los
bloques
de
texto
no
deberían
tener
mas
de
90
palabras
ü Los
textos
mas
largos
deben
ser
paginados

15. Agenda
1. Área y elementos de diseño
2. Colores y fuentes
3. Imagen corporativa y logos
4. Principios de navegación
5. Disposición de la pagina
6. Escritura y redacción

16. Imágenes
corporativas
y
logos
La línea gráfica de las aplicaciones interactivas de tipo permanente deben
seguir la imagen corporativa, en cuanto al logo, paleta de colores y
elementos de diseño.
Logos
Publicidad
Aplicaciones

17. Imágenes
corporativas
y
logos
Las aplicaciones asociadas a un programa concreto seguirán la identidad
visual del programa
Logo
del
programa
y/o
Decorado
del
programa
Aplicación
Emplea-­‐T
aplicación

18. Imágenes
corporativas
y
logos
El logo se sitúa de forma preferente en
la esquina superior izquierda de la
pantalla
En las aplicaciones con vídeo
completo o en aquellas en las que otro
logo ocupe la zona preferente, éste se
ubicará en la parte inferior izquierda,
preferentemente dentro de la barra de
navegación.

19. Agenda
1. Área y elementos de diseño
2. Colores y fuentes
3. Imagen corporativa y logos
4. Principios de navegación
5. Disposición de la pagina
6. Escritura y redacción

20. Principios
de
navegación
El Mando a distancia
En la televisión interactiva el control de la
aplicación se realiza a través del mando
a distancia. Esto limita las funciones
generalmente disponibles a:
1. Los controles tradicionales del
televisor
2. Las teclas numéricas
3. Las teclas de desplazamiento
4. Las teclas de color

21. Principios
de
navegación
Teclas
numéricas
ü Las teclas numéricas pueden usarse para elegir una entre varias opciones
ü Las teclas numéricas se pueden usar como acceso rápido de las opciones
de menú
ü Los saltos de foco y los menús de navegación deben respetar el orden
numérico, no deben saltarse números
ü Si es posible, se debe mantener la posición de las teclas numéricas en
todas las pantallas de la aplicación
X No deben usarse palabras para referirse a opciones de navegación
numéricas
X Por el color, tamaño o posición hay que evitar que las opciones numéricas
se confundan con números de página
X No usar las teclas numéricas para mas de 9 opciones

22. Principios
de
navegación
Teclas
desplazamiento
y
selección
ü Los menús de selección deben situarse en forma vertical
ü El aspecto gráfico de los menús debe ser el mismo en toda la aplicación
ü La opción enfocada debe distinguirse claramente del resto de opciones del
menú, el criterio para señalizar el foco debe mantenerse en toda la
aplicación.
ü Las opciones de desplazamiento en cada posición se representan por
triángulos sencillos, sin bordes, efectos 3D etc.
ü Los menús deben permitir la navegación circular
X Deben evitarse las distribuciones en diagonal, curvadas etc. de los menús,
de modo que hagan poco intuitivo el comportamiento de las teclas de
desplazamiento
X No use icono para comportamientos no permitidos u obvios

23. Principios
de
navegación
Menús
simples
Introducción
Texto claro y legible
Ventajas
Opciones
Foco destacado
Salir
Icono intuitivo

24. Principios
de
navegación
Teclas
desplazamiento
sin
selección
ü Cuando sea necesario paginar un texto o utilizar scroll, por ser éste
demasiado largo, se debe usar una sola opción en cada bloque de
texto (izquierda/derecha o arriba/abajo)
ü Usar triángulos simples como iconos y etiquetar el comportamiento de
la flecha.
ü Mantener la consistencia de los iconos y los comportamiento con los
menús
ü Permitir la navegación circular
X No se debe utilizar menús navegables por flechas y bloques de texto
con desplazamiento en la misma página

25. Principios
de
navegación
OK
Pagina
1
de
2
MAL
Pagina
1
de
2

26. Principios
de
navegación
Teclas
de
color
ü Cuando las opciones estén escritas en el color, utilizar, como mínimo,
fuente 22 ppp.
ü Las opciones deben respetar el orden del control (rojo, verde, amarillo y
azul).
ü Las posiciones se deben mantener aún cuando no se utilicen todas las
opciones.
ü Se debe procurar que el uso de las teclas de color sea consistente en
toda la aplicación.
X No se debe utilizar las teclas de color para las opciones de
desplazamiento (arriba, abajo, página siguiente etc.). En ese caso es
preferible usar las teclas de desplazamiento.
X No asigne la misma función a dos teclas de color.

27. Principios
de
navegación
Teclas
de
color
en
disposición
horizontal
(preferiblemente),
respetando
el
orden
del
control
Se
deben
mantener
las
posiciones
de
las
teclas
de
color,
aún
cuando
no
estén
todas
la
opciones
disponibles

28. Principios
de
navegación
Cada aplicación puede hacer el uso que necesite de las teclas de color,
no obstante existe un uso recomendado para cada una de ellas
ü Entrar,
salir
ü Opciones
destacadas
ü Lanzamiento
de
otros
ü Salto
de
pantalla
servicios
ü Ayuda
ü Ir
a
pantalla
completa
ü Personalización
u
opciones
de
la
ü Despliegue
de
menú
de
contexto
aplicación
ü Vuelta
al
menú
principal
ü Comunicación,
canal
de
retorno
ü Atrás

29. Principios
de
navegación
Por acuerdo de diseño general y entre operadores, el modo de acceso a las
aplicaciones interactivas es pulsar la tecla roja del mando a distancia.
Habitualmente esta tecla se reserva para la función “salir” una vez la aplicación
está corriendo.
Entrada
y
salida
de
la
aplicación
“lanzadera”
con
botón
rojo

30. Agenda
1. Área y elementos de diseño
2. Colores y fuentes
3. Imagen corporativa y logos
4. Principios de navegación
5. Disposición de la pagina
6. Escritura y redacción

31. Disposición
de
la
pagina
La lectura de una pantalla de televisor se realiza desde la parte
superior izquierda a la inferior derecha
ü El
logo
y
los
Wtulos
se
situarán
en
la
esquina
superior
izquierda
ü El
vídeo
en
la
superior
derecha
ü La
información
relacionada
con
el
?tulo,
inmediatamente
debajo
de
éste
ü La
información
de
navegación
en
la
parte
inferior
de
la
página
ü La
información
está?ca
o
poco
relevante
(fecha,
horas
etc.)
se
situará
en
las
áreas
menos
relevantes

32. Disposición
de
la
pagina
Titulo, Información
contexto, Visual
información
relevante
Información
sobre
Contenido el video
principal y controles
Información Instrucciones,
Universal ayudas
y de y
navegación avisos
Los
servicios
se
aprenden
con
mayor
facilidad
si
la
información
se
distribuye
siguiendo
la
forma
en
que
la
mayoría
de
las
personas
exploran
la
pantalla

33. Disposición
de
la
pagina
Cada aplicación es diferente, presenta sus propios problemas y debe
tener su propia solución.
La coherencia dentro de la propia aplicación es más importante que
el seguimiento de las reglas

34. Agenda
1. Área y elementos de diseño
2. Colores y fuentes
3. Imagen corporativa y logos
4. Principios de navegación
5. Disposición de la pagina
6. Escritura y redacción

35. Escritura
y
redacción
La pantalla de un televisor, por la actitud del espectador, la resolución y la
distancia no esta diseñada para la lectura de textos. Por ello es necesario
prestar especial cuidado no solo en los aspectos formales, comentados
anteriormente, si no en la redacción de los contenidos.
La
pantalla
de
un
televisor
no
se
lee
como
un
medio
escrito
tradicional,
sino
que
se
ojea
velozmente
en
busca
de
información
relevante
que
le
pueda
interesar.
Las
páginas
deben
ser
“ojeables”
para
facilitar
ese
fpo
de
lectura.
En
este
fpo
de
lectura
toda
la
información
compite
con
el
resto
para
captar
la
atención
del
usuario.
Por
eso
es
esencial
evitar
presentar
información
superflua

36. Escritura
y
redacción
Las
Trece
Premisas
1. Los contenidos no relacionados deben deben estar en áreas
separadas
2. El texto debe organizarse con palabras resaltadas, separadores, listas
numeradas etc
3. Los títulos y subtítulos deben ser claramente identificables
4. Cada párrafo debe tener una única idea
5. Utilizar el estilo de la pirámide invertida, comenzando por un resumen
de lo esencial y finalizando por los detalles.
6. Deben usarse menos palabras de las que se empelaría en un texto
impreso
7. El lenguaje debe ser objetivo, sin exceso de adjetivos o palabras
redundantes
8. Lenguaje simple e informal suele ser más adecuado que un lenguaje
más elegante o retórico

37. Escritura
y
redacción
Las
Trece
Premisas
9. Los bloques de texto no debe tener más de 90 palabras, es preferible
paginar textos más largos o utilizar el scroll.
10. Se utilizará preferentemente la alineación a la izquierda.
11. Las negritas se utilizarán para enfatizar algunas palabras, siempre de
forma muy restringida. No deben utilizarse como elemento
decorativo.
12. Las mayúsculas no debe emplearse ni para la escritura de textos
largos, ni de títulos completos. Solo se emplearán para siglas o
palabras sueltas que se quieran resaltar.
13. No utilizar cursivas, por ser poco legibles.
En cualquier caso será el tipo de contenido, el público al que va dirigido y el
propósito del texto, los que marcará, finalmente, la correcta relación entre la
forma y el fondo

38. Escritura
y
redacción
Formularios
En ocasiones necesitaremos que el usuario introduzca una información. Dado las
limitaciones del control remoto como periférico de entrada de datos debemos
facilitar al máximo la tarea
1. Los campos de texto libre deben ser los menos posibles, para su
cumplimentación se empelará algún sistema de ayuda.
2. Los radio buttons se emplearán cuando solo haya una elección
permitida entre varias opciones. Es tanto o más importante cuidar la
redacción de las respuestas como la de la pregunta ya que muchos
usuarios no leen el enunciado.

39. Escritura
y
redacción
3. Se empleará los combos para respuestas estándar (provincia, nivel de
estudios, sexo, nacionalidad...). Un combo bien planteado debe poder
ser respondido mentalmente sin ver las opciones (e.g. País de
nacimiento). Si es necesario desplegar para ver las opciones, puede
que el combo no sea la opción adecuada.
4. Se utilizarán los check box cuando sea posible más de una respuesta
o para seleccionar una opción no obligatoria

40. Escritura
y
redacción
Para la introducción de textos libres se puede emplear los teclados
virtuales representados en pantalla o el control remoto.
En este último caso es recomendable representar el comportamiento de
las teclas numéricas ya que algunos controles no lo tienen representado.
Aplicación
con
teclado
virtual

41. ¿Preguntas? – Gracias
José Alejandro Franco Calderón
alejo.franco@misena.edu.co