Webshark Blog

Sokan vannak, akik nem tudják, hogy pontosan mit jelentenek azok a webdesignban gyakran használt kifejezések, mint a drótváz, a prototípus vagy a mockup. Ezért nem árt megismerkedni velük egy kicsit jobban. (Frissítés, 2022.04.25. – Egy új fejezettel bővítettünk: Hány drótvázra lesz szükséged?)

Egy drótvázat összekeverni egy prototípussal olyan, mint ha egy ház tervrajzát kevernénk a bemutató mintaházzal. Az előbbi csak egy terv papíron, ami azt mutatja meg, hogy miként kellene felépülnie a háznak, míg utóbbi egy olyan ház, amelyből kiderül, milyenek lesznek egy adott ingatlanfejlesztés keretében megépülő házak. Egy drótváz, egy prototípus és egy mockup mást és mást kommunikál, eltérő célokból. Ezért aztán máshogy is néznek ki.

Mi is az a drótváz?

A drótváz a weboldal kis pontosságú ábrázolása, a design csontváza, mely tartalmazza az információk fő struktúráját, a tartalmi csoportokat. Világosan kommunikálnia kell tehát, hogy

• melyek a tartalom fő csoportjai (azaz választ ad a mi kérdésre),
• milyen az információk, illetve a weboldal struktúrája és felépítése (válasz a hol kérdésre),
• miként alakul a felhasználó és a felület közötti interakció (választ ad a hogyan kérdésre).

A drótváz tehát nem csak értelmetlen szürke dobozok összevisszasága, még ha elsőre az avatatlan szemek számára így is tűnik. A drótváz a webdesignnak tulajdonképpen a gerince, melynek ábrázolnia kellene a végső termék minden fontos elemét.

Akadnak, akik kifejezetten úgy fogalmazzák meg a drótváz lényegét, hogy az egy pillanatkép a felület és a felhasználó közötti interakció folyamatáról.

Miért van szükség drótvázra?

Egy drótváz segítségével egy alapvetően elvont, írásos weboldaltérképet tudunk már vizuális formába alakítani. Ezáltal sokkal könnyebben és gyorsabban áttekinthető és megérthető az elképzelés. A csapat, az ügyfelek és a felhasználók már a munka kezdeti szakaszában is értelmezni tudják a segítségével a design-elképzeléseket, valamint visszajelzést adhatnak. Habár elsőre talán felesleges plusz munkának tűnik, de sok probléma és költség kiküszöbölhető vele.

A drótváz megmutatja, hogy miből is fog állni a weboldal tartalma, milyen funkciók jelennek meg majd rajta, és ezek milyen módon találkoznak a felhasználói igényekkel. Segítségével már a munka kezdeti szakaszában el lehet dönteni, hogy jó lesz-e a design, arra van-e szükség, ami készül. Sokkal fájdalmasabb, ha ez akkor derül ki, amikor már gyakorlatilag elkészült egy weboldal. Egy drótváz olcsón és gyorsan felépíthető (akár egy papír és egy toll segítségével).

Egy drótváznak 3 célja biztosan van:

• Bemutatja a tartalmat és a weboldal funkcióit a designt megelőzően.
• Segít a designer számára az elképzelései kommunikálásában az ügyfél felé.
• Felépíti a weboldal információs architekúráját.

Miközben egy drótváznál nem kell minden részletet kifejteni, világosan be kell mutatni a végső designt, annak minden fontos elemével együtt. Ezzel tulajdonképpen a projekt térképe készül el, többek között azok számára, akik a fejlesztésen közösen dolgoznak (fejlesztők, vizuális designerek, szövegírók, projektmanagerek). Olyan mint egy város térképe, ahol már minden utca látható, de az egész jóval egyszerűbb, mint maga a város műholdról fényképezve.

Egy drótváznak alapvetően 3 fő eleme van

• Információs design – mely tartalmazza a fő információkat, vázolja az oldal felépítését.
• Navigációs design – megjeleníti az átfogó és a másodlagos navigációs elemeket.
• Vizuális design – a felhasználói felület leírását és grafikákat is tartalmaz.

Hogyan néz ki a drótváz?

