Com desenvolupar prototips amb Figma?
Els dissenys interactius i les complicacions
En articles anteriors ja hem parlat de Figma, una eina de disseny gràfic altament intuïtiva que inclou des de la creació de Wireframes fins a la creació de prototips passant pels Mockups.
Aquesta eina de disseny ens permetrà crear productes a mida, per cobrir les necessitats dels nostres clients i com a dissenyadors, un dels nostres reptes és aconseguir transmetre correctament la nostra feina, però quan la nostra feina consisteix en un disseny interactiu, aquesta tasca es complica.
Si alguna vegada has desenvolupat un disseny interactiu, és molt possible que alguns d’aquests problemes et siguin familiars i hagis hagut de bregar amb ells:
- Fas un disseny genial per al producte o servei, al client li encanta i aprova la proposta, es dóna llum verda i es desenvolupa. Però a l’hora de llançar el producte, els usuaris no el fan servir o es queixen del funcionament. Per què ha passat això? Pot ser per molts motius, però és possible que sigui una mala usabilitat, o també per no haver sabut complir amb les expectatives dels usuaris o consumidors. Recorda que no tot és estètica.
- El client ha aprovat el disseny i s’ha començat a desenvolupar el producte o servei, però un cop el client ho veu en desenvolupament, demana canviar i modificar coses que no sabia que serien així, o que s’imaginava d’una altra manera. També pot passar que s’hi vagin afegint funcions que no s’havien demanat en un inici, que van sorgint a mesura que el projecte avança.
- A l’hora de començar amb un desenvolupament, les explicacions de totes les funcions, els estils, les animacions, etc, ocupen una bona part del temps de desenvolupament. Les converses entre desenvolupament i disseny són constants, per saber què fa cada element, cosa que augmenta els temps del projecte. I encara que hi hagi una molt bona comunicació, es pot donar el cas que un element no es desenvolupi com el dissenyador s’ho havia imaginat.
Com podem solucionar aquests problemes?
Des de Itequia creiem que per a cada producte, persona, empresa i client hi haurà solucions que donin millor o pitjor resultat, però nosaltres hem comprovat que una bona solució és crear prototips interactius amb Figma.
Per què fer un prototip a Figma?
Abans de començar, explicarem què es pot fer amb Figma i per què és una eina clau per provar el teu producte o servei durant la fase de desenvolupament.
Què podem fer amb Figma?
Prototipats
Amb Figma podrem crear prototips interactius sense haver d’escriure una sola línia de codi, i compartir-los amb els nostres clients, amb l’equip de desenvolupament, amb usuaris que hagin de provar i posar a prova el producte, etc.
Animacions
Als prototips i desenvolupaments es poden utilitzar animacions, com per exemple que en passar d’una pantalla a una altra es faci una transició concreta. Són petits detalls que donaran més vida i realisme al prototip i al disseny final.
Components
Un altre dels punts forts d’aquesta eina de disseny és que ens permetrà desar components. Aquests components són dissenys modulars que podrem reutilitzar en diferents parts del nostre prototip. Gràcies a aquesta funcionalitat, podrem crear el nostre sistema de disseny, que contindrà tots els elements de marca i components reutilitzables.
Quines solucions ens ofereix Figma?
- El prototip serà tal com és la web un cop estigui desenvolupada i això ens permetrà mostrar al client com serà cada cosa, cada interacció, cada animació, etc. Amb això podrem evitar canvis derivats de malentesos o manca d’informació.
- Un cop tinguem el prototip creat, aquest ens permetrà testejar-lo i detectar possibles errors d’usabilitat, en poder interactuar-hi com si fos la web/producte real.
- Figma ens permet documentar cada funció i/o element mitjançant un Design System. També podrem deixar notes i indicacions als diferents usuaris, incloent-hi el client, l’equip de desenvolupament, etc. Això aporta més visibilitat del projecte per a totes les persones involucrades i per tant un treball més fluid i eficaç.
- Aquesta eina de disseny compta també amb altres beneficis quan el producte/servei està escalant, ja que els components, una vegada creats, es poden reutilitzar, mantenint un disseny uniforme. I si ens calen components nous, els podrem afegir al Design System ja existent, i fins i tot tenir un historial de canvis, per anar documentant les diferents versions del projecte.
Hauria de fer un prototip interactiu a tots els meus projectes?
En aquest cas, la resposta no és definitiva, però el que sí que us podem avançar, és que com més complex és el producte, més necessari és prototipar i comptar amb una versió de prova que puguem anar revisant amb el nostre client.
Encara que pensis que si no fas un prototip o un testeig t’estàs estalviant temps i recursos, a la llarga podries estar perdent més temps per arreglar coses que es podrien haver detectat i corregit a la fase de disseny.
En cas que comptem amb poc temps o recursos per al projecte, seria interessant prototipar només les parts més rellevants i decisives del producte, però sempre és recomanable prototipar i testejar.
Solucionarà un prototip interactiu tots els meus problemes?
Aquí la resposta sí que és molt clara, no, un prototip no solucionarà tots els meus problemes de desenvolupament.
Un prototip interactiu és una eina per millorar el flux de treball, però encara són necessàries la documentació, les reunions tant amb el client com amb l’equip de desenvolupament, etc. El prototip ens ajudarà a fer que aquestes altres tasques siguin més fàcils i portin menys temps, evitant així els malentesos i permetent optimitzar el nostre temps de treball al màxim.
En resum, utilitzar un prototip interactiu en el nostre desenvolupament pot trigar més temps a fer simplement el disseny estàtic, sí, però també aporta uns enormes beneficis, especialment quan el teu producte és complex.
Amb un prototip tan real com la Web, App o producte final, tant el client, com l’equip de desenvolupament, com els possibles usuaris que ho provinguin sabran què és cada cosa i com ha de funcionar, identificant de manera primerenca possibles errors o deficiències d’usabilitat, que podrem corregir abans del lliurament.