Introducció

L’assignatura de Disseny d’Interfícies Interactives gira entorn d’un projecte multimèdia que es va desenvolupant pas a pas al llarg de tot el quadrimestre, des de la conceptualització de l’aplicació i l’estudi de les necessitats dels potencials usuaris fins al disseny d’alt nivell de la interfície de l’aplicació, el punt immediatament anterior a la programació de la mateixa.

L’aplicació a concebre pel projecte era lliure, però havia d’estar relacionada amb el “temps”, és a dir, des d’un cronòmetre fins a un despertador, passant pels calendaris! Per tant, l’objectiu dels alumnes era deixar volar la imaginació i trobar una potencial aplicació que fos útil, original, i relacionada amb el temps.

En el meu cas, em vaig decidir per la implementació d’una aplicació de gestió de tasques entre diversos usuaris. En definitiva, un calendari compartit entre usuaris on es fes especial èmfasi en el rol que juguen els participants i en les diferents tasques que han de portar a terme, de manera que es pogués gestionar fàcilment un grup de treball heterogeni.

Etapes i reptes

Conceptualització

Durant l’etapa de conceptualització de l’aplicació es defineixen una sèrie d’usuaris tipus. La seva descripció inclou l’edat, professió, estat civil, estatus social, aficions, possibles escenaris d’ús de la nostra aplicació en el seu dia a dia… A partir d’aquesta descripció es pot estimar el tipus d’interacció que tindrà l’usuari amb l’aplicació, i per tant es defineixen les necessitats que s’han de resoldre per a satisfer-lo. Un cop es tenen totes les necessitats detectades, s’han d’ordenar per prioritat i definir aquelles que formaran el nucli, l’essència de l’aplicació.

Arbre de navegació i sketching

Un cop s’han detectat les funcions de l’aplicació, és hora de definir les pantalles que tindrà i les relacions entre elles, és a dir, l’arbre de navegació. Durant el disseny de l’arbre és important definir quines seran les pantalles clau de l’aplicació, per aconseguir que l’usuari hi pugui accedir fent el menor nombre de salts possible.

En el meu cas, una de les pantalles fonamentals era la vista del calendari, on es mostren les tasques pendents que té l’usuari. Com es pot apreciar a l’arbre, aquesta pantalla està en un nivell jeràrquic superior que, per exemple, la pantalla d’editar usuaris, de menys freqüència d’ús.

Un cop ben definit l’arbre, és hora de començar a dissenyar a baix nivell l’aspecte que tindran les diferents pantalles de l’aplicació. Per aquesta finalitat es va emprar el software Balsamiq, que permet concebre prototips de baix nivell de forma totalment intuïtiva i sense necessitat de programar. A continuació es poden veure uns quants exemples:

Prototip final

Un cop dibuixats els esbossos de les principals pantalles de l’aplicació, és hora de fer un prototip d’alt nivell que simuli de manera realista la interacció que tindrà l’usuari amb l’aplicació. Per això es va emprar el programari Justinmind, que permet fer prototips interactius.

En el meu cas, l’aplicació està concebuda per Android, per tant un primer pas va ser investigar les directrius estàndard de disseny per aquesta plataforma. D’acord amb els patrons de disseny d’Android 4.4, es va optar per un disseny pla o flat, amb colors uniformes i sense textures ni degradats. Així mateix, es va emprar la biblioteca d’icones d’Android inclosa dins del programari de disseny.

L’aspecte final del prototip es pot veure a continuació:

Enllaç al prototip interactiu

Conclusions

Aquesta pràctica ha estat molt útil per aprendre com s’ha de dissenyar una aplicació multimèdia des de l’inici, buscant les necessitats dels usuaris i plantejant les funcions que s’haurien d’implementar per resoldre-les. A més, m’ha servit per conèixer les diferents eines de prototipatge esmentades anteriorment, fet que facilita moltíssim l’anàlisi del flux de l’aplicació i de la usabilitat de la mateixa abans d’escriure una sola línia de codi.

Una possible continuació del projecte podria consistir en la programació de l’aplicació, tancant així el cicle de concepció iniciat durant l’assignatura.

Enllaços d’interès

Balsamiq: http://balsamiq.com/
Justinmind: http://justinmind.com/
Guies de disseny d’Android: http://developer.android.com/guide/topics/ui/index.html
Prototip interactiu del projecte

Sobre l’autor

Gabriel Reinés March és graduat en Enginyeria de Sistemes Audiovisuals per la Universitat Politècnica de Catalunya. Actualment està cursant el Màster en Aplicacions Multimèdia a la Universitat Oberta de Catalunya.