A vállalatspecifikus munkafolyamatokhoz és nehézségekhez gyakran csak az egyedi szoftvermegoldások tudnak kellőképpen alkalmazkodni. A legtöbb vállalatnál viszont akadnak olyan feladatok is, amelyek dobozos termékekkel is komolyabb kompromisszum nélkül megoldhatók. De csak akkor, ha kellő körültekintéssel választjuk ki a megfelelő eszközt.

Ehhez a döntési folyamathoz szeretnénk inspirációval szolgálni következő interjúnkkal. Brigitte-et, a UI és UX szakértőnket kérdeztük arról, hogy milyen kutatás és gondolkodási folyamat előzte meg az új dizájneszköz kiválasztását cégünk számára.

A megfelelő alkalmazás megtalálásához először meg kell határozni, hogy a cégnek mire van pontosan szüksége. A mi esetünkben milyen feltételeknek kellett megfeleljen az új dizájneszköz?

Nekünk az volt a legfontosabb, hogy ne kelljen váltogatni az eszközök között, hogy egy alkalmazással meg tudjuk oldani a tervezést, a prototípuskészítést, a megosztás, a véleményezést. Egy olyan eszközt kerestünk, amelynek a használatát a kollégák és az ügyfelek is könnyen el tudják sajátítani.

A munkám során a dizájn következetességének biztosítása is elengedhetetlen (ez alatt például az újrahasznosítható, az egész csapattal megosztható dizájnrendszereket értem). Egy olyan alkalmazásra van szükségünk, amely az ötleteimet prototípus és tesztkoncepció formájában életre tudja kelteni. A valós idejű telefonos tesztelés lehetősége is fontos szempont volt, már csak a mobilalkalmazások és a reszponzív felületek tervezése miatt is.

Mindemellett az sem mindegy, hogy hogyan tudom megosztani a terveket a projekt többi résztvevőjével, hogyan tudok velük az alkalmazás segítségével együtt dolgozni beleértve a valós idejű közös tervezést és a visszajelzéseket is. A fejlesztők számára pedig biztosítani kell a dizájnspecifikációkat és a dizájnelemek pontos és megbízható exportálását.

A következő lépés a piacon elérhető alkalmazások feltérképezése, majd annak az ellenőrzése, hogy van-e köztük az előre meghatározott céloknak megfelelő termék. A mi esetünkben milyen alkalmazások jöttek szóba? Melyek azok az eszközök, amelyeket dizájnátadással és -együttműködéssel, prototípustervezéssel kapcsolatban mindenképpen érdemes említeni?

Mint a legtöbb esetében, itt is sok múlik az egyedi körülményeken, a vállalkozás projektjein, a csapaton. Mindennek megvannak a maga előnyei és korlátai.

Jelenleg mi a Sketch-t használjuk a tervezéshez és az InVisiont a prototípuskészítéshez és az átadáshoz. A célunk viszont az volt, hogy egy mindent egyben ellátó felületre váltsunk, így optimalizáljuk a munkafolyamatokat.

A UXTools 2019-es felmérése szerint a Zeplin, a Figma, az InVision és az Adobe XD voltak a tavalyi év legnagyobb felhasználóbázisú alkalmazásai. De ezek közül csupán kettő, a Figma és az Adobe XD, ami tervezésben és prototípuskészítésben is erős. Így ez a két eszköz jött főleg szóba, ezeknek néztem utána tüzetesebben.

A korábban említett feltételek mellett milyen elvárásaid voltak az új eszközzel kapcsolatban UI és UX tervezőként?

A megfelelő eszközre váltás (esetünkben két eszköz egyre cserélése) komoly megfontolást igényel. Használhatóság szempontjából nehéz dönteni a két eszköz között, mindkét felület erős dizájn- és kooperációs apparátussal rendelkezik. Nagyon hasonló funkciókat ajánlanak a felhasználóknak. Mindkét alkalmazás népszerű a UI tervezők körében, bár a Figma közel kétszerannyi felhasználóval rendelkezik, mint az Adobe XD.

Döntő fontosságú volt, hogy az új eszköz számos operációsrendszeren fusson. Az Adobe XD-nek van Mac- és Windowskompatibilis verziója, amíg a Figma a Mac, a Windows, a Linux és a Chrome OS operációsrendszereket is támogatja.

Végül a kompatibilitás kérdése lett a mérvadó. Biztosítanom kellett a meglévő projektjeink migrálását az eddig használt dizájneszközünkről, a Sketch-ről az új eszközre. A Sketch fájlok exportálhatóak Adobe XD-re, de sajnos ez fordítva nem igaz. Főleg ezért döntöttem a Figma mellett.

Hogy érzel azzal kapcsolatban, hogy a dizájneszközödet is lecseréled, nem csak a dizájnátadásra használt alkalmazást?

Nemrég olvastam valahol, hogy az általunk használt eszközök befolyásolják az általunk létrehozott munkát. Ezzel a gondolattal teljesen egyetértek. Számos tervező azért vált Sketch-ről Figmára, mert a Figma a teljes szoftvertermék-tervezési folyamat ellátására készült. A dizájneszköz és az átadásra használt eszközök közötti ugrálás gyakran azzal jár, hogy a dizájn elavul, mire a képernyőképeket és a dizájnelemeket exportálja az ember.

