SlideShare una empresa de Scribd logo
1 de 7
Título del Documento: Documento de análisis de diseño.
ORGANIZACIÓN PATROCINANTE: FMAT-UADY
PROYECTO: Desarrollo de la aplicación web “¡Súbelos al
techo!” para mejorar el servicio de autobuses urbanos en la
ciudad de Mérida, Yucatán.

Revision: 2
Fecha: 30/11/2011

Documento de análisis del
diseño
Desarrollo de la aplicación para dispositivos
móviles “AppCarr” para ayudar a los usuarios a
encontrar un lugar de estacionamientoen la
Facultad de Matemáticas de la UADY.

Versión 1.0

Elaborado por:
Eduardo B. Canché Vázquez
Elías Armando Canché Canché
Alejandro Sumárraga Ugalde
Carlos Araujo Piña

i
Título del Documento: Documento de análisis de diseño.
ORGANIZACIÓN PATROCINANTE: FMAT-UADY
PROYECTO: Desarrollo de la aplicación web “¡Súbelos al
techo!” para mejorar el servicio de autobuses urbanos en la
ciudad de Mérida, Yucatán.

Revision: 2
Fecha: 30/11/2011

Contenido
Documento de análisis del diseño Desarrollo de la aplicación para dispositivos
móviles “AppCarr” para ayudar a los usuarios a encontrar un lugar de
estacionamiento en la Facultad de Matemáticas de la UADY. .............................. i
Introducción .................................................................................................................. 2
Análisis de la interfaz de usuario................................................................................. 2

1
Introducción
Se ha seleccionado un escenario de los presentados en el Documento de avance del proyecto para poder
desarrollar el análisis preliminar del diseño de la interfaz de usuario, así como también proporcionar
aproximaciones del tiempo que le tomaría a la persona asociada llevar a cabo su objetivo en la
aplicación web. El análisis se realizó a través de la herramienta software CogTool y los operadores KLM
descritos más adelante.
http://cogtool.hcii.cs.cmu.edu/forum/cogtool-fitts-law-and-classical-klm

Análisis de la interfaz de usuario
Elección del
escenario

De los dos escenariosficticios que se proporcionaron en el Documento de avance
del proyectose eligió el siguiente por simplicidad para llevar a cabo las pruebas de
diseño y estimaciones de tiempo.
“Julio González se entera de una aplicación para poder encontrar un lugar de
estacionamiento de acuerdo a su horario; llamado AppCarr, al él le suena muy
interesante, la instala en su teléfono, coloca un acceso directo en su ventana
principal y se registra. Hoy lunes, Julio despierta tarde y se apresura para poder
llegar a tiempo a la facultad de matemáticas y así poder estacionar su automóvil
en un lugar adecuado. Julio llega a la facultad y quiere encontrar un lugar de
estacionamiento que no esté tan lejos del edificio donde tiene su primera clase, él
recuerda que tiene instalada la aplicación AppCarr en su Iphone, entonces toma su
celular, lo desbloquea y ejecuta la aplicación. Como ya se había registrado, entra
con su cuenta y se dirige a la opción de mostrar lugares de estacionamiento de
acuerdo a su horario. La aplicación le muestra el mapa del estacionamiento,
señalando los lugares vacíos de acuerdo a su horario. Julio fácilmente encuentra un
lugar adecuado, en pocos minutos y a su puede asistir a tiempo a si primera clase.”

Listado de pasos

Se proporciona la siguiente lista de pasos que Julio tendrá que seguir para poder
llevar a cabo lo que él quiere hacer dentro de la aplicación.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

Visualizar el menú principal.
Tocar el icono de AppCarr para ejecutar la aplicación.
Esperar a que se abra la aplicación.
Visualizar la interfaz principal de la aplicación.
Seleccionar el cuadro de texto donde se ingresa su correo.
Teclear su correo.
Visualizar la interfaz principal de la aplicación.
Seleccionar el cuadro de texto donde se ingresa su contraseña.
Teclear su contraseña.
Visualizar la interfaz principal de la aplicación.
Tocar la opción de “iniciar sesión”.
Esperar a que cargue la interfaz de la aplicación.
Visualizar el menú de la aplicación.
Seleccionar la opción de “Ver mapa conforme a preferencias”.
2
Título del Documento: Documento de análisis de diseño.
ORGANIZACIÓN PATROCINANTE: FMAT-UADY
PROYECTO: Desarrollo de la aplicación web “¡Súbelos al
techo!” para mejorar el servicio de autobuses urbanos en la
ciudad de Mérida, Yucatán.