A drótvázak jellemzően gyorsan elkészülnek, a munka főleg a csapattagok közötti kommunikációból és együtt gondolkodásból áll össze. Maga a drótváz megrajzolása kifejezetten rövid ideig tart. Jellemzően fekete-fehér-szürke színekben készül el, és az olyan elemek, melyek kidolgozása időigényes (ikonok, képek), csak egy egyszerűsített formában jelennek meg. Tehát például a képek helyén négyzetek láthatók.

Mivel statikus és fix interakciókat tartalmaz, ezért ki kell egészíteni szöveggel, melyek magyarázzák az interakciók lényegét. Ugyanakkor adott esetben lehet kevésbé formális a megjelenés, akár vázlatok is lehetnek a csapaton belüli kommunikáció megkönnyítésére, ahol a válasz maga a gyorsan elkészített drótváz.

Frissítés, 2021.08.16.:

Hogyan rajzolj meg egy drótvázat? Lépésről lépésre

Mivel minden weboldal némileg eltérő, ezért bár rutinból fel lehet építeni egy drótvázat, azonban nem árt néha alaposabban átgondolni, mi is az optimális megoldás egy adott weboldalnál. Hiszen előfordulhatnak egyedi igények, követelmények, sajátos problémákra kell megoldást találni. Milyen lépések vezetnek tehát egy később hatékony weboldalt eredményező drótváz kialakításához?

1. Az információs architektúra felépítése

Minél több időt fordítsz a megfelelő információs architektúra kialakításába, annál kevesebb gondod lesz a drótváz készítése során. Mielőtt nekiállnál a vázlatok elkészítésének, gondold át a következő kérdéseket?

• Kik a felhasználóid?
• Mit akarsz elérni a weboldaladdal?
• Milyen cselekvéseket hajtsanak rajta végre a felhasználók?
• Mitől egyedi a terméked?

Ha nem tudod, hogy néz ki egy információs architektúra, akkor itt látható rá egy példa:

Ez alapján már pontosan lehet látni, hogy mikor, minek kellene megjelenni a felhasználók kijelzőjén. A következő lépésben el kell rendezni ezeket az elemeket.

2. Az elemek fontossági sorrendjének átgondolása

Meg kell határozni azt, hogy mely elemek mennyire fontosak, és ez alapján kialakítani a sorrendjüket.

3. A böngészőablak vagy az eszköz oldalarányának meghatározása

Nem kell ennek az oldalarány-meghatározásnak pontosnak lennie, különösen akkor, ha csak kézzel rajzolod fel a drótvázat. Ha pontosabb rajzra törekszel, akkor asztali gépen gyakori töréspont az 1024×768 pixel vagy az 1920×1080 pixel. Mobilon az adott eszköztől függ, válassz egyet, melyre optimalizálni akarsz.

4. Rajzold be a navigációs menüt és a keresést

Ha még nincs meg a navigációd helye, akkor gondold át, hogy milyen típusú megoldás működhet az oldalon: lehet horizontális vagy vertikális, ezt jelezd egy téglalappal a megfelelő helyen. Amennyiben rejtett navigációt használsz, attól függően rajzold kinyitva vagy bezárva, hogy mire összpontosítasz éppen.

A keresési funkciót egy nagyítóval és egy téglalappal jelezd, amennyiben fontos, akkor rajzold meg a találati listát is.

4. Azonosítsd be és rajzold meg a nagyobb elemeket!

Olyan elemekre kell gondolni, mint a fejléc, a képek, a szövegtörzs. A fejlécet jelezheted egy vastagabb vonallal, a szöveget egymás alatti vonalakkal, míg a képeket négyzetekkel, melyekbe egy x kerül.

5. Rajzold meg a részleteket!

Most kerülnek sorra az olyan elemek, mint a gombok, lenyíló menük, rádiógombok, űrlapmezők, stb. Amennyiben több oldalt is megrajzolsz, melyek egy folyamat részeit alkotják, akkor folyamatjelzőket és párbeszédablakokat is ábrázolnod kell.

