ì 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
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
Á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
Á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
Área y elementos de diseño
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
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
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
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
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
Imágenes corporativas y logos
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
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.
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
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
Principios de navegación
ü 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
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
Principios de navegación
Menús simples
Introducción
Ventajas
Opciones
Salir
Texto claro y legible
Foco destacado
Icono intuitivo
Principios de navegació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
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
Principios de navegación
Pagina 1 de 2
OK
Pagina 1 de 2
MAL
Principios de navegación
ü 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
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
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
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
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
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
Disposición de la pagina
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
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
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
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
Escritura y redacción
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
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.
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
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
Top Related