meller.hu

A kérdés helyesebben inkább úgy hangozna, hogy miért érdemes előbb drótváz ábrákkal elindulni egy felület (akár üzleti alkalmazás vagy weboldal) megtervezésekor, mintsem rögtön nekiállni a grafikai tervezésnek.

Alapvetően azért, hogy a funkcionalitás felől közelítsük meg a tervezést ne pedig a grafika, egyszerűbben a „csicsa” felől. Másrészt a drótváz ábra egy hatékony eszköz is a kezünkben – ha ügyesen használjuk és kommunikáljuk -, hogy az ügyféllel, kollégákkal már a tervezés korai szakaszában át tudjuk beszélni az információ-architektúrát: mit érdemes egy felületen elhelyezni, mi az, ami már túlzsúfolttá, értelmezhetetlenné tenné és ezért érdemes valamilyen trükkhöz folyamodni (pl. card stack-, roll over info, vagy varázsló minta).

Az első dolog, amit meg kell határoznunk egy felületen, hogy a korábban specifikált funkcionalitást, hogyan rendezzük el, hogy az adott felületre szánt dolgok a prioritásuknak és a szükségleteiknek megfelelő helyet és hangsúlyt kapjanak. Előfordulhat, hogy egy bizonyos elemhez nekünk vagy a csapatban dolgozó grafikusnak van egy kreatív ötletünk és alig várjuk, hogy kipróbálhassuk. Mégis, kár volna emiatt négy másik elemet lefelejteni a felületről és utólag préselni bele olyan „üres helyekre” amik a tervezés kezdetekor jó eséllyel nem véletlenül lettek kialakítva (talán pont azért, hogy kiemeljenek vagy elválasszanak egymástól elemeket).

Sok féle megközelítés létezik a drótvázolással (wireframing) kapcsolatban, de amiben a legtöbben egyetértenek, hogy a különböző drótváz típusok többnyire részletességükben térnek el egymástól, illetve abban, hogy kinek szánják őket. Egy valamiben azonban megegyeznek, történetesen, hogy a „look and feel”-re – magyarul talán a „smink” a legjobban értelmezhető kifejezés – nem tartalmaznak még utalást sem. (Az ügyfélnél való demózás kapcsán előfordulhat, hogy a nagyon részletes drótvázba belekerülnek a sminknek már egyes elkészült elemei, de ha ekkor változik a felület szerkezete az „sokkal jobban fog fájni a photoshopban”, mintha ezt előtte tisztázzuk.)

A drótváz ábrák bárki számára hasznosak lehetnek, akik a dokumentációval dolgoznak. Ügyfél, tanácsadó, elemző, fejlesztő… mindenkinek tud mesélni valami hasznosat.
Főbb típusai lehetnek a skicc (ez még papíron törétnik), folyamat skicc (vagy forgatókönyv), drótváz, részletes drótváz, önálló drótváz (ez általában számozott jelöléseket és jegyzeteket tartalmaz, hogy önállóan is értelmezhető legyen és többnyire az ügyfélnél landol) és specifikációs drótváz (a fejlesztőnek).

Gyakran hallom, hogy az ilyesmit kidobott pénznek (munkaóráknak) tartják. De ez az a fajta megközelítés szerintem, amelyik a „tervezés” és előre gondolkodás bármely elemét annak tartaná. A drótváz használata beszédesebbé teszi a műszaki ajánlatot, dokumentációt, ami véd a hibáktól, félreértésektől (amik szintén pénzbe kerülnek). Az végleges mockup (smink terv) bekerülhet a dokumentációba stb., stb. Ha pedig egy photoshopban elkészített drótváz jól van strukturálva, csak mentünk belőle egy új példány és már kezdhetjük is ráhúzni a sminket: a struktúránk megvan, menet közben változni is kisebb eséllyel fog és biztos nem marad le róla semmi. Szerintem ez többnyire megéri a ráfordítást. Az pedig, hogy milyen mélységig tervezünk egy felületet (ritkán kell minden képernyőt végigrágni) rajtunk múlik.

Egyvalamire kell mindig figyelni! A drótváz ábra, ami az ügyfél elé kerül, mindig legyen „firka” szerű (erre a legtöbb célprogram kínál lehetőséget). Néhány esetben nem könnyű dolog a drótváz és a grafikai terv közötti különbséget elmagyarázni ezért jobb, ha már az elején hangsúlyozzuk a különbséget.

Ha tetszett, ha nem tetszett vagy megosztanád a saját tapasztalatod, szólj hozzá!

Címkék: drótváz, információ architektúra, interakció tervezés, skicc, wireframe