{"id":629,"date":"2015-04-07T11:43:40","date_gmt":"2015-04-07T10:43:40","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=629"},"modified":"2015-04-07T11:43:40","modified_gmt":"2015-04-07T10:43:40","slug":"gestionat","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/experiencies\/gestionat\/","title":{"rendered":"Gestiona&#8217;T"},"content":{"rendered":"<p><\/p>\n<h1>Introducci\u00f3n<\/h1>\n<p>En la asignatura <strong>Dise\u00f1o de interfaces interactivas<\/strong>, el objetivo es iniciarnos en el proceso de desarrollo de una aplicaci\u00f3n para dispositivos m\u00f3viles. Aplicando el dise\u00f1o centrado en el usuario y en el contexto para dise\u00f1ar un producto interactivo utilizando t\u00e9cnicas de prototipado, teniendo en cuenta la arquitectura de la informaci\u00f3n y el dise\u00f1o de interacci\u00f3n.<\/p>\n<h1>Etapas y retos<\/h1>\n<p>A partir de un concepto, en nuestro caso el tiempo, deb\u00edamos desarrollar la idea de una aplicaci\u00f3n m\u00f3vil pasando por las distintas etapas que veremos a continuaci\u00f3n.<\/p>\n<h3>1. Conceptualizaci\u00f3n<\/h3>\n<p>Partiendo del concepto del tiempo, la idea es crear una aplicaci\u00f3n (<strong>Gestiona&#8217;T<\/strong>) que nos ayude a saber a que dedicamos nuestro tiempo o dicho de otro modo, qu\u00e9 cantidad de tiempo dedicamos a una actividad en concreto. Ser\u00eda c\u00f3mo tener un diario t\u00edpico de toda la vida, d\u00f3nde anotamos lo que hemos hecho durante el d\u00eda pero, cuantificando el tiempo dedicado para poder extraer informaci\u00f3n estad\u00edstica del tiempo invertido en nuestras actividades.<\/p>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Fibla-0.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-221\" alt=\"Fibla-0\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Fibla-0-208x300.png\" width=\"208\" height=\"300\" align=\"center\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Fibla-0-208x300.png 208w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Fibla-0-711x1024.png 711w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Fibla-0.png 730w\" sizes=\"auto, (max-width: 208px) 100vw, 208px\" \/><\/a><\/p>\n<p>Una vez ten\u00edamos la idea de la aplicaci\u00f3n era el momento de hacer un an\u00e1lisis del usuario potencia al que ir\u00eda enfocado la aplicaci\u00f3n. Del an\u00e1lisis vemos que nuestro usuario ideal ser\u00eda un usuario que le guste gestionarse su tiempo y necesite una herramienta que le facilite esta labor. Nuestros usuarios potenciales serian personas que tengan una ocupaci\u00f3n y no quieran perder el tiempo y puedan dedicarlo a actividades que realmente les satisfacen. Los usuarios pueden utilizar la aplicaci\u00f3n en cualquier momento y en cualquier sitio y sin la necesidad de tener conexi\u00f3n a Internet.<\/p>\n<p>Del an\u00e1lisis de usuarios vemos que nuestro grupo de usuarios potencial seria un grupo comprendido entre 24-40 a\u00f1os, gente que realiza muchas actividades durante el d\u00eda y al final de la semana no se acuerda a que ha dedicado su tiempo.<\/p>\n<p>Una vez focalizado nuestro grupo de usuarios, vemos que el grupo es muy heterog\u00e9neo por lo que realizaremos una serie de peque\u00f1as entrevistas a posibles usuarios focales para poder modelar nuestro usuario.<\/p>\n<p>De las entrevistas realizadas a los usuarios se extraen funcionalidades para la aplicaci\u00f3n y se descartan otras que cre\u00edamos que serian \u00fatiles para los usuarios pero en realidad no les aportan nada.<\/p>\n<p><b>\u00c1rbol de navegaci\u00f3n y sketching<\/b><\/p>\n<p>Tras el estudio, mediante entrevistas y observaciones, con los usuarios potenciales se llegaron a algunas conclusiones c\u00f3mo que los niveles generales de conocimientos de los usuarios eran diferentes y en consecuencia, las percepciones de los usuarios son bastante diferentes. Incluso para usuarios con un mismo nivel de conocimiento las percepciones son bastante diversas.<\/p>\n<p>A partir de estas conclusiones y del escenario creado, que formaba parte de la primera etapa del dise\u00f1o centrado en el usuario (UCD). La siguiente etapa del UCD es la creaci\u00f3n de la arquitectura de la informaci\u00f3n; para lo que se utiliz\u00f3 la metodolog\u00eda de Card Sorting obteniendo la arquitectura de la informaci\u00f3n de nuestra aplicaci\u00f3n.<\/p>\n<p>A partir de la arquitectura de la informaci\u00f3n obtenida del Card Sorting hemos realizado los prototipos. Para realizarlos hemos utilizado la herramienta <em>Balsamiq<\/em>.<br \/>\nEl prototipo se ha realizado partiendo de la base que la aplicaci\u00f3n ser\u00e1 desarrollada para un sistema operativo Android. Como ya vimos en la primera parte, durante las entrevistas, es el sistema operativo m\u00e1s utilizado y en el cual nos centraremos.<\/p>\n<h3>2. Prototipo<\/h3>\n<p>La \u00faltima etapa del proceso era el prototipado de alto nivel de nuestra aplicaci\u00f3n. La herramienta utilizada para realizar el prototipo fue <em>Justinmind<\/em>.<\/p>\n<p>Dicha herramienta nos ha permitido crear un prototipo completo de la aplicaci\u00f3n gracias a las opciones de definir eventos, incluso hemos podido simular funcionalidades recreando un escenario casi real. Tambi\u00e9n la opci\u00f3n de la creaci\u00f3n de plantillas nos ha facilitado mucho el trabajo sin la necesidad de duplicar partes del dise\u00f1o en todas las pantallas.<\/p>\n<p>El prototipo est\u00e1 pensado para un entorno con sistema operativo Android d\u00f3nde la orientaci\u00f3n del dispositivo es vertical intentando mantener los patrones de dise\u00f1o de dicha plataforma para que resulte m\u00e1s intuitivo y familiar para el usuario. A continuaci\u00f3n podemos ver algunas pantallas:<\/p>\n<p><div id='gallery-1' class='gallery galleryid-629 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/?attachment_id=222'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Fibla-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/?attachment_id=223'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Fibla-2-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='http:\/\/multimedia.uoc.edu\/blogs\/dii\/?attachment_id=224'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Fibla-3-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" sizes=\"auto, (max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw \/ 12)), (min-width: 53rem) calc(6 * (100vw \/ 12)), 100vw\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n<br \/>\n<a href=\"https:\/\/www.justinmind.com\/usernote\/tests\/11491643\/11491646\/11491716\/index.html\"><strong>Enlace al prototipo interactivo<\/strong><\/a><\/p>\n<h1>Conclusiones<\/h1>\n<p>Durante el proceso de dise\u00f1o de nuestra aplicaci\u00f3n hemos visto la importancia y las repercusiones que supone una buena estructuraci\u00f3n de la informaci\u00f3n y usabilidad para el usuario final. Que para el usuario sea f\u00e1cil, c\u00f3modo y familiar utilizar una aplicaci\u00f3n puede suponer un reto que gracias a las herramientas que hemos visto durante la asignatura podemos llegar a conseguir.<\/p>\n<h1>Documentaci\u00f3n<\/h1>\n<p><a href=\"http:\/\/balsamiq.com\/\">http:\/\/balsamiq.com\/<\/a><br \/>\n<a href=\"http:\/\/www.justinmind.com\/\">http:\/\/www.justinmind.com\/<\/a><br \/>\n<a href=\"http:\/\/developer.android.com\/design\/patterns\">http:\/\/developer.android.com\/design\/patterns<\/a><\/p>\n<h1>Sobre el autor<\/h1>\n<p><strong>Xavier Fibla Agust\u00edn <\/strong><br \/>\nIngeniero de Telecomunicaciones, trabaja de desarrollador de software y actualmente estudiante del Posgrado de Desarrollo de aplicaciones para dispositivos m\u00f3viles.<\/p>","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n En la asignatura Dise\u00f1o de interfaces interactivas, el objetivo es iniciarnos en el proceso de desarrollo de una aplicaci\u00f3n para dispositivos m\u00f3viles. Aplicando el dise\u00f1o centrado en el usuario y en el contexto para dise\u00f1ar un producto interactivo utilizando t\u00e9cnicas de prototipado, teniendo en cuenta la arquitectura de la informaci\u00f3n y el dise\u00f1o de &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/experiencies\/gestionat\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abGestiona&#8217;T\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":7,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-629","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":2,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/629\/revisions"}],"predecessor-version":[{"id":631,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/629\/revisions\/631"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/7"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}