Wireframe-makettek készítése a teljes körű tervezés előtt

Wireframe készítése online feladathoz

A Wireframe készítése akkor hasznos, ha egy oldal, alkalmazás vagy ügyfélfelület szerkezetét még a látványterv előtt tisztán akarod látni. Ilyenkor nem a színek és nem a díszítés számít, hanem az, hogy mi hova kerül, hogyan halad a felhasználó, és hol tud egy magánmegrendelő gyorsan dönteni. Én azt látom, hogy sok privát ügyfél túl későn kér drótvázat, és csak akkor jön rá a hiányára, amikor már készül a grafika vagy elindult a fejlesztés. Pedig a jó vázlat korán megmutatja a hibákat. Ezen az oldalon olyan szabadúszó szakember munkájára tudsz fókuszálni, aki távolról, rendezett folyamatban készít felülettervet, és közben érthetően kommunikál.

A Wireframe készítése nem csak nagy projekthez kell. Egy egyszerű bemutatkozó oldalnál, egy időpontfoglaló felületnél, egy rendelési folyamatnál vagy egy tagsági oldalon is sokat számít. A magánügyfélnek általában az a fontos, hogy gyorsan értse, mit kap, mennyi idő alatt készül el, hány javítás fér bele, és milyen formában érkezik az anyag. Ez teljesen reális elvárás. A távoli munkánál a pontatlan brief szinte mindig lassít. De ha a feladat már az elején világos, akkor a drótváz készítése gyors, jól ellenőrizhető és költségkímélő lépés.

Drótváz szerepe a tervezésben

A drótváz leegyszerűsített terv. Megmutatja az oldalszerkezetet, a blokkok sorrendjét, a gombok helyét, az űrlapok logikáját és azt is, hogyan jut el a látogató egyik lépéstől a másikig. Szerintem ez az a szint, ahol a legtöbb félreértést olcsón lehet javítani. Ha itt derül ki, hogy hosszú a nyitó rész, rossz helyen van a kapcsolatfelvétel, vagy túl sok mező van egy űrlapon, az még nem nagy gond. Később viszont ezek a hibák már időt és pénzt visznek el.

A magánmegrendelő sokszor látványtervet kér elsőre, mert azt hiszi, abból többet fog érteni. Tapasztalatom szerint ennek gyakran az ellenkezője történik. A színek elterelik a figyelmet a valódi problémákról. A vázlat ehelyett rákényszerít a lényegre. Mi legyen a fő üzenet. Hol legyen a cselekvésre ösztönző gomb. Hány lépésből álljon az ajánlatkérés. Kell-e külön kérdéssor. És mi az, amit egyáltalán nem kell rátenni a képernyőre.

Volt olyan eset, amikor egy ügyfél egy viszonylag egyszerű szolgáltatási oldalt akart. Elsőre azt mondta, csak egy szép kezdőlapra van szüksége. A drótváz során derült ki, hogy valójában három külön célcsoportnak beszél, és mindenki más információt keres. Ha rögtön grafikai terv készült volna, nagy eséllyel újra kellett volna rajzolni az egészet. Így viszont a szerkezetet még időben át lehetett alakítani.

Wireframe készítése folyamata

A Wireframe készítése online együttműködésben akkor működik jól, ha a folyamat rövid és egyértelmű. Először a megrendelő megírja a célt, a fő tartalmakat, a kívánt oldalakat és azt, hogy milyen műveletet vár a látogatótól. Ezután a tervező átnézi az anyagot, visszakérdez, majd elkészít egy első alacsony részletességű változatot. Ezen még kevés a részlet, de a logika már látszik. A következő körben jönnek a módosítások, majd a részletesebb felületterv.

A távoli munkában fontos a határidő és az átadás módja. A legtöbb ügyfélnek megfelel, ha az anyag megosztható linken érkezik, és megjegyzésekkel lehet rajta haladni. Ez gyorsabb, mint képernyőfotókat küldözgetni. De az is lényeges, hogy a brief ne legyen túl homályos. Sokan ott hibáznak, hogy csak annyit írnak, legyen modern és letisztult. Ebből a szakember nem tud jó döntést hozni. Sokkal jobb, ha le van írva a cél, a fő oldalak sorrendje, a kötelező elemek és az, hogy melyik rész a legfontosabb.

Az átadásnál érdemes tisztázni, hogy csak drótváz készül, vagy tartozik hozzá kattintható minta is. Nem ugyanaz a kettő. A vázlat a szerkezetet rögzíti. A kattintható minta már használati próbára is alkalmas lehet. Egy magánügyfélnél sokszor elég a részletes drótváz. Máskor viszont a több oldalas vagy több lépéses folyamat miatt indokolt a mozgatható változat is.

Wireframe készítése árak

A Wireframe készítése ára főleg a képernyők számától, a bonyolultságtól és a javítási körök mennyiségétől függ. Nem mindegy, hogy egyetlen nyitóoldalról van szó, vagy egy teljes ügyfélfolyamatról több lépéssel, űrlapokkal, visszajelző állapotokkal és mobil nézetekkel. Én azt látom, hogy a túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent. Ilyenkor a vázlat nem döntési eszköz, csak gyorsan odatett dobozok sora. Az ilyen anyag ritkán segít valódi fejlesztési döntést hozni.

Az alábbi összegek tipikus online megbízásokhoz igazodnak. Ezek nem merev díjak, inkább valós sávok, amelyek segítenek eligazodni.

Ha a feladat több körös egyeztetést, tartalmi segítséget vagy külön mobil logikát igényel, az ár gyorsan emelkedhet. De sokszor még így is olcsóbb, mint utólag javítani a rosszul felépített oldalt. A magánügyfélnek általában az éri meg, ha előre rögzíti, hány képernyő tartozik a csomagba, hány módosítás van benne, és mikor számít plusz munkának egy új oldal.

Wireframe készítése szakember választása

Ha szabadúszó tervezőt keresel, ne csak azt nézd, hogy szépek-e a korábbi képek. A jó szakember abból is látszik, hogyan kérdez. Rákérdez a célra, a közönségre, az elsődleges műveletre, a tartalmi sorrendre és a technikai korlátokra. Ez fontosabb, mint a hangzatos bemutatkozás. Szerintem a portfólió mellett a kommunikáció minősége dönt a legtöbbet. Ha valaki már az elején pontatlanul válaszol, később sem lesz könnyebb vele haladni.

A megbízás előtt érdemes megnézni, hogy a tervező dolgozott-e hasonló szerkezetű feladaton. Más gondolkodást igényel egy szolgáltatási oldal, egy webshop vagy egy foglalási folyamat. A privát megrendelő szempontjából külön előny, ha a szakember nem csak rajzol, hanem érti a használhatóságot is. A UX tervező vagy felülettervező ilyenkor nem pusztán dobozokat helyez el, hanem segít egyszerűsíteni a döntési útvonalat.

A Qjob.hu felületén is érdemes olyan magánszakembert keresni, aki leírja a munkamenetet, a javítások számát és az átadás formáját. Itt az átlátható feltételek többet érnek, mint egy túl rövid ígéret. Jó jel az is, ha a tervező meg tudja mondani, mikor elég a drótváz, és mikor kell részletesebb prototípus. Aki mindenre ugyanazt ajánlja, az sokszor nem a konkrét feladatra figyel.

Drótváz hibák és irreális elvárások

A legtöbb gond nem a rajzolásnál kezdődik, hanem az elvárásoknál. Sokan azt hiszik, hogy a drótváz már kész weboldal. Nem az. Ez egy tervezési eszköz. A másik gyakori hiba, hogy a megrendelő túl sok funkciót akar egyetlen képernyőre zsúfolni. Ettől a felület zavaros lesz. A felhasználó nem tudja, merre induljon. És végül egyik fontos elem sem kap elég figyelmet.

Tapasztalatom szerint az is probléma, amikor a briefben nincs rangsor. Minden fontos. Minden maradjon. Minden legyen szem előtt. Ebből ritkán lesz jó szerkezet. A Wireframe készítése pont abban segít, hogy sorrendet teremtsen. Mi jelenjen meg először. Mi támogató információ. Mi maradhat későbbre. Mi az, ami csak zavarja a döntést.

Volt olyan ügyfél, aki ragaszkodott egy hosszú kezdőképernyőhöz sok apró elemmel. A vázlat megmutatta, hogy emiatt a kapcsolatfelvétel és az ajánlatkérés szinte eltűnik. Amikor ezt fekete fehér szerkezetben látta, azonnal egyetértett a rövidítéssel. Ha ugyanez csak a végleges látványban derül ki, nehezebb lett volna elfogadni a változtatást. Ezért mondom, hogy a jó vázlat néha vitát spórol meg.

Felületterv minősége és átadása

A felületterv akkor használható igazán, ha nem csak szép rendben vannak rajta a blokkok, hanem értelmezhető a fejlesztőnek és a megrendelőnek is. Legyenek rajta egyértelmű állapotok, jelölve legyenek a fő elemek, és ki lehessen deríteni belőle, mi történik kattintás után. A minőség nem attól lesz jobb, hogy részletesebb a rajz, hanem attól, hogy világosabb a döntési út. De ezt sokan keverik.

Az átadásnál jó, ha a megrendelő nem csak képeket kap, hanem rendezett fájlt vagy megosztott munkateret. Hasznos, ha a képernyők nevei érthetők, a verziók elkülönülnek, és a módosítások nyomon követhetők. Egy online feladatnál ez kifejezetten fontos, mert nincs személyes egyeztetés minden apró részletnél. A tiszta átadás gyorsítja a következő lépést, legyen az grafikai terv, szövegírás vagy fejlesztés.

Ha biztos eredményt szeretnél, akkor megbízás előtt kérdezd meg ezeket. Mi tartozik bele a csomagba. Hány javítás jár. Milyen formátumban kapod meg. Készül-e mobil nézet. Van-e rövid indoklás a szerkezeti döntésekhez. Ezek egyszerű kérdések. Mégis sok későbbi vitát megelőznek. És szerintem pont ez választja el a rendezett online munkát a kapkodó feladatmegoldástól.