Ekkor már látható, hogy mi és hol fog megjelenni a kijelzőn. Most készítsd el ugyanannak az oldalnak több drótvázát is. Ezeket a terveket még nem kell minősíteni, mert az a cél, hogy különböző elképzelések jelenjenek meg a papíron. Ezek közül aztán majd ki lehet választani a legjobbat. Ha ez megvan, akkor a papírról már átkerülhet a drótváz vázlata a számítógép kijelzőjére.

Néhány tipp drótváz-készítéshez

1. Lásd világosan a célokat! – Mit akarsz elérni a drótváz létrehozásával?
2. Először papíron alkoss! – Ha először papíron rajzolod meg az elképzeléseket, az igen hasznos tud lenni. A kezdeti szakasz célja az, hogy minél több ötletet összegyűjts. Ezt a legjobban a papírra tervezés teszi lehetővé. Minél több verziót hozz létre, de egyikben se áss mélyre!
3. Megfelelő méretű vászonra rajzolj! – Különben később kénytelen leszel az egész elrendezést módosítani. A hibás elrendezés hibás vizuális hierarchiához vezet, és később át kell alakítani minden elem elhelyezését.
4. Rácsba rendezd! – Az egyes elemeknek mozgathatónak, változathatónak, cserélhetőnek és méretezhetőnek kell lenniük. A rács használata jó megoldás a drótvázaknál, mert könnyen változtatható az igényeknek megfelelően.
5. Törekedj következetességre! – A következetesség mindig kulcsfontosságú tényező: a felület egyes elemeinek, a gomboknak, a címkéknek minden oldalon azonos módon kellene megjelenniük.
6. Folyamatban gondolkodj, ne önálló oldalakban! – A felhasználói élmény egy út, amin a látogató halad, miközben használja a terméked. A termék tervezésének célja, hogy ez az út akadálymentes legyen. Ezt csak úgy érheted el, ha interakciókban gondolkodsz, nem pedig önálló oldalakban. Tehát mindig látni kell, hogy egy adott oldal miként viszonyul a többihez.
7. Már a folyamat elején legyen kész a tartalom – Mindig jobb a végleges szöveggel dolgozni a tervezésnél, mint lorem ipsummal. Hiszen látod, hogy hol passzol a designba és hol nem, ráadásul visszajelzéseket is nagyobb eséllyel kapsz, ha kész szöveget használsz tesztelésre. Ha még nincs meg a végleges szöveged, akkor is érdemes valami vázlatot készíteni, mely hasonló lesz méretben, tartalomban és stílusban a véglegeshez.
8. Színeket csak akkor használj, ha szükséges! – Drótvázaknál a designerek általában nem használnak színeket, mert zavaróak lehetnek. Ugyanakkor nem tilos a színek használata, csak ritkán és következetesen kell őket alkalmazni. Például kiemelhetsz velük fontos elemeket.
9. Használható legyen, ne szép! – A drótvázaknál nincs értelme időt vesztegetni a vizuális részletek kidolgozására, mert nem ez a célja, hanem az ötletek kommunikálása. Minél kezdetibb szakaszban jársz, annál kevésbé kell kidolgozottnak lenni a drótváznak.
10. Fűzzél hozzá írásos megjegyzéseket! – Ezáltal a többiek könnyebben megértik, hogy mikor mit akarsz a designnal elérni.

Frissítés, 2022.04.25.:

Hány drótvázra lesz szükséged?

Több tényezőtől is függ, hogy hány drótvázra lesz szükséged egy weboldal elkészítésénél. Az egyik tényező, hogy mekkora weboldalról van szó. Általában a nagyobb weboldalak esetében több drótvázzal kell előállni, mint a kisebbeknél. De ez nem minden esetben igaz. Mert alapvetően azon múlik a számuk, hogy milyen a weboldal struktúrája, hogyan vannak elrendezve az oldalak, hány szintje van az oldalaknak.

Az egyébként nem feltétlenül jobb, ha sok-sok drótvázat készítesz, mert nem biztos, hogy szükséged lesz mindre. A weboldaltulajdonosok nem is igazán látják át a rengeteg drótvázat, csak akkor nyer értelmet számukra az egész, ha ezek meg vannak már töltve tartalommal. Tehát, ahhoz, hogy már látható legyen a design, néhány drótváz elegendő lesz.

