SlideShare uma empresa Scribd logo
1 de 14
Baixar para ler offline
DIRECTRICES PARA
                  EL DISEÑO DE INTERFACES
                  DE TELEVISIÓN DIGITAL INTERACTIVA




webcat february                                       @ivoserrano
Para la BBC la iTV:

          “es el contenido y los servicios (además de los
          Canales de TV y radio) que están disponibles para
          los espectadores para navegar a través de la
          pantalla de su TV.




webcat february                                               @ivoserrano
Son muchas las ventajas que aporta la iTV, como mayor
           calidad de imagen, mayor número de canales..., y entre
           ellas, destaca la interactividad, gracias a la cual, el
           usuario cambia su rol dejando de ser un actor pasivo para
           convertirse en uno activo, que influye en la forma y
           tiempo en que va a recibir sus contenidos de televisión.




webcat february                                                        @ivoserrano
Por ello las interfaces creadas para la televisión
           interactiva deben cumplir con una serie de características
           que la hagan aceptable y generadora de confianza para el
           usuario.




webcat february                                                         @ivoserrano
¿Y cuáles son las directrices para
          el diseño de interfaces de la iTV,
          que cumplan con la usabilidad
          más óptima?



webcat february                                @ivoserrano
Análisis de los paradigmas en que están enmarcados las
          pautas de diseño y su efecto en el usuario:



          1. La leyes de la percepción visual (Gestalt).

          2. La teoría del color.

          3. Los patrones de visualización.

          4. Y los aspectos culturales




webcat february                                                    @ivoserrano
Analizar aspectos relacionados con el diseño de interfaces
          para la web, lo cual tiene relevancia, ya que la iTV es una
          convergencia de tecnología de telecomunicación e
          infraestructura de internet.
          •   Organizar los elementos en pantalla.

          •   La navegabilidad, diseñada para ofrecer caminos claros desde el origen
              al destino, sin terminología compleja y con la misión de orientar al
              usuario.

          •   Uso correcto de la tipografía y su legibilidad en pantalla.

          •   Ha de ser rápido en todas sus vertientes, no sólo técnicamente, sino
              desde el punto de vista de la interacción.

          •   Crear una jerarquía visual clara que se repita en cada página, dividiendo
              las diferentes zonas de la misma de forma definida y constante.



webcat february                                                                           @ivoserrano
Analizar aspectos relacionados con el diseño de interfaces
          para la web, lo cual tiene relevancia, ya que la iTV es una
          convergencia de tecnología de telecomunicación e
          infraestructura de internet.

          •   Diseñar teniendo en cuenta que existen diferentes tipos de resoluciones y
              configuraciones de pantalla.

          •   La consistencia, tanto a nivel de contenidos como del formato visual así como la
              disposición de elementos en las páginas.

          •   Obtener un sistema de navegación eficiente, hay que controlar el número de clics
              que debe hacer el usuario antes de llegar a la información.

          •   Ofrecer al usuario un sistema alternativo al de la navegación para encontrar la
              información, es decir, necesitamos ofrecer un motor de búsqueda.




webcat february                                                                                 @ivoserrano
Analizar lo referente a los estudios y pautas que se dan en
          materia de diseño de interfaces de iTV




          Para estructurar las directrices particulares a la iTV, consideramos el diseño
          de desde 3 perspectivas:

          1. El modelo de Interacción
          2. La Interfaz
          3. El modelo de Navegación




webcat february                                                                      @ivoserrano
Analizar lo referente a los estudios y pautas que se dan en
          materia de diseño de interfaces de iTV

          1. El modelo de Interacción
          ¿cómo se concibe la interactividad? ¿Qué tipo de interacción se permitirá?


              •   Concepto de interactividad.
              •   Contexto de interactividad.
              •   Dar a los usuarios el control sobre sus experiencias como espectador.
              •   Dar retroalimentación inmediata.
              •   Permitir a los espectadores adaptar sus experiencias.
              •   Integración con Internet.




webcat february                                                                           @ivoserrano
Analizar lo referente a los estudios y pautas que se dan en
          materia de diseño de interfaces de iTV

          2. La Interfaz
          Es la primera y última parte de la aplicación que el observador detecta.


            •     Simplicidad en el diseño.
            •     Los realces no deben competir con el contenido principal.
            •     Las interfaces deben tener un tema consistente.
            •     Crear una estructura de la pantalla efectiva.
            •     Seguir el modelo sobre los estándares existentes en el diseño para televisión.
            •     Menús simples e intuitivos.




