El Diseo de la 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

• 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)

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

• En 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(Fragment
o 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

Arbol
Lineal con salto

16
Web
Lineal
Organización Simple
18
Carta Descriptiva de un Programa Educativo.
El usuario abandona la
sesión al aprobar el examen
rápido. Movimiento por el
programa.

• Figura 1
• Sí
• No

Bien?
Ingreso
Filme
Examen
Sección 1
Bien?
Respuesta
17
Sección 2
19
Carta descriptiva de un programa de información

• Figura 2

Peces
Plantas
Hierba mala del mar
Bacalao
Criaturas de las
Profundidades
18
Crustáceos
Mamíferos
Delfines
Langosta
Cangrejo
Ballenas
20
Estructura Alternativa de Información

• Figura 3

Criaturas de las Profundidades
Que criatura?
Qué come?
Dónde vive?
Gente
Hierba del mar
Delfín
Tiburón
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
caracterizar
Referente
clasificar
relacionar
ubicar
20
22
Carta descriptiva con códigos visuales.

• Figura 5.
• No
• Sí

Secuencia
AV sin datos de entrada
Secuencia interactiva con entrada
El usuario sale al pasar el examen

Ingreso
Examen rápido


Película
Sección 1
Bien?
Respuesta

21
Sección 2
23
Story Board para Cambio de Módulo

• Figura 6.

Finalmente Qué botón despliega
un CD-I?

Clásico
Video
Clásico
Simple
Gente
Gente
Simple
Apriete aquí para
saber más del video
Apriete aquí para salir del
sistema
Correcto!
10 de 10
22
Hombre del año
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