A pontos válaszhoz el kell rendezni a weboldal tartalmát, fel kell vázolni az oldaltérképet. Ebben megjelennek a szükséges oldalak és az aloldalak, lehetőleg kategóriákba rendezve, mely már utal arra is, hogy vizuálisan miként fog megjelenni az egész. Ha sok oldaltípust, azaz kategóriát sorolsz fel, akkor mindegyikhez kellene egy drótvázat készíteni. Ezt a számot azonban le lehet szűkíteni, csak „modulárisan” kell gondolkodni.

Tehát nem oldalról oldalra készíted el az egész projektet, hanem olyan modulokban kellene gondolkodnod, melyeket aztán újra felhasználhatsz többféle oldalon is. Ezzel ráadásul következetesebbé és válik a design, ami jobb felhasználói élményt eredményez.

5 drótvázra minden weboldalnak szüksége van

Ha még mindig bizonytalankodsz, hogy hány drótvázat készíts, akkor érdemes az alapvető drótvázakkal elindulni. Ezekből öt van:

• Főoldal – navigációval és lábléccel, valamint minden szükséges elemmel. Érdemes lehet több verziót is elkészíteni.
• Mobilos főoldal – sokan még mindig asztali gépes megjelenésben gondolkodnak, ezért fontos külön megemlíteni a mobilos főoldalt is. Minden asztali gépes verziónak legyen mobilos változata is, melynél figyelembe veszed az eltérő interakciós követelményeket.
• Másodlagos oldalak – ezek azok az oldalak, melyekre a főoldalról egy kattintással érkezik a felhasználó. Itt már jól használható a moduláris megoldás.
• Kapcsolati vagy rólunk oldal – egyik vagy másik, vagy mindkettő minden weboldalon szerepelni szokott. Azért is fontos, hogy legyen drótvázuk, mert az egyik legfontosabb, leglátogatottabb oldaladról van szó.
• Blogoldal – ha információs weboldalad van, például egy céges oldal, akkor a blogoldalad drótvázára is szükséged lesz. Ebből lehet, hogy kettő is kelleni fog: az egyik a blogposzt oldala, a másik pedig a blogbejegyzések felsorolásának oldala.

További drótvázak a nagyobb weboldalak esetében

Néhány weboldal esetében persze sokkal többféle oldal is megjelenik még, melyekhez szintén kell drótvázat készíteni. Ilyen lehet:

• Szolgáltatások vagy árak oldala
• Egyedi elemek: foglalás, fotógaléria, stb.
• Térkép oldal
• Webáruházaknál megrendeléshez kapcsolódó oldalak
• Feliratkozó oldal
• Bejelentkezési oldal

Pontos számot nem lehet mondani tehát, mert a weboldal igényei döntik el, hogy hány drótvázzal állsz elő. Az mindenesetre kevés lesz, ha csak a főoldalról készítesz egyet. Ugyanakkor túlzásba sem érdemes esni, mert nincs szükség minden egyes oldal drótvázára. A moduláris megoldás sokat segít, mert bizonyos elemeket így csak át kell emelned a különböző oldalak drótvázához.

Milyen eszközöket használhatunk  drótváz elkészítéséhez?

Kézi vázlat

Az induláskor – amikor az ötleteket gyorsan fel kell vázolni – a legegyszerűbb eszköz a papír és a ceruza. Így negyed óra bármikor összedobhatsz egy használható drótvázat. Elsősorban akkor praktikus a használata, amikor hirtelen kipattan a fejedből az ötlet, és nem akarod veszni hagyni.

Egy kézzel készített vázlat esetében nem kell még a részletekkel foglalkoznod, olyan egyszerűen fejezheted ki magad, ahogy csak jólesik. Bármikor elkezdhetsz rajzolni, akár egy telefonhívás, akár egy meeting közepén.

Ráadásul van egy további előnye is annak, hogy nem kezded el digitalizálni az elképzeléseid már az első perctől fogva. Az, hogy ezáltal több ötletet felvonultathatsz, és majd ezek közül a legjobbat kiválasztva kezdesz csak bele egy digitális alapú drótváz elkészítésébe.

