guia-estilos-tv digital

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

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

Á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%

600

476

Las aplicaciones interactivas deben

diseñarse de modo que toda la información

relevante esté dentro del los márgenes de

seguridad

Área Segura


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

Á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 vídeo en pantalla completa

Aplicación vídeo en 1⁄4 de pantalla

Posición preferente video escalado a 1⁄4 de

pantalla


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

SI NO

3 px En las esquinas de los distintos elementos de usarán preferentemente las formas cuadradas, mejor que las redondeadas

Agenda


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

Colores y fuentes

Los cambios fuertes de color o contraste entre dos elementos pueden ocasionar distorsiones en las fronteras verticales

Deben evitarse el uso del blanco y negro “puros”. En su lugar se utilizará, respectivamente, los valores RGB 22,22,22 y 232,232,232.

BOOM

255,255,255 232,232,232

0,0,0 22,22,22

Colores y fuentes

En el diseño de los elementos y los fondos debe evitarse el uso de tramas intrincadas, para evitar el efecto “Moiré”

También deben evitarse las amplias zonas de colores muy saturados, especialmente rojas. En general se p r e f i e r e n l a s a m p l i a s z o n a s claramente limitadas de colores poco saturados

Efecto “Moiré”

Fondo no deseable

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 VERDE

AMARILLO

AZUL 191,31,0 63,255,0

255,255,255

63,191,255

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.,;:?!@ �%&(*)[+]

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

Agenda


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


Las aplicaciones asociadas a un programa concreto seguirán la identidad visual del programa

Logo del programa y/o aplicación

Decorado del programa Aplicación Emplea-‐T


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.

Agenda


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


ü  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

Teclas numéricas


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


Menús simples

Introducción

Ventajas

Opciones

Salir

Texto claro y legible

Foco destacado

Icono intuitivo


ü  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

Teclas desplazamiento sin selección

X  No se debe utilizar menús navegables por flechas y bloques de texto con desplazamiento en la misma página


Pagina 1 de 2

OK

Pagina 1 de 2

MAL


ü 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.

Teclas de color


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

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 ü  Lanzamiento de otros

servicios ü  Ir a pantalla completa

ü  Personalización u opciones de la aplicación

ü  Comunicación, canal de retorno

ü  Opciones destacadas ü  Salto de pantalla ü  Ayuda

ü  Despliegue de menú de contexto ü  Vuelta al menú principal ü  Atrás


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

Agenda


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


Información Visual

Información sobre

el video y controles

Instrucciones, ayudas

y avisos

Titulo, contexto,

información relevante

Contenido principal

Información Universal

y de navegación

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


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

Agenda


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


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

Las Trece Premisas

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


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.


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


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

¿Preguntas? – Gracias

José Alejandro Franco Calderón

[email protected]

guia-estilos-tv digital

Technology