Repositorio Institucional de Documentos

1542 Universidad Zaragoza Trabajo Fin de Grado Diseño de una aplicación para dispositivos móviles para la EINA 1/2 Autora Isabel Lozano Puñet Ignacio Gil Pérez Escuela de Ingeniería y Arquitectura 2013 Repositorio de la Universidad de Zaragoza-Zaguan http://zaguan.unizar.es Director 3 Diseño de una aplicación para dispositivos móviles para la EINA. RESUMEN Este proyecto consiste en el diseño de una aplicación destinada a dispositivos móviles para la EINA. Está organizado en distintas fases para llegar a su completo desarrollo y puesta en práctica. La primera fase es de información, en la cual se ha procedido a la realización de un estudio de mercado, seguido por unos análisis de usuario, entorno y rutina de usuario. Finalmente para completar esta fase se han hecho unas encuestas para determinar gustos y necesidades. Una vez que se ha recopilado toda la información se han redactado una serie de conclusiones, las cuales han servido como base para la generación de las EDP’s. La segunda fase ha pasado por distintas etapas. La primera de ellas ha sido el desarrollo del diseño conceptual, seguido por el diseño lógico, que finalmente ha llegado al diseño físico final donde se ha desarrollado la interfaz gráfica final previa para realizar el prototipo. La tercera fase contiene información acerca del prototipo y las pruebas de usuario, con sus resultados y cuestionarios. Todo esto sirve para llegar a la cuarta y última fase donde se detectan y se subsanan los errores. Tras haber hecho la prueba de usuario, en esta cuarta y última fase se ha procedido al análisis de los errores y los cuestionarios. Finalmente, se han subsanado los errores hasta dejarla pulida y sin ningún tipo de fallo. 4 5 Índice Fase 1. Información 7 Fase 2. Creativa 13 Fase 3. Prototipo 25 Fase 4. Evaluación del diseño 27 Conclusiones generales 35 Bibliografía 1. Conclusiones 1. Conclusiones 2. Errores 3. Implementación de la aplicación Anexo 14 15 8 11 26 28 29 33 177 1. Evolución del menú 2. Diseño físico 1. Conclusiones 2. EDP’s 6 7 Fase 1. Información En esta fase de información se encuentran las conclusiones que resumen el estudio de mercado realizado, donde se ven distintas aplicaciones relacionadas con el desarrollo de la aplicación; el análisis de los posibles usuarios y su entorno; además, para comprender mejor al usuario se ha analizado su rutina; y finalmente, para completar la fase de información se ha hecho una serie de encuestas a distintos tipos de usuarios para poder ver sus gustos. Todo esto sirve para redactar las EDP’s en las que se han basado las funciones y el desarrollo de la aplicación. 1. Conclusiones 1.1 Estudio de mercado 1.2 Análisis de usuario 1.3 Rutina de usuario 1.4 Análisis de entorno 1.5 Encuestas 2. EDP’s 2.1 Deseables 2.1 Críticas 8 8 8 8 9 10 11 11 11 8 Fase 1. Conclusiones Para poder comprender lo realizado en la fase de información se han redactado una serie de conclusiones que engloban todo el proceso y ayudan a comprender la posterior toma de decisiones. Para más información consultar el anexo apartado “1. Estudio de mercado” , página 7. En primer lugar se hizo un estudio de mercado que sirvió para ver los tipos de aplicaciones que había sobre universidades. Con esto se quería conseguir una información base sobre qué es lo que existe actualmente y qué características tienen. En general se ha observado que no existen muchas aplicaciones de este tipo para universidades, por tanto son aplicaciones primitivas, que todavía están por desarrollar y tienen un gran futuro en el mercado. Algunos puntos fuertes han sido: • Son gratis, lo cual hace que favorezca su descarga. • Muchas tienen un apartado de noticias que permite tener al usuario informado constantemente. • Hay localización por mapa, facilitando la ubicación al usuario que la desconozca. • En dos de ellas hay un apartado específico para el estudiante, haciendo que éste se sienta más vinculado a la universidad y formando parte de ella. • Son bastante intuitivas y sencillas de manejar, lo que resta tiempo al aprendizaje que el usuario no estaría dispuesto a dar. • Algunas son configurables pudiendo personalizarla al gusto del propio usuario. El inconveniente que más perjudicó para el análisis del resto de aplicaciones internacionales fue la función de cambio de idioma. Todas las universidades carecían de uno y por tanto no se pudieron estudiar en profundidad. 1.1 Estudio de mercado 1.2 Análisis de usuario Para más información consultar el anexo apartado “2. Análisis de usuario” , página 10. El análisis de usuario juega un papel fundamental en la fase de información. Ya que si se quiere diseñar una aplicación destinada a unos usuarios, habrá que conocer previamente a cada uno de ellos y por tanto, a sus necesidades. Lo usuarios analizados fueron los que iban a estar en contacto con la universidad. Es decir, todos los usuarios se podían clasificar en tres grandes grupos: • PAS (Personal de Administración y Servicios). La única función que podría demandar sería una agenda programable con reuniones u otras actividades. Es por ello que este grupo se suprimirá como futuro usuario de la aplicación. • PDI (Personal Docente e Investigador). Mantiene una relación directa con el alumnado, y la aplicación podría servir para mantener el contacto con ellos a través de tutorías, subida de apuntes... • Estudiantes. Éste es el grupo más numeroso, ya que se incluyen los estudiantes de carrera, los de máster, los de doctorado y los de becas de movilidad. Todos se diferencian por sus objetivos o el tipo de estudios que realizan, pero coinciden en que se relacionan con la universidad en distinto grado, y este tipo de relación tiene que ser buena. 1.3 Rutina de usuario Para más información consultar el anexo apartado “3. Rutina de usuario” , página 12. Después de haber realizado el análisis de usuario se analizó la rutina de cada uno de esos grupos. Como el PAS fue descartado, sólo se analizó la rutina del PDI y de los estudiantes. Esto sirve para hallar posibles necesidades y ver cómo la aplicación puede cubrir cada una de ellas. Estudiantes La acción que más se repite es una agenda programable. También la aplicación puede cubrir la necesidad de saber cómo llegar y el funcionamiento del 9 Fase 1. Conclusiones transporte urbano. Además, durante las clases podría usar una plataforma de descarga de apuntes y saber la situación y el horario de tutorías de los profesores. Relacionado con los servicios de la universidad, el usuario pasa tiempo en la biblioteca, sala de estudios, cafetería y reprografía, por lo que tendría que aparecer información fundamental de estos servicios. Finalmente, el usuario también está en continuo contacto con la universidad informándose de horarios, becas, calendarios de exámenes y lectivos. PDI Al igual que los estudiantes, la función que más se repite es una agenda programable. Además de las tareas comunes como puede ser el uso del transporte público. La única diferencia significante que se observó es que el PDI necesita reservar aulas a diferencia que los estudiantes. Esta tarea es tediosa y no la facilitaría la aplicación, por lo que no se volvió a tener en cuenta. El resto de necesidades son muy similares a los estudiantes como las consultas de los servicios de la universidad o las plataformas de subida de apuntes que comparten con los estudiantes. Para más información consultar el anexo apartado “4. Análisis de entorno” , página 14. No sólo es importante el estudio de los futuros usuarios de la aplicación, sino también del entorno en el que se va a desarrollar. Como se hará sobre un dispositivo móvil (tanto smartphone como tablet ) el entorno es muy variado, para ello se han hecho dos grandes grupos, entorno físico y social. Entorno Físico Como su nombre indica, es el entorno físico que rodea al propio usuario, este entorno generalmente suele ser interiores, ya que cuando consulta algún tipo de duda acerca de la universidad, lo hace cuando realiza una tarea vinculada a ella. Algunos espacios interiores físicos son el propio hogar, la biblioteca y la universidad. La característica común de estos entornos es que el tipo de iluminación es generalmente artificial, por lo que la pantalla se verá bien y la conexión a internet suele funcionar de forma eficaz. 1.4 Análisis de entorno Diseño físico Fase 2. 16 Para el diseño final de la aplicación se escogieron dos colores y distintas tonalidades de grises. Los dos colores representan el logo de la EINA, es decir el PANTONE 124C (naranja), ese mismo al 50%, el PANTONE 653C (azul), y ese mismo al 50%. El PANTONE 124C se usa para el menú principal y para los botones de “aceptar” y la visualización de los mapas, además de las líneas de las tablas. El motivo de usarlo como botón fue porque es un color brillante que sobresalta por encima de los otros dos escogidos. El PANTONE 653C se usa para resaltar títulos sobre el gris, para marcar los correos no leídos, como botón de elección dentro de una lista y para los botones del menú de la barra inferior de la pantalla y el de vuelta a inicio. Cuando está al 50% es que el botón existe pero PANTONE 124C CMYK 2C 38M 100Y 0K RGB 245R 168G 28B PANTONE 653C CMYK 100C 60M 0Y 18K RGB 0R 86G 153B CMYK 99C 99M 99Y 99K RGB 0R 0G 0B CMYK 0C 0M 0Y 60K RGB 128R 130G 133B CMYK 99C 99M 99Y 99K (5%) RGB 0R 0G 0B (5%) CMYK 0C 0M 0Y 2K RGB 248R 248G 248B no está activado y listo para usarse. Además, estos dos colores aparecen también en el calendario lectivo, cada uno se compara con un tipo de día. El azul para cambios de día, y el naranja para festivos. En el calendario de exámenes, para no confundir la leyenda de los colores, los días de examen se representan con un gris claro. Los grises usados son los siguientes: • CMYK (99,99,99,99) al 100%: para los encabezados de cada sección. • CMYK (99,99,99,99) al 5%: para la barra inferior de cada pantalla • CMYK (0,0,0,60) al 100%: para los textos y los pop up • CMYK (0,0,0,2) al 100%: para los botones pulsados Diseño físico Fase 2. 17 Para la colocación de los botones del menú inferior y de “aceptar” y “cancelar” se basó su ubicación en un libro llamado “Mobile First” de Luke Wroblewski, en el cual se ve gráficamente la comodidad del usuario en el caso de que use una única mano para los alcances del dedo en la pantalla (siendo el usuario diestro). Es decir, los botones de “aceptar” se sitúan a la izquierda de la pantalla en la zona “EASY” según la imagen mostrada en la parte inferior. Siendo más llamativo y fácil que el de “cancelar” que se sitúa a la derecha, acercándose o llegando a colocarse en la zona “OK”. Imagen sacada del libro “Mobile First” de Luke Wroblewski Diseño físico Fase 2. 18 2.1 Diseño final Acceso Menú principal Campos marcadosIdioma Icono pulsado Diseño físico Fase 2. 19 Mi carrera EINA Botones Botones distintosMenú desplegable Migas de pan Botón pulsado Inicio Diseño físico Fase 2. 20 Mis profesores Profesores Regreso inicio Regreso “Mis profesores” Despacho Cerrar pop up Diseño físico Fase 2. 21 Horario y avisos Correos sin leer Información Horario inicial Asignaturas añadidas Correo Diseño físico Fase 2. 22 Secretaría virtual Información Moodle Asignaturas Archivo subido Diseño físico Fase 2. 23 Noticias Servicios Listado Disponibilidad Configuración noticias Cambio noticia Diseño físico Fase 2. 24 Configuración Opciones marcadas Para más información consultar el anexo apartado “3.8 Diseño final” , página 114. 25 Fase 3. Prototipo Dentro de esta tercera fase se encuentra un resumen de la prueba de usuario realizada (anexo apartado “1. Prueba de usuario” , página 132), y sobre los cuestionarios realizados tras finalizar la prueba a cada uno de ellos (anexo apartado “2. Cuestionarios y resultados” , página 154). Todo esto sirve para llegar a la fase 4 donde se detectarán los errores y se subsanarán. 1. Prueba de usuario 26 Errores Fase 4. 32 1.8 Error ocho 1.7 Error siete Modificar el horario de reprografía para que sea más visible. Cambiar el color o la forma en las flechas de la leyenda de los mapas de ubicación. Más espacio Cambio de color Despacho otro color Fase 4. 33 Implementación de la aplicación Para más información consultar el anexo apartado “4. Implementación de la aplicación” , página 174. Hoy en día este tipo de aplicación no puede llegar a hacerse realidad. Esto es debido a la necesidad de la contratación de un personal ajeno a la universidad especializado en este tipo de tareas. Pero hay una segunda forma de realizar la aplicación. Este tipo de trabajo sería secuencial y por bloques o pasos (más información en el anexo apartado “4. Aplicación en la realidad” , página 174). Bloque uno En este primer bloque se situarían las funciones de información general y que ya existen en el sitio web. Dentro hay las siguientes funciones: • Mi carrera. En lugar de llamarse así, tendría que llamarse “EINA”, y contener toda la información general. • Correo. • Moodle. • Secretaría virtual. • Servicios. • Noticias y eventos. • Configuración. La configuración general, simplemente modifica las otras funciones, y junta todas las configuraciones particulares en una sola, por lo que esta función también se podría hacer. Bloque dos En este segundo bloque se encuentran las funciones personalizables, es decir, aquellas que el usuario puede generar manualmente el contenido. Dentro de este bloque se encuentran: • Mis profesores. No aparecería ningún profesor, simplemente el botón de “Ver todos”, el cual nos permitiría acceder a la visualización de todos los profesores. Una vez allí, el usuario tendría que buscar todos los profesores que desease, y cuando accediese a ellos habría una opción de “Guardar”, de tal forma que, cuando volviese a entrar dentro de la función, le apareciesen los profesores guardados, y al final de todos ellos la opción de “Ver todos”. • Horario y avisos. El usuario necesita introducir las asignaturas para poder visualizarlas, pero con un cambio, al usuario no le aparecerían sólo las asignaturas en las que puede matricularse, sino que saldrían todas las carreras, y dentro de cada carrera los cursos, y dentro de cada curso todas las asignaturas. Bloque tres En el último bloque se encuentran las funciones que implican un alto conocimiento del terreno. Se necesitaría alguien especializado en la materia. Estas funciones son: • Acceso inicial. Sería la función más importante y la que serviría para la personalización del resto de funciones. Necesita estar en continuo contacto con la base de datos de la universidad, para modificar el contenido interior. • Automatización de datos. Es decir, que se actualice sola la aplicación cuando haya cambios dentro de las bases de datos de la universidad. 34 35 Conclusiones generales Como conclusión general, la creación y desarrollo de este proyecto me ha parecido muy interesante. Ya había impartido una asignatura relacionada con el tema llamada “Interacción entre Usuario y Producto”, pero nunca había profundizado tanto. La creación de aplicaciones para dispositivos móviles es un mercado que cada vez va más en auge, ya que todas aquellas empresas que quieran llegar a abarcar un mayor número de usuarios deberán contactar con ellos de una forma personal, directa y sencilla. Es por ello, que también la creación de páginas web y el diseño de éstas está muy demandado hoy en día. Con este proyecto he aprendido a que hay un gran abanico de posibilidades en cuanto a la creación de interfaces, pero que todas ellas ofrecen un mismo patrón común en cuanto a organización. También es un tema muy amplio y que se ha de conocer perfectamente al usuario si se desea el éxito de la aplicación. Nunca había dado tanta importancia al desarrollo de una interfaz, por lo que el desarrollo de una parecía un proceso más sencillo del que luego ha resultado ser. Este proceso es muy complejo, ya que como cada usuario es distinto, adaptarse a todos ellos requiere un gran esfuerzo y dedicación. Al finalizar todo el diseño, se valora mucho más otro tipo de aplicaciones y se aprende a ser mucho más crítico en cuanto a gustos y toma de decisiones. Tras finalizar el proyecto y al haberlo hecho sola, la seguridad sobre decisiones ha aumentado, al igual que la seguridad en mi misma para poder ser capaz de dedicarme al desarrollo de interfaces. Obviamente todavía me queda mucho por aprender, pero siento que tengo una buena base y completa. Lo más motivador de este proyecto ha sido que podría ser real, y que serviría en un futuro para posibles personas. Esto conlleva una gran responsabilidad, pero con una buena guía y tutela se ha podido sacar adelante y con éxito.