Revision: 2
Fecha: 30/11/2011

15. Esperar a que cargue el mapa de la aplicación.
16. Visualizar los lugares vacíos.
17. Salir del mapa.
Asignación de
operadores KLM

De la lista de pasos anterior que Julio debe seguir para llegar a su objetivo,se hizo
una asignación de operadores según la metodología KLM (Keystroke-levelmodel)en
base a lo siguiente:
1. Se enlistan los movimientos de selección en pantalla (Sistema táctil),
keystrokes (golpes en la pantalla), tiempos de respuesta del sistema y se
definen algunas heurísticas para estimar el tiempo de “operadores
mentales”.
2. Predice el tiempo de ejecución de una tarea en un diseño y tarea
específico.
3. Básicamente se crea la lista de la secuencia de acciones de keystroke que
el usuario debe realiza para completar cierta tarea y sumar el tiempo
requerido por cada una de estas acciones.
Por cada acción física o mental del usuario se hace una estimación del tiempo que
le llevaría completar la tarea satisfactoriamente. Los operadores se encierran entre
paréntesis y negritas. En breve explicaremos cada uno de ellos y les asignaremos
algunos tiempos.
K– Teclear letra por letra.Promedio 0.680 segundos.
BB – Tocar un botón.
Promedio0.29 segundos
M– Preparación mental o visualización. Promedio 1.2 segundos.
R– Respuesta del sistema.
2 segundos.

1. Visualizar el menú principal. (M)
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

Tocar el icono de AppCarr para ejecutar la aplicación. (BB)
Esperar a que se abra la aplicación. (R)
Visualizar la interfaz principal de la aplicación. (M)
Seleccionar el cuadro de texto donde se ingresa su correo.(BB)
Teclear su correo. (K)
Visualizar la interfaz principal de la aplicación.(M)
Seleccionar el cuadro de texto donde se ingresa su contraseña.(BB)
Teclear su contraseña. (K)
Visualizar la interfaz principal de la aplicación.(M)
Tocar la opción de “iniciar sesión”.(BB)
Esperar a que cargue la interfaz de la aplicación. (R)
Visualizar el menú de la aplicación. (M)
Seleccionar la opción de “Ver mapa de acuerdo a preferencias”.(BB)
Esperar a que cargue el mapa de la aplicación(R)
Visualizar los lugares vacíos. (M)
Salir del mapa.(BB)

3
Entonces el tiempo estimado que le llevaría a Mariel poder cumplir con su objetivo
se presenta como la suma de todos los tiempos de cada uno de los operadores.
3K+3M+6BB+3R.
Pero como K se refiere a cada carácter que el usuario introduce en la
computadora entonces tomaremos un aproximado, la longitud delcorreo es de
aproximadamente 20 caracteres, la longitud de la contraseña es de
aproximadamente 10 caracteres y así3K = (20+10) K.
Así solo sustituimos los valores de cada operador con los tiempos asignados para
cada operador. Quedaría de la siguiente manera:
2K+7M+6BB+3R = (20+10)K+7M+6BB+3R= 30K+7M+6BB+3R.
30(.680)+7(1.2)+6(.29)+3(2)
20.4+8.4+1.74+6=36.54 Segundos
Es decir, en total, a Julio le llevaría en promedio 36.54 segundos
aproximadamente, completar el objetivo del escenario descrito.
KLM con la
herramienta
CogTool

Ahora, siguiendo con el mismo escenario y el objetivo de Julio,implementaremos el
KML utilizando la herramienta “Coog-Tool”. Esta herramienta software simula la
interfaz del usuario y además obtiene tiempos estimados relativos a las acciones
(pasos) del escenario.Se obtuvieron los siguientes resultados:
Desde que el usuario abrela aplicación y va al menú principal de “AppCarr” hasta
que sale del mapa, el programa generó la siguiente salida:

4
Título del Documento: Documento de análisis de diseño.
ORGANIZACIÓN PATROCINANTE: FMAT-UADY
PROYECTO: Desarrollo de la aplicación web “¡Súbelos al
techo!” para mejorar el servicio de autobuses urbanos en la
ciudad de Mérida, Yucatán.

Revision: 2
Fecha: 30/11/2011

En total el tiempo estimado que le llevará a Mariel realizar lo que quiere es de
aproximadamente 38.9 segundos (de acuerdo a la herramienta CogTool),en el caso
de que Julio estuviera registrado.

