Capítulo 5.

Diseño de Interactividad Digital

5.1 Interactividad y aprendizaje

Una de las claves del éxito de los sistemas hipermediales se encuentra en su capacidad de
generar situaciones interactivas, es decir, de provocar un diálogo entre el sistema y el usuario,
ocasionando un fenómeno de intercomunicación en el cual el aprendiz elige el itinerario a
seguir y pauta su propio aprendizaje. De este modo, los entornos multimedia han logrado
romper con la transmisión unidireccional y lineal de la información, transformándose en
vehículos de discusión a partir de los cuales se generan nuevas estrategias de búsqueda y
acceso al conocimiento [Del Moral y García, 1997].

Entre las múltiples técnicas que se han empleado para construir desarrollos informáticos
orientados al aprendizaje destacan la inteligencia artificial, la enseñanza programada, etc.
[Jonassen, 1993], pero es la hipermedia la que goza, hoy por hoy, de una mayor aceptación.
Esta tecnología aporta algunos elementos claves en el ámbito del aprendizaje por
computadora, como son la interactividad, el uso de enormes bases de datos e información, la
información multimedia, la representación del conocimiento de modo similar a la forma de
procesamiento de la información del aprendiz, etc. [Beltrán, 1992].

En este capítulo como ya lo habíamos mencionado anteriormente será el turno de analizar a

los ILE (Interactive Learning Environment). Como ya se ha comentado la interactividad del
proyecto (ILE - usuario) cuenta con una gran importancia. Es por esto que se debe tener un
buen diseño de ésta para apoyar a las experiencias de enseñanza-aprendizaje desarrolladas a
lo largo del ILE, además de que se logre una congruencia y relación armónica entre todos sus
elementos estructurales, de navegación, mediáticos y sus eventos correspondientes. Es donde
se unirá el CLE con el ILE para dar lugar al CILE mencionado con anterioridad. Para la
realización del Diseño de Interactividad primero se tienen que contemplar tres áreas, e ir
desarrollando secuencialmente (no se puede alterar el orden) cada una de ellas siendo éstas las
que a continuación se listan:

43
1. Diseño de Información.
2. Diseño de Interacción.
3. Diseño de Presentación.

5.2 Diseño de Información

El diseño de información se podría representar con la pregunta ¿qué es el producto?, ya que

esta área define el producto, la audiencia, planea el proyecto y organiza el contenido [Cortina,
2001]. En otras palabras es la estrategia, la planeación, la lógica. Su producto final es el
flowchart el cual se definirá posteriormente. Las tareas que se deben realizar en esta etapa son
las siguientes:

?? Definir las metas del producto.

?? Definir las metas de la audiencia.
?? Planear como el producto llegará a la audiencia.
?? Elegir la(s) herramienta(s) correcta(s).
?? Crear una lista de contenido.
?? Crear un plan de proyecto.
?? Organizar el contenido.
?? Producir un flowchart de contenido.

5.2.1 Producto

El producto a desarrollar como ya se había comentado en el capítulo dos es un CILE

(Constructivist Interactive Learning Environment) de la problemática de especies en peligro
de extinción ubicadas en Africam Safari, el cual podrá ser accesado a través del Web. Toca en
este capítulo explicar la parte interactiva (Interactive Learning Environment - ILE) para
posteriormente diseñarla, desarrollarla e implementarla en una aplicación mediante las
herramientas ya descritas en el capítulo cuatro.

44
5.2.2 Metas

¿Qué queremos conseguir con el desarrollo del ILE? Dentro de las metas en un interactivo se
espera que el usuario no solo obtenga información de éste, sino que cumpla con otras
expectativas [Cortina, 01], algunas de ellas están ligadas y apoyan a las experiencias de
enseñanza - aprendizaje que queremos que tengan los usuario y son las siguientes:

?? Que aprendan y retengan información.

?? Que se diviertan.
?? Que entiendan.
?? Que experimenten.
?? Que actúen o compren.
?? Que obtengan respuestas.

Es así que se pretende que el usuario del ILE aprenda, entienda, obtenga respuestas,
experimente y se divierta a través de explicaciones conceptuales, imágenes, video, gráficas,
audio y un contexto bien definido, todo de una manera clara y simple de presentar la
información además de contar con una división modular para su mejor entendimiento bajo un
ambiente recreativo que cuente con variedad, ingenio y creatividad. Todo esto con la finalidad
de formar una conciencia ambiental y de que se tome acción positiva en al problemática. Es
claro que no todos los usuarios llegarán a este punto pero si se empieza por informarlos por
algo se estará empezando este proceso de concientización.