webcat february                                                                               @ivoserrano
Analizar lo referente a los estudios y pautas que se dan en
          materia de diseño de interfaces de iTV

          3. El modelo de Navegación
          La forma en la que los usuarios interactúan y se mueven por el sistema sabiendo en todo momento
          como actuar



            •     Orientar al observador. ¿Dónde estoy ahora? ¿Qué puedo hacer ahora?
            •     Auto-aprendizaje.
            •     Minimizar el número de clics.
            •     Ofrecer siempre una opción para salir.
            •     Usar modelos mentales y metáforas apropiadas.




webcat february                                                                                   @ivoserrano
Realizar y analizar tests de usuarios

          Esta presentación sugiere soluciones, pero todavía no proporciona
          una solución completa

          Si aplicamos estas directrices durante el proceso de diseño iterativo
          obtendremos una gran ventaja, porque se sigue una línea de procesos
          secuenciales, fácil y clara que permite hacer los ajustes en el diseño, corrigiendo
          errores, y evaluando cada paso con la retroalimentación del usuario, ya que se
          desea que el modelo logre alcanzar una interfaz usable por medio del diseño
          centrado en el usuario, pero también tomando en cuenta la parte afectiva ante la
          interfaz y el aspecto multicultural.




webcat february                                                                       @ivoserrano
GRACIAS
                  ¿DUDAS?
                   www.ivoserrano.com




webcat february                         @ivoserrano

Mais conteúdo relacionado

Semelhante a DIRECTRICES PARA EL DISEÑO DE INTERFACES DE TELEVISIÓN DIGITAL INTERACTIVA

Semelhante a DIRECTRICES PARA EL DISEÑO DE INTERFACES DE TELEVISIÓN DIGITAL INTERACTIVA (20)

Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Usabilidad en Aplicaciones Web
Usabilidad en Aplicaciones WebUsabilidad en Aplicaciones Web
Usabilidad en Aplicaciones Web
 
Usabilidad en Aplicaciones Web
Usabilidad en Aplicaciones WebUsabilidad en Aplicaciones Web
Usabilidad en Aplicaciones Web
 
13.diseño de web apps
13.diseño de web apps13.diseño de web apps
13.diseño de web apps
 
Diseño de web
Diseño de webDiseño de web
Diseño de web
 
Diseño de aplicaciónes Web.pptx
Diseño de aplicaciónes Web.pptxDiseño de aplicaciónes Web.pptx
Diseño de aplicaciónes Web.pptx
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
 
Presentación1
Presentación1Presentación1
Presentación1
 
Presentación1
Presentación1Presentación1
Presentación1
 
Instituto san antonio
Instituto san antonioInstituto san antonio
Instituto san antonio
 
Validation Onion
Validation OnionValidation Onion
Validation Onion
 
Johnny mancilla
Johnny mancillaJohnny mancilla
Johnny mancilla
 
Clase no 3
Clase no 3Clase no 3
Clase no 3
 
Haciendo la vida más fácil a las personas
Haciendo la vida más fácil a las personasHaciendo la vida más fácil a las personas
Haciendo la vida más fácil a las personas
 
Arquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadArquitectura de la información y Usabilidad
Arquitectura de la información y Usabilidad
 
Usabilidad y Experiencia de Usuario
Usabilidad y Experiencia de UsuarioUsabilidad y Experiencia de Usuario
Usabilidad y Experiencia de Usuario
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Capitulo 13 sfdsgfg
Capitulo 13  sfdsgfgCapitulo 13  sfdsgfg
Capitulo 13 sfdsgfg
 
Esteban ruiz 2397584 cuadro comparativo
Esteban ruiz 2397584 cuadro comparativoEsteban ruiz 2397584 cuadro comparativo
Esteban ruiz 2397584 cuadro comparativo
 

Último

Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxbarbaracantuflr
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOManuelBustamante49
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilmeloamerica93
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasRiegosVeracruz
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfslaimenbarakat
 
diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddabuitragoi
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfhellotunahaus
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfAdrianaCarolinaMoral2
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfasnsdt
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 

Último (20)

Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptx
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicas
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidad
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 