5

Más contenido relacionado

Similar a Documento de análisis de diseño

Como insertar una imagen
Como insertar una imagenComo insertar una imagen
Como insertar una imagen
FANY_RDZ98
 
Apps para arquitectos
Apps para arquitectosApps para arquitectos
Apps para arquitectos
Rafa Peña
 

Similar a Documento de análisis de diseño (20)

programacion.en android.joseluis.yama.may.isc.j4
programacion.en android.joseluis.yama.may.isc.j4programacion.en android.joseluis.yama.may.isc.j4
programacion.en android.joseluis.yama.may.isc.j4
 
Las apps
Las appsLas apps
Las apps
 
Creación de la aplicación turística tur cuenca
Creación de la aplicación turística tur cuencaCreación de la aplicación turística tur cuenca
Creación de la aplicación turística tur cuenca
 
Las apps
Las appsLas apps
Las apps
 
Tutorial App Inventor 2
Tutorial App Inventor 2Tutorial App Inventor 2
Tutorial App Inventor 2
 
Dalton app evidencia1
Dalton app evidencia1Dalton app evidencia1
Dalton app evidencia1
 
Manual(mario alberto rosales lara)
Manual(mario alberto rosales lara)Manual(mario alberto rosales lara)
Manual(mario alberto rosales lara)
 
Trabajo de ntics ii
Trabajo de ntics iiTrabajo de ntics ii
Trabajo de ntics ii
 
Trabajo de NTICS II
Trabajo de NTICS IITrabajo de NTICS II
Trabajo de NTICS II
 
Como insertar una imagen
Como insertar una imagenComo insertar una imagen
Como insertar una imagen
 
Las apps
Las appsLas apps
Las apps
 
Engargolado
EngargoladoEngargolado
Engargolado
 
Engargolado
EngargoladoEngargolado
Engargolado
 
Las apps
Las appsLas apps
Las apps
 
Las apps
Las appsLas apps
Las apps
 
las apps
las appslas apps
las apps
 
Apps para arquitectos
Apps para arquitectosApps para arquitectos
Apps para arquitectos
 
Informe Uber _ Startup and Scrum
Informe Uber _ Startup and ScrumInforme Uber _ Startup and Scrum
Informe Uber _ Startup and Scrum
 
Las apps en tipo presentacion
Las apps en tipo presentacionLas apps en tipo presentacion
Las apps en tipo presentacion
 
Manual aplicaciones moviles cristian
Manual aplicaciones moviles cristianManual aplicaciones moviles cristian
Manual aplicaciones moviles cristian
 

Más de appcarr

Escenarios
EscenariosEscenarios
Escenarios
appcarr
 

Más de appcarr (16)

Póster de "AppCarr"
Póster de "AppCarr"Póster de "AppCarr"
Póster de "AppCarr"
 
Artículo de AppCarr.
Artículo de AppCarr.Artículo de AppCarr.
Artículo de AppCarr.
 
Un vistazo rápido a "AppCarr"
Un vistazo rápido a "AppCarr"Un vistazo rápido a "AppCarr"
Un vistazo rápido a "AppCarr"
 
Prototipo de AppCarr.
Prototipo de AppCarr.Prototipo de AppCarr.
Prototipo de AppCarr.
 
Avance de Proyecto
Avance de ProyectoAvance de Proyecto
Avance de Proyecto
 
Especificación de Requisitos.
Especificación de Requisitos.Especificación de Requisitos.
Especificación de Requisitos.
 
Casos de uso de AppCarr
Casos de uso de AppCarrCasos de uso de AppCarr
Casos de uso de AppCarr
 
Anexo plan de trabajo(app carr)
Anexo   plan de trabajo(app carr)Anexo   plan de trabajo(app carr)
Anexo plan de trabajo(app carr)
 
Plan encuesta proyecto
Plan encuesta proyectoPlan encuesta proyecto
Plan encuesta proyecto
 
Pruebas deusabilidad
Pruebas deusabilidadPruebas deusabilidad
Pruebas deusabilidad
 
Proyecto de ihc
Proyecto de ihcProyecto de ihc
Proyecto de ihc
 
Guía de definición del proyecto app carr
Guía de definición del proyecto app carrGuía de definición del proyecto app carr
Guía de definición del proyecto app carr
 
Proyecto appcarr(slideshare)
Proyecto appcarr(slideshare)Proyecto appcarr(slideshare)
Proyecto appcarr(slideshare)
 
