UX design
,
Weboldal készítés

A drótváz készítés és a prototípus fontossága a weboldal készítés és a UX tervezési folyamatokban


A drótváz készítés egy kulcsfontosságú UX tervezési folyamat, ennek ellenére rengeteg projektet ismerek ahol kimaradt a tervezési fázisból.

A drótváz készítés és a prototípus fontossága a weboldal készítés és a UX tervezési folyamatokban
UX design
Weboldal készítés
Author: Bakos Szabolcs

Általában a megbízók nagy része nem tudta, hogy mi az a drótváz, vagy tudta, de nem látta az értelmét. Én drótváz készítés nélkül például nem vállalok projektet, csak nagyon kivételes esetben.

Mi az a drótváz?

A drótváz gyakorlatilag egy vázlat, mely segítségével tervezés alatt lévő weblapokat, webes alkalmazásokat, applikációkat viszonylag egyszerűen meg lehet jeleníteni. A drótváz készítés segítségével a designer vizuális formába tudja önteni a megbízóval egyeztetett felületi elképzeléseket anélkül, hogy komolyabb időt, energiát kéne bele tennie a grafikai tervezésbe.

A drótváz készítés előnyei

A drótváz megmutatja a tervezés alatt álló weblap, webes alkalmazás, vagy applikáció főbb szerkezeti felépítését, szekcióinak elrendezését, navigációját és a legfőbb tartalmi egységeit.

A drótváz készítés jó az ügyfélnek, mert vizuálisan látni fogja hogyan fognak felépülni a projekt (weblap, vagy applikáció) felületei. A designer-nek is hasznos, hiszen pontos rálátása lesz az ügyfél igényeire, vizuálisan tud tervezni, nem csak elméletben így nagyobb eséllyel ki tudja szűrni a használhatósági, UX tervezési problémákat a design fázis előtt.

A drótváz felületei nem interaktívak, viszont dedikált szoftverek segítségével interaktívvá, kattinthatóvá alakíthatóak, viszont ebben az esetben már nem drótvázról, hanem prototípusról beszélünk.

Drótváz készítés

A drótváz készítés fajtái

A drótvázakat papíron rajzolják vagy digitálisan (Axure, Visio, Omnigraffle, Sketch). Hogy mikor melyik metódus a jobb, ez az igényektől és a drótváz típusától függ. Van aki még mindig a papírhoz, cetlikhez ragaszkodik, én a digitális megoldások favorizálom. A drótvázak az ergonómiai tervezés részét képezik, általában egy vagy két színnel készülnek, mivel itt nem a design a lényeg. Itt azt teszteljük hogyan működnek a felületek, a funkciók és az elképzelések, ötletek.

Nézzük a három legalapvetőbb drótváz készítési metódust:

Gyorsvázlatok, papír skiccek

A gyorsvázlatokra általában akkor van szükség, ha egy ötletet, vagy folyamatot szeretnénk gyorsan validálni, ellenőrizni. Erre a legjobb megoldást a papír skiccek, papír vázlatok jelentik. A kivitelezésük nem emészt fel sok időt és viszonylag gyorsan lehet ellenőrizni egy ötletet a segítségükkel. A gyorsvázlatok, skiccek, primitív rajzok, tehát itt nem vonalzóval rajzolt precíz dolgokat kell elképzelni.

Gyorsvázlat, drótváz készítés

Alacsony kidolgozottságú (low-fidelity) drótvázak

Talán a legnépszerűbb drótváz készítés formáról beszélünk. Az alacsony kidolgozottságú drótvázak készülhetnek papíron vagy digitális formában is. Ahogy a nevük is mutatja, itt sem a design-on van a hangsúly, hanem a funkciók és az elemek megrajzolásán. Az alacsony kidolgozottságú drótvázak akár Wordben is készülhetnek (láttam már ilyet), a lényeg, hogy a felületek kulcsfontosságú elemei felismerhetőek legyenek egy laikus számára is (például egy weblapnál a fejléc, lábléc, navigáció, tartalmi elemek, stb.).

Alacsony kidolgozottságú (low-fidelity) drótvázak

Magas kidolgozottságú (high-fidelity) drótvázak

Míg az előző két típusú drótvázat szinte bárki létre tudja hozni, a magas kidolgozottságú drótvázakhoz, már szükség van egy designer-re. A magas kidolgozottságú (high-fidelity) drótvázak elkészítése komoly tudást igényel. Itt gyakorlatilag jobb esetben már kiszínezetlen méretarányos design tervek készülnek, melyek még megadják a lehetőségét a költséghatékony variálásnak. Itt már jelen van a tipográfia, a pontos eltartások és szélsőséges esetekben akár még képi elemek is megjelenhetnek a drótvázakon. A magas kidolgozottságú (high-fidelity) drótvázak jóváhagyása után gyakorlatilag a design fázis kezdődik, ahol a designer kiszínezi a drótvázakat.

Magas kidolgozottságú (high-fidelity) drótvázak

Interaktív prototípusok

Interaktív prototípus gyakorlatilag bármelyik drótváz típusból létrehozható, egyszerűen csak a felületeiket, interaktívvá, kattinthatóvá kell tenni. Erre az egyik legjobb online applikáció az Invision. Az interaktív prototípusok nagyon hasznosak a tesztelés során. Ha magas kidolgozottságú drótvázakat alakítunk interaktív prototípussá, akkor gyakorlatilag egy lekódolt weblaphoz, vagy applikációhoz hasonló élményt fogunk kapni. Ez egy hatalmas előny, hiszen a weboldal, vagy applikáció fejlesztési költsége nélkül van lehetőség a felületek tesztelésére.

Drótváz készítés

A rosszul megtervezett drótváz elviheti a projektet teljesen rossz irányba is. A designer összezavarodik, nem tudja kivitelezni a kért tervet, az ügyfél ideges lesz. Nagyon fontos, hogy a drótvázakat mindig leinformált szakember készítse, olyan aki már rendelkezik leinformálható referenciákkal. Sokan nevezik magukat UX szakértőknek a piacon. (gyakorlatilag mindenki), úgy, hogy közük nincs a témához.

Összességében tehát, ha weblapot, applikációt, vagy webes alkalmazást terveztetsz, ne sajnáld a pénzt a drótváz készítésre, a tervezési fázisra, mert ha a fejlesztési szakaszban jönnek elő funkcionalitási problémák sokkal többet fogsz fizetni a módosítások javításra.


Bakos Szabolcs, UI/UX Designer

A bejegyzés szerzője

Bakos Szabolcsnak hívnak, szabadúszó UI/UX Designer vagyok, több mint 17 év tapasztalattal a hátam mögött, cégek és vállalatok számára tervezek, auditálok weblapokat, webáruházakat és webes alkalmazásokat.



További bejegyzések


Dolgozzunk együtt!

Amennyiben kérdésed van, legyen az egyszerű információkérés, együttműködés, vagy üzleti megkeresés, örömmel állok a rendelkezésedre.

Elolvastam és megértettem az Adatvédelmi és szerzői jogi nyilatkozatot
UI/UX Design
Kapcsolat Facebook Twitter Linkedin
Webdesign