Se busca además por otra parte que este ILE se ponga a disposición del mayor número de
gente, pudiendo valernos del impulso de instituciones interesadas en ella, como son las
educativas, ya que se puede utilizar como apoyo para alguna asignatura relacionada con los
temas de la problemática, siendo su beneficio el de que se cuente con tecnologías que
promueven un mejor aprendizaje. O bien a organizaciones y empresas donde se obtengan
beneficios de tipo publicitario utilizando la estrategia de promover su site que cuenta con un
ambiente de aprendizaje para los hijos de sus usuarios o clientes.

45
5.2.3 Audiencia

Para saber qué se necesita para alcanzar a la audiencia, cómo se alcanzará y qué necesidades
se cubrirán se deben analizar los puntos de público meta, uso, contexto y equipo, los cuales se
describirán uno por uno a continuación:

Público Meta
El público meta que se busca en el ILE es preferentemente el de estudiantes que estén
cursando su educación media (secundaria) y media superior (bachiller), sin distinción de sexo.
Es posible que otro tipo de público pueda accesar a él, si cuenta con mayor grado de
escolaridad no tendrá problema alguno con la navegación dentro del ILE, en caso contrario,
de que el usuario cuente con una escolaridad menor que la indicada puede que encuentre
ciertos obstáculos y no se complete del todo el aprendizaje, pero no se pierde nada con
intentarlo. El usuario preferentemente deberá pertenecer a un estatus social medio, medio alto
debido a que se deben tener los recursos económicos suficientes para contar con el equipo
necesario para su visualización. Puede ser también el caso que tal vez no cuente con estos
recursos pero que si lo pueda accesar desde su institución educativa o desde algún cibercafe
los cuales van en aumento en popularidad en nuestro país.

Uso
El producto se utilizará en hogares y cibercafes de manera individual o grupal con familiares
o amigos y de forma ocasional. En las escuelas su uso será en forma grupal con o sin la
asistencia de un profesor(a) y de forma frecuente por la existencia de varios salones de clase
en los diferentes grados escolares.

Contexto o ambiente
Su entorno depende del lugar donde se haga uso del ILE. En el hogar es impredecible ya que
se cuentan con muchos factores externos (TV, teléfono, aparatos electrodomésticos etc.) por
lo tanto puede llegar a ser silencioso o ruidoso. En la escuela la mayoría de las veces habrá un

46
ambiente de interacción maestro - alumno, sin llegar a ser escandaloso por el ambiente propio
de un salón de clases.
Equipo
Es necesario que el usuario cuente con una máquina capaz de satisfacer los requerimientos
necesarios para la visualización del ILE. Además de verificar si cuenta con la capacidad
necesaria para soportar la carga de multimedia para así obtener un buen performance y al
mismo tiempo calidad en la presentación. Es claro que debe tener también instaladas las
aplicaciones para hacer uso de esa multimedia o bien que su navegador cuente con los plug-
ins de esas aplicaciones como son los del RealPlayer, Flash, QuickTime y en caso de ser una
plataforma UNIX instalar el plug-in de Java para un mejor desempeño de los applets bajo
JMF para la visualización de video para reemplazar la falta de plug-in de QuickTime para esta
plataforma.

5.2.4 Herramientas

¿Qué tecnologías se utilizarán para desarrollar el ILE? En este caso se analizarán las
requeridas para el desarrollo en el Web. Se hará un desarrollo haciendo uso de la tecnología
JSP, Java, JMF, JavaScript, HTML, Flash, y de una base de datos (Oracle 8i). Se realizará una
integración de texto, imágenes, sonido y video para una mejor presentación de la información.
Rico en opciones y medios.

Ventajas: Se pueden hacer actualizaciones en el ILE, la información se vuelve dinámica, y se

pueden utilizar diversas aplicaciones y tecnologías. Proporciona un standard, lo cual beneficia
la compatibilidad de plataformas. Además de que si no se contará con el apoyo de la
multimedia no se tendría el mismo impacto de la problemática presentada.
Desventajas: No todos los usuarios cuentan con el servicio y conexión a Internet o con las
aplicaciones o plug-ins necesarios para la visualización completa del ILE. No existe la
confiabilidad de que el usuario desarrolle en su totalidad todo el sistema o que sea asesorado
por alguien mas haciendo más volátil su nivel de aprendizaje.

