még a ux-ről

FElla kérdezett valamit a szakmámmal kapcsolatban, én meg szívesen mesélek róla, pláne ha valaki még érdeklődik is. És tényleg csak sok-sok duma lesz erről a területről, úgyhogy akinek uncsi, az lapozzon. Azt kérdezte, hogy humán(abb) beállítottságú emberként ez az IT terület nem nagyon más? Vagy ez amit te csinálsz inkább humán, szóval a végén nem te írod meg a programot, hogy milyenek is legyenek azok a színek meg a legördülő menü a honlapon?

Merthogy én eredetileg valóban humán területen végeztem, de azért nem vagyok szélsőségesen humán beállítottságú. A programozáshoz nem értek, az igaz. Azonkívül hogy két éve nyáron elvégeztem valami Java alapkurzust, nem is tanultam programozást és nem is hiszem, hogy nekem menne. Viszont a számítógép mindig is része volt az életemnek és amatőr szinten elég jól használom – szóval semmi bonyit nem tudok, de az alapvető dolgokkal ügyesen elboldogulok. Gimiben az infó órán még olyan "komoly" dolgokat tanultunk például, hogy Word dokumentumok formázása. Én ezt kifejezetten szerettem, és minden dokumentumot szerettem "szabályosan" és esztétikusan megformázni, szóval nem csak nyomni 6 entert meg 86 szóközt, hanem bekezdések előtte, utána, behúzás, tabulálás, sorköz, betűméret, betűtípusok, minden ahogy kell. Hát ki gondolta, hogy egyszer ez a pepecselés lesz a munkám.

A válasz a kérdésedre, FElla, hogy nem kell szerencsére semmilyen programot írnom. Semmi bonyolultat vagy számomra unalmasat nem kell csinálni, ellenben pont a (számomra) izgi részeket én találhatom ki. Van egy szupidupi online programunk, a Figma, ami mondjuk azt csúnyán, hogy olyan mint egy nagyon továbbfejlesztett Word és egy nagyon továbbfejlesztett Paint kombinációja. Ebben rajzolunk és készítünk el minden dizájnt (van más ilyen program is, például az Adobe XD, de errefelé amennyire én látom mindenki a Figmában dolgozik). 

Ez a program olyan, hogy van egy nagy üres vásznunk, és rajzolhatunk, írhatunk rá, kiszínezhetjük, képeket, ikonokat tölthetünk fel, de ezenkívül még animációkat is hozzáadhatunk. Tulajdonképpen vizuálisan egy az egyben létre lehet benne hozni honlapokat, alkalmazásokat. Kattintható prototípusokat, amik úgy működnek, mintha valójában kész lenne már az alkalmazás és okos, ügyes, hozzáértő programozók megírták volna nekünk.

Így néz ki a Figma. Középen van a munkaterület és a fekete kép egy kis sulis gyakorlás volt, amit egyszer még régebben elkezdtem. Felül mindenféle eszközök választhatók ki, például hogy szöveget akarunk beírni vagy mondjuk formákat rajzolni. Bal oldalt a dizájn összes alkotóeleme látható. Mivel ez a keret, frame amit készítettem nem sok részből áll, ezért nem sok minden látható a bal oldalon. Van egy gomb, a gombnak van egy szövege, illetve még két szöveg van elhelyezve. Jobb oldalt pedig többek között a színeket, betűtípusokat lehet állítani.

Mikor az ember gyakorlásnak használja a Figmát, akkor az még üres, de egy céghez bekerülve hatalmas adatbázis vár minket rengeteg meglévő dizájnnal. Vegyük a Spotifyt példának. Van desktop alkalmazása, mobilalkalmazása, többféle weboldala (külön a felhasználói fióknak, külön a közösségnek, külön support stb). Az egésznek van egy dizájnrendszere, szóval hogy milyen betűtípusokat, betűméreteket, színeket, elrendezéseket stb. használnak. A Figmában úgynevezett komponenseket is lehet építeni, amik kész elemek lesznek. Tehát nem kell folyton mindent a nulláról elkészíteni, hanem rengeteg kész elem, komponens található a könyvtárban. Ilyenek például a gombok, a betűtípusok, a logók, az ikonok, a menük, fejlécek stb. Minden ami ismétlődő. Ezeket csak kikeresem a könyvtárból, behúzom a dizájnba, átírom a szövegeket, esetleg állítok a méreten, de amúgy sok teendő már nincs vele.

Szóval rengeteg minden adott. Rengeteg-rengeteg fájlból áll a rendszer. Képzeljük el, hogy egy olyan szolgáltatásnak, mint a Spotify, hányféle oldala, funkciója és felülete van. Ezek rendezve vannak a legnagyobb kategóriáktól kezdve egészen egy végső apró elemig, ami akár csak ennyi, mint például a jelszó megváltoztatása: 

(Bocsi, nem sikerült átállítanom svédről.) Van például ez a nagyon egyszerű oldal, a jelszó megváltoztatása. Kaphatnám feladatnak azt, hogy ezt tegyem felhasználóbarátabbá. Például hozzá lehetne adni egy Jelszó mutatása funkciót, hogy az ember ne gépelje félre a jelszavát, aztán írja be az újat és annak ismétlését, kattintson a gombra, hogy aztán végül kapjon egy hibaüzenetet, hogy a megadott jelszó hibás. Ezenkívül az új jelszónál oda kellene írni, hogy milyen jelszót fogad el a program (hány karakter, kell-e kis- és nagybetű, speciális karakter stb). Ismét csak azért, mert nagyon bosszantó tud lenni az, hogy az ember begépel három adag jelszót, rákattint a gombra, és bumm hiba, és lehet mindent elölről kezdeni. A mi dolgunk az ilyen legapróbb dolgoknak is a kényelmessé, gyorssá tétele. 

Ilyenekből áll a Figmában a munka, hogy kapunk egy ilyen jellegű feladatot és alkotni kell rá valamit. Általában összeírunk ötleteket és aztán készítünk 2-3 javaslatot, hogy aki a végső döntést hozza, tudjon válogatni közülük. Vagy mondjuk elindulunk egy úton, megmutatjuk valakinek, és lehet hogy egyből tud rá valamit mondani, hogy miért nem jó, vagy melyik részben van logikai hiba, amire esetleg nem gondoltunk. Utána a programozók felhasználják ezeket a dizájnokat a kód megírásához. Látják vizuálisan, hogy hogy kell majd kinéznie. Szóval nekem nem kell programoznom, de azért jó ha nagyjából van egy elképzelésem arról, hogy mit bonyolultabb/egyszerűbb elkészíteni, meg úgy általában hogy értsük egymás nyelvét.

A LinkedInen is szoktam ilyen posztokat látni, amikor egy témára két megoldási javaslatot tesznek fel és lehet szavazni, érvelni hogy melyik a jobb. Például itt az egyiknél legördülő menüben érhetők el a színek, a másik megoldásnál az összes szín egyből látható.

Ennél a példánál meg pont adatok beírása van. Az első megoldás minimalistább, a második szájbarágósabb. Sokszor nincs jó vagy rossz megoldás, csak preferencia kérdése. Szóval ilyeneken kell agyalni, érvelni, próbálgatni opciókat stb.

Ezek főleg a UI részek voltak, szóval a felhasználói felület megtervezése. De ezekből a példákból is látszik hogy mindig összefügg a kinézet és a felhasználói élmény. Mert az például nem csak ízlés kérdése, hogy kipakoljam-e a termék alá az összes színmintát. A felhasználónak mi a jobb? Hogy azonnal látja, vagy ha rá kell kattintania a legördülő menüre? A UI és a UX közötti különbség és kapcsolat bemutatására népszerű ez az illusztráció:

A mi feladatunk az is, hogy rájöjjünk hogy egyáltalán mi okoz bosszúságot a felhasználónak. Mert ők sokszor nem tudják maguktól elmondani. Gyakran az ember észre sem veszi, ha valami bosszúságot okoz, mert úgy hozzá vagyunk szokva, főleg a digitális felületeken. Mondok egy példát, ami az interjúimban előfordult. A felhasználó azt mondja nekem, hogy minden gyorsan és zökkenőmentesen ment, semmi probléma nem volt. De mikor megkérem, hogy mondja el, hogyan szokta megtalálni ezt vagy azt, akkor leír nekem egy hosszú és bonyolult procedúrát. Hát megnyitom az alkalmazást, bejelentkezek, ott megkeresem azt a menüt, abban rákattintok arra és akkor ott kijön ez és onnan odamegyek stb. Lehet, hogy ő ezt gördülékenynek gondolja, de nekünk nyilván nem az, és akkor lehet gondolkozni hogy mit lehet annak érdekében tenni, hogy ne 8 kattintásból találjon meg valamit, hanem kettőből.

Ennek kiderítése érdekében lehet akár felhasználói teszteket végezni, de vannak olyan programok is, amik ebben segítenek. Például lehet olyat, hogy bizonyos munkameneteket rögzítünk egy programmal, és ezeket végignézve meg lehet állapítani, hogy hol veszít időt a felhasználó, mi okoz neki nehézséget. Ha például össze-vissza kattintgat, keres valamit, elölről kell kezdenie valamit stb. Ha megvannak ezek, utána ki lehet találni hogy hogyan lehet jobbá tenni az adott lépéseket. 

Apróságnak tűnhetnek mindezek, de ha olyan oldalakról van szó, ahol a honlap nem csak másodlagos, hanem az generálja a bevételt, például egy webshop vagy egy alkalmazás, akkor sok bevételtől lehet elesni a rossz vagy bosszantó dizájn következtében is. 

Na ez ilyen írtam ami eszembe jutott poszt lett, de hát annyi mindent lehetne írni, hogy nehéz máshogy.