Habár a drótvázak jellemzően fekete-fehérek, hasznos lehet akár az is, ha második körben előveszed a színeket, hogy felhívd a figyelmet a design egyes részeire.

Tábla használata

A papír után a táblákra vázolt drótváz is népszerű megoldás, ami ugyanazt tudja, mint a papír alapú, csak függőleges a felület és könnyebben megoszthatók általa az elképzelések a csapattagokkal. A táblára felrajzolt drótvázaknál sem kell maximális részletességre törekedni.

Papírkivágások

Létezik egy olyan megoldás is, ahol a vázlat alapján vágjuk ki a papír egy részét vagy részeit. A kivágott részeket aztán fel lehet használni különböző drótvázak létrehozására, ezeket cserélgetni lehet, illetve már megjelenik általa az interaktivitás is.

Digitális eszközök

Ugyanakkor persze a drótváz elkészítésére is megvannak a megfelelő digitális eszközök, melyekkel elnyerheti végső, digitális formáját a drótváz. Sokan nem is használnak egyáltalán papírt, hanem egyből egy szoftverhez nyúlnak.

Ilyen például a

• UXPin
• Balsamiq
• Sketch
• Adobe XD
• Axure

és még számtalan egyéb szoftver, melyeknél előre elkészített elemek segítségével viszonylag gyorsan elkészíthető egy drótváz.

A drótvázak tehát, mint látható, még nem tesztelési célokat szolgálnak, habár segíthetnek az első, gyors visszajelzések begyűjtésében. A webdesign során rendkívül hatékonyak, és a projektek kezdeti szakaszában szinte megkerülhetetlenek.

Mi az a mockup?

Tulajdonképpen itt a mintadarabról van szó, és nincs igazán jó magyar megfelelője, így az angol szót használjuk a gyakorlatban. A drótváz és a prototípus között helyezkedik el az ábrázolás pontosságát illetően. A mockup nagyon gyakran egy vizuális vázlat, illetve maga a vizuális design. Egy jól elkészített mockup bemutatja az információk elrendezését, vizuálisan megjeleníti a tartalmat és az alapvető funkciókat, de csak statikus módon.

Akkor használható jól, ha még a kezdeti időszakban be szeretnénk mutatni, miként fog kinézni a webdesign. Mivel kizárólag statikus a megjelenése, így jóval gyorsabban és olcsóbban elkészíthető, mint egy prototípus. Ugyanakkor segítségével már sok visszajelzést lehet szerezni.

Lényeges, hogy a mockup még nem interaktív, mint a prototípus, így nem derül ki belőle, hogy miként fog a végső termék működni. Megfelelő ugyanakkor a UX-elképzelések tesztelésére, változtatására. Amikor a fejlesztés még olyan szakaszban jár, ahol változásokra lehet számítani, akkor jó megoldás a mockup használata. Ha viszont már szükség van arra, hogy világosan láthatóvá váljanak a felhasználói interakciók, megkezdődjön a tesztelés, el kell készíteni a prototípust.

Mi az a prototípus?

A prototípus a legtöbb weboldal fejlesztése során azért fontos lépés, mert szükség lehet rá a felhasználói interakciók és folyamatok megismerése érdekében. A prototípus már egy működő modellje, interaktív szimulációja egy alkalmazásnak vagy weboldalnak, mely már tesztelhető felhasználókkal. Itt a végtermék egy magas minőségű ábrázolásáról van szó, mely bemutatja a felhasználói felület interakcióit is.

Egy prototípus segítségével a felhasználók

• megismerkedhetnek a tervezett felhasználói élménnyel,
• tesztelhetik a fő interakciókat a végtermékhez hasonló módon.

A prototípus tehát a felhasználó és a felület közötti végső interakciók szimulációja. Szükség lehet rá, ha vannak a weboldalon animációk, több navigációs lehetőség, összetett munkafolyamatok, illetve ha nem megszokott a viselkedése a weboldalnak. Amennyiben fontos a részletek megismerése és kidolgozása, akkor érdemes prototípust készíteni. Ugyanakkor fontos kérdés, hogy mennyi idő és pénz áll rendelkezésre a fejlesztésnél.