5.2.5 Planeación

47
¿Qué contenido se podrá incluir tomando en cuenta el tiempo, costo y recursos del proyecto?
Esta parte del diseño es indispensable porque nos ayuda reducir costos y recursos humanos.
Las diferentes actividades depende mucho del proyecto a seguir, como son investigación,
captura, edición, diseño de interfaces, creación de elementos mediáticos, producción,
programación, pruebas, etc.

Se debe contemplar añadir a cada actividad el número de personal requerido para su

realización, el tiempo que va a durar cierta actividad, así como su costo. No es fácil decidir las
actividades de un proyecto, por lo que se calcula un porcentaje de riesgo, es decir un
porcentaje de extras que se llegaran a olvidar en una actividad (imponderables). Es
conveniente denotar que cada actividad se puede subdividir en otras más pequeñas y que
pueden ir varias en paralelo, es recomendable realizar esta planeación para tener una mejor
visión del seguimiento del proyecto y de sus recursos para tener un mejor control del trabajo.
En el caso de la creación de este proyecto la planeación que se le dio no contemplo personal y
costos por ser un proyecto de tesis, aunque si se contempló el asesoramiento requerido para
desarrollar cada área del ILE. Se podrá observar un ejemplo del modelo prototipo de la
planeación del sistema en la parte de apéndices de este documento.

5.2.6 Organización

¿Cómo será organizado el contenido del ILE? Existen varias formas de hacerlo, podemos
escoger de entre siguientes:
?? Temática.
?? Geográfica.
?? Cronológica.
?? Narrativa.

En el ILE la organización que se escogió fue la temática, siendo el tema principal los
animales en peligro de extinción y de ahí se dividió en los temas de causas, efectos,
propuestas de apoyo y solución y casos de animales en peligro de extinción. Posteriormente

48
éstos se subdividieron en más temas estando muy relacionados unos con otros conformando
una red organizada de todo el proyecto.

Después de contar con esta estructura funcional se desarrolla entonces un Flowchart.

[Cortina, 2001]. El diseño de un Flowchart debe estar basado en los siguientes puntos:
?? Contenido: La organización y estructura de la información.
?? Usabilidad: Los controles y rutas de acceso que el usuario espera encontrar.
?? Simplicidad: Diseños claros y enfocados.
Se podrá observar un ejemplo de un modelo prototipo del Flowchart del sistema en la parte
de apéndices de este documento.

5.3 Diseño de Interacción

El diseño de interacción se podría representar con la pregunta ¿cómo debe funcionar el ILE?,
ya que en esta área se diseña la navegación, los tipos de interacción y los controles teniendo
como resultado al Storyboard. La transición entre diseño de información y diseño de
interacción significa convertir la información en una experiencia generando interfaces para
acceder a esta información [Cortina, 2001]. Las tareas que se deben realizar en esta etapa son:
?? Diseñar la navegación y las rutas de acceso.
?? Definir los eventos de cada pantalla.
?? Diseñar controles de interacción.
?? Creación del Storyboard.

5.3.1 Navegación y rutas de acceso

Es decir el usuario debe saber exactamente su ubicación y hacia donde el sistema le permitirá
ir. En otras palabras es un sistema de señalización digital, un mecanismo de orientación y
ubicación [Cortina, 2001]. Existen diversas modos de señalización digital para cumplir con
este objetivo como son los menús principales, los menús globales, los índices, entradas y
salidas, atajos y accesos directos. En este proyecto utilizaremos los menús principales, los

49
cuales van a las secciones principales antes mencionadas, y algunos atajos o accesos directos
entre secciones diferentes. Es recomendable evitar callejones sin salida, las vías únicas de
acceso, así como las de excesiva profundidad.

Todo esto con el fin de obtener en cada pantalla una definición concreta de su uso, una
especificación clara de accesos y controles requeridos y por último una posición jerárquica
dentro de todo el proyecto, además de poder distinguir a los componentes persistentes que
irán en todas las pantallas y a los que sólo aparecerán en determinadas pantallas. Como
resultado de esto, cada pantalla posee ahora:
?? Una definición concreta de su uso.
?? Una especificación clara de accesos y controles requeridos.
?? Una posición y jerarquización definida dentro del contexto general.