A Figmával nem csak akkor oszthatom meg a terveket a programozókkal, amikor az már majdnem kész. A dizájnt több részletben tudom átadni a programozókat, ami nagyban segíti az együttműködést és a hatékony implementációt.

Azért az elsődleges munkaeszközünk leváltása mindenképp okoz némi kellemetlenséget attól függetlenül, hogy mennyivel jobb az új eszköz. Ez egyszerűen csak szokás és izommemória kérdése.

Milyen funkciókat ajánl a Figma a programozóknak?

A termékfejlesztés kritikus része a dizájnerek és a fejlesztők közti kommunikáció, főleg az átadás során. A dizájnfolyamat során minden döntésem tudatos. De ugyanennyire fontos, hogy ezeket a jelentéssel bíró döntéseket át tudjam adni a fejlesztőcsapatnak, így azok megfelelően kivitelezhetők legyenek. A színek, stílusok, méretek és a viselkedések határozzák meg, hogy a felhasználó hogyan látja a dizájnt, hogyan érez azzal kapcsolatban, mennyire tartja használhatónak. Éppen ezért elengedhetetlen, hogy a UI/UX dizájnerek és a fejlesztők megértsék egymást.

Épp ezt segítik elő a dizájnspecifikációk, ami alapján a fejlesztők kivitelezik a terveket. A specifikációk vizualizációjának és összegyűjtésének lehetősége összeköti a prototípus és a fejlesztés közötti szakadékot. A dizájnátadást szolgáló eszközök lehetővé teszik a fejlesztők számára, hogy az egyes elemek tulajdonságait megnézzék és másolják. Vannak olyan alkalmazások, amelyeknél számos programozói nyelv közül választhat a felhasználó, míg mások a specifikációkat egyszerű kódként jelenítik meg. A Figma ilyen téren a CSS, az Android és az iOS mellett döntött.

Az „SVG kódként másolás” egy nagyon hasznos Figma-funkció a programozók számára. Jól működik ikonokkal és alakzatokkal, és a dizájnereknek nem kevés időt spórol meg.

Mennyire használható a Figma prezentációseszközként, a tervek bemutatására a csapatnak és az ügyfeleknek?

Ha egy kép többet ér ezer szónál, akkor egy prototípus többet ér ezer megbeszélésnél. Ez a legjobb módja a tervek bemutatásának, hiszen reprodukálja a felhasználók és a felület közötti feltételezett interakciót. A Figmának vannak saját prototípuskészítő funkciói, emellett pedig rengeteg prototípuskészítő és felhasználótesztelői eszközzel integrálható – például a Maze-zel, a ProtoPie-jal és a Useberryvel.

Amikor a csapatnak mutatom be a terveket, akkor a Figma megfigyelő módja igazán hasznos. Ha több ember is nézi éppen a dizájnfájlokat, akkor rá lehet kattintani az avatárjukra, és láthatóvá válik, mit csinálnak épp a szövegek átírásától az objektumokra kattintásig. Ez a funkció csodálatosan használható a tervek véleményezésére, a kollegák visszajelzéseihez és valós idejű felhasználói teszteléshez is.

Az ügyfelekkel való megbeszélésekkel kapcsolatban pedig a felhasználói élmény fontosságát emelném ki. Egy valós eszközön egy kézzelfogható prototípus felfedezése igazán meggyőző tud lenni egy applikáció vagy mobilfelület tervezésekor.

Milyen eddig a Figmára való átállás? Van esetleg tanácsod azon szakemberek számára, akik hasonló szituációban vannak?

Minél többet használom a Figmát, annál jobban szeretem. Annak, aki hasonló helyzetben van, azt javaslom, hogy ne sajnálja az időt az új eszköz megismerésére mielőtt élesben használja, és készüljön fel a váltásra.

Mi épp egy nagyobb lélegzetvételű projektre készülünk, így elhatároztam, hogy a projekt előtt vagy a tervezési folyamat közben váltani fogok. Arra jutottam, hogy ez a drótvázkészítés (wireframing) szakaszában a legkönnyebben kivitelezhető. Így a sok ismétlésen keresztül rögzült az alapeszközök használata, és fokozatosan egyre kényelmesebben használtam a Figmát. Amint a tanulási folyamat nehezén túl voltam, megbizonyosodtam arról, hogy valóban a Figma az az eszköz, amellyel hatékonyan tudunk együttműködni cégen belül és kívül egyaránt.

Megjegyzés: A cikkben számos brand- és terméknevet említünk, amelyek a jogos tulajdonosukhoz tartozó védjegyek vagy lajstromozott védjegyek. Minden, a cikkben használt brand- és terméknév csupán azonosítási célokat szolgál.

Lépjen velünk kapcsolatba!

Írja meg nekünk fejlődési és fejlesztési céljait! Mi pedig megbeszéljük Önnel, hogy hogyan érheti el ezeket.
Kapcsolat