Documentación de Proyecto de Interacción Humano Computadora Nombre del proyecto "México Rally"

1. David Sánchez Ángeles A00986307
Gerardo Reyes Pérez A01205795
Ignacio Ruiz Guerra A00889972
Interación Humano Computadora
Lizethe Pérez Fuertes
Fusión
Primer Avance de Proyecto
La propuesta del área de aplicación del proyecto es con relación al estudio
de la “Geografía Mexicana” a través de un juego interactivo que ayudara a niños
de entre 6 y 12 años de edad (de escolaridad primaria) para desarrollar
habilidades en el conocimiento de la geografía mexicana así como también la
habilidad de usar el internet como herramienta para buscar información, ya que se
propondrán sitios de internet para buscar información que el usuario no conozca
para contestar preguntas relacionadas con un estado que el usuario previamente
escogió.
Entendiendo que el estado del arte se refiere a lo más destacado o 'la
tecnología de punta' enfocaremos esto al diseño web interactivo que
presentaremos. El concepto que queremos enseñar a los menores ya ha sido
implementado, no exactamente como nosotros pensamos, pero si el uso de
animaciones sobre temas parecidos sobre la historia y datos de nuestro país no es
algo novedoso. Tampoco existen retroalimentaciones acerca de la utilidad de
estas aplicaciones y servicios. Pero nosotros como equipo visualizamos la falta de
dinamismo sobre los sitios, ya que al querer mostrar buenas animaciones que
ganen la atención de los pequeños los sitios se vuelven lentos y por lo tanto no
son tan productivos. También están aquellos que muestran los simples datos de
una manera organizada y estética pero no intentan llegar a niños más pequeños
como queremos nosotros, ya que carecen de dibujos y animaciones. Algunos
otros proyectos involucran juegos donde requieren más comprensión por parte de
los usuarios. Este último es el camino que intentaremos seguir para que nuestro

