Durante todo el proceso, se debi\u0301an aplicar te\u0301cnicas de disen\u0303o centrado en el usuario (DCU), elaborando una aplicacio\u0301n adaptada a las caracteri\u0301sticas de los clientes, que respondiera a las necesidades reales de e\u0301stos. Tambie\u0301n habi\u0301a que dedicar especial atencio\u0301n a aspectos como la usabilidad del sistema desarrollado.<\/p>\n
Etapas y retos<\/h1>\nLa aplicacio\u0301n a desarrollar<\/h3>\n
A partir de una misma idea central (el tiempo), el enfoque o desarrollo de la aplicacio\u0301n era libre. Personalmente, los temas libres siempre me traen algu\u0301n quebradero de cabeza. A veces, las ideas brillan por su ausencia. En otras ocasiones, surgen con ma\u0301s frecuencia, pero acaban siendo desestimadas por un motivo u otro.<\/p>\n
Despue\u0301s de descartar las aplicaciones ma\u0301s comunes (alarma, reloj, timetracker, etc.) y de aparcar algunas ideas demasiado abstractas (como una agenda en realidad aumentada), finalmente opte\u0301 por desarrollar un banco de tiempo, concebido como una comunidad virtual de intercambio de servicios entre particulares.<\/p>\n
La idea en principio me pareci\u0301a atractiva, ya que fomentaba aspectos como la colaboracio\u0301n y la participacio\u0301n entre los usuarios. Adema\u0301s, presentaba un sinfi\u0301n de oportunidades: clases de idiomas, aprender a tocar un instrumento, orientacio\u0301n laboral, deportes, nuevas tecnologi\u0301as, etc.<\/p>\n
Los usuarios y las funcionalidades<\/h3>\n
Una vez decidido el tema principal, el siguiente paso consisti\u0301a en definir los usuarios y las funcionalidades del programa. \u00bfQuie\u0301n usari\u0301a la app? \u00bfDo\u0301nde la utilizari\u0301a? \u00bfQue\u0301 esperari\u0301a encontrar?<\/p>\n
La respuesta a estas preguntas no era trivial. Requeri\u0301a involucrar a los usuarios potenciales, para obtener informacio\u0301n de primera mano. Por tanto, era necesario realizar encuestas y entrevistas entre familiares, amigos, etc.<\/p>\n
Cuando empece\u0301 a revisar los datos obtenidos, un nuevo problema salio\u0301 a la luz: el programa a desarrollar no pareci\u0301a tener un perfil de usuario claro. Al tratarse de una comunidad virtual, todos los clientes presentaban caracteri\u0301sticas muy diferentes. De hecho, lo u\u0301nico que teni\u0301an en comu\u0301n era la necesidad de proporcionar o recibir un determinado servicio.<\/p>\n
Para superar este inconveniente, trace\u0301 diferentes personas a partir de la informacio\u0301n recopilada, con el objetivo de tener siempre en mente a un usuario tipo. Asi\u0301 surgieron, por ejemplo, Celia, la joven que lo primero que ve cada man\u0303ana es su mo\u0301vil y quiere aprender a tocar el piano, o Francisco, el hombre que todavi\u0301a tiene algo de miedo a las nuevas tecnologi\u0301as y necesita ser asesorado para redirigir su carrera profesional.<\/p>\n
Estos arquetipos, a su vez, se complementaron con la descripcio\u0301n de hipote\u0301ticos contextos de uso del programa, permitiendo finalmente elaborar un listado completo de funcionalidades para la app.<\/p>\n Las operaciones ba\u0301sicas ya previstas, como la creacio\u0301n de ofertas, la publicacio\u0301n de demandas o la gestio\u0301n del saldo, se vieron complementadas por otras caracteri\u0301sticas impensables en un primer momento: mecanismos de comunicacio\u0301n, opciones de geolocalizacio\u0301n, calendarios de eventos, etc. Poco a poco, el proyecto iba tomando forma. Por tanto, era hora de empezar a pensar en la apariencia del programa.<\/p>\n Debo reconocer que mis aptitudes para la ilustracio\u0301n, el grafismo y, en general, las artes pla\u0301sticas son susceptibles de mejorar. Por ese motivo, empezar a dibujar diferentes pantallas, para reflejar el aspecto visual de la app, me planteaba algunas reticencias.<\/p>\n De todas maneras, antes de coger la\u0301piz y papel, primero se debi\u0301a fijar el a\u0301rbol de navegacio\u0301n del programa, con todos los posibles caminos entre pantallas. Una vez elaborado, este diagrama permitio\u0301 ver la dimensio\u0301n real de la aplicacio\u0301n: en principio, pareci\u0301a requerir pocas pantallas, pero finalmente resulto\u0301 ser una jerarqui\u0301a de elementos agrupados en mo\u0301dulos, complementada adema\u0301s con varias ventanas auxiliares.<\/p>\n Con la estructura interna de la app definida, tocaba dedicarse a la parte ma\u0301s arti\u0301stica. Armado con varias plantillas de mo\u0301vil impresas y algunos principios de usabilidad en mente, como la simplicidad, la eficiencia o la asistencia al usuario, me puse manos a la obra.<\/p>\n Para cada componente del programa, se debi\u0301an elaborar 2 disen\u0303os diferentes que solucionaran un mismo problema. Asi\u0301, por ejemplo, un mecanismo de navegacio\u0301n principal basado en pestan\u0303as podi\u0301a tener como alternativa un gran menu\u0301 mostrado ante 1 click del usuario en el icono correspondiente.<\/p>\n Esbozadas algunas interfaces sobre el papel, teni\u0301a que convertir estos disen\u0303os preliminares en un prototipo de bajo nivel, utilizando herramientas como Balsamiq<\/em>. Este software fue un todo un descubrimiento, ya que permite disen\u0303ar interfaces mediante la te\u0301cnica de \u201cDrag & Drop<\/em>\u201d y se puede utilizar de manera intuitiva. \ufffc\ufffcDespue\u0301s de corregir algunos errores, detectados al revisar los disen\u0303os sobre el papel, solo quedaba pendiente la u\u0301ltima etapa: el desarrollo del prototipo interactivo final.<\/p>\n Considerando que queri\u0301a comenzar esta fase con buen pie, pero no conoci\u0301a ninguna herramienta concreta de elaboracio\u0301n de prototipos interactivos, primero me dedique\u0301 a trastear con algunos programas, como Axure<\/em> o invision<\/em>.<\/p>\n Finalmente, opte\u0301 por utilizar Justinmind<\/em>, pues ofrece caracteri\u0301sticas interesantes, como la creacio\u0301n de widgets<\/em> propios o la importacio\u0301n de libreri\u0301as de componentes. Adema\u0301s, existe abundante documentacio\u0301n sobre su funcionamiento en Internet.<\/p>\n A pesar de basarse tambie\u0301n en la te\u0301cnica de \u201cDrag & Drop<\/em>\u201d, el programa requiere algo de pra\u0301ctica para conocer y explotar sus diferentes funcionalidades. Incluye, por ejemplo, opciones como los data masters, que actu\u0301an como ori\u0301genes de datos, permitiendo separar contenido y presentacio\u0301n.<\/p>\n Cuando finalmente empece\u0301 a disen\u0303ar el mockup, teni\u0301a como primer objetivo llevar a la pra\u0301ctica aspectos ba\u0301sicos, como la consistencia, la familiaridad, el uso de meta\u0301foras o la prevencio\u0301n de errores. Posteriormente, empece\u0301 a revisar cada una de las pantallas elaboradas, para optimizar el nivel de interaccio\u0301n y dotarlas de contenidos ma\u0301s ricos. Tambie\u0301n intente\u0301 adaptar, siempre que fue posible, las soluciones planteadas por los diferentes patrones de disen\u0303o para interfaces mo\u0301viles.<\/p>\n Hints, breadcrumbs<\/em>, textos alternativos, valores por defecto, transiciones, efectos en los campos de un formulario, swipes<\/em>… Personalmente, me sorprendio\u0301 el nivel de detalle que otorgan estos programas, que permiten simular cualquier comportamiento de una manera relativamente fa\u0301cil.<\/p>\n Aunque finalmente no pude incluir todos los elementos que queri\u0301a, intente\u0301 llegar a un compromiso entre funcionalidad y realismo, siguiendo los consejos del profesor de la asignatura. La carga de trabajo de todo el proceso fue considerable, pero estuvo recompensada por el resultado obtenido.<\/p>\n Enlace al prototipo interactivo<\/a><\/strong><\/p>\n Desde hace varios an\u0303os, el disen\u0303o de la interfaz de usuario es un aspecto crucial dentro del desarrollo de un programa, pues puede llegar a determinar el e\u0301xito o el fracaso del mismo. A di\u0301a de hoy, el mecanismo que utilizan los usuarios para explotar las funcionalidades de una aplicacio\u0301n es tan importante como las funcionalidades propiamente dichas.<\/p>\n Ante este escenario, se hace imprescindible la adopcio\u0301n de nuevas metodologi\u0301as de disen\u0303o, que abogan por la participacio\u0301n de los usuarios en el desarrollo desde el primer momento. Actualmente, los clientes ya no quieren programas que simplemente \u201chagan cosas\u201d. Al contrario, necesitan aplicaciones adaptadas a sus necesidades concretas, que les ayuden a alcanzar unos objetivos determinados.<\/p>\n En este proceso de desarrollo, los prototipos juegan un papel crucial, pues permiten evaluar la validez de una determinada propuesta sin la necesidad de llevar a cabo su correspondiente implementacio\u0301n.<\/p>\n http:\/\/balsamiq.com\/<\/a> Bernat G\u00f3mez Garcia<\/strong> Desde que finalice\u0301 los estudios, me he dedicado al desarrollo de aplicaciones y la gestio\u0301n de proyectos en diferentes a\u0301mbitos, como los entornos locales, la web o, ma\u0301s recientemente, los dispositivos mo\u0301viles.<\/p>\n Actualmente, trabajo en el a\u0301rea de desarrollo de una consultori\u0301a tecnolo\u0301gica. Tambie\u0301n colaboro con centros de formacio\u0301n en la docencia de cursos de Informa\u0301tica y Nuevas Tecnologi\u0301as.<\/p>","protected":false},"excerpt":{"rendered":" Introducci\u00f3n Las diferentes pra\u0301cticas de la asignatura Dise\u00f1o de Interfaces Interactivas teni\u0301an un objetivo comu\u0301n: elaborar el prototipo de una app para dispositivo mo\u0301vil, partiendo de las fases iniciales de desarrollo y finalizando con la publicacio\u0301n de un mockup en Internet. Durante todo el proceso, se debi\u0301an aplicar te\u0301cnicas de disen\u0303o centrado en el usuario … <\/p>\n![\"Gomez-5\"](\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Gomez-5.jpg\")
<\/a><\/p>\nSketching y wireframing<\/h3>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a>\n\t\t\t<\/div><\/figure><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\nMockup<\/h3>\n
\nEn un principio, u\u0301nicamente construi\u0301 el esqueleto del programa y la reti\u0301cula de las pantallas, creando las diferentes interfaces y enlaza\u0301ndolas entre si\u0301. El resultado fue una primera versio\u0301n del prototipo, muy simple, pero ya va\u0301lida para evaluar su funcionamiento.<\/p>\n<\/a>\n\t\t\t<\/div><\/figure><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<\/a>\n\t\t\t<\/div><\/figure><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\nConclusiones<\/h1>\n
Enlaces relacionados<\/h1>\n
\nhttp:\/\/www.invisionapp.com\/<\/a>
\nhttp:\/\/www.axure.com\/<\/a>
\nhttp:\/\/www.justinmind.com\/<\/a><\/p>\nSobre el autor<\/h1>\n
\nEstudiante de posgrado de Disen\u0303o de Aplicaciones para Dispositivos Mo\u0301viles en la UOC.
\nPosgraduado en Disen\u0303o y Programacio\u0301n de Videojuegos por la UOC.
\nIngeniero Te\u0301cnico en Informa\u0301tica de Gestio\u0301n por la UAB.<\/p>\n