Héctor Sánchez i Pedrero | Disseny d’interacció | 21/01/25 

Storyboard

1. Cercar una activitat: Un usuari obre l’app i cerca pels seus interessos: història local i activitats culturals. L’aplicació mostra una llista d’activitats disponibles, seleccionant un tour cultural pel barri.
2. Confirmar participació: L’usuari escull l’activitat i veu quantes persones estan apuntades. Es pot visualitzar els usuaris i la seva edat i se selecciona una hora que pot assistir.
3. Inici del tour cultural: Els participants es troben al punt de trobada.
4. Col·laboració entre generacions: Durant el Tour, tots participen donant explicacions i es graven les històries. Això crea un moment d’aprenentatge compartit i intercanvi cultural.
5. Finalització del tour: Els participants celebren l’experiència. Es fa una foto de grup i s’agraeix la contribució de tothom.
6. Digitalització del tour: Els joves editen els àudios i vídeos enregistrats, afegint informació addicional sobre el barri i música de fons.
7. Publicació del contingut: Es puja el contingut de les històries locals amb una descripció atractiva i una imatge del grup. Tothom pot accedir-hi fàcilment.
8. Interacció amb altres usuaris: Altres usuaris veuen el contingut, deixen comentaris i proposen noves idees per a futurs tours.

Esbós bàsic i prototip

• Incloure una gran quantitat de temàtiques per arribar al públic més gran possible en termes de número i de diversitat d’edat incloent activitat relacionades amb la cultura, natura, art i altres aspectes que permetin una gran diversitat d’activitats.
• Creació de comunitats perquè els participants puguin connectar després de les activitats i mantenir una relació més activa entre ells per tal de combatre la soledat de la població.
• Creació d’una app que sigui accessible i intuïtiva per a la gran part dels usuaris només fent ús dels elements necessaris perquè pel grup d’edat gran sigui més simple i fàcil el seu aprenentatge.
• Fer ús d’elements cromàtics i visuals per facilitar la identificació de les tipologies d’activitats i pàgines per on naveguen.
• Fer ús d’estructures conegudes pels usuaris prèviament per facilitat la cerca de contingut i facilitant la navegació a través de l’aplicatiu.

Prototipat:

Ús del color per destacar categories: Es fan servir diversos colors per agrupar diversos elements relacionats amb les categories temàtiques (com es pot veure a la pàgina d’inici.

Ús del principi d’agrupació: Es fa ús del principi d’agrupació per una fàcil comprensió del text i la fotografia, facilitant la selecció de la comunitat a l’usuari.

Ús del principi de similitud: Es fa servir la mateixa tipografia i fons en les pàgines d’assistència perquè l’usuari identifiqui aquesta tipologia de pàgines.

Minimitzar aprenentatge: És més fàcil que els usuaris naveguin per interfícies amb elements els quals coneixen prèviament, en aquest model s’han fet servir estructures que una gran part dels usuaris coneixen adaptades a les necessitats pròpies.

Espaiat entre elements: Es deixa un espaiat entre els elements per tal que per a la gent amb menys precisió disposin d’una àrea més àmplia per seleccionar l’opció desitjada.

Ús del principi de la metàfora: Es fan ús d’icones que simbolitzen elements de la realitat per poder relacionar el significat d’una forma més intuïtiva

Fons cromàtics: Quan es naveguen per fitxes o comunitats que formen part d’una categoria es modifica el fons per facilitar la la identificació de la tipologia d’activitats.

Conclusions Generals:

Inclusió i Comunitat: Incorporació d’una gran quantitat de tipologies d’activitats per incloure al nombre més gran de participants en termes d’edat i interessos per la creació de comunitats que es creïn a partir d’activitats formant grans famílies les quals obtindran un contacte a través de la pàgina de comunitat i en persona.

Disseny Accessible i Centrat en l’Usuari: El desenvolupament d’una eina intuïtiva i accessible amb elements com els colors per categoritzar, espaiats per millorar l’experiència i l’ús d’elements visuals faciliten el seu ús per a la gran major part de generacions que fan ús de l’aplicatiu. A més a més, diversos principis com agrupació, metàfores visuals i estructures conegudes ajuden al fet que l’aplicatiu sigui més intuïtiu, agilitant i facilitat el seu ús.

Impacte Visual i Experiència Consistent: Un dels elements més importants i que milloren l’experiència de l’usuari és utilitzar els canvis cromàtics i fons per facilitar la identificació de categories i activitats, ja que crea una experiència on tot segueix la mateixa identitat visual que permet identificar en tot moment en quina tipologia et trobes.

Explicació de l’Esbós (Sketching)

Per a aquest repte, he elaborat un esbós que parteix del storyboard i que permet visualitzar les pantalles clau de l’aplicació. L’objectiu principal era establir una base clara de les interaccions bàsiques i les funcionalitats proposades, utilitzant les tècniques de sketching que hem treballat durant l’assignatura. Amb aquest esbós, he intentat reflectir com es podria dissenyar l’aplicació per respondre a les necessitats de les persones usuàries, mantenint una atenció especial als principis de disseny centrat en les persones.

Estructura i Conceptes Aplicats

L’esbós consta de 6 pantalles principals, que cobreixen el flux d’interacció des de la pantalla inicial fins a les funcionalitats més avançades. A continuació, detallo cada una:

1.Pantalla d’inici i registre:

•He mantingut un disseny simple amb un enfocament clar cap a les accions principals: iniciar sessió o registrar-se.

•Vaig aplicar el principi de visibilitat per assegurar que els elements essencials estiguessin fàcilment identificables.

2.Pantalla de configuració d’objectius:

•En aquesta pantalla, l’usuari pot seleccionar i personalitzar els seus objectius.

•Els elements visuals inclouen afordances perceptibles i agrupacions clares que guien l’usuari.

3.Pantalla de connexió de comptes:

•Aquí, vaig representar el procés de vinculació de comptes externs, utilitzant símbols familiars per transmetre confiança i seguretat.

•Vaig incorporar metàfores visuals per fer el procés més intuïtiu.

4.Pantalla de seguiment del progrés:

•Aquesta pantalla inclou gràfics interactius i elements visuals que ajuden a l’usuari a entendre el seu progrés de manera ràpida.

•He fet servir el principi de mapatge natural, assegurant que els controls estiguessin alineats amb les expectatives de l’usuari.

5.Pantalla de notificacions:

•Vaig destacar com l’aplicació informa l’usuari sobre assoliments o tasques pendents.

•Els elements visuals com el contrast de colors reforcen l’atenció en les notificacions importants.

6.Pantalla de funcionalitats avançades:

•Aquesta pantalla mostra com l’usuari pot explorar més opcions, com consells personalitzats o informes detallats.

•He aplicat restriccions visuals per evitar sobrecarregar l’usuari amb massa informació alhora.

Reflexió sobre l’Esbós

Treballar en aquest esbós m’ha permès experimentar amb diferents maneres de plasmar les idees inicials en dissenys clars i comprensibles. Vaig utilitzar les fitxes del Design Toolkit com a guia per assegurar que cada pantalla reflectís principis de disseny com l’accessibilitat, l’alineació i la proximitat. També vaig consultar els resultats del benchmarking del repte 3 per garantir que les solucions estiguessin alineades amb les necessitats reals dels usuaris.

Proposta d’Alta Fidelitat (High Fidelity)

Tot i que no es demanava explícitament per al lliurament, vaig voler anar un pas més enllà i crear una proposta d’alta fidelitat per mostrar com podria veure’s l’aplicació en la seva versió final. La meva intenció era oferir una visió més realista de l’experiència d’usuari i del disseny visual.

Aspectes destacats de la Proposta d’Alta Fidelitat

1.Colors i tipografia:

•Vaig triar una paleta de colors càlids i amables per reforçar una sensació de confiança i comoditat.

•Les tipografies seleccionades són clares i llegibles, prioritzant sempre l’accessibilitat.

2.Disseny visual coherent:

•He seguit un llenguatge visual coherent entre les pantalles per garantir una experiència fluida.

•Vaig utilitzar elements interactius clars, com botons amb efectes visuals que reforcen l’afordança.

3.Retroalimentació d’usuari:

•He inclòs elements de feedback visual, com animacions subtils i canvis de color, per assegurar que l’usuari tingui sempre clares les accions que està realitzant.

4.Funcionalitats avançades:

•A la pantalla de seguiment del progrés, vaig afegir gràfics més detallats i interactius que permeten a l’usuari explorar dades específiques.

•A la pantalla de funcionalitats avançades, vaig incorporar opcions com filtres i configuracions personalitzades.

Reflexió sobre la Proposta d’Alta Fidelitat

Crear aquesta versió d’alta fidelitat m’ha ajudat a veure com les decisions de disseny inicials poden traduir-se en una experiència d’usuari més rica i atractiva. Tot i que la proposta no era un requisit, considero que afegeix valor al projecte, ja que permet visualitzar com podria evolucionar l’aplicació en futures iteracions.

Conclusió

Tant l’esbós com la proposta d’alta fidelitat són passos clau per comprendre millor les necessitats dels usuaris i traduir-les en solucions efectives i atractives. Aquest procés m’ha permès aplicar els coneixements adquirits durant l’assignatura i reflexionar sobre com el disseny pot millorar les experiències digitals d’una manera centrada en les persones.

Explicació del Storyboard

El storyboard que he creat per aquest repte està pensat per visualitzar com seria l’experiència d’usuari amb l’aplicació que he dissenyat. He volgut destacar les interaccions més importants per tal de mostrar com l’usuari pot completar les seves tasques d’una manera intuïtiva i satisfactòria. A través de les vinyetes, he representat el flux d’interacció pas a pas, assegurant-me que tot estigui alineat amb els principis de disseny centrat en les persones.

Estructura i Conceptes Aplicats

He desenvolupat el storyboard en 6 vinyetes, cadascuna representant un moment rellevant en l’ús de l’aplicació. Aquí descric el procés:

1.Pantalla d’inici i registre:

•He volgut començar amb un procés senzill i accessible perquè l’usuari pugui registrar-se sense complicacions. Vaig tenir en compte que aquest primer contacte és clau per transmetre confiança i motivar a seguir utilitzant l’aplicació.

•Vaig aplicar els principis de visibilitat i accessibilitat, assegurant-me que tot fos clar i fàcil d’entendre.

2.Configuració d’objectius:

•Aquí he representat l’usuari personalitzant els seus objectius dins l’aplicació, ja sigui per organitzar estalvis o gestionar projectes personals.

•He aplicat el concepte d’afordances perceptibles, utilitzant icones i elements visuals familiars perquè l’usuari comprengui fàcilment com interactuar.

3.Connexió amb comptes externs:

•En aquesta vinyeta, l’usuari connecta el seu compte bancari o altres eines externes amb l’aplicació. Vaig pensar que era important reflectir un procés segur i fluid.

•Vaig utilitzar metàfores visuals, com el símbol de cadenat, per reforçar la sensació de seguretat.

4.Monitoratge de progrés:

•He inclòs una escena on l’usuari consulta el seu progrés mitjançant gràfics interactius que destaquen les dades clau.

•En aquesta part vaig aplicar mapatge natural, assegurant-me que la informació es presenti de manera lògica i intuïtiva.

5.Notificació d’assoliments:

•Vaig representar com l’usuari rep una notificació per haver assolit un objectiu. Aquest moment vol reflectir la satisfacció i motivació que l’aplicació genera.

•He incorporat principis visuals, com el contrast i el color, per destacar aquest moment positiu.

6.Accés a funcionalitats avançades:

•Finalment, he inclòs una escena on l’usuari explora altres funcionalitats, com consells personalitzats o informes més detallats.

•Aquesta vinyeta reflecteix com l’aplicació pot evolucionar amb l’usuari, oferint opcions clares per continuar millorant l’experiència.

Aprenentatges i Reflexió

Treballar en aquest storyboard m’ha ajudat molt a entendre la importància de pensar en tot el procés des del punt de vista de l’usuari. He intentat integrar tot el que he après durant l’assignatura, especialment els principis de disseny centrat en les persones, per garantir que cada interacció tingui sentit i aporti valor. A més, he revisat les activitats anteriors, com el benchmarking del repte 3, per assegurar-me que les necessitats de l’usuari estiguin sempre al centre de les meves decisions de disseny.