twodays MEMÒRIA DE PROJECTE
Vull agrair als professors per la orientació que m’han ofert en la realització d’aquest projecte final d’estudis.
També al meu company de pis per la seva opinió sincera en el plantejament i desenvolupament del projecte. Per últim, vull donar les gràcies als meus pares pel suport que m’han donat en tot moment i els ànims en els moments de bloqueig.
ÍNDEX INTRODUCCIÓ BRIEFING METODOLOGIA CRONOGRAMA OBJECTIUS EL PÚBLIC OBJECTIU ANÀLISI DE REFERENTS EL PROCÉS DE DISSENY ESQUEMA DE FUNCIONAMENT ESBOSSOS WIREFRAMES ESQUEMA WIREFRAMES LA PROPOSTA NAMING I LOGOTIP TIPOGRAFIA GAMMA CROMÀTICA INTERFÍCIE D’USUARI BIBLIOGRAFIA
INTRODUCCIÓ
Prenent com a punt de partida la importància de les noves tecnologies dins de la societat actual, he decidit enfocar el meu projecte final de grau dins d’aquest àmbit. Actualment, la gran majoria de les persones que vivim en grans ciutats estem connectats amb el món les 24 hores al dia durant 365 dies a l’any. Això, ens ha permès establir un intercanvi constant d’informació i una millora en les comunicacions personals. Amb l’aparició de les noves tecnologies, els telèfons mòbils han passat a ser una extensió del nostre cos, i li hem atorgat l’etiqueta
d’element indispensable en les nostres vides, ja que mitjançant aquest dispositiu estem permanentment connectats des de qualsevol punt del món.
Les característiques intrínseques de mobilitat, la gran capacitat de les xarxes de comunicacions i sobretot, la possibilitat de la geolocalització, obren una nova dimensió en el món de la comunicació i el desenvolupament d’aplicacions que justament aprofiten el lloc i el moment per oferir tot un seguit de serveis que fins fa poc eren impensables, permetent la presa de decisions en un curt espai de temps i en funció de les variables temporals.
BRIEFING
L’encàrrec: El projecte a realitzar és una aplicació per mòbil que ofereix als seus usuaris una nova forma de comunicar-se i de transmetre missatges, ja puguin ser mostrant la identitat, o bé anònims. Aquests missatges o elements a compartir es realitzaran a través d’una realitat virtual.
El que es vol aconseguir amb aquest projecte és que les persones comencin a allunyar-se dels temors de contactar amb desconeguts, uns dels objectius principals del projecte son: compartir, conèixer, experimentar, etc.
L’estructura principal del projecte està formada a partir de mapes que es poden obtenir de Google Maps i seran la base per a que els usuaris puguin trobar missatges i incorporarne de nous. Tots els missatges, a l’hora de ser llegits utilitzaran el recurs de la realitat augmentada i dins d’un radi de 50 m del punt on s’ha creat.
Aquest projecte és considerat una xarxa social que es diferencia de la resta per la seva temporalitat. Els missatges dels usuaris tenen 48 hores per ser vistos, passats aquests dos dies desapareixeran. Aquest factor temps fa que l’usuari es pugui considerar dels pocs que ha vist la publicació i això li aporta un valor afegit al missatge penjat. Per què és necessari?
Perquè és una nova forma de relacionar-se i una nova activitat que pot fer experimentar a l’usuari. És necessari de cara també a que ens trobem en un moment en que les noves tecnologies s’estan desenvolupant molt ràpidament i cal mostrar-ho als consumidors. També és necessari de cara a mostrar als usuaris que no tot el que existeix en un present roman per sempre i es pot utilitzar com a eina per començar a valorar les petites coses.
A qui va dirigit:
Els objectius:
El públic objectiu del projecte son persones entre 18 i 30 anys. L’elecció d’aquesta franja d’edat és perquè son les persones que avui en dia estan més al corrent de tots els canvis que s’estan produint a l’hora que son els que ja estan aprofitant totes les possibilitats que els ofereixen els seus telèfons.
Poder compartir amb altres usuaris diferents tipus d’informació. Tot això alhora que estem aprofitant les tecnologies i avenços que s’estan realitzant, partint del concepte de la geolocalització que és força conegut actualment fins al concepte de realitat augmentada que s’està començant a donar a conèixer des de fa relativament poc. El conjunt d’aquest tipus d’elements establiran una nova forma de comunicació.
Al tractar-se d’una part de la població que ha crescut coneixent una gran diversitat de millores en els sistema, li serà més fàcil poder entendre els nous canvis que s’hi produeixen. Fases que defineixen el projecte:
- Investigació - Anàlisi d’antecedents - Anàlisi de referents - Disseny del funcionament - Disseny dels esbossos dels wireframes - Disseny final dels wireframes - Disseny de la interfície d’usuari - Disseny de la interacció de l’usuari
METODOLOGIA
La metodologia emprada en la investigació per al meu projecte, l’he basada en primer lloc en la recerca a Internet sobre les comunicacions avui dia, les aplicacions mòbils, la geolocalització i la realitat augmentada. Aquesta informació em permet conèixer els paràmetres de funcionament que puc desenvolupar.
D’altra banda, també realitzo dues tandes d’enquestes per poder conèixer quines son les necessitats o inquietuds del meu públic objectiu.
La primera tanda d’enquestes és per conèixer de quina manera utilitzen el telèfon mòbil els joves, quines son les d’aplicacions son les més utilitzades, si exploten totes les possibilitats que els permet el dispositiu i s’analitzarà si consideren que és un element que ens pot apropar a altres usuaris gracies a les facilitats de comunicació, o bé ens allunya de qui tenim al voltant per prestar més atenció al mòbil.
La segona tanda d’enquestes està més enfocada cap a l’ús i la interacció amb persones desconegudes, quines serien les temàtiques de major interès i que podrien donar més joc dins de l’àmbit de les aplicacions mòbils que permeten mantenir contacte amb desconeguts. Un cop analitzades les enquestes, de relacionar tots els conceptes que s’han tractat i veure quins son els punts forts he de definir una proposta que sigui útil i a la vegada presenti i un interès real per a la població jove. Un cop coneguts els punts importants sobre els quals s’ha de desenvolupar el projecte, puc ja començar a dissenyar i plantejar els diferents entorns de interacció i la definició exacte del funcionament de l’aplicació.
CRONOGRAMA
OBJECTIUS
L’objectiu del meu projecte és poder relacionar persones desconegudes amb un interès comú. Fer que les persones s’obrin una mica més de cara als que no coneixen i puguin tractar una temàtica d’una forma àgil. Ha de permetre que es resolgui un problema/situació/ opinió de caire temporal i puntual. He establert aquest objectiu ja que segons l’anàlisi realitzat en un seguit d’enquestes he pogut observar que moltes persones tendeixen a allunyar-se de qui no coneixen, tot i que consideren que és interessant el fet de poder compartir experiències amb altres.
Compartir experiències, pensaments i tot allò que ens passi pel cap en un moment en concret, com també gestionar possibilitats puntuals ha de ser una màxima entre els usuaris que, per el sol fet de descarregar-se l’aplicació ja es comprometen tant a fer-ne un us propi com a consumidors, com en ser al mateix temps persones que ofereixen opinions i experiències vers els altres. Justament, aquest tracte de comunicador, dóna al projecte la clau de l’altruisme de que se’n fa ressò, i cau de ple en una aplicació que busca ser de clar servei social.
EL PÚBLIC OBJECTIU
A l’hora de centrar-me a definir un públic objectiu vaig pensar en les persones d’entre 18 i 30 anys. Aquesta franja d’edat ve marcada per els nivells d’ús i d’implicació, dins de l’àmbit de la tecnologia actual. Es tracta d’un marc suficientment jove com per a poder adaptar-se als nous canvis amb molta facilitat i que en aquest moment ja es troben utilitzant al màxim les possibilitats que els hi permeten els seus dispositius mòbils.
Unes altres característiques que ha de tenir el públic objectiu son les ganes d’experimentar amb noves eines, ganes de compartir coneixements, fotografies, música, etc, sense la intenció de que arribi a una persona en concret, simplement el fet de llençar-ho a l’aire. També el fet de no tenir una temàtica tancada i establerta sobre quines son les temàtiques que es tracten, obre el camp d’usuaris interessats.
ANÀLISI DE REFERENTS
Prenent com a punt de partida de que les icones son els elements que ens guien dins d’una aplicació, vaig voler escapar de les típiques petites icones sòlides i sense detall que apareixen en la majoria d’aplicacions. Per aquest motiu vaig escollir utilitzar il·lustracions lineals i detallades que les fes úniques.
L’ús de franges que ocupen d’un costat a l’altre de la pantalla mitjançant colors plans i alguns cops amb opacitats, ens allunya de moltes aplicacions que solen jugar amb degradats en els seus botons i capçalera.
Per trencar amb aquest estil m’he decantat cap a un estil més pla tot i que també inclou textures que ajuden a que no sigui una imatge plana totalment.
Dins de la diversitat de mapes que podem trobar, és molt important l’icona per marcar una posició concreta. A l’hora de definir aquesta posició es solen utilitzar diferents “pins”, però tots tenen una forma força similar. En alguns casos aquests elements s’aprofiten per aportar informació sobre el contingut en aquell punt.
Existeix una gran diversitat de menús dins de les aplicacions, alguns son verticals, als quals es pot accedir des de qualsevol pantalla, altres es troben a la part inferior i també n’hi ha que funcionen com a pantalla inicial. Tenint en compte la funció que ha de desenvolupar cada aplicació li escaurà més un tipus de menú o un altre.
En el cas del menú inferior, el màxim d’apartats son 5, i en diversos casos el botó central fa referència a l’acció principal de l’aplicació.
Habitualment trobem que les galeries d’imatges se situen mitjançant requadres que ens permeten veure el màxim de fotografies alhora, d’aquesta manera obtenim una gran part d’informació sense haver d’interactuar-hi.
Aquest tipus de galeria és utilitzat tant des del mateix sistema operatiu del dispositiu com en diferents aplicacions.
De la mateixa manera que les galeries, les pantalles sobre missatgeria tenen un format força semblant, que per una banda permet veure un llistat amb els diferents contactes i al clicar-los apareixen diferents bafarades. Aquest sistema és molt simple i mostra gràficament l’acció de parlar amb algú mitjançant diferents tipus de bafarades.
EL PROCÉS DE DISSENY
En algunes aplicacions he pogut observar com la fotografia de perfil apareix ocupant tota la part superior de la pantalla, cosa que considero que és un crit a l’atenció de l’usuari i alhora aporta més riquesa visual a una pàgina on el contingut canvia de tant en tant, no continuament.
A l’hora de posar-me a dissenyar com seria el funcionament de la meva aplicació vaig seguir diversos passos:
elements eren els que hi cabien i de quina manera.
En segon lloc, al ja tenir un esquema i havent investigat anteriorment com s’estructurava la informació i quina era la seva jerarquia vaig començar a dissenyar els wireframes per organitzar l’espai de la pantalla i veure quins
Finalment, un cop vaig tenir l’estructura de les pantalles i els seus moviments, ja vaig decidir quin tipus de gràfica hi aplicaria de manera que fos entenedora i li aportés una pròpia personalitat.
En primer lloc vaig realitzar un esquema de funcionament per així saber quines serien les àrees que hi apareixerien i quin seria el desenvolupament de cada una d’elles.
En tercer lloc comparant els wireframes dissenyats anteriorment vaig aplicar-los el moviment que l’usuari hauria de realitzar a l’hora d’utilitzar l’aplicació i així comprovar si el seu funcionament era correcte.
ESQUEMA DE FUNCIONAMENT
ESBOSSOS WIREFRAMES
ESQUEMA WIREFRAMES
A la pàgina d’inici de sessió l’usuari té la opció d’entrar amb el seu nom i contrassenya o bé, en el cas de que no estigui resgitrat donar-se d’alta per formar-ne part.
Un cop l’usuari s’ha registrat accedeix a la pantalla “Home/Mapa” la qual mostra diferents documents que els usuaris han penjat. Aquesta pantalla té dos tipus de visió la que apareix en un primer moment com a “mapa” i una segona que té accés a la càmara del nostre dispositiu i ens permet veure el carrer amb els documents “en l’aire”. Per poder realitzar el canvi de visió de la “Home/Mapa” a la “Home/Càmera” hi he incorporat una pestanya desplegable.
En els dos tipus de visió de la “Home” trobem a la part inferior de la pantalla al “Tab bar”. El menú, format per cinc botons, ens ajudarà a moure’ns per la resta de l’aplicació.
En aquesta imatge podem veure la disposició dels cinc botons i quin n’és el principal.
Tenint en compte la funció principal de l’aplicació, que és el fet de poder compartir diferents tipus de documents, el recorregut a seguir serà el següent:
El primer pas que hem de realitzar és prèmer el botó central del menú, mitjançant el qual apareix un desplegable vertical que permet escollir entre quatre tipus de d’arxius.
Dins de totes les variables de d’arxius, en el cas de penjar fotografies s’accedeix a una pantalla dividida en dues parts on es pot escollir si fer una fotografia des de la càmara o bé agafar-ne una de la galeria. Si s’agafa de la galeria es mostren en miniatura, en canvi si es decideix fer-ne una de nova, dins de la pantalla de càmara apareixen els botons de activar/desactivar el flash, l’opció d’activar la càmara frontal i la captura. En els passos posteriors es mostra una previsualització de la imatge escollida i posteriorment l’opció d’afegir-hi un comentari.
En el segon tipus de document a compartir, la pantalla que podem visualitzar Ês un llistat amb les notes que tenim guardades al nostre telèfon i que un cop les seleccionem les podem editar per posteriorment penjar-les.
En aquest mateix moment d’editar-les les previsualitzem, i posteriorment trobem una pantalla per afegir un comentari de la mateixa manera que en el cas de les fotografies.
A diferència dels altres tipus d’arxiu, en el cas de penjar només un text, la mateixa pantalla que permet generar un text, també té la funció d’enviar-lo.
Finalment, amb l’última tipologia de document, es pot observar un llistat amb diferents pistes d’audio, ja siguin cançons o gravacions. Abans depenjar-les hi ha l’opció de reproduïrles per estar segur de quin és el document adjunt, i per últim l’usuari pot afegir-hi un comentari.
Seguint amb el menú inferior, a l’esquerra hi ha el botó de col·lecció. En aquest apartat trobem classificats tots els arxius que l’usuari ha visualitzat prèviament per realitat augmentada i ha decidit guardar-los en un àlbum privat. Aquest àlbum mostra el seu contingut en diferents pestanyes. En la primera es poden visualitzar tots els tipus de documents ordenats per data, dels més recents als més antics. A la segona pestanya només es mostren fotografies, a la tercera documents, a la quarta textos i finalment a la cinquena els audios.
El motiu d’aquesta classificació és per facilitar la búsqueda d’arxius dins de la col·lecció. Els arxius es podem obrir per obrir-los i poder-los veure en un format més gran i també els comentaris que hi apareixen a la part inferior.
Dins del segon botó del menú hi apareixen les notificacions que ha rebut l’usuari. Aquestes poden ser que un altre usuari hagi vist o bé comentat una publicació pròpia. En aquesta pantalla, les notificacions es mostren en forma de llista perquè l’usuari pugui veure ràpidament quines son. Aquestes es poden ampliar i es mostren de la mateixa manera que un arxiu de la galeria.
El quart botó del menú està destinat als missatges privats amb altres usuaris. Es mostra en forma de llistat on apareixen els usuaris amb qui s’ha relacionat l’usuari. Al obrir una conversa el diàleg apareix en forma de bafarades.
Tant des de les publicacions comentades anteriorment en el llistat de notificacions com des dels missatges privats es pot accedir al perfil públic d’altres usuaris.
L’útilm botó del menú correspon al perfil d’usuari. En aquest hi trobem una fotografia, el nom, una breu informació sobre ell, un historial de publicacions pròpies de la mateixa manera que apareixen dins de la col·lecció i el botó de configuració per poder modificar les propietats de seguretat i notificacions. El contingut d’aquesta pantalla és editable.
LA PROPOSTA
Tenint en compte totes les dades extretes de la part d’investigació, juntament amb un anàlisi de diverses aplicacions ja existents, alguns referents mencionats anteriorment i seguint l’esquema de wireframes que he exposat en el punt anterior, he dissenyat la gràfica que s’aplica a aquests.
Aquesta gràfica es mostra a continuació aplicada a cadascuna de les pantalles per poder veure quin seria el seu aspecte final.
D’aquesta manera en aquest apartat exposo quin és el naming, el logotip amb el seu significat, la tipografia escollida, els colors corporatius i el seu funcionament cara a l’usuari final. Tot aquest conjunt d’elements que aporten un caràcter únic que la diferencia de la resta.
NAMING I LOGOTIP
twodays A l’hora de posar nom al projecte, vaig tenir en compte tots els punts que havia marcat que serien característics de l’aplicació.
Aquests punts relacionaven els conceptes de inmediatesa, present, avui, efímer, etc. Tots aquests conceptes s’enllacen entre si per la seva curta durada en el temps.
Com que la característica d’aquesta nova xarxa social que la diferencia de la resta és que els missatges que es penjen en ella tenen una temporalitat limitada a 48hores vaig començar a relacionar els conceptes que en podien fer referència.
Els conceptes que havia de mostriar el nom de l’aplicació tenien com a objectiu relacionar la temporalitat i el present. “Two” fa referència a dos dies, és a dir 48 hores, i a més a més la paraula “Today” em permetia jugar amb el concepte d’avui i present. D’aquí va néixer la paraula “Twodays”. Em va semblar molt encertat pel fet de que la seva sonoritat expressa “dos dies” i al veure’l escrit s’intueix la paraula “today”. Així “Twodays” sintetitza en una paraula la idea que engloba l’aplicació.
El logotip que representa l’aplicació està format per una circumferència i dos cercles que l’envolten. Aquest conjunt formen una figura que es pot interpretar de dues formes relacionades amb el concepte i funcionament de l’aplicació.
D’una banda podem intuir una figura d’un ull o un objectiu d’una càmera que ens transporta al concepte de veure les coses amb els nostres propis ulls ja que l’aplicació utilitza la realitat augmentada per poder observar allò que hi ha a l’aire però no podem visualitzar sense l’ajuda d’un dispositiu mòbil.
D’altra banda, si interpretem el logotip des del damunt podem observar com en el centre hi podria haver una persona i els dos cercles que l’envolten generen el seu camp de visió en 360º a més a més de definir un punt en el que hi ha un element a observar.
TIPOGRAFIA GOTHAM ROUNDED BOLD ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 123456789.:!
GOTHAM ROUNDED BOOK
La tipografia que he utilitzat pel logotip és la Gotham Rounded. La he utilitzat també com a tipografia principal dins de l’aplicació ja que variant-ne els cossos ja crea una diferència prou important i li donava continuïtat i quedava més recollida. Em vaig decantar per aquesta tipografia perquè escapa de les clàssiques i té un punt amigable pel fet de tenir les puntes arrodonides.
A més a més és una tipografia de lectura molt fàcil gràcies a les seves corbes.
Vaig considerar que era molt important el fet de poder-se apropar d’una forma senzilla al públic objectiu.
D’altra banda, en el cas dels botons de la capçalera i de la barra de menú, he utilitzat la clàssica Helvetica Neue que ja està implantada en moltes aplicacions i que funciona correctament.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 123456789.:!
HELVETICA NEUE MEDIUM ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 123456789.:!
GAMMA CROMÀTICA
R: 49 G: 200 B: 206 R: 41 G: 146 B: 154
La gamma cromàtica que he utilitzat per la gràfica de l’aplicació juga amb els tons blaus turquesa tirant cap a verd.
He decidit escollir aquests colors perquè durant la investigació em vaig adonar de que gran part de les xarxes socials utilitzen el color blau, com per exemple: Facebook, Twitter, LinkedIn, Messenger, Foursquare, Circle, etc. En canvi, les aplicacions de missatgeria es decanten més cap al verd, com per exemple: WhatsApp o Line.
A l’aplicació els diferents colors que s’hi poden trobar és el blau turquesa, com a color corporatiu, un blau turquesa més apagat per les seleccions i petits detalls, el negre per al menú, per els textos i línies i el blanc per a les icones i el nom a la capçalera. Al tractar-se d’una aplicació que juga amb mapes també podem veure-hi els colors que utilitza el mapa de “GoogleMaps” i els colors de les fotografies que hi apareixen que fan que l’aplicació sigui més colorida i atractiva.
R: 0 G: 0 B: 0 R: 255 G: 255 B: 255
INTERFÍCIE D’USUARI
Pablo Cáceres: Una pregunta retórica se le pasó por la mente y le puco melanóclico, pero enseguida reemprendió su marcha.
ENTRAR
ENTRAR
REGISTRAR
REGISTRAR
EDITAR
EDITAR
ENVIAR
ENVIAR
BIBILIOGRAFIA
http://designspiration.net/ http://pinterest.com/ http://www.behance.net/ http://www.domestika.org/coolsites http://www.mobile-patterns.com/ http://pttrns.com/ http://inspired-ui.com/ http://mobiledesignpatterngallery.com/mobile-patterns.php http://www.mobilepatterns.com/ https://www.cocoacontrols.com/ http://www.uiparade.com/ http://androidpttrns.com/
Sandra Vilarrubias