Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2018-07-180 komment

Drótváz, prototípus, mockup – mi a különbség közöttük a webdesignban?

Tartalomjegyzék
Bővített tartalomjegyzék

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. Időnként még az is előfordul, hogy a szakmán belül is keverik, illetve szinonimaként használják őket. Ezért nem árt megismerkedni velük egy kicsit jobban. (Frissítés, 2019. 11. 14. – Kibővítettük az egyik fejezetet: Milyen eszközökkel készíthető el egy prototípus?)

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.

A drótvázkészítés lépései

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:

Informacios architektúra

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 kialakítása

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

3. Elkészíthető a váz

Ha már látjuk a fontossági sorrendet, akkor felvázolható egy drótváz-kezdemény, amelyben megjelennek a különböző kategóriák. Nagyjából így:

Drótváz-kezdemény

4. Egy gyors drótváz elkészítése

Ekkor már látható, hogy mi és hol fog megjelenni a kijelzőn. Most újra elő kell venni a tollat és a papírt, hogy elkészítsük 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 ugyanazok a dolgok különbözőképpen 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 lesz 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.

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

Az induláskor a legegyszerűbb eszköz a papír és a ceruza, amikor az ötleteket gyorsan fel kell vázolni. 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. Ilyen például a

é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.

Drótváz készítés az Axure segítségével

A drótvázak tehát, mint látható, 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.

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 mobilppké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.

Prototípus készítése az AdobeXD-vel

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.

A drótváz, a prototípus és a mocup közötti különbségek egy infografikán ábrázolva
A drótváz, a prototípus és a mockup közötti különbségek egy infografikán ábrázolva
Kategória: Design | Címke: , , ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.