5.3.2 Eventos de cada pantalla

Los eventos de pantalla son lo que va a pasar en cada una de éstas cuando el usuario entre a
ellas. Dentro de cada una de las pantallas, será colocada la información, los datos y los
elementos mediáticos requeridos. Debe ser la mejor forma de presentar la información con
ayuda de los multimedios con el fin de que se cumplan las metas ya descritas anteriormente.
Hay que ver que medio es el más adecuado, a la vez de contar con diversidad de éstos. Se
debe tener ya definido en esta parte que imágenes se van a visualizar, el tamaño y la
disolvencia en que van a aparecer éstas, su posición en la pantalla, también que tipos de
sonidos y videos se van a utilizar, cuanto tiempo de duración van a tener, etc.

5.3.3 Controles de interacción

En este paso se va a realizar el diseño de los controles de interacción (menús, botones,

accesos, etc.) y sirven como herramienta para que el usuario realice la interacción en el ILE.
Por ejemplo los eventos además puede que cuenten con controles y son los descritos aquí,
para que el usuario pueda decidir como ver la interacción. La navegación también cuentas con

50
estos controles aquí es donde se define si contarán con zonas calientes (rollovers) o serán
planos.
5.3.4 Creación del StoryBoard

Cada pantalla requiere de un análisis propio para determinar secuencia, organización y

jerarquización de la información mostrada [Cortina, 2001]. La manera de definir los eventos
de cada pantalla es a través de un Storyboard el cual define:
?? Que medios requiere cada pantalla.
?? Que verá el usuario cuando acceda a cada pantalla.
?? Que controles de navegación existirán en cada pantalla.
?? Que controles de interacción existirán en cada pantalla.
?? La secuencia de eventos predefinidos de cada pantalla.

5.4 Diseño de Presentación

El diseño de presentación se podría representar con la pregunta ¿cómo debe verse el ILE?, ya
que define el estilo y el formato a seguir de los elementos presentados en el Storyboard. Tiene
como resultado al prototipo funcional [Cortina, 2001]. Las tareas que se deben realizar en esta
etapa son las siguientes:
?? Definir el concepto visual y el estilo.
?? Diseñar el sistema de retículas de pantalla.
?? Crear los elementos estructurales de cada pantalla (fondos, ventanas, imágenes, etc.).
?? Crear los elementos de control.
?? Integrar los elementos mediáticos.
?? Crear pantallas prototipo.

5.4.1 Estilo

Se debe considerar que el contenido de cualquier interactivo define el estilo a usar [Cortina,
2001], además de que el estilo elegido debe ser considerar los siguientes puntos:

51
?? consistente: que no cambie.
?? unido, no uniforme: que no haya repetición.
?? atractivo: que se gane la atención del usuario.
?? un apoyo al contenido: es un punto importante.
?? congruente: entre el texto y los elementos mediáticos.

El estilo en este caso se basó en la naturaleza ( verdes, cafés), en rasgos de animales como son
sus características físicas (pieles, plumajes, huellas), y en motivos africanos, al ser Africa
identificado por la mayoría de las personas como el hábitat de los animales. Este estilo
elegido cumple con los aspectos de un buen estilo, ya que es atractivo a los usuarios, es
consistente, ya que no cambia de forma que el usuario no piense que está en ILE´s diferentes.
Es congruente, es decir existe relación entre el texto de una pantalla con las imágenes
presentadas en ésta también. Es un apoyo al contenido y esto es muy importante ya que nos
ayuda a cumplir con las metas del ambiente de aprendizaje.

5.4.2 Elementos de presentación de interface

Los puntos faltantes de las tareas del Diseño de Presentación se conjuntan en estos elementos
los cuales son
?? Fondos
?? Botones
?? Ventanas
?? Texto
?? Imagen
?? Sonido
?? Video

5.4.3 Prototipo

52
El resultado de este procedimiento es el prototipo o versión beta la cual va a contar aún con
correcciones. Después de su creación se le aplicarán pruebas de funcionalidad y usabilidad.
Al terminar esta parte (ILE) y fusionarlo con lo diseñado para el (CLE), ambos diseñados
pensando uno en el otro, se concluirá el diseño global del CILE propuesto, terminando aquí la
participación de las áreas ajenas al cómputo y dejando el todo lo demás para esta área.

53