A prototípus még nem a végtermék, nem pontosan úgy néz ki, mint a végső weboldal, de ahhoz nagyon hasonló. Itt már nem egy szürke, vázlatos megjelenésről van tehát szó, hanem egy interaktív, kattintható, színes, reszponzív megjelenésről. Bemutatja, hogy miként lehet interakcióba lépni a végtermékkel, és az miként fog reagálni.

Az interakciók kivitelezésének ezért már kellő gondossággal kell zajlania, hogy megjelenésük hasonló legyen a végső élményhez. Ugyanakkor a felület és a backend folyamatok közötti kapcsolat még nem kerül kialakításra a költségek csökkentése és a fejlesztés gyorsítása érdekében.

Sok ügyfél zavarba jön a prototípussal való találkozáskor, mert úgy látják, hogy a weboldal nem működik, vagy nem úgy néz ki, ahogy kellene. A feladata azonban az, hogy kiderüljön, miként tud kapcsolatba lépni a felhasználó a felülettel, így tesztelhető a UX és a UI is, felfedezhetők és javíthatók a bugok az élesítés előtt.

A prototípusokkal már teljes értékű felhasználói (usability) teszteket lehet végezni, visszajelzéseket lehet kapni, jól vizsgálható a segítségével a felület használhatósága még azelőtt, hogy a fejlesztés tulajdonképpen elkezdődne.

A prototípusok készítése meglehetősen költséges és időt rabló formája a design kommunikálásának. Érdemes ezért olyan prototípusokat készíteni, melyek alapjai (HTML és a CSS kód) aztán később felhasználhatók a fejlesztés során. Különösen az egyszerűbb projektek esetén lehet hasznos a prototípusok használata.

Alapvetően megkülönböztetünk low-fidelity és high-fidelity prototípusokat. Az előbbinél a designer a drótváz oldalait prototípusokká alakítja, míg utóbbinál a mockupot alakítják át prototípussá. Az hogy melyikre van szükség, attól függ, hogy milyen részletesség szükséges ahhoz, hogy bemutathassuk a terméket vagy a szolgáltatást egy jól érthető, interaktív módon. Néha felesleges egy high-fidelity kialakításra időt és pénzt pazarolni.

Egy prototípus alapvetően egy tesztelési lehetőség, melynek révén játszhatsz a weboldallal. Minél előbb elkezdődik általa a tesztelés, annál biztosabb, hogy nem fordul rossz irányba a design. A gyakori tesztek révén kiszűrhetők a bugok a UX-ből, és minél többet tesztelsz, annál több információt kapsz még az élesítés előtt. Ezáltal elkerülhetők a hibák a felhasználói élményben, a negatív visszajelzések, az hogy az emberek nem értik a weboldalad, nem jutnak el a konverzióig.

Frissítés, 2021.10.20.:

Milyen gyakori hibák jellemzők a prototípusokra?

Miközben nincs egyetlen tökéletes kivitelezése a prototípusoknak, felsorolhatók olyan hibák, melyek gyakran megjelennek ezeknél. Az ilyen hibák pedig lassítják a design készítését.

Pontos cél nélküli prototípus-készítés

Ha nem tudod, hogy mit akarsz kezdeni a prototípussal, akkor az már eleve hibának tekinthető. De milyen célokról is van szó? Egy új weboldal használhatóságát akarod vele tesztelni? Vagy a vásárlói utat a weboldalon a rendelésig? Azt is fontos tudni, hogy kik is a megrendelők és milyen időkeret áll rendelkezésre. Ha ezek világosak, akkor irányt mutatnak az elkészítésnél. Egy cél emellett lehetővé teszi azt is, hogy mérni tudd a hatékonyságot.

Túl hamar vágsz bele