Encuesta para el Proyecto
Encuesta para el ProyectoEncuesta para el Proyecto
Encuesta para el Proyecto
 
Escenarios
EscenariosEscenarios
Escenarios
 
Proyecto AppCarr
Proyecto AppCarrProyecto AppCarr
Proyecto AppCarr
 

Documento de análisis de diseño

  • 1. Título del Documento: Documento de análisis de diseño. ORGANIZACIÓN PATROCINANTE: FMAT-UADY PROYECTO: Desarrollo de la aplicación web “¡Súbelos al techo!” para mejorar el servicio de autobuses urbanos en la ciudad de Mérida, Yucatán. Revision: 2 Fecha: 30/11/2011 Documento de análisis del diseño Desarrollo de la aplicación para dispositivos móviles “AppCarr” para ayudar a los usuarios a encontrar un lugar de estacionamientoen la Facultad de Matemáticas de la UADY. Versión 1.0 Elaborado por: Eduardo B. Canché Vázquez Elías Armando Canché Canché Alejandro Sumárraga Ugalde Carlos Araujo Piña i
  • 2.
  • 3. Título del Documento: Documento de análisis de diseño. ORGANIZACIÓN PATROCINANTE: FMAT-UADY PROYECTO: Desarrollo de la aplicación web “¡Súbelos al techo!” para mejorar el servicio de autobuses urbanos en la ciudad de Mérida, Yucatán. Revision: 2 Fecha: 30/11/2011 Contenido Documento de análisis del diseño Desarrollo de la aplicación para dispositivos móviles “AppCarr” para ayudar a los usuarios a encontrar un lugar de estacionamiento en la Facultad de Matemáticas de la UADY. .............................. i Introducción .................................................................................................................. 2 Análisis de la interfaz de usuario................................................................................. 2 1
  • 4. Introducción Se ha seleccionado un escenario de los presentados en el Documento de avance del proyecto para poder desarrollar el análisis preliminar del diseño de la interfaz de usuario, así como también proporcionar aproximaciones del tiempo que le tomaría a la persona asociada llevar a cabo su objetivo en la aplicación web. El análisis se realizó a través de la herramienta software CogTool y los operadores KLM descritos más adelante. http://cogtool.hcii.cs.cmu.edu/forum/cogtool-fitts-law-and-classical-klm Análisis de la interfaz de usuario Elección del escenario De los dos escenariosficticios que se proporcionaron en el Documento de avance del proyectose eligió el siguiente por simplicidad para llevar a cabo las pruebas de diseño y estimaciones de tiempo. “Julio González se entera de una aplicación para poder encontrar un lugar de estacionamiento de acuerdo a su horario; llamado AppCarr, al él le suena muy interesante, la instala en su teléfono, coloca un acceso directo en su ventana principal y se registra. Hoy lunes, Julio despierta tarde y se apresura para poder llegar a tiempo a la facultad de matemáticas y así poder estacionar su automóvil en un lugar adecuado. Julio llega a la facultad y quiere encontrar un lugar de estacionamiento que no esté tan lejos del edificio donde tiene su primera clase, él recuerda que tiene instalada la aplicación AppCarr en su Iphone, entonces toma su celular, lo desbloquea y ejecuta la aplicación. Como ya se había registrado, entra con su cuenta y se dirige a la opción de mostrar lugares de estacionamiento de acuerdo a su horario. La aplicación le muestra el mapa del estacionamiento, señalando los lugares vacíos de acuerdo a su horario. Julio fácilmente encuentra un lugar adecuado, en pocos minutos y a su puede asistir a tiempo a si primera clase.” Listado de pasos Se proporciona la siguiente lista de pasos que Julio tendrá que seguir para poder llevar a cabo lo que él quiere hacer dentro de la aplicación. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Visualizar el menú principal. Tocar el icono de AppCarr para ejecutar la aplicación. Esperar a que se abra la aplicación. Visualizar la interfaz principal de la aplicación. Seleccionar el cuadro de texto donde se ingresa su correo. Teclear su correo. Visualizar la interfaz principal de la aplicación. Seleccionar el cuadro de texto donde se ingresa su contraseña. Teclear su contraseña. Visualizar la interfaz principal de la aplicación. Tocar la opción de “iniciar sesión”. Esperar a que cargue la interfaz de la aplicación. Visualizar el menú de la aplicación. Seleccionar la opción de “Ver mapa conforme a preferencias”. 2
  • 5. Título del Documento: Documento de análisis de diseño. ORGANIZACIÓN PATROCINANTE: FMAT-UADY PROYECTO: Desarrollo de la aplicación web “¡Súbelos al techo!” para mejorar el servicio de autobuses urbanos en la ciudad de Mérida, Yucatán. Revision: 2 Fecha: 30/11/2011 15. Esperar a que cargue el mapa de la aplicación. 16. Visualizar los lugares vacíos. 17. Salir del mapa. Asignación de operadores KLM De la lista de pasos anterior que Julio debe seguir para llegar a su objetivo,se hizo una asignación de operadores según la metodología KLM (Keystroke-levelmodel)en base a lo siguiente: 1. Se enlistan los movimientos de selección en pantalla (Sistema táctil), keystrokes (golpes en la pantalla), tiempos de respuesta del sistema y se definen algunas heurísticas para estimar el tiempo de “operadores mentales”. 2. Predice el tiempo de ejecución de una tarea en un diseño y tarea específico. 3. Básicamente se crea la lista de la secuencia de acciones de keystroke que el usuario debe realiza para completar cierta tarea y sumar el tiempo requerido por cada una de estas acciones. Por cada acción física o mental del usuario se hace una estimación del tiempo que le llevaría completar la tarea satisfactoriamente. Los operadores se encierran entre paréntesis y negritas. En breve explicaremos cada uno de ellos y les asignaremos algunos tiempos. K– Teclear letra por letra.Promedio 0.680 segundos. BB – Tocar un botón. Promedio0.29 segundos M– Preparación mental o visualización. Promedio 1.2 segundos. R– Respuesta del sistema. 2 segundos. 1. Visualizar el menú principal. (M) 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. Tocar el icono de AppCarr para ejecutar la aplicación. (BB) Esperar a que se abra la aplicación. (R) Visualizar la interfaz principal de la aplicación. (M) Seleccionar el cuadro de texto donde se ingresa su correo.(BB) Teclear su correo. (K) Visualizar la interfaz principal de la aplicación.(M) Seleccionar el cuadro de texto donde se ingresa su contraseña.(BB) Teclear su contraseña. (K) Visualizar la interfaz principal de la aplicación.(M) Tocar la opción de “iniciar sesión”.(BB) Esperar a que cargue la interfaz de la aplicación. (R) Visualizar el menú de la aplicación. (M) Seleccionar la opción de “Ver mapa de acuerdo a preferencias”.(BB) Esperar a que cargue el mapa de la aplicación(R) Visualizar los lugares vacíos. (M) Salir del mapa.(BB) 3
  • 6. Entonces el tiempo estimado que le llevaría a Mariel poder cumplir con su objetivo se presenta como la suma de todos los tiempos de cada uno de los operadores. 3K+3M+6BB+3R. Pero como K se refiere a cada carácter que el usuario introduce en la computadora entonces tomaremos un aproximado, la longitud delcorreo es de aproximadamente 20 caracteres, la longitud de la contraseña es de aproximadamente 10 caracteres y así3K = (20+10) K. Así solo sustituimos los valores de cada operador con los tiempos asignados para cada operador. Quedaría de la siguiente manera: 2K+7M+6BB+3R = (20+10)K+7M+6BB+3R= 30K+7M+6BB+3R. 30(.680)+7(1.2)+6(.29)+3(2) 20.4+8.4+1.74+6=36.54 Segundos Es decir, en total, a Julio le llevaría en promedio 36.54 segundos aproximadamente, completar el objetivo del escenario descrito. KLM con la herramienta CogTool Ahora, siguiendo con el mismo escenario y el objetivo de Julio,implementaremos el KML utilizando la herramienta “Coog-Tool”. Esta herramienta software simula la interfaz del usuario y además obtiene tiempos estimados relativos a las acciones (pasos) del escenario.Se obtuvieron los siguientes resultados: Desde que el usuario abrela aplicación y va al menú principal de “AppCarr” hasta que sale del mapa, el programa generó la siguiente salida: 4
  • 7. Título del Documento: Documento de análisis de diseño. ORGANIZACIÓN PATROCINANTE: FMAT-UADY PROYECTO: Desarrollo de la aplicación web “¡Súbelos al techo!” para mejorar el servicio de autobuses urbanos en la ciudad de Mérida, Yucatán. Revision: 2 Fecha: 30/11/2011 En total el tiempo estimado que le llevará a Mariel realizar lo que quiere es de aproximadamente 38.9 segundos (de acuerdo a la herramienta CogTool),en el caso de que Julio estuviera registrado. 5