Keresés
Header Háttér

Webshark Blog

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

2017-11-080 komment

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

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.

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 webdesign kis pontosságú ábrázolása, a design csontváza, mely tartalmazza az információk fő struktúráit és a tartalmi csoportokat. Világosan kommunikálnia kell, hogy

  • melyek a tartalom fő csoportjai (azaz választ ad a mi kérdésre),
  • milyen az információk struktúrája (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.

Egy drótváznál nem kell minden részletet kifejteni, másrészről viszont 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.

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ük, 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ázak 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 egy fontos lépés, mert szükség lehet rá a felhasználói interakciók és folyamatok megismerése miatt. Interaktív szimulációja a végleges 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 tartalommal és az interakciókkal,
  • 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ó, 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 általában 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 teszteket lehet végezni, 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ípusra ne úgy tekints, mint a weboldal végső mockupja. Ez 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.

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