2. proyecto logre la meta de ser un sistema capaz de enseñar a los más pequeños y
además queremos que a la vez sea una.
Teniendo como área de innovación varias maneras de mejorar proyectos
que ya están realizados de manera que se mejoren las formas, colores,
aplicaciones, información para tener una mayor experiencia didáctica para
aprender la geografía de México de manera más amena. Se aprecia en esta
aplicación web que los colores son muy monótonos ya que solo usan el color
verde y no maneja información de los estados ya que solo se maneja el acomodo
de los estados de México pero no existe una complejidad para el usuario ya sea
un reto mayor para la generación del conocimiento
(http://www.xtec.net/~ealonso/flash/mexico3.html). En esta aplicación web
manejan varias actividades para reforzar conocimientos de los mismos estados
pero no maneja información acerca de los mismos
(http://cuentame.inegi.org.mx/juegos/default.aspx?tema=J) por ultimo en esta
aplicación web es muy poco llamativa ya que saturan la pagina con mucha
información escrita que no dejan al usurario interactuar de manera más amena
(http://www.cetechihuahua.gob.mx/portal/cms/alumnos/juego_geo_mexico.html)
Además de intentar mejorar los conceptos que ya están en línea, también
procuraremos usar tecnologías más ligeras pero que generen los mismos o
mejores resultados..
El proyecto esta centralizado para usuarios que ya conocen el manejo del
internet y de una computadora, los usuarios manejan una lectura apropiada para
la interacción de esta aplicación y conocen algo de historia de los estados de la
republica mexicana, el género de los usuarios es mixto ya que pueden ser
hombres o mujeres ya que está pensado en alumnos de primaria de entre 6 y 12
años de edad para que aprendan de manera conjunta con lo que ven en clase y lo
apliquen en la aplicación para reforzar sus conocimientos aprendidos en la misma
ya que está planeado no solo para un estado, los usuarios pueden estar a lo largo

3. de la republica mexicana por lo cual habrá un aspecto multicultural en la misma
aplicación.
La meta es tatar de que los usuarios aprendan de manera didáctica y
divertida la geografía, historia y rasgos culturales de los estados de la republica
mexicana teniendo las siguientes tareas en consideración:
Manejo adecuado de los nombres
Ubicación geográfica de los estados
Comprensión de la historia de los estados
Manejo adecuado del uso del internet (en investigación)
Retos educativos
La tecnología usada para poder realizar este proyecto serán en dos partes,
la primera será basada en flash para algunos sistemas interactivos así como
también se usara Java Script para el funcionamiento y algunas aplicaciones del
mismo proyecto ya que se debe de manejar una plataforma diferente para el
manejo de la información y el trabajo conjunto de las carreras ISC y LAD para la
mayor optimización de los conocimientos de cada una de ellas.
Nombre del Sistema: El nombre del sistema es “México Rally”
Tipografía: Chalkboard será utilizada para la tipografía general del
texto y la tipografía chalkduster será utilizada para encabezados y
títulos

4. Tipografías
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Chalkboard Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx
Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll
Chakduster Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv
Ww Xx Yy Zz
Paleta de colores: Las imágenes usan colores llamativos para llamar
la atención del usuario, el fondo del sistema es de color negro para
enfocar toda la atención y tener mayor contraste en el juego
interactivo.

5. A continuación se presenta el diseño del concepto del Sistema Interactivo.

10. Segundo Avance del Proyecto Final
Diseño de las componentes del sistema interactivo
Análisis de las tareas del usuario que abarcará el sistema interactivo.
Los usuarios estarán definidos con una edad de entre 7-15 años que abarcan los
niveles de escolaridad de primaria y secundaria, los usuarios serán evaluados según sus
intereses y/o conocimientos con respecto a la materia de Geografía de México, por lo cual
para recabar datos aplicaremos encuestas para conocer las necesidades y expectativas
de nuestros “usuarios potenciales” con respecto a nuestra propuesta de producto. La
encuesta contiene las siguientes preguntas.
1.- Nivel educativo: Primaria. Secundaria.
2.- Grado: 1º 2ª 3ª 4ª 5º 6º
3.- ¿Tienes una computadora que puedas usar en tu casa o escuela?
Sí. NO.
4.- ¿Sabes ocupar una computadora y el servicio de internet?
Sí. NO.
5.- ¿Te gusta la materia de “Geografía de México”?
SÍ. NO.
6.- ¿Cómo se te hace la clase que imparte el profesor sobre la materia de “Geografía de
México”?
Interesante Importante Indiferente Aburrida Insoportable

11. 7.- Sin considerar al profesor ¿Cómo se te hace la materia de “Geografía de México”?
Interesante Importante Indiferente Aburrida Insoportable
8.- ¿Se te dificulta la materia de “Geografía de México”?
SÏ. NO.
9.- ¿Te gustaría aprender “Geografía de México” a través de un juego en internet?
Sí. NO.
10.- ¿Crees que con un juego en internet sobre “Geografía de México” sería menos
aburrido y más fácil de aprender la materia?
Sí. NO.
11.- ¿Qué prefieres más?
Imágenes. Texto.
12.- ¿Cuáles son tus colores favoritos?
Azul. Verde. Rojo. Amarrillo. Rosa. Morado. Naranja.
Otro: ______________
Podemos concluir por las encuestas a usuarios potenciales que usarían nuestra
aplicación. Los usuarios prefieren usar mas imágenes que texto debido al contenido de la
materia “Geografía de México” ya que algunos piensan que el profesor hace más
complicada la materia y que el texto se les hace un poco tedioso o aburrido, prefieren mas
colores llamativos que colores obscuros así como también prefieren mas imágenes que el
uso de mucho texto.

12. Texto
No
33%
Si
67%
Aburrido
Insoportable Interesante
13% 10%
Importante
27%
Aburrida
33%
Indiferente
17%

13. Aprender
No
19%
Si
81%
Imágenes
No
19%
Si
81%

14. Documentación de las tareas analizadas.
El flujograma que seguiremos está definido por los pasos que el usuario podrá
seguir conforme se lleva a cabo el trayecto de la dinámica del juego y se solicitan
acciones y se ofrece retroalimentación través de la interfaz gráfica.

15. Diseño de las componentes o elementos con las que el usuario realizará las
diferentes interacciones.
El diseño de componentes que se utilizaran son cuadros de texto, botones, opción
múltiple y ventanas de textos la cual darán una interacción con el usuario dándole
información acerca de los estados y con ellos aprender sobre la Geografía Mexicana. El
diseño debe de ser llamativo ya que los usuarios son todavía considerados niños, lo que
da como resultado una interacción con colores, juegos y manipulación de animaciones
necesarias para crear interés entre los usuarios pero no dejando fuera la información con
texto ya que se necesita que los usuarios lean para tener información para conocer la
geografía mexicana.

25. Análisis de la aplicación de los principios del diseño de interacción en las
componentes diseñadas en tu sistema interactivo.
1. Usabilidad: Debe de ser una interacción usable sin una complejidad innecesaria y
que cause interés para los usuarios, quienes manejaran la interfaz de manera
didáctica y sencilla. Usaremos animaciones básicas y eventos para que además de
recibir una enseñanza, el usuario tenga un momento de entretenimiento.
2. Proceso de diseño: Nuestro proceso de diseño esta y será desarrollado de a cuerdo
a los siguientes pasos:
 Análisis de necesidades: debido a que el proyecto surgió como búsqueda
de una necesidad sobre un cierto grupo o sector de la sociedad y con un
enfoque preciso, nuestro análisis fue corto y rápido. Así que, notando las
deficiencias y habilidades que presentan este tipo de usuarios en el estudio
de materias básicas como matemáticas, geografía e historia por nombrar
algunas y buscando la mayor interacción con el usuario elegimos crear un
sitio que apoye a en el área de geografía nacional a estos estudiantes.
 Planteamiento de funciones y diseño: a base de lluvia de ideas propusimos
la manera en que funcionará y se desarrollará el sistema, visualizar como
sería la interacción con el usuario final así como el diseño que tendría, con
ayuda de un mapa mental. Todo esto tomando en cuenta los gustos,

26. reacciones y formas de trabajar del usuario, para lo cual nos basamos en
encuestas hechas a tipos de usuarios a los que va destinado nuestro
producto, así como la observación de sus tendencias en este ámbito
educativo.
USUARIO
METODOLOGÍAS
DE OBSERVARCIÓN
DEL USUARIO CAPACIDADES DEFICIENCIAS
REQUERIMIENTOS DEL
SISTEMA
SITIO WEB
 Creación de diseño: Consiste de varios pasos, comenzando con el
desarrollo de pequeños detalles visuales, funciones básicas del sistema,
administración de espacios en el diseño, prueba de errores, hasta llegar al
prototipo.
 Evaluación de producto: Presentación de un prototipo a pequeños grupos
de usuarios, con el fin de conocer sus experiencias con éste. También
consiste en someter al producto a pruebas de estrés y manejo de errores.

27. Cualquier desperfecto o detalle que sea necesario componer sufrirá de un
análisis de desarrollo nuevamente, hasta llegar al producto final.
PRODUCTO
FINAL
ANÁLISIS
PLANTEAMIENTO
CREACIÓN
EVALUACIÓN
3. Ventanas y menús: Las ventanas y menús deben darán solución a las necesidades
que el usuario pueda generar, deben de generar iconos e imágenes para que el
usuario pueda saber que harán cada uno de los botones ya que los usuarios serán
poco experimentados en el uso de una computadora, lo que llamamos como usuarios
intermedios. No ocuparemos diferentes ventanas más que las del explorador,
enfocándonos únicamente en menús animados y sencillos, mostrando solo lo
necesario para el funcionamiento del sistema.

28. 4. Iconos y tipografía: Usaremos un tipo de letra Chalkboard, variando un poco el
tamaño de ésta, como recordamos aún estamos en un estado de planteamiento de
primer prototipo. Los iconos y demás elementos visuales serán los prediseñados por
las herramientas con las que trabajaremos para desarrollar el sistema.
Tipografías

29. Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Chalkboard Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx
Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll
Chakduster Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv
Ww Xx Yy Zz
5. Dispositivos de interacción: Los dispositivos necesarios son los elementales en una
computadora, teclado, mouse y display. Existe la posibilidad de que el sitio pueda ser
visto desde dispositivos móviles, pero sin la funcionalidad que muestra en un
ordenador.
6. Organización y distribución: La organización y distribución de nuestros elementos
se irá dando conforme a la interacción del usuario, esto debido a que nuestro sistema
comienza con pocos elementos y no es hasta la interacción con el usuario cuando
genera más componentes y funciones. Visualmente todo estará centrado sin
sobrecargar la pantalla con elementos ni componentes, mostraremos los nuevos
elementos quitando los anteriores o tapándolos con los nuevos.
7. Widgets y controles: Se generaran controles adecuados para cada necesidad que el
usuario pueda tener en el manejo de la interacción y/o animaciones para ejemplificar
el estudio de los estados, los botones serán sencillos en la parte superior de la
pantalla abarcando una parte del banner que se colocara en la parte de arriba de la
aplicación.
8. Retroalimentación y manejo de errores: La retroalimentación se dará cuando el
usuario se equivoque en ejecutar una acción y en resultado de las preguntas que se
realizaron, se desplegara un mensaje dándole posibles soluciones así como
información del error generado.

30. 1. Esfuérzate por ser consistente: La consistencia del sistema está en presentar un
menú en la parte superior el cual el usuario puede navegar en el sitio y usar la
aplicación del juego por eso se usara un banner con colores llamativos para que este
menú no se pierda de vista al usuario con una tipografía chalkduster y el usuario
tendrá la opción de usar la aplicación y recibir una retro alimentación de ganar o
perder (acertar la pregunta o contestar mal la pregunta).
2. Busca usabilidad universal: Tratar de que la interfaz sea generalizada no solo para
un país, teniendo en cuenta el idioma, cultura y otras alternativas para que sea
entendido y apreciado la interfaz en otras partes del mundo.
3. Proporciona retroalimentación: La interfaz puede generar excepciones que pueden
llegar a detener la aplicación que la mayoría de las veces son generadas por acciones
del usuario por lo que la interfaz debe de reconocer cuando una excepción es lanzada
darle una opción al usuario.
4. Diseña diálogos que llevan a un fin: Usar la aplicación tiende a terminar en un final
conquistando todos los estados de la republica y seguir intentándolo hasta lograrlo, el
inicio es entrar a la aplicación a jugar, se va progresando con los estados hasta acabar
de responder todas las preguntas de cada estado y se termina al finalizar con todos
los estados.
5. Es mejor prevenir errores: No dejar nada a la probabilidad, debe de ser una interfaz
determines tratando de saber que va a suceder después, tratando de pensar que error
pudiera generar el usuario para prevenir el error y prevenir frustraciones para el mismo
usuario de fallas del sistema.
6. Permite deshacer: Permitir un rollback de lo que tenía la interfaz en un estado
anterior a la última ejecución que hizo el usuario para corregir errores que se haya
dado cuenta el usuario que ha cometido.
7. Otorga el control al usuario: El control debe de estar limitado para que no pueda
destruir la interfaz para darle la sensación de que tiene el control de la interfaz al 100%
pero solo tendrá el control de escoger que hacer o que estado elegir pero no podrá
modificar el contenido.
8. Evita sobrecargar la memoria del usuario: La interfaz será mayoritariamente
gráfica, con poco texto que comunique lo que tenga que comunicar.

31. Bibliografía:
Lumsden, J. (2008) Handbook of research on user interface design and evaluation
for mobile technology. Hershey, PA.
Buxton, B. (2007 )Sketching user experience : getting the design right and the right
design / Bill Buxton. San Francisco, Calif. : Morgan Kaufmann, 2007
Tercer Proyecto Parcial
Diseñando el sistema Interactivo
Desarrollo de la aplicación………..
Diseño de evaluación de las componentes
La evaluación se llevara a cabo con un grupo reducido de cinco usuarios
potenciales, se llevara a cabo en un ambiente natural donde usaran la aplicación,
que sería después de la escuela para contestar una tarea o material para repasar
en su casa, para fines prácticos los usuarios serán el primo así como amigos del
mismo que van en la misma institución que se encuentran en un nivel primaria
cursando el 6° grado de la misma, el parentesco con los usuarios es por parte del

32. compañero Ignacio Antonio Ruiz Guerra, a los usuarios se les dará la aplicación a
evaluar para que interactúen con ella, los aspectos a evaluar serán:
La funcionalidad de animaciones hechas para captar la atención de
los usuarios.
El interés que genera el sistema con los usuarios.
La funcionalidad del juego interactivo, agradable y atractivo para el
usuario.
La legibilidad y el vocabulario del mismo para ser entendido por los
usuarios.
La gama de colores y tipografía para apreciar iconos, letras al
momento de usar la aplicación.
La funcionalidad en diferentes exploradores, tales como IE6 (más
común en escuelas), Google Chrome y Fire Fox.
Observación de Resultados
1. Algunas animaciones no les parecieron interesantes a los usuarios, ya que
tardaban en desplegarse y al final cansaban al usuario al usar la aplicación,
pero la mayoría de los usuarios les agrado las animaciones en general por
lo cual solo mejoraremos las animaciones que no desesperen a los usuarios
por el cargado.
2. El interés de los usuarios al inicio fue casi nulo ya que no les agradaba la
materia de “Geografía” por la cantidad de lectura que tienen que hacer, pero
conforme usaban la aplicación se les fue familiarizando los temas y les
empezó a agradar.
3. Gracias al juego los usuarios mostraron más interés ya que a esa edad los
juegos se les facilitan y les ponen un reto el cual siempre tratan de superar
por lo cual el juego los motivaba a seguir intentándolo.
4. El vocabulario les fue un poco indiferente a los usuarios ya que por el grado
de escolaridad no conocían todas las palabras que se desplegaban por lo
cual intentaremos usar un lenguaje más coloquial para ellos.
5. Los colores fueron aceptados por los usuarios ya que les gusto el colorido y
las formas de las imágenes relacionándolas con la cultura mexicana y la
tipografía fallo ya que la tipografía escogida no se encuentra en todas las
computadoras (Chalkboard y Chalkduster).
6. La compatibilidad de los exploradores con la interfaz no fue completa ya
que en algunos exploradores (ej. IE6) no funciono la distribución de la
aplicación.

33. Acciones Correctivas
Las acciones correctivas a seguir son las siguientes:
Mejorar las animaciones en funcionalidad para evitar largas
esperas para los usuarios.
Seguir tratando de darle interés a los usuarios para estudiar
“Geografía”.
Darles más opciones de juego o más retos a los usuarios.
Cambiar el tipo de vocabulario para que los usuarios entiendan
lo que se despliega.
Manejar mejor las imágenes para no perder pixeles y por ende
que no se deformen.
Manejar mejor la compatibilidad con la mayoría de los
exploradores.
Análisis y Evaluación
La evaluación que se obtuvo se manejan fue con pruebas de usabilidad ya
que se tomo en cuanta un grupo de usuarios que nos ayudara a evaluar la
aplicación para corregir errores y/o posibles mejoras. El estudio de campo que se
tuvo fue en una ambiente en el cual los usuarios se desempeñan cotidianamente,
sus casas, para poder ver que hacían y como se desempeñaban usando la
aplicación. La evaluación analítica se aplico después para mejorar lo que se tenía
con respecto a las pruebas obtenidas en la primera fase de usabilidad de la
aplicación.
Con los resultados obtenidos en la observación de los usuarios
interactuando con el sistema y viendo los puntos de mejora en los cuales tenemos
que trabajar para dar una sistema enfocado a los usuarios que al final ellos serán
los que usen la aplicación, nos enfocaremos mas en las animaciones que les
presentamos para poder captar su atención y que se les sea agradable para tener
más interés en usar la aplicación ya que el tema no se les hace divertido o se les
vuelve tedioso además de usar un vocabulario de acuerdo a su nivel de

34. escolaridad, ya que algunas palabras se les dificultan o no conocen el significado
por qué no las usan con cotidianidad así como los colores que les gustan más que
las palabras y el uso del juego interactivo se les facilito mas ya que por la edad
aprenden más rápido un juego, todo esto está relacionado con el usuario que
después de la evaluación pudimos observar. Por parte de la funcionalidad que es
un evaluación analítica, que es el poder usar la interfaz en diferentes exploradores
y que funcionen todas las aplicaciones del mismo.
Evaluación del Sistema “México Rally” por usuarios potenciales
1.- Reacción del usuario ante las animaciones.
a) Asombrados b) Indiferentes c) Disgustados
2.- Que interés demostró el usuario con la aplicación.
a) Mucho interés b) Indiferentes c) Poco interés
3.- Pudo usar y entender el juego interactivo.
a) Lo entendió b) Se le dificulto la interfaz c) No pudo usar la interfaz
4.- Le entendió al vocabulario empleado y los colores no lo saturaron
a) Le entendió al vocabulario y b) Entendió casi todo y le fue poco c) No entendió mayoría
le fue agradable agradable la interfaz del vocabulario y no le
gusto la gama de colores
5.- Funciono en el explorador que utilizo el usuario
a) Si b) No

