L\u2019aplicaci\u00f3 a concebre pel projecte era lliure, per\u00f2 havia d\u2019estar relacionada amb el \u201ctemps\u201d, \u00e9s a dir, des d\u2019un cron\u00f2metre fins a un despertador, passant pels calendaris! Per tant, l\u2019objectiu dels alumnes era deixar volar la imaginaci\u00f3 i trobar una potencial aplicaci\u00f3 que fos \u00fatil, original, i relacionada amb el temps.<\/p>\n
En el meu cas, em vaig decidir per la implementaci\u00f3 d\u2019una aplicaci\u00f3 de gesti\u00f3 de tasques entre diversos usuaris. En definitiva, un calendari compartit entre usuaris on es fes especial \u00e8mfasi en el rol que juguen els participants i en les diferents tasques que han de portar a terme, de manera que es pogu\u00e9s gestionar f\u00e0cilment un grup de treball heterogeni.<\/p>\n
Etapes i reptes<\/h1>\nConceptualitzaci\u00f3<\/h3>\n
Durant l\u2019etapa de conceptualitzaci\u00f3 de l\u2019aplicaci\u00f3 es defineixen una s\u00e8rie d\u2019usuaris tipus. La seva descripci\u00f3 inclou l\u2019edat, professi\u00f3, estat civil, estatus social, aficions, possibles escenaris d\u2019\u00fas de la nostra aplicaci\u00f3 en el seu dia a dia… A partir d\u2019aquesta descripci\u00f3 es pot estimar el tipus d\u2019interacci\u00f3 que tindr\u00e0 l\u2019usuari amb l\u2019aplicaci\u00f3, i per tant es defineixen les necessitats que s\u2019han de resoldre per a satisfer-lo. Un cop es tenen totes les necessitats detectades, s\u2019han d\u2019ordenar per prioritat i definir aquelles que formaran el nucli, l\u2019ess\u00e8ncia de l\u2019aplicaci\u00f3.<\/p>\n
Arbre de navegaci\u00f3 i sketching<\/h3>\n
Un cop s\u2019han detectat les funcions de l\u2019aplicaci\u00f3, \u00e9s hora de definir les pantalles que tindr\u00e0 i les relacions entre elles, \u00e9s a dir, l\u2019arbre de navegaci\u00f3. Durant el disseny de l\u2019arbre \u00e9s important definir quines seran les pantalles clau de l\u2019aplicaci\u00f3, per aconseguir que l\u2019usuari hi pugui accedir fent el menor nombre de salts possible.<\/p>\n
En el meu cas, una de les pantalles fonamentals era la vista del calendari, on es mostren les tasques pendents que t\u00e9 l\u2019usuari. Com es pot apreciar a l\u2019arbre, aquesta pantalla est\u00e0 en un nivell jer\u00e0rquic superior que, per exemple, la pantalla d\u2019editar usuaris, de menys freq\u00fc\u00e8ncia d\u2019\u00fas.<\/p>\n Un cop ben definit l\u2019arbre, \u00e9s hora de comen\u00e7ar a dissenyar a baix nivell l\u2019aspecte que tindran les diferents pantalles de l\u2019aplicaci\u00f3. Per aquesta finalitat es va emprar el software Balsamiq<\/em>, que permet concebre prototips de baix nivell de forma totalment intu\u00eftiva i sense necessitat de programar. A continuaci\u00f3 es poden veure uns quants exemples:<\/p>\n Un cop dibuixats els esbossos de les principals pantalles de l\u2019aplicaci\u00f3, \u00e9s hora de fer un prototip d\u2019alt nivell que simuli de manera realista la interacci\u00f3 que tindr\u00e0 l\u2019usuari amb l\u2019aplicaci\u00f3. Per aix\u00f2 es va emprar el programari Justinmind, que permet fer prototips interactius.<\/p>\n En el meu cas, l\u2019aplicaci\u00f3 est\u00e0 concebuda per Android, per tant un primer pas va ser investigar les directrius est\u00e0ndard de disseny per aquesta plataforma. D\u2019acord amb els patrons de disseny d\u2019Android 4.4, es va optar per un disseny pla o flat<\/em>, amb colors uniformes i sense textures ni degradats. Aix\u00ed mateix, es va emprar la biblioteca d\u2019icones d\u2019Android inclosa dins del programari de disseny.<\/p>\n L\u2019aspecte final del prototip es pot veure a continuaci\u00f3:<\/p>\n Enlla\u00e7 al prototip interactiu<\/strong><\/a><\/p>\n Aquesta pr\u00e0ctica ha estat molt \u00fatil per aprendre com s\u2019ha de dissenyar una aplicaci\u00f3 multim\u00e8dia des de l\u2019inici, buscant les necessitats dels usuaris i plantejant les funcions que s\u2019haurien d\u2019implementar per resoldre-les. A m\u00e9s, m\u2019ha servit per con\u00e8ixer les diferents eines de prototipatge esmentades anteriorment, fet que facilita molt\u00edssim l\u2019an\u00e0lisi del flux de l\u2019aplicaci\u00f3 i de la usabilitat de la mateixa abans d\u2019escriure una sola l\u00ednia de codi.<\/p>\n Una possible continuaci\u00f3 del projecte podria consistir en la programaci\u00f3 de l\u2019aplicaci\u00f3, tancant aix\u00ed el cicle de concepci\u00f3 iniciat durant l\u2019assignatura.<\/p>\n Balsamiq: http:\/\/balsamiq.com\/<\/a> Gabriel Rein\u00e9s March<\/strong> \u00e9s graduat en Enginyeria de Sistemes Audiovisuals per la Universitat Polit\u00e8cnica de Catalunya. Actualment est\u00e0 cursant el M\u00e0ster en Aplicacions Multim\u00e8dia a la Universitat Oberta de Catalunya.<\/p>","protected":false},"excerpt":{"rendered":" Introducci\u00f3 L\u2019assignatura de Disseny d\u2019Interf\u00edcies Interactives gira entorn d\u2019un projecte multim\u00e8dia que es va desenvolupant pas a pas al llarg de tot el quadrimestre, des de la conceptualitzaci\u00f3 de l\u2019aplicaci\u00f3 i l\u2019estudi de les necessitats dels potencials usuaris fins al disseny d\u2019alt nivell de la interf\u00edcie de l\u2019aplicaci\u00f3, el punt immediatament anterior a la programaci\u00f3 … <\/p>\n![\"Reines-0\"](\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/02\/Reines-0.jpg\")
<\/a><\/p>\n<\/a>\n\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\tPrototip final<\/h3>\n
<\/a>\n\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\tConclusions<\/h1>\n
Enlla\u00e7os d\u2019inter\u00e8s<\/h1>\n
\nJustinmind: http:\/\/justinmind.com\/<\/a>
\nGuies de disseny d\u2019Android: http:\/\/developer.android.com\/guide\/topics\/ui\/index.html<\/a>
\nPrototip interactiu del projecte<\/a><\/p>\nSobre l\u2019autor<\/h1>\n