DIRECTRICES PARA EL DISEÑO DE INTERFACES DE TELEVISIÓN DIGITAL INTERACTIVA

  • 1. DIRECTRICES PARA EL DISEÑO DE INTERFACES DE TELEVISIÓN DIGITAL INTERACTIVA webcat february @ivoserrano
  • 2. Para la BBC la iTV: “es el contenido y los servicios (además de los Canales de TV y radio) que están disponibles para los espectadores para navegar a través de la pantalla de su TV. webcat february @ivoserrano
  • 3. Son muchas las ventajas que aporta la iTV, como mayor calidad de imagen, mayor número de canales..., y entre ellas, destaca la interactividad, gracias a la cual, el usuario cambia su rol dejando de ser un actor pasivo para convertirse en uno activo, que influye en la forma y tiempo en que va a recibir sus contenidos de televisión. webcat february @ivoserrano
  • 4. Por ello las interfaces creadas para la televisión interactiva deben cumplir con una serie de características que la hagan aceptable y generadora de confianza para el usuario. webcat february @ivoserrano
  • 5. ¿Y cuáles son las directrices para el diseño de interfaces de la iTV, que cumplan con la usabilidad más óptima? webcat february @ivoserrano
  • 6. Análisis de los paradigmas en que están enmarcados las pautas de diseño y su efecto en el usuario: 1. La leyes de la percepción visual (Gestalt). 2. La teoría del color. 3. Los patrones de visualización. 4. Y los aspectos culturales webcat february @ivoserrano
  • 7. Analizar aspectos relacionados con el diseño de interfaces para la web, lo cual tiene relevancia, ya que la iTV es una convergencia de tecnología de telecomunicación e infraestructura de internet. • Organizar los elementos en pantalla. • La navegabilidad, diseñada para ofrecer caminos claros desde el origen al destino, sin terminología compleja y con la misión de orientar al usuario. • Uso correcto de la tipografía y su legibilidad en pantalla. • Ha de ser rápido en todas sus vertientes, no sólo técnicamente, sino desde el punto de vista de la interacción. • Crear una jerarquía visual clara que se repita en cada página, dividiendo las diferentes zonas de la misma de forma definida y constante. webcat february @ivoserrano
  • 8. Analizar aspectos relacionados con el diseño de interfaces para la web, lo cual tiene relevancia, ya que la iTV es una convergencia de tecnología de telecomunicación e infraestructura de internet. • Diseñar teniendo en cuenta que existen diferentes tipos de resoluciones y configuraciones de pantalla. • La consistencia, tanto a nivel de contenidos como del formato visual así como la disposición de elementos en las páginas. • Obtener un sistema de navegación eficiente, hay que controlar el número de clics que debe hacer el usuario antes de llegar a la información. • Ofrecer al usuario un sistema alternativo al de la navegación para encontrar la información, es decir, necesitamos ofrecer un motor de búsqueda. webcat february @ivoserrano
  • 9. Analizar lo referente a los estudios y pautas que se dan en materia de diseño de interfaces de iTV Para estructurar las directrices particulares a la iTV, consideramos el diseño de desde 3 perspectivas: 1. El modelo de Interacción 2. La Interfaz 3. El modelo de Navegación webcat february @ivoserrano
  • 10. Analizar lo referente a los estudios y pautas que se dan en materia de diseño de interfaces de iTV 1. El modelo de Interacción ¿cómo se concibe la interactividad? ¿Qué tipo de interacción se permitirá? • Concepto de interactividad. • Contexto de interactividad. • Dar a los usuarios el control sobre sus experiencias como espectador. • Dar retroalimentación inmediata. • Permitir a los espectadores adaptar sus experiencias. • Integración con Internet. webcat february @ivoserrano
  • 11. Analizar lo referente a los estudios y pautas que se dan en materia de diseño de interfaces de iTV 2. La Interfaz Es la primera y última parte de la aplicación que el observador detecta. • Simplicidad en el diseño. • Los realces no deben competir con el contenido principal. • Las interfaces deben tener un tema consistente. • Crear una estructura de la pantalla efectiva. • Seguir el modelo sobre los estándares existentes en el diseño para televisión. • Menús simples e intuitivos. webcat february @ivoserrano
  • 12. Analizar lo referente a los estudios y pautas que se dan en materia de diseño de interfaces de iTV 3. El modelo de Navegación La forma en la que los usuarios interactúan y se mueven por el sistema sabiendo en todo momento como actuar • Orientar al observador. ¿Dónde estoy ahora? ¿Qué puedo hacer ahora? • Auto-aprendizaje. • Minimizar el número de clics. • Ofrecer siempre una opción para salir. • Usar modelos mentales y metáforas apropiadas. webcat february @ivoserrano
  • 13. Realizar y analizar tests de usuarios Esta presentación sugiere soluciones, pero todavía no proporciona una solución completa Si aplicamos estas directrices durante el proceso de diseño iterativo obtendremos una gran ventaja, porque se sigue una línea de procesos secuenciales, fácil y clara que permite hacer los ajustes en el diseño, corrigiendo errores, y evaluando cada paso con la retroalimentación del usuario, ya que se desea que el modelo logre alcanzar una interfaz usable por medio del diseño centrado en el usuario, pero también tomando en cuenta la parte afectiva ante la interfaz y el aspecto multicultural. webcat february @ivoserrano
  • 14. GRACIAS ¿DUDAS? www.ivoserrano.com webcat february @ivoserrano