Gyakran előfordul, hogy még azelőtt vágnak bele egy prototípus elkészítésébe, hogy a designerek alaposan átgondolták volna, hogy milyen desingmegoldásokat lenne érdemes használni. Megnyitnak egy eszközt, amivel a prototípus elkészíthető, és azt remélik, hogy ebben majd valahogy megformálódik a design. Ezek az eszközök azonban már a részletekre fókuszálnak, így a gondolkodás, az ötletelés folyamata elmarad, vagy túl rövid ideig tart. Így egyszerűen felhasználják az első designmegoldást, mely automatikusan adódik, és ami sem nem a legjobb, sem nem a legeredetibb.

Tehát még akkor is, ha gyors prototípus-készítésbe vágsz bele, előtte készítsd el a különböző design-lehetőségek vázlatait, drótvázait, mockupjait. Lehet, hogy azt gondolod, így hosszabb ideig tart a design elkészítése, valójában azonban időt spórolsz vele, és jobb lesz a végeredmény.

Rossz prototípus-készítő eszközt használsz

A választás előtt át kell gondolni, hogy milyen részletezettségű prototípusra van szükség. A legtöbben persze azt az eszközt használják, amit megszoktak, kedvelnek, vagy egyszerűen csak azt az egyet tudják használni. Ez azonban nem feltétlenül megfelelő, mert lehet, hogy egyszerű, kép-alapú prototípusra van szükség, de az is lehet, hogy kód-alapúra.

Ha egy low-fidelity prototípus is megfelelő, akkor akár egy táblát és tollat is használhatsz, vagy csak papírt és ceruzát. Viszont egy high-fidelity prototípus esetében, melynek valósnak kell kinéznie és szükség van a teljes interaktivitásra, már mást eszközt kell igénybe venni.

Placeholder szövegeket és képeket használsz a valós helyett

A prototípusoknak általában olyan közel kell állniuk megjelenésükben és funkcióikban a végső termékhez, amennyire csak lehetséges. Ha Lorem Ipsumot használsz, akkor arról ordít, hogy még csak egy tesztverzió, így aztán eltérítheti a tesztelést.

Nem interaktív a prototípusod

Egy prototípusnak már valós felhasználói élményt kell kínálnia. Ennek érdekében úgy kell reagálnia a felhasználói cselekvésekre, mint a végső designnak. Ha nem interaktív prototípust használsz, akkor elveszíted a lehetőséget, hogy felmérd a weboldal funkcióinak használhatóságát, például hogy lásd miként működik egy lenyíló menü a valóságban. Egy interaktív prototípus ráadásul megkönnyíti a fejlesztési folyamatot is.

Későn kérsz visszajelzéseket

A legjobb megoldás egy magasabb szintre emelni a designt, ha visszajelzéseket kérsz a folyamat során. Ezért mutasd meg a prototípust minél előbb másoknak is, így időben kiderülnek a hibái. Ha késlekedsz ezzel, akkor lehet, hogy egy túl drága hibába futsz bele.

Elbizonytalanít, ha nem működik a design

Egy tesztelés után kiderül, hogy a design működik-e vagy sem. Ha utóbbiról van szó, akkor azt nem bukásként kell megélni, hiszen pont azért készült el a prototípus, hogy ez kiderüljön. A prototípus készítése azért van, hogy különböző ötletek, feltételezések működőképességét megvizsgáld a gyakorlatban, és ne csak a kész terméknél derüljön ki, hogy használhatatlan. Fogd fel a sikertelen tesztet egy tanulási lehetőségnek, így a következő prototípusnál ki tudod küszöbölni a hibákat.

Milyen eszközökkel készíthető el egy prototípus?

A prototípusok elkészítéséhez is használható azon eszközök egy része, melyeket már a drótváznál is említettünk. Ilyen például

InVision – egy népszerű felhő alapú platform. Lehetővé teszi a felhasználók együttműködését, az ötletek tesztelését. Széles választékot kínál sablonokból a kezdők számára. Elérhető OS X-re, Windowsra és böngészőből is. Tervezhető vele drótváz és prototípus is. Egy prototípus ingyenesen elkészíthető vele.

Marvel – felhő alapú prototípus-készítést kínál, csapatok számára is. Mobilos támogatása is van, azaz iOS-es és androidos alkalmazásban is használható, így okostelefonon látható egyből az elkészült prototípus. Kód nélküli drag and drop felületet használ, illetve a Sketchből és a Photoshopból is megoldható a mockupok importálása. OS X-re, Windowsra és böngészőre is elérhető. Egy felhasználó két projektet ingyen elkészíthet rajta.