35. Evidencias

36. Proyecto Final
El proyecto final tuvo muchas modificaciones por las evaluaciones que se
tuvieron, en la primera propuesta se tiene un sistemas que no consideraba mucho
a los usuarios, solo estaba definido como se comportaría la aplicación con
respecto a las acciones que tomara el usuario pero jamás se evaluó a un usuario
potencial. En el segundo avance del proyecto se presento la misma idea del
primer parcial pero con modificaciones hechas por las encuestas realizadas a
posibles usuarios de nuestra aplicación de una escuela secundaria así como
también una escuela primaria lo cual nos llevo a una modificación mas visual al
usuario para hacer el tema de “Geografía de México” más amena a los usuarios
para el tercer parcial se llevo el mismo diseño y se desarrollo una aplicación de
MacOs llamada “I-Web” que tuvo complicaciones por la cantidad excesiva de
scripts que generaba la plataforma del software y al momento de probarla con
usuarios potenciales nos llevo a la conclusión de que era muy lenta por lo misma
saturación de información que se generaba por default y que la mayoría no se
podía modificar o eliminar lo que causaba en los usuarios desesperación y falta de
interés por lo cual decidimos modificar todo lo que se tenía y generar una nueva
aplicación más compacta y rápida para los usuarios.
Primer Parcial

37. Segundo Parcial
Tercer Parcial

38. Proyecto Final