Wireframe tervezés kezdő UX dizájnereknek

A drótváz készítés alapjait könnyen el lehet sajítátatni és még művészeti előképzettség sem szükséges hozzá.

Egy egyszerű trükk, amivel gyorsan elsajátíthatod a drótvázak készítésének alapjait.

❗

Disclaimer: A karrierváltás minitanfolyamhoz hasonlóan ezt a gyorstalpalót is abban a szemléletben állítottam össze, hogy nekem, amikor kezdő UX dizájner voltam milyen tanácsokra lett volna a legnagyobb szükségem, hogy gyorsan és hatékonyabban el tudjam végezni a rám bízott feladatokat. Ezért ebben a sorozatban ahol csak lehet, kerülöm a bonyolult szakzsargon használatát és mindent olyan a sorrendben állítottam össze, ahogyan arra egy kezdőnek a leginkább szüksége lehet.

Az első mumus egy kezdő UX designer számára: a wireframe

Többször tapasztaltam már azt, hogy a drótvázak készítéstől féltek a leginkább a pályakezdők. Főleg azok, akik utoljára talán általános iskolában rajzoltak le valamit vagy eddig még nem nyitottak meg egyetlen egy (komolyabb) tervező alkalmazást sem. Természetesen érthető, hogy bármiféle művészeti előképzettség nélkül a drótváz tervezés tűnhet a legnagyobb kihívást jelentő feladatnak, pedig valójában ezt lehet a legegyszerűbben elsajátítani, amit itt be is fogok bizonyítani.

A drótvázak típusai

Az egyszerű és a bonyolult közt csak annyi a különbség, hogy az egyiket már értjük, a másikat még nem.

Vagyis ha meg akarsz érteni valamit, előbb fel kell tárnod a szabályait. A drótvázak tervezésében ez annyit jelent, hogy ha érted, könnyen reprodukálni is tudod. Az első ilyen szabály amit érdemes megtanulnod: nem kell minden drótváznak pixel pontosnak és kidolgozottnak lennie. Megkülönböztetünk ún. low-fidelity és high-fidelity, vagyis alacsony és magas részletgazdagságú drótváz terveket.

🎓

Egy másik módszertan szerint a fordított elnevezést is használják. High-level és low-level. Ez esetben a magas azt jelenti, hogy csak nagy vonalakban vázoljuk fel a funkciókat, az alacsony pedig azt, hogy a teljes mélységében kidolgozzuk azokat. Ki melyik elnevezést preferálja. Különösebb szabály nincs a használatukra, csak arra jók, hogy összezavarják az embert, de azért nem árt ismerni őket.

Az alacsony részletgazdagságú (felbontású) drótvázaknak nem kell tökéletesnek lenniük, még csak aprólékos kidolgozást sem igényelnek, viszont kritikus szerepet játszanak a tervezési folyamatban. Általuk vizuálisan lehet gondolkozni egy-egy adott problémáról, mint pl. milyen legyen az oldal struktúrája, hova kerüljenek a főbb funkciók, (arányaikban) mekkora helyet foglaljanak el ezek a funkciók a képernyőn, milyen UI komponenseket használjunk, milyen utat járjanak be a felhasználók, stb. Az alacsony részletgazdagságú drótváz elnagyoltan mutatja be az alkalmazást vagy weboldalt és sokat segít a megértésben.

A magas részletgazdagságú drótvázon viszont már sokkal több a tartalom. Arra általában felkerülnek helykitöltő, vagy jobb esetben valós adatok, követi a megfelelő képernyő felbontásokat, és a lehető legjobban igazodik az arányokhoz, méretekhez is. Mivel az elkészítése időigényesebb, mint a low-fidelity drótváznak, mindig érdemes előbb azzal kezdeni, hogy a tervezés ezen fázisában már kevesebb időt töltsünk a különféle ötletek, variánsok kipróbálásával és arra tudjunk koncentrálni, hogy minden szükséges képernyőterv és a hozzájuk tartozó állapotok elkészüljenek. A low-fi egyszerűen gyorsabb és olcsóbb ha a rossz ötletek kizárásáról van szó, míg a hi-fi arra való, hogy kidolgozzuk a teljes weboldalt vagy alkalmazást anélkül, hogy feleslegesen pazarolnánk időt arra, hogy megpróbáljuk széppé is varázsolni.

Ezt követi a UI mockup amiről a sorozat későbbi részében lesz majd részletesen is szó. (A szószedetben egy rövid leírást olvashatsz róla.)

A tervezés folyamata az alacsony részletgazdagságú drótváztervtől egészen a UI mockup tervig.

Miért tervezünk alacsony felbontású drótvázakat?

Sajnálattal látom, hogy a UX, vagyis ma már divatosabb nevén (Digital) Product Design egyre jobban eltávolodik a drótvázak tervezéstől és minden a UI dizájnról, de még inkább az erre használt szoftverekről kezd szólni. Pedig a drótváz kihagyhatatlan eleme a UX tervezésnek. Hogy miért? Mert a drótváz készítés valódi lényege nem a felhasználói felület megtervezése, hanem különféle tervezési problémák feltárása és megoldása úgy, hogy közben ötleteket próbálunk ki és vetünk el. Ne feledd, az alkalmazás, weboldal végül nem a drótváz vizuális megjelenését örökli majd, hanem azt a rendszert amit megteremt.

UI-ból egy végsőt készítünk amit aztán le is fejlesztenek. Drótvázból annyi variánst, amennyi jól esik.

Ha egyből a UI-nak állsz neki, elveszíted ezt az előnyt, és azon kívül, hogy hibázol, frusztráltá is válsz, ott fog a fejedben motoszkálni a gondolat, hogy "nem elég jó" amit csináltál, biztosan maradt benne valamilyen hiba mert nem tudtad alaposan körüljárni a problémát. Még ha van is egy jól összerakott UI kit-ed, vagy netán egy működő design system-ed, akkor sem célszerű rögtön nekiállni össze legózni azokból a komponensekből a kezelőfelületet. Ha van egy bonyolult feladatod és úgy állsz neki a kezelőfelület megtervezésének, hogy még nem is érted a problémát, akkor valójában milyen UX-et is tervezel? Ha még te sem érted teljesen mitől fog működni, akkor miként lesz könnyen kezelhető a végfelhasználó számára?

Saját példám: Mivel gyermekkoromban építészmérnök szerettem volna lenni, ezért számomra magától értetődő volt, hogy az informatika világában is előbb alaposan meg kell tervezni amit meg akarunk valósítani. Nagyjából 12-13 éves korom óta előbb lerajzolom a weboldalaimat, alkalmazásaimat és aztán nyúlok csak bármiféle szoftverhez, hogy ki is dolgozzam a terveket. Ez a felfogás adta annak az alapját aminek segítségével én magam is gyorsan és könnyedén meg tudtam tanulni a drótvázak tervezésének alapjait.

Másolj!

Igen, jól olvasod. A legjobb és leggyorsabb módja annak, hogy megtanuljunk drótvázakat tervezni az az, hogy ha valamilyen egyszerű módszerrel lemásoljuk egy létező alkalmazás kezelőfelületét. Legyen az papír és ceruza, egy iPad, vagy akár a FigJam alkalmazás, nagy vonalakban másold le a kezelőfelületet és hozd létre újra úgy, ahogyan azt te megérted. Nem kell tökéletesnek vagy szépnek lennie. Nem a portfóliódba fog bekerülni és nem is kell ezzel menőznöd a közösségi médiában. A kezed hozzá fog idővel szokni a különféle formák rajzolásához. Formák, mint pl. beviteli mezők, gombok stb. De ami a legfontosabb:

Azért rajzolunk, hogy megértsünk.

Azért rajzolunk, hogy legyenek kérdéseink. Azért rajzolunk, hogy kipróbáljunk ötleteket, elvessük közülük a rosszakat és csak a jókat tartsuk meg. Egyszóval rajzolni gyors, olcsó és hatékony módja annak, hogy megtaláljuk azt a végső állapotot amire szükségünk van, vagyis, hogy közelebb kerüljünk a megoldáshoz. Ezért ha a pályád elején sokat másolsz, a projektjeid során sokkal gyorsabban fogsz tudni olyan terveket rajzolni, melyekből már ki fogsz tudni dolgozni részletgazdag változatokat is.

Ötletelj!

UX dizájnerként elég hamar rá fogsz ébredni arra, hogy ami elméletben (elvileg) működik, az a gyakorlatba ültetve könnyen elbukhat. Ha lerajzolod az ötleted és ezt a drótvázat ütközteted a hipotézisekkel, a kontextussal, kiderítheted, hogy működik-e vagy sem. Ha találsz akár egy apró okot is arra, hogy elvesd az ötletet, nyugodtan megteheted, hisz egy egyszerű rajzon kívül semmi másod nincs még. Próbáld meg ugyan ezt már miután lefejlesztették! De még a kész UI-t is nehezebben engeded el ha találtál benne egy kis logikai hibát, mint egy egyszerű drótvázat. Szóval drótvázakat tervezni egyben felszabadító is, hisz megszabadulsz mindenféle kötöttségtől és csak arra kell koncentrálnod, hogy megtaláld a megfelelő megoldást amit aztán részletesen is kidolgozhatsz.

Saját példám: még a pályám elején volt egy projektem amit úgy kellett átvennem, hogy az ügyfél már az első megbeszélésünkkor is tajtékzott, mert az előző dizájner akit megbíztak a feladattal, állítása szerint mindent elrontott, mindent félreértett, és ezzel értékes időt és pénzt veszítettek. Bevittem őket abba a szobánkba melynek a falai a padlótól a plafonig le voltak fóliázva, hogy mi dizájnerek fel tudjuk rajzolni rájuk a drótvázainkat amikor közösen ötletelünk. A meetingek közben mindig gondosan kiraktam eléjük néhány filctollat és hagytam a falon elég üres helyet is. Nem rohanhattam le őket azonnal a UX szókinccsemmel, nem akartam eladni nekik a UX-et, hisz nem a UX-ért voltak ott, hanem az eredményért. Azt szerettem volna, hogy megértsék, valójában hol is lett elkövetve a hiba és miként lehet ebből a helyzetből kilábalni. De ehhez meg kellett várnom, hogy előbb lehiggadjanak és a panaszkodáson kívül végre érdemi munkára is sor kerülhessen. A harmadik megbeszélésünkkor miközben kérdéseket tettem fel, az egyikük felállt az asztaltól és elkezdte felrajzolni a falra az ötletet ami a fejében volt, hogy megmutassa nekem mire is gondolt. Egyszerűen megpróbálta lemásolni azt amit maga körül látott. Nem kellett hozzá sok idő, hogy a homlokára csapjon és megvilágosdjon, nem az előző dizájner rontotta el, hanem ők írták le rosszul a specifikációt amit aztán ő kérdés nélkül elkezdett megvalósítani. Szóval ami fejben még jónak tűnik, sok esetben elbukja a valóság próbáját.

Rajzolj annyit amennyit csak szükséges!

Én, így több, mint egy évtized szakmai tapasztalattal a hátam mögött is van, hogy pl. egy tucat tervem mellé rakom fel a piros X-et (ezzel jelölöm, hogy elvetve) mielőtt megtalálom azt, amivel elégedett vagyok. Ha lehet, odaírom mellé azt is, hogy mi volt a probléma, vagy csak annyit, hogy milyen ötletet akartam kipróbálni. Így iterálva az ötleten jutok el addig a leglogikusabb megoldásig amibe már nem tudok az aktuális ismereteim birtokában belekötni és amit végül kidolgozhatok abban a szoftverben amit a projekthez választottunk.

Nagyon fontos az "aktuális ismereteim birtokában" kitétel, ugyanis megesik, hogy bizonyos információ még nem áll a rendelkezésünkre, így csak azt tudjuk figyelembe venni amiről tudomásunk van.

Low-fidelity drótváz egy elvetett ötletről.

Saját példám: Azoknak akik ma kezdenek ismerkedni a dróvtázak tervezésével, könnyű dolguk van, hisz rengeteg kiváló alkalmazás áll a rendelkezésükre. Amikor még én voltam kezdő, megesett, hogy Excel táblázatban kellett terveznünk (igen, a cellák kiválóan alakíthatóak és még a responsive design is prezentálható egy táblázatban), vagy épp az Apple Keynote-ban, amihez különféle UI kit-eket, sablonokat lehetett vásárolni, hogy egy kicsit gyorsítsunk a folyamaton. Még kattintható prototípusokat is lehetett benne készíteni. De ezek is tökéletesen megfeleltek annak a célnak, hogy olcsón és gyorsan bukjunk el és csak azt véglegesítsük ami működni is fog. Ismert sztori az is, hogy Steve Jobs az App Store első verzióját úgy fogadta el, hogy egyszerű fehér papírlapokra post-it cetliket ragasztottak amelykre ráírták, hogy a képernyőn ott mi fog majd lenni. Szóval nem a választott szoftver a lényeg, hanem az, hogy rajzolj, gondolkodj, vagyis szó szerint tervezz és ne csak gyárts!

A mai napig amikor azt a feladatot kapom, hogy tervezzek új funkciókat, képernyőterveket egy már meglévő alkalmazáshoz, vagy épp tervezzem át, javítsak rajta, az egyik első dolog aminek nekiállok az az, hogy a teljes létező kezelőfelületet lerajzolom. Ez az én saját térképem ami segítségével fel tudom fedezni az alkalmazást. Ezzel kezdem a megértését. A pályám eleje óta alkalmazom ezt a technikát, mert annyira kézenfekvő, egyszerű és minimális időt vesz igénybe ahhoz képest, hogy milyen eredménnyel jár.

Egyszerű drótváz a Paper alkalmazásban megrajzolva. (iPad)

A rajzolás gondolkodásra késztet.

Miért jó, hogy egyszerűen lemásolok valamit ami már készen van ahelyett, hogy egyből nekiállnék kiegészíteni? Mert közben rengeteg új kérdésem lesz. Jobban megértem, hogy az elődöm mit miért csinálhatott, hol vétett el hibákat, hol lehetne esetleg apróbb módosításokkal javítani a felhasználói élményen.

Mivel az esetek többségében nem tudunk beszélni azzal aki az eredeti verziót készítette, így nincs is nagyon más lehetőségünk, mint az, hogy a munkafolyamatát, gondolkodásmódját próbáljuk megérteni. Ugyanez igaz akkor is, hogyha nincs már meg a specifikáció vagy épp soha nem is létezett. Vissza kell fejtened az alapokig az egészet, hogy mentális térképet készíthessünk róla.

A másolás segít megfogalmazni a megfelelő kérdéseket.

Ha netán te is hasonló feladatot kapnál, ajánlom, hogy még mielőtt bármi újat is terveznél, készíts egy egyszerű drótváz-másolatot a teljes alkalmazásról. Látni fogod, hogy hogyan oldották meg az egyes problémákat, milyen az oldal struktúrája, stb. Közben írd mellé a gondolataidat is:

Hol találtál hibát.
Hol fedeztél fel lehetőséget a javításra.
Miért lehetett úgy megvalósítva ahogyan.
Mi az amit nem értesz, amire nem jöttél rá, hogy mit jelent.
Stb.

Ha már legközelebb ezekkel a témákkal és kérdésekkel állsz az ügyfél, partner elé, sokkal felkészültebbnek fog tartani és könnyebben találjátok meg a közös hangot is.

Low-fidelity wireframe jegyzetekkel, kérdésekkel.

Csak ismételni tudom magam:

a drótváz készítés nem a sikerről szól, hanem arról, hogy olcsón és gyorsan bukjunk el,

hogy aminek a megvalósítására végül sok időt és pénzt áldozunk majd, az valóban elérje a célját.

Összefoglaló:

Amikor még pályakezdő UX designer vagy, a legjobb módja annak, hogy megtanulj drótvázakat rajzolni az nem más, mint az, hogy elkezdesz lemásolni más alkalmazásokat.

🔍 Megtanulod, hogy hol és milyen UI komponenseket alkalmaznak, melyik mikor működik jól vagy épp milyen helyzetben rosszul.
💻 Jobban fogod érteni, hogy hogyan működnek az alkalmazások, mely design megoldásokat hol lehet jól alkalmazni.
💡 Megtanulsz kérdéseket feltenni, a megfelelő hipotéziseket felállítani.
🧠 Szó szerint átdrótozza az agyad, hogy úgy gondolkozz, mint egy UX dizájner.
🗣️ Szokásoddá válik az, hogy vizuálisan ötletelj és olyan kérdéseket tegyél fel amelyek mellé példát is tudsz csatolni, hogy mások is megértsék mire is gondolsz pontosan.
⚙️ És nem utolsó sorban, elkezdesz rendszerben gondolkozni.

Példák, hogy miért érdemes másolni:

Mobil app: ha van rá lehetőséged, másold le ugyanazon alkalmazás iOS és Android verzióját is. Gyorsan megismered a két platform közti különbségeket, megérted, hogy kis képernyőre való tervezéskor mire kell odafigyelni, hol vannak eltérések és hasonlóságok és mik okozhatják ezeket. Ezen felül megfigyelhető, hogyan vannak elrendezve az elemek, hogyan működnek az interakciók, hogyan oldották meg a képernyők, funkciók közti navigációt, az egyes képernyők mennyi funkciót, adatot tartalmaznak, stb.

Egy webáruház esetében a másolás technikáját pl. arra lehet használni, hogy megértsük, hogyan lehet a termékeket és szolgáltatásokat hatékonyabban bemutatni. A weboldalon található képernyőket lemásolva megfigyelheted, hogy milyen UI komponenseket használnak a termékek és szolgáltatások bemutatására, hogyan vannak elrendezve ezek a komponensek, mi történik ha rájuk kattintunk, stb.

Gyakorló feladat:

Keress egy tetszőleges weboldalt, alkalmazást (vagy akár annak egy jól elkülöníthető funkcióját ami több képernyőből áll) és képernyőről-képernyőre, funkcióról-funkcióra haladva rajzold át a kezelőfelületét. Kattints végig minden funkciót, nyiss ki minden menüt és rajzold le az összes állapotot amit csak találsz. Bármi ami eszedbe jut, írd mellé vagy jegyezd fel. Az, hogy rendezett is legyen még nem fontos, és persze szépnek sem kell lennie. Csak rajzold le amit látsz, írd le amit fontosnak gondolsz és közben gyűjts olyan kérdéseket amiket mindenképpen feltennél ha neked kellene újratervezned a teljes alkalmazást. Gondold át alaposan azt a rendszert amit feltártál. Mi az amit értesz és mi az amit nem értesz belőle. Ha találsz valamit amit nem értesz, szakmai fórumokon, csoportokban vagy a mentorodtól kérj segítséget, hogy magyarázzák el neked.

Szószedet

Design System

A Design System egy olyan eszközkészlet, amely a felhasználói felületi elemeken kívül, szabványokat, útmutatásokat és egyéb segédanyagokat is tartalmaz.

UI kit

A UI kit egy olyan komponenskészlet amely felhasználói felületi elemeket, például ikonokat, gombok, szövegstílusokat, színeket és elrendezéseket tartalmaz. A UI kitek általában egy adott platformra vannak szabva és segíthetnek a tervezőknek gyorsabban és hatékonyabban létrehozni vonzó és használható felhasználói felületeket.

UI mockup

A UI mockup terv egyfajta vizuális vázlat a weboldal vagy alkalmazás tervezésekor. Segít elképzelni, hogyan fog kinézni a felhasználói felület, milyen lesz a végeredmény, mielőtt belekezdenének a valódi fejlesztésbe.

Responsive design

Responsive design egy webtervezési technika, amely alkalmazkodik a különböző eszközök képernyőméreteihez, például okostelefonokhoz, táblagépekhez és asztali számítógépekhez. Ezáltal a weboldal egyszerre biztosítja az optimális felhasználói élményt minden eszközön.