MockPlus – rendkívül felhasználóbarát, gyors és hatékony prototípus-készítő eszköz. A platformon számtalan előregyártott elem elérhető, így gyorsítva a prototípus készítését. A design készítése teljes mértékben vizuális alapon történik. Elérhető OS X-re, Windowsra és böngészőre. Ingyenes verzió ugyanakkor nem áll rendelkezésre, az egyéni csomag 59 dollárba kerül egy évre.

AdobeXD – minden az egyben megoldás UX és UI designereknek prototípusok létrehozásához. Egy rakás eszköz és sablon elérhető benne, az Adobe más eszközeivel pedig természetesen kiváló az együttműködése. OS X-re, Windowsra, Androidra és iOS-re is elérhető. Az úgynevezett Starter csomag ingyenesen is elérhető mind egyéni, mind céges felhasználásnál.

Figma – egy felhasználói felület készítő alkalmazás, mely alapvetően böngésző alapú, de elérhető Windowsra és OS X-re is. Egyik remek funkciója, hogy ha elveszíted az internetkapcsolatot, akkor is tovább tudsz dolgozni bármely dokumentumon, mely nyitva van. Élő, valós idejű együttműködést tesz lehetővé, és az egész csapat elérheti az általad létrehozott újrahasználható elemeket. A kezdő csomag itt is ingyenes.

Axure – egy könnyen használható módszer akár drótváz, akár prototípus készítésére. Kódmentes a használata, OS X-re és Windowsra érhető el. A 30 napos próbaverzió ingyenes.

Proto.io – egy web-alapú alkalmazás, ahol szintén minden drag and drop módszerrel, gombok lenyomásával, listákról történő választással, kódmentesen működik. Ez néha azt eredményezi, hogy kicsit nehéz megtalálni egyes beállításokat, de viszonylag könnyen megtanulható a használata. Interaktív prototípusok hozhatók létre vele a böngészőben, illetve ugyanígy megjeleníthető mobil eszközökön is a prototípus. A legolcsóbb csomag egy hónapra 24 dollárba kerül.

Flinto – csak Mac OS-re érhető el, de low, medium és high fidelity prototípusok is készíthetők vele. Az induló ár 99 dollár.

Justinmind – egy népszerű prototípus készítő eszköz, mellyel magas minőségű prototípusok vagy akár drótvázak hozhatók létre. Ez is drag and drop felületet használ, így kezdők számára is könnyen használható. Elérhető OS X-re és Windowsra, az induló csomag 19 dollár havonta éves fizetés esetén.

Origami – az Origamit a Facebook fejlesztette és használja is, de csak macOS-kompatibilis. Ugyanakkor mobilappként is elérhető, hogy mobileszközön is tudd tesztelni a létrehozott prototípust. Nem drag and drop fejlesztési környezetet használ, ahogy az InVision és a Sketch sem. A Sketchből bármi átemelhető belőle, ahol aztán gyorsan módosítható, animálható. Ami a legjobb benne, hogy teljesen ingyenes.

Végül

Egy webdesign elkészítése során nem feltétlenül van szükség mindegyik megoldás elkészítésére. Végig kell gondolni, hogy

• milyen problémát akarunk megoldani,
• ki a célcsoportunk,
• mit tesznek a versenytársak az adott területen,
• melyek a termékkövetelmények.

A kérdés az, hogy a termék és a csapat szempontjából melyik a jobb megoldás. Egy formalizált dokumentáció, egy informális gyors vázlat vagy egy szemtől-szembe beszélgetés. Van-e idő és pénz egy gondosan kivitelezett felhasználó-kutatásra, vagy csak egy gyors megbeszélésen kell vázolni a tervet?

Ugyanakkor persze egyáltalán nincs kizárva, hogy mindegyik megoldás elkészül egy webdesign során. Sok esetben erre szükség is van. Mindegyiknek van értelme, és ha jól csinálják, akkor mindegyik közelebb visz egy jó webdesignhoz.