Drótváz vagy szöveg?

A webes fejlesztésben végre hazánkban is eljutottak cégek (távolról sem mind) arra a szintre, hogy a fejlesztés egyes szakaszaiban drótvázakat (mockup, wireframe) készítsenek. A drótváz fogalmát természetesen értelmezhetjük nagyon tágan, akár minden firkát tekinthetünk annak, amit valami vezetőszerűség vagy marketinges készített, de csak az igazi drótváz alkalmas arra, hogy a designernek és a programozónak egyaránt útmutatóul szolgáljon. Ha ezt a szerepet betölti, akkor lényegtelen, hogy kézzel rajzoltuk, drótvázkészítő programmal (pl. Axure, Omnigraffle, Balsamiq stb.) vagy akár kedvenc programunkkal (pl. Photoshop, Illustrator, Keynote vagy akár Excel!) készítettünk ilyet. Szintén nem a leglényegesebb az, hogy ez Móricka rajz-szerű, mérnöki terv, vagy designközeli színes-szagos layout.
Ennél sokkal fontosabb, hogy tudjuk, miért készítjük a drótvázakat, és mikor használjuk fel őket. A drótvázak ugyanis annak illúzióját kelthetik, hogy készen vagyunk, mindent elmondtunk egy oldalról, amit kell, innentől megy minden magától. Sőt sokkal többet értünk el, mint amikor korábban homályosan leírtuk, hogy mire hogyan van szükség, hisz azok könnyedén félreértelmezhetőek voltak, míg egy jól megrajzolt drótváz magáért beszél. Minden egyértelmű rajta. A designer tudja, hogy milyen menüt hova rakjon, hol van a gomb, hol van a szöveg. A programozó a design alapján pedig könnyedén összerakja a dolgokat.
Az ilyen gondolkozással abban hibázunk már az elején, hogy a weblap tervezés nem arról szól, hogy képeket rajzolgatunk, aztán azokat valahogy összekötögetjük és ettől az egész jól fog működni. Elsőként a folyamatokból kell kiindulnunk, amelyeket végrehajthatnak a felhasználók, és ezen folyamatok egyes állomásainak környezetét kell megterveznünk, megalkotnunk. Ha ezek nem tiszták a tervező fejében, akkor oldalunk működése döcögős, esetleges lesz. A gördülékeny folyamat természetesen önmagában még nem hoz tökéletes felhasználói élményt, de legalább azt biztosítjuk, hogy az egyes lépések értelmesen, a felhasználó számára befogadható módon kapcsolódnak össze.
A drótvázak mellett így szükséges folyamatábrákat is készítenünk, de ez még mindig nem elég. A leírásokhoz kell visszalépnünk. A programozó és a designer számára el kell magyaráznunk, hogy miképp működik az oldal, hogyan lépnek interakcióba az egyes drótvázak. Természetesen készíthetünk dinamikus drótvázakat is, de ha minden működését egyértelművé akarunk tenni, akkor lényegében meg is csináltuk a weboldalt (=rengeteg munkaóránkba kerül), azonban ez csak demó változatban működik. A programozó létrehozhatja újra. Másrészt számos olyan megoldásra szükségünk lehet, amelyeket  még a legprofibb tervező programokkal sem tudunk előállítani.
Egy igazán jó minőségű leírásnak az összes olyan helyzetet le kell fednie, ami a drótvázon változhat a felhasználóval való interakció során. Mindent le kell írnunk a legapróbb részletekig. Hogyan működnek a gombok, a tabok, a szűrések, hol jelennek meg a hibaüzenetek és mi ezeknek a szövege. Ha ezeket nem tesszük meg, akkor a designer és a fejlesztő ad hoc módon fogja megvalósítani ezeket. Ahogy ő szokta, vagy ahogy az adott pillanatban a legjobbnak tartja, mivel gyakran nem kérdeznek vissza a homályos részleteknél. És ez nem is az ő hibája, hisz mi trehány anyagot adtunk le neki, így egyáltalán nem várhatjuk el tőle, hogy a fejünkben lévő homályos ideát leprogramozza, megdesignolja. Ne bízzuk a véletlenre! Ha tervezünk, akkor adjunk át precíz drótvázakat, folyamatábrákat és mindenre kiterjedő részletes leírásokat.

23 hozzászólás

Oszd meg velünk véleményed

Mind a 23 hozzászólás mutatása

Kérem írd be üzenetedet

Kérem írd be email címed!

Kérem írd be üzenetedet

Küld

Website-okat, mobil applikációkat és szoftvereket tervezünk, hogy segítsünk megvalósítani üzleti céljaidat!

Csapatunk

Kapcsolat

Kedves Ergo,

A nevem
. Az email címem
. Üzenetem:

ajánlott
cikkek

Tudj meg többet a témáról

‘Atomic design’ módszertan a UX tervezésben – 7 dolog, amit tudnod kell

2023. nov. 02. | 14 perc olvasás

Az UX és UI designerek az ‘atomic design’ módszertant alkalmazzák a tervezés során elkövetett változtatások gyorsabb és egyszerűbb végrehajtása érdekében. Néha azonban hajlamosak vagyunk a dolgokat a ...

Hogyan használhatjuk a színpszichológiát a UX designban marketing és branding célok elérésére

2023. jún. 20. | 14 perc olvasás

A színek kulcsszerepet játszanak mindennapi életünkben, illetve abban, ahogyan a világot érzékeljük. Ezt előnyünkre fordíthatjuk a brand kialakítása, a termékmarketing vagy akár egy adott szolgáltatást...