SlideShare una empresa de Scribd logo
El Diseño de la Interactividad Carlos Corrales Díaz I.T.E.S.O.
Diseñar la interactividad de un sistema   es diseñar la interfaz del mismo.  Se entiende por  interfaz todo sistema o dispositivo que permite establecer una relación o  interacción entre dos o más sistemas de cómputo y sus periféricos, para propiciar el cumplimiento de su función. Una interfaz que permite la interacción del usuario con el sistema (no sólo con la máquina) e intervenir en él. Se le llama  interfaz humana 1
Interfaz humana:  Sistema de Interacción del usuario con el Sistema de Comunicación  e Información. Se constituye por un conjunto de elementos que:  propician y permiten la  interacción ,  hacen posible la  búsqueda  de información , facilitan la  navegación  por el sistema,  propician al usuario la  selección de entradas y salidas . 2
Elementos constitutivos de un sistema    de interactividad Dispositivos o  periféricos La pantalla El teclado El ratón El jostick Los drives La impresora El CD-ROM Las bocinas El disco duro La red 3 Elementos gráficos, visuales o  textuales. Botones Áreas sensibles de la pantalla Menúes Barras de menúes Iconos Colores y símbolos Hipertexto e hipermedia Banners (banderas o estandartes)
Por la interfaz, el usuario vive el producto,  la interfaz se identifica con el producto Proporciona herramientas al usuario para: correr programas, encontrar, abrir, desplegar, intercambiar información o imprimir cosas que se encuentran en el sistema La característica más apreciada de una interfaz humana es el  grado o nivel de descubrimiento  que proporciona al usuario que navega por el sistema 4
Lo esencial del diseño de la  interfaz humana es la pantalla. E n  el diseño de pantallas: Se integra lo que hace posible la interactividad. Se concreta la estrategia de interactividad o lógica de interacción del usuario con el sistema. En este diseño de pantallas con interactividad se logra: Una estrategia de interés, exploración o búsqueda de usuario, para definir la  estructura de la interactividad   La carta descriptiva de la misma. 5
La estructura de interactividad. Define las posibilidades de interacción del usuario,  Las formas en que manejará los contenidos e información del sistema o interactuará con ellos.  Determina un mapa de navegación del usuario por los diversos recorridos o  módulos del sistema .  Las posibilidades y nivel de descubrimiento que el usuario encontrará en el sistema, de acuerdo con el diseño de la navegación, búsqueda o interacción que se haga.  6
Los factores de la interactividad La estructura de interactividad  se constituye con aquello que dote al sistema de posiblidades para que el usuario realice lo que le interesa realizar. Al usuario le puede interesar: detener el sistema, retroceder, avanzar, reiniciar, elegir alternativas de recorrido, definir búsquedas, cambiar de un módulo o recorrido a otro, completar información, responder preguntas, preguntar por información, escribir información, colorear, dibujar, accionar elementos del sistema, comunicarse con otros usuarios, etc. 7
Una forma de presentar la Interactividad (Fragmento de la interactividad) El Patio de Mi Casa.  El sistema consta de cinco módulos: La Entrada o Portada, El Taller de Don Juanito, El Cuarto del Abuelito, La Feria y Rondas Infantiles. En La Portada, el usuario puede activar la presentación del sistema con un botón de control. Activada, la presentación no se podrá detener. Al terminar la presentación, aparece el Menú  Principia . En él, el usuario elige el recorrido que le interese seleccionando un icono, entre aquellos que dan acceso a los módulos del  programa. Estos iconos brillarán cada vez que se posicione el cursor sobre ellos. Además, sobre cada módulo aparecerá, en “hipertexto” en nombre del mismo. 8
El Patio de Mi Casa (Continuación)   Para entrar a un módulo el usuario deberá posicionarse sobre el icono que le corresponde y presionar el botón de su ratón. Desde la pantalla, el usuario tiene la posibilidad de terminar la sesión, salir del programa o consultar la sección de ayuda (Kiko el Perico).  Para seleccionar las opciones de AYUDA y SALIR, se sigue el mismo procedimiento que con las otras opciones (posicionarse sobre el icono indicado y presionar el botón del control). 9
Dos Factores del Diseño  en la interactividad Los formatos de estructuras de hipertexto: Orden simple, lineal, lineal con salto, árbol, red, supercarretera .  Las alternativas en el diseño: numeración ,  narración,   sistema de códigos ,  carta descriptiva mixta ,  modelos base  de computadora y  scripts. 10
1 Diseño de organización simple La información se organiza por unidades temáticas separadas. 11
2. Diseño Lineal La información se organiza por unidades temáticas separadas, con nexos en una secuencia, desde un principio hasta un final  12
3. Diseño Lineal con Saltos La información es centralizada y lineal en segundo nivel. 13
4. Diseño de Arbol La información se ramifica a partir de un punto inicial inicio 14
5. Diseño de Red Se ingresa a la información desde cualquier nodo 15
6. Diseño de Supercarretera . Integra todos los formatos de hipertexto e hipermedia 16 Arbol Web Organización Simple Lineal con salto  Lineal
Carta Descriptiva de un Programa Educativo . Figura 1 Sí No Ingreso Sección 1 Sección 2 Filme Examen ¿Bien? Respuesta 17   El usuario abandona la sesión al aprobar el examen rápido. Movimiento por el programa. ¿Bien?
Carta descriptiva de un programa de  información Figura 2 18 Peces Plantas Hierba mala del mar Criaturas  de las Profundidades Bacalao Crustáceos Mamíferos Delfines Ballenas Langosta Cangrejo
Estructura Alternativa de Información Figura 3 Criaturas de las  Profundidades ¿Que criatura? ¿Qué come? ¿Dónde vive? Delfín Tiburón Gente Hierba  del mar Australia 19
Esquema de un Sistema de Información Descriptivo/referencial Figura 4. Funciones del sistema de Información Sistema de  Información REALIDAD SISTEMA DE REFERENCIA Referente caracterizar clasificar relacionar ubicar 20
Carta descriptiva con códigos visuales. Figura 5. No Sí Ingreso Sección 1 Sección 2 Examen rápido ¿Bien?  Película Respuesta Secuencia AV sin datos de entrada Secuencia interactiva con entrada El usuario sale al pasar el examen 21
Story Board para Cambio de Módulo Figura 6. Finalmente: ¿Qué botón despliega un CD-I? ¡Correcto! 10 de 10 Apriete aquí para  saber más del video Apriete aquí para  salir del sistema Simple Gente Clásico Video Gente Simple Clásico Hombre del año 22
Feliz realización, creatividad y participación de todos en equipo.    Bibliografía Tweed W. Ross.  Bloom and Hypertext :  Parallel Taxonomies ?, en ED-TECH REVIEW, Autom/Winter 1993,pp. 11-15. Philips IMS.  The CD-I Design Handbook,  Addison-Wesley, N.Y. 1992, pp.31.45. Apple Computer.  Apple CD-ROM Handbook. A guifr to planning, creating, and producing a CD-ROM, Addison-Wesley, N.Y., 1992, pp. 85-93. ITESO.  El Patio de Mi Casa,  Diseño de Concepto y Guión Técnico del   Interactivo sobre juegos y juguetes mexicanos. 23

Más contenido relacionado

PPT
Multimedia & Interactividad
PDF
T1 fernando cristian bejarano
PDF
T1 esteban david
PPSX
Multimedia Diapositivas
PPTX
Programacion multimedia
PPT
Presentaciones Multimedia
PPTX
Medios informáticos de los procesos de enseñanza y aprendizaje
DOCX
Que Es Multimedia 1
Multimedia & Interactividad
T1 fernando cristian bejarano
T1 esteban david
Multimedia Diapositivas
Programacion multimedia
Presentaciones Multimedia
Medios informáticos de los procesos de enseñanza y aprendizaje
Que Es Multimedia 1

La actualidad más candente (20)

PDF
PDF
Taller_1_HenryF_Jordan
DOCX
Que Es Multimedia
PPTX
T1 nataly kevin
PPTX
Medios informáticos en los procesos de enseñanza y aprendizaje
PPT
Diapositivas multimedia
PPT
Multimedia (informatica) (1)
PPTX
Programacion multimedia
PPTX
Multimedia
PDF
Etapas de producción multimedia.
DOCX
Trabajito
PPTX
TECNOLOGIA MULTIMEDIA
PPTX
Herramientas de las presentaciones multimedia
PPT
Fases en el desarrollo multimedia
PPTX
Multimedia powerpoint
PDF
Multimedia
DOCX
TALLER ¿QUE ES MULTIMEDIA?
PPS
PDF
Herramientas multimedia monogragia imprimir
PPTX
Taller multimedia
Taller_1_HenryF_Jordan
Que Es Multimedia
T1 nataly kevin
Medios informáticos en los procesos de enseñanza y aprendizaje
Diapositivas multimedia
Multimedia (informatica) (1)
Programacion multimedia
Multimedia
Etapas de producción multimedia.
Trabajito
TECNOLOGIA MULTIMEDIA
Herramientas de las presentaciones multimedia
Fases en el desarrollo multimedia
Multimedia powerpoint
Multimedia
TALLER ¿QUE ES MULTIMEDIA?
Herramientas multimedia monogragia imprimir
Taller multimedia
Publicidad

Destacado (20)

PPTX
El concepto de interactividad
DOC
Qué es Interactividad?
PPTX
Dispositivos almacenamiento
PPT
Esrectec0313060908
PDF
Escaletas stories guiones
PDF
Tipos de interactividad
PDF
Estudio de Internet e interactividad en móviles y otros dispositivos portátiles
PPTX
Evolucion de dispositivos (stephany pacheco)
PPTX
Tipos De Monitores
PPT
dispositivos de almacenamiento
PPTX
cd & dvd - Multimedia - 913 O&M
PPTX
La interactividad y la web 2
PPT
Dispositivos Y Medios Para El Almacenamiento De InformacióN
PPTX
Cd and dvd
PPTX
INTERACTIVIDAD: Indicadores y analisis del medio 233gradoscom
PPTX
Presentacion digital tipos de monitores
PPTX
unidades de medida hardware
PPTX
dispositivos de almacenamiento cd y dvd
PPT
Unidades de cd, dvd y blu ray
PPTX
Interactividad multimedia (conceptos básicos). Propuesta conceptual desarroll...
El concepto de interactividad
Qué es Interactividad?
Dispositivos almacenamiento
Esrectec0313060908
Escaletas stories guiones
Tipos de interactividad
Estudio de Internet e interactividad en móviles y otros dispositivos portátiles
Evolucion de dispositivos (stephany pacheco)
Tipos De Monitores
dispositivos de almacenamiento
cd & dvd - Multimedia - 913 O&M
La interactividad y la web 2
Dispositivos Y Medios Para El Almacenamiento De InformacióN
Cd and dvd
INTERACTIVIDAD: Indicadores y analisis del medio 233gradoscom
Presentacion digital tipos de monitores
unidades de medida hardware
dispositivos de almacenamiento cd y dvd
Unidades de cd, dvd y blu ray
Interactividad multimedia (conceptos básicos). Propuesta conceptual desarroll...
Publicidad

Similar a Interactividad (20)

PPTX
Trabajo grupo numero 3
PPT
Diseño del Dialogo en Línea
PPT
Diseño del dialogo en línea
PPTX
Diseño del diálogo en línea
PPTX
Unidad 5 :Diseño del dialogo en línea
PPT
Exposicion eje tematico cuatro dialogo en linea
PPTX
Diseño del dialogo en linea cuarta unidad tematica
PPTX
Exposición eje temático N° 4
PPTX
PPT
03a tns arquitectura de informacion y prototipado
PPTX
Diseño del dialogo en linea eje tematico 5
PDF
Utilitarios iii unidad i-elementos interfaz usuarios
PPTX
Diseño de salidas de sistema.unidad 2. mayorga ruiz santos_vallejo_zarate. g1
DOC
Preguntas eloy
PDF
Ingenieria de la usabilidad
PDF
Unidad 5 interfaces-trabajo c.i.27.902.634
PDF
Practicasdelabmvsimmgl 130306143919-phpapp02 (1)
PPTX
PPTX
Trabajo grupo numero 3
Diseño del Dialogo en Línea
Diseño del dialogo en línea
Diseño del diálogo en línea
Unidad 5 :Diseño del dialogo en línea
Exposicion eje tematico cuatro dialogo en linea
Diseño del dialogo en linea cuarta unidad tematica
Exposición eje temático N° 4
03a tns arquitectura de informacion y prototipado
Diseño del dialogo en linea eje tematico 5
Utilitarios iii unidad i-elementos interfaz usuarios
Diseño de salidas de sistema.unidad 2. mayorga ruiz santos_vallejo_zarate. g1
Preguntas eloy
Ingenieria de la usabilidad
Unidad 5 interfaces-trabajo c.i.27.902.634
Practicasdelabmvsimmgl 130306143919-phpapp02 (1)

Último (20)

PDF
1. Intrdoduccion y criterios de seleccion de Farm 2024.pdf
DOCX
PLANES DE área ciencias naturales y aplicadas
PDF
Cronograma de clases de Práctica Profesional 2 2025 UDE.pdf
PDF
Teologia-Sistematica-Por-Lewis-Sperry-Chafer_060044.pdf
PDF
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf
DOCX
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
DOCX
PLAN DE AREA DE CIENCIAS SOCIALES TODOS LOS GRUPOS
PDF
Como Potenciar las Emociones Positivas y Afrontar las Negativas Ccesa007.pdf
PDF
TOMO II - LITERATURA.pd plusenmas ultras
PDF
Mi Primer Millon - Poissant - Godefroy Ccesa007.pdf
DOCX
Informe_practica pre Final.docxddadssasdddddddddddddddddddddddddddddddddddddddd
PDF
Punto Critico - Brian Tracy Ccesa007.pdf
PDF
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
PDF
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
PDF
Integrando la Inteligencia Artificial Generativa (IAG) en el Aula
PDF
Híper Mega Repaso Histológico Bloque 3.pdf
PPTX
Welcome to the 7th Science Class 2025-2026 Online.pptx
PDF
Unidad de Aprendizaje 5 de Educacion para el Trabajo EPT Ccesa007.pdf
PPTX
Welcome to the 8th Physical Science Class 2025-2026
PDF
Metodologías Activas con herramientas IAG
1. Intrdoduccion y criterios de seleccion de Farm 2024.pdf
PLANES DE área ciencias naturales y aplicadas
Cronograma de clases de Práctica Profesional 2 2025 UDE.pdf
Teologia-Sistematica-Por-Lewis-Sperry-Chafer_060044.pdf
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
PLAN DE AREA DE CIENCIAS SOCIALES TODOS LOS GRUPOS
Como Potenciar las Emociones Positivas y Afrontar las Negativas Ccesa007.pdf
TOMO II - LITERATURA.pd plusenmas ultras
Mi Primer Millon - Poissant - Godefroy Ccesa007.pdf
Informe_practica pre Final.docxddadssasdddddddddddddddddddddddddddddddddddddddd
Punto Critico - Brian Tracy Ccesa007.pdf
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
Integrando la Inteligencia Artificial Generativa (IAG) en el Aula
Híper Mega Repaso Histológico Bloque 3.pdf
Welcome to the 7th Science Class 2025-2026 Online.pptx
Unidad de Aprendizaje 5 de Educacion para el Trabajo EPT Ccesa007.pdf
Welcome to the 8th Physical Science Class 2025-2026
Metodologías Activas con herramientas IAG

Interactividad

  • 1. El Diseño de la Interactividad Carlos Corrales Díaz I.T.E.S.O.
  • 2. Diseñar la interactividad de un sistema es diseñar la interfaz del mismo. Se entiende por interfaz todo sistema o dispositivo que permite establecer una relación o interacción entre dos o más sistemas de cómputo y sus periféricos, para propiciar el cumplimiento de su función. Una interfaz que permite la interacción del usuario con el sistema (no sólo con la máquina) e intervenir en él. Se le llama interfaz humana 1
  • 3. Interfaz humana: Sistema de Interacción del usuario con el Sistema de Comunicación e Información. Se constituye por un conjunto de elementos que: propician y permiten la interacción , hacen posible la búsqueda de información , facilitan la navegación por el sistema, propician al usuario la selección de entradas y salidas . 2
  • 4. Elementos constitutivos de un sistema de interactividad Dispositivos o periféricos La pantalla El teclado El ratón El jostick Los drives La impresora El CD-ROM Las bocinas El disco duro La red 3 Elementos gráficos, visuales o textuales. Botones Áreas sensibles de la pantalla Menúes Barras de menúes Iconos Colores y símbolos Hipertexto e hipermedia Banners (banderas o estandartes)
  • 5. Por la interfaz, el usuario vive el producto, la interfaz se identifica con el producto Proporciona herramientas al usuario para: correr programas, encontrar, abrir, desplegar, intercambiar información o imprimir cosas que se encuentran en el sistema La característica más apreciada de una interfaz humana es el grado o nivel de descubrimiento que proporciona al usuario que navega por el sistema 4
  • 6. Lo esencial del diseño de la interfaz humana es la pantalla. E n el diseño de pantallas: Se integra lo que hace posible la interactividad. Se concreta la estrategia de interactividad o lógica de interacción del usuario con el sistema. En este diseño de pantallas con interactividad se logra: Una estrategia de interés, exploración o búsqueda de usuario, para definir la estructura de la interactividad La carta descriptiva de la misma. 5
  • 7. La estructura de interactividad. Define las posibilidades de interacción del usuario, Las formas en que manejará los contenidos e información del sistema o interactuará con ellos. Determina un mapa de navegación del usuario por los diversos recorridos o módulos del sistema . Las posibilidades y nivel de descubrimiento que el usuario encontrará en el sistema, de acuerdo con el diseño de la navegación, búsqueda o interacción que se haga. 6
  • 8. Los factores de la interactividad La estructura de interactividad se constituye con aquello que dote al sistema de posiblidades para que el usuario realice lo que le interesa realizar. Al usuario le puede interesar: detener el sistema, retroceder, avanzar, reiniciar, elegir alternativas de recorrido, definir búsquedas, cambiar de un módulo o recorrido a otro, completar información, responder preguntas, preguntar por información, escribir información, colorear, dibujar, accionar elementos del sistema, comunicarse con otros usuarios, etc. 7
  • 9. Una forma de presentar la Interactividad (Fragmento de la interactividad) El Patio de Mi Casa. El sistema consta de cinco módulos: La Entrada o Portada, El Taller de Don Juanito, El Cuarto del Abuelito, La Feria y Rondas Infantiles. En La Portada, el usuario puede activar la presentación del sistema con un botón de control. Activada, la presentación no se podrá detener. Al terminar la presentación, aparece el Menú Principia . En él, el usuario elige el recorrido que le interese seleccionando un icono, entre aquellos que dan acceso a los módulos del programa. Estos iconos brillarán cada vez que se posicione el cursor sobre ellos. Además, sobre cada módulo aparecerá, en “hipertexto” en nombre del mismo. 8
  • 10. El Patio de Mi Casa (Continuación) Para entrar a un módulo el usuario deberá posicionarse sobre el icono que le corresponde y presionar el botón de su ratón. Desde la pantalla, el usuario tiene la posibilidad de terminar la sesión, salir del programa o consultar la sección de ayuda (Kiko el Perico). Para seleccionar las opciones de AYUDA y SALIR, se sigue el mismo procedimiento que con las otras opciones (posicionarse sobre el icono indicado y presionar el botón del control). 9
  • 11. Dos Factores del Diseño en la interactividad Los formatos de estructuras de hipertexto: Orden simple, lineal, lineal con salto, árbol, red, supercarretera . Las alternativas en el diseño: numeración , narración, sistema de códigos , carta descriptiva mixta , modelos base de computadora y scripts. 10
  • 12. 1 Diseño de organización simple La información se organiza por unidades temáticas separadas. 11
  • 13. 2. Diseño Lineal La información se organiza por unidades temáticas separadas, con nexos en una secuencia, desde un principio hasta un final 12
  • 14. 3. Diseño Lineal con Saltos La información es centralizada y lineal en segundo nivel. 13
  • 15. 4. Diseño de Arbol La información se ramifica a partir de un punto inicial inicio 14
  • 16. 5. Diseño de Red Se ingresa a la información desde cualquier nodo 15
  • 17. 6. Diseño de Supercarretera . Integra todos los formatos de hipertexto e hipermedia 16 Arbol Web Organización Simple Lineal con salto Lineal
  • 18. Carta Descriptiva de un Programa Educativo . Figura 1 Sí No Ingreso Sección 1 Sección 2 Filme Examen ¿Bien? Respuesta 17 El usuario abandona la sesión al aprobar el examen rápido. Movimiento por el programa. ¿Bien?
  • 19. Carta descriptiva de un programa de información Figura 2 18 Peces Plantas Hierba mala del mar Criaturas de las Profundidades Bacalao Crustáceos Mamíferos Delfines Ballenas Langosta Cangrejo
  • 20. Estructura Alternativa de Información Figura 3 Criaturas de las Profundidades ¿Que criatura? ¿Qué come? ¿Dónde vive? Delfín Tiburón Gente Hierba del mar Australia 19
  • 21. Esquema de un Sistema de Información Descriptivo/referencial Figura 4. Funciones del sistema de Información Sistema de Información REALIDAD SISTEMA DE REFERENCIA Referente caracterizar clasificar relacionar ubicar 20
  • 22. Carta descriptiva con códigos visuales. Figura 5. No Sí Ingreso Sección 1 Sección 2 Examen rápido ¿Bien? Película Respuesta Secuencia AV sin datos de entrada Secuencia interactiva con entrada El usuario sale al pasar el examen 21
  • 23. Story Board para Cambio de Módulo Figura 6. Finalmente: ¿Qué botón despliega un CD-I? ¡Correcto! 10 de 10 Apriete aquí para saber más del video Apriete aquí para salir del sistema Simple Gente Clásico Video Gente Simple Clásico Hombre del año 22
  • 24. Feliz realización, creatividad y participación de todos en equipo. Bibliografía Tweed W. Ross. Bloom and Hypertext : Parallel Taxonomies ?, en ED-TECH REVIEW, Autom/Winter 1993,pp. 11-15. Philips IMS. The CD-I Design Handbook, Addison-Wesley, N.Y. 1992, pp.31.45. Apple Computer. Apple CD-ROM Handbook. A guifr to planning, creating, and producing a CD-ROM, Addison-Wesley, N.Y., 1992, pp. 85-93. ITESO. El Patio de Mi Casa, Diseño de Concepto y Guión Técnico del Interactivo sobre juegos y juguetes mexicanos. 23