High-Fidelity & Low-Fidelity prototípuskészítés: mit, hogyan és miért?

valójában a “high fidelity” és a “low fidelity” kifejezéseket először a rockzenében használták a rock and roll hangzásának és játékkészségének leírására az 1980-as évek végén. az évek múlásával ezeket a webes/alkalmazástervezésben is alkalmazzák, hogy a prototípusba épített részletek és funkcionalitás különböző szintjeire utaljanak.

azonban mi a tényleges különbség közöttük, hogyan és miért válasszuk a magas vagy alacsony hűségű prototípust a jobb tervezés vagy a felhasználói kutatás érdekében?

a következőkben végigvezetem Önt a nagy hűség és az alacsony hűség alapjain és különbségein, és elmagyarázom, miért és hogyan válasszuk ki őket, hogy kiváló prototípusokat készítsenek a jobb tervezéshez vagy a felhasználói kutatáshoz.

Tartalomjegyzék:

• először is, mi a prototípus
• mi az alacsony hűségű prototípus
• mi a nagy hűségű prototípus
• különbség a nagy hűségű és az alacsony hűségű prototípus között
• hogyan és miért válasszon hi-fi vagy low-fi prototípust a jobb tervezéshez
• legjobb prototípuskészítő eszköz a web/alkalmazás tervezéséhez

először is, mi a prototípus?

“A prototípus egy koncepció vagy folyamat tesztelésére épített termék korai mintája, modellje vagy kiadása. Ez egy olyan kifejezés, amelyet számos kontextusban használnak, beleértve a szemantikát, a tervezést, az elektronikát és a szoftverprogramozást.”- – – – A Wikipédiából.

amikor az UI/UX tervezésről van szó, a prototípus segít a tervezőknek a tervezési ötleteik digitális és kézzelfogható modellekké történő lefordításában. Közvetlenül tesztelhetik az UI-k, az interakciók és az UX-folyamatok részeit vagy egészét, hogy lássák, működőképesek-e és excutálhatók-e.

sőt, mivel a csapatok igényei eltérőek, elkészítik az alacsony hűségű prototípust vagy a nagy hűségű prototípust is, hogy teszteljék tervezési ötleteiket különböző célokra.

mi az alacsony hűségű prototípus?

a low-tech, low – fi vagy lo-fi prototípusként ismert low-fi prototípus egy félkész prototípus, amely a funkcióra, a struktúrára, a folyamatra összpontosít, és a web/alkalmazás legegyszerűbb keretrendszerét és elemeit biztosítja. Gyakran használják a tervezési ötletek tesztelhető és kézzelfogható tárgyakká történő lefordítására a felhasználói igények korai szakaszában történő összegyűjtésére és elemzésére.

akkor mi a nagy hűségű prototípus?

a high-fidelity prototípus – high-tech, high-fi vagy hi-fi prototípus néven ismert, egy átfogó és interaktív prototípus, amely nagyon közel áll a végtermékekhez, sok funkcióval, interakcióval és részletekkel. Gyakran használják a későbbi használhatósági értékelés során, hogy felfedezzék azokat a lehetséges problémákat, amelyekkel a web/alkalmazás tervezése még mindig fennállhat.

különbség a High Fidelity és az alacsony Fidelity prototípus között

még mindig nem ismeri a különbségeket az alacsony fidelity és a nagy fidelity prototípusok között? Ne aggódj! Íme 3 valódi alacsony hűségű prototípus példa, amelyek segítenek többet megtudni az alacsony fi prototípusokról:

1. Low Fidelity Motion Prototype Example

ez a low-fi prototípus világosan mutatja a második menümozgásokat anélkül, hogy túlságosan a felhasználói felület részleteire összpontosítana.

2. Alacsony hűségű UX prototípus példa egy weboldal-készítő számára

ez az alacsony hűségű UX prototípus egyértelműen bemutatja az oldalelrendezéseket, a navigációs rendszereket és a felhasználói interakciókat anélkül, hogy túl sok felhasználói felületet részletezne. Segít a tervezőknek a feltételezések tesztelésében és a láthatatlan UX problémák gyors megtalálásában.

3.Lo-fi prototípus példa pályázat

ez egy másik jó példa (létrehozva a mockplus-ban, egy egyszerűbb, gyorsabb és okosabb prototípuskészítő eszközben) az alkalmazás fő elrendezésének és elemelhelyezésének bemutatására. Még az elemek részletei nélkül is segít a tervezőknek felismerni és kezelni a lehetséges problémákat egy korábbi szakaszban.

látod? A felhasználói felület részletei nélkül is a low-fi prototípus segít a tervezési ötletek közvetítésében és a web/alkalmazás fő funkcióinak, struktúráinak, folyamatainak és interakcióinak egyszerű megjelenítésében. Ez hozza a tervezők sok előnnyel jár.

az alacsony hűségű prototípusok előnyei:

• alacsony költség. Az alacsony hűségű prototípus költsége rendkívül alacsony.
• gyors. Anélkül, hogy a felület minden részletére összpontosítanánk, a tervezők egyszerűen követhetik tervezési ötleteiket, és néhány percen belül létrehozhatnak egy egyszerű és tesztelhető prototípust.
• könnyű bemutatni, együttműködni és iterálni. Túl sok felhasználói felület részlete nélkül az alacsony fi prototípus nem igényel sok szakmai készséget. Több ember csatlakozhat és együttműködhet ugyanazon a projekten. A tervezők számára is egyszerű a változtatás és a prototípus iterálása az együttműködés során.
• könnyű visszajelzést kapni. Mivel az alacsony hűségű prototípus könnyen hordozható és bemutatható, a tervezők közvetlenül megoszthatják másokkal (beleértve a csapattagokat és az érdekelt feleket), hogy visszajelzéseket gyűjtsenek a tervezésről.
• könnyű felismerni és kezelni a lehetséges problémákat. Az alacsony hűségű prototípus lehetővé teszi a tervezők számára, hogy egyszerűen teszteljék a web/alkalmazás felhasználói folyamatait, interakcióit és navigációs menüit. Jó, ha a tervezők gyorsan felismerik és kezelik a lehetséges UI/UX problémákat.

az alacsony hűségű prototípusok hátrányai:

• Korlátozott UI részletek / animációk / interakciók. Az ötletek gyors közvetítése érdekében gyakran alacsony hűségű prototípust hoznak létre korlátozott felhasználói felület részletekkel, funkciókkal, animációkkal és interakciókkal stb. Tehát nem jó, ha más tervezők vagy csapattagok teljes mértékben megértik a web/alkalmazás tervezését.
• a vizsgálati eredmények korlátozottak és pontatlanok. Elegendő tervezési részlet nélkül az alacsony hűségű prototípus bizonyos mértékig nem képes pontosan szimulálni a valós felhasználói forgatókönyveket. A vizsgálati eredmények is elkerülhetetlenül befolyásolják és pontatlanok. Szükségtelen mondani, hogy amikor a prototípust a későbbi szakaszban drámai módon módosítják, a tesztelési eredmények teljesen eltérőek lehetnek.

tehát, ha csak néhány tervezési ötletet kap, szeretné bemutatni őket egy egyszerű prototípussal, megvitatni és együttműködni más tervezőkkel vagy csapattagokkal, mielőtt ásna, egy alacsony hűségű prototípus tökéletes az Ön számára.

és akkor itt van 3 valódi high-fidelity prototípus példa, amely segít többet megtudni a high-fi prototípusokról:

1. Job List High Fidelity Prototype Example

ez a high fidelity prototípus nem csak a felhasználói felület részleteit mutatja, hanem a felhasználói folyamatokat és interakciókat is világosan megjeleníti. A tervezők könnyen ellenőrizhetik és tesztelhetik a nagyon apró részleteket, hogy lássák, vannak-e még UI/UX problémák.

2. Nagy Hűségű Prototípus Példa

3. Termék Design High Fidelity prototípus példa

a high-fidelity prototípus lehetővé teszi, hogy közvetíteni tervezési ötletek gazdag színek, gombok, fotók, ikonok, animációk, interakciók és további részleteket.

a nagy hűségű prototípusok előnyei:

• gazdag tervezési részletek. A high-fidelity prototípusok több HQ fotóval, színekkel, animációkkal, ikonokkal, gombokkal és egyéb elemekkel készülnek. Minden elem pontosan úgy van megtervezve, mintha egy valódi weboldalon/alkalmazásban lenne.
• jobb vizuális hatás. A nagy színsémával, élénk animációkkal, elrendezésekkel és még sok mással a nagy hűségű prototípus gyakran jobb vizuális effektusokkal is rendelkezik, mint az alacsony hűségű prototípus.
• pontosabb vizsgálati eredmények. Gazdag részletekkel a nagy hűségű prototípus csak úgy néz ki, mint egy igazi web/alkalmazás. A tervezők könnyen szimulálhatják a valós felhasználói forgatókönyveket, és tesztelhetik a terméket minden lehetséges szempontból, beleértve az interakciókat, a felhasználói folyamatokat, az elemhatásokat és a színsémákat, valamint az UX-t. A vizsgálati eredmények is sokkal pontosabbak.
• hatékonyabb visszajelzés. Természetesen, miután megosztották más tervezőkkel és csapattagokkal, a kapott visszajelzések is hatékonyabbak a meglévő problémák kezelésére.
• vonzóbb az ügyfelek és az érdekeltek számára. Az is jó, ha a tervezők világosan bemutatják, hogy a végső web / alkalmazás hogyan működik, és segít több ügyfelet, érdekelt felet és befektetőt vonzani.

a hifi prototípusok hátrányai:

• magasabb költség. A nagy hűségű prototípust gyakran professzionális prototípuskészítő eszközzel kell létrehozni. Az alacsony hűségű prototípushoz képest a költsége biztosan sokkal magasabb.
• nehéz megváltoztatni és iterálni. Néhány változtatás esetén a nagy hűségű prototípus oldalainak vagy elemeinek sorozatát is egyszerre kell módosítani. Ez zavaró és időigényes lehet.

tehát egy nagy hűségű prototípus rendkívül funkcionális és interaktív az Ön és csapata számára, hogy megtalálja és kezelje néhány apró UI/UX problémát, valamint több részvényest és ügyfelet szerezzen a tervezési szakaszban.

hogyan és miért válasszunk Hi-fi vagy Low-fi prototípust a jobb tervezés érdekében?

mint fentebb említettük, mivel a nagy hűség és az alacsony hűség nagyon eltérő szerepet játszik a sikeres tervek létrehozásában, jobb, ha különböző vásárlásokhoz vagy különböző tervezési szakaszokhoz is használja őket:

1.Miért jobb az alacsony hűségű prototípus az Ön számára a tervezés korai szakaszában?

nyilvánvaló, hogy a low fidelity prototípus inkább a végtermékek magas szintű koncepcióira összpontosít, és segít felfedezni a lehetséges problémákat, valamint megoldani őket a nagyon korai szakaszban.

segít biztosítani, hogy Ön és csapata a megfelelő tervezési témát és irányt választotta és követte, mielőtt belevágna.

tehát a tervezés korai szakaszában, amikor Ön és csapata arra törekszik, hogy gyorsan lefordítsa az ötleteket vizualizált prototípusokká, lerövidítse az iterációkat és összegyűjtse a felhasználói visszajelzéseket, az alacsony hűségű prototípus sokkal jobb választás.

Röviden szólva, mikor van a megfelelő idő az alacsony fi prototípus használatára?

• amikor egy tervezési ötlet villog a fejedben, és gyorsan kézzelfogható modellré akarod alakítani
• ha a lehető leghamarabb meg akarod vitatni a tervezési ötleteidet a partnereiddel
• ha tesztelni akarod, hogy a tervezési ötletek megvalósíthatók-e és megfelelnek-e a felhasználók igényeinek
• ha visszajelzést szeretnél kapni a csapat többi tagjától

miért jobb az Ön számára a high fidelity prototípuskészítés a tervezés legvégén?

és akkor, mivel a high fidelity prototípus gyakran nagy figyelmet fordít a web/alkalmazás részleteire és funkcióira, gyakran jobb, ha a tervezők tesztelik a web/app tervek megvalósíthatóságát, és több felhasználót/érdekelt felet vonzanak a tervezési szakaszban.

Röviden szólva, mikor van a legjobb idő a high-fi prototípus használatára?

• amikor a termék vizuális tervezése megtörtént
• ha tesztelni szeretné a web/alkalmazás részleteit, például a felhasználói felület elemeit, a színsémákat és az oldalmásolatokat stb.
• ha interakciót, munkafolyamatot, felhasználói folyamatot, átmeneti animációt, vizuális effektusokat vagy hasonló tervezési ötleteket szeretne tesztelni a teljes felhasználói felület részleteivel
• ha meg szeretné tudni a többi tervező és tervező visszajelzéseit felhasználók

hogyan válasszunk megfelelő prototípus-eszközt a jobb tervezéshez?

nem számít, hogy nagy hűségű vagy alacsony hűségű prototípust választ, az egyetlen cél az, hogy fantasztikus tervezési ötleteit élénkebben mutassa be, és kiváló web/app prototípusokat készítsen, igaz? Ha a válasz “igen”, a következő lépés az Ön számára a megfelelő prototípus-eszköz kiválasztása.

de még mindig nem tudom, hogyan? Íme néhány tipp a referenciákhoz:

• Price. Az ár mindig a legfontosabb tényező az alacsony fi vagy a magas fi prototípus eszköz kiválasztásához. Ez azonban nem az egyetlen tényező, amelyet figyelembe kell vennie. Az olcsó vagy drága ár nem jelent semmit. Csak arra van szüksége, amelyik a legjobban megfelel Önnek.
• tanulási görbe. Mindig számít, hogy mennyi ideig tart Önnek és csapatának egy új eszköz megtanulása, miközben kiválasztja a megfelelő prototípus-eszközt. Tehát, ha nem akar időt pazarolni egy eszköz új funkcióinak felfedezésére, akkor a legjobb, ha egy könnyebbet választ.
• használat. Ezek a napok, rengeteg prototípus-eszköz létezik, amelyek teljesen más funkciókat kínálnak. Ahhoz, hogy kiválassza az Ön és csapata számára legmegfelelőbbet, a legjobb, ha tudja, milyen funkciókra lesz szüksége pontosan a terméktervezési folyamatban. Tehát előzetesen meg kell találnia a különböző részlegek csapattagjainak valódi igényeit.
• csapatmunka. A tervezési ötletek megvitatásához és a többi csapattag visszajelzéséhez a legtöbb tervező / tervező csapat inkább olyan prototípus-eszközt választ, amely támogatja a csapatmunkát. Arra is szükséged van? Ha igen, egy olyan eszköz, amely lehetővé teszi, hogy Ön és csapata szabadon kommunikáljon és együttműködjön az interneten, jobb megoldás.
• hűség. Nos, a prototípus-eszköz kiválasztásakor figyelembe kell venni a hűséget is.
• integráció. Egy másik tényező, amelyet figyelembe kell vennie, hogy megnézze, mennyire illeszkedik a prototípus-eszköz a tervezési folyamathoz. Manapság, ha a felhasználóknak gyakran kell eszközöket váltaniuk a tervezés során, sok prototípus-eszköz integrálva van más eszközökkel, például Sketch, PS, Facebook, Slack stb.

összességében remélem, hogy ezek a tippek segítenek kiválasztani a megfelelő eszközt.

3 Legjobb Low Fidelity prototípus eszközök

itt van 3 legjobb Low fidelity prototípus eszközök a referenciák:

papír és tollak

A leggyorsabb és egyszerű eszköz, toll és papír segít felhívni az ötleteket könnyen és gyorsan, és megkönnyíti a belső vita között a csapat tagjai. Még akkor is, ha néha prototípus-szoftvert kell használnom a rajzoláshoz, általában inkább tollat és papírt használok, hogy először tisztázzam az ötleteimet.

előnyök:

• teljesen ingyenes
• gyors
• Könnyen indítható

Cons:

• nincs intelligens interakciók és animációk
• nem tudja megmutatni az összes ötletet egyértelműen
• nem lehet megvitatni és tesztelni minden részletet

Mockplus

A Mockplus egy erőteljes, alacsony hűségű prototípuskészítő eszköz, amely sok figyelmet kap az elmúlt években. Lehetővé teszi a tervezési ötletek interaktív prototípusokká történő lefordítását, tesztelését, megosztását és iterálását könnyedén. A csapat együttműködés és menedzsment funkció is segít javítani a munka hatékonyságát könnyedén.

előnyök:

• több mint 200 előre elkészített komponenst és 3000 előre megtervezett ikont biztosít
• hozzon létre interakciókat egyszerű drag-and-drop
• számos lehetőséget kínál az oldalak és prototípusok exportálására
• számos mintát és projektet biztosít
• számos módot kínál a prototípus online vagy mobil megosztására és tesztelésére
• kommunikáljon, kommentáljon és működjön együtt egy prototípussal online
• integrálja a vázlatot

hátrányok:

• nem teljesen ingyenes

Balsamiq makettek

A Basamiq egy egyszerű, alacsony hűségű prototípuskészítő eszköz, amely lehetővé teszi a tervezési ötletek közvetlen rajzolását egy táblára. Nagyon hasznos, ha csak a tervezés szerkezetére és általános koncepciójára összpontosít.

hátrányok:

• adjon meg egy beépített kézzel festett UI könyvtár
• Export tervek PNG / PDF képek közvetlenül

Cons:

• hiányzik az alapvető kölcsönhatások, míg a prototípus tervez

2 legjobb High Fidelity prototípus eszközök

Marvel App

Marvel app egy erős, nagy hűségű prototípus eszköz, amely támogatja létrehozása drótvázak, prototípusok és makettek együttműködve az interneten. Lehetővé teszi a képek közvetlen feltöltését(beleértve a JPF-et, a GIF-et és a PSD-t), valamint animációk hozzáadását az interaktív prototípusok gyors létrehozásához.

Mockplus Cloud

A Mockplus Cloud egy professzionális online tervezési együttműködési eszköz, amely lehetővé teszi a termékmenedzserek, tervezők és fejlesztők számára, hogy online együttműködjenek az automatikus specifikációkkal, eszközökkel és kódrészletekkel.

azt is használják, mint egy all-in-one nagy hűségű prototípus eszköz. Könnyedén feltölthet terveket a sketch/PS/Adobe XD eszközeivel és specifikációival, és gazdag interakciós parancsokat adhat hozzá interaktív és nagy hűségű prototípusok létrehozásához.

egy termékcsapat számára az újonnan létrehozott prototípus egy linkkel is megosztható, és valós időben visszajelzést kaphat.

röviden: manapság sokkal több felhasználó vonzása érdekében számos prototípus-eszközt hoznak létre, hogy a lehető legtöbb felhasználó igényeit kielégítsék. Úgy tűnik, nincs egyértelmű határ az alacsony fi és a magas fi prototípus eszköz között.

tehát a megfelelő prototípus-eszköz kiválasztásához a legjobb, ha Ön és csapata több eszköz opciót választ a teszteléshez.

Wrap Up

nem számít, milyen különbségek vannak az alacsony hűségű és a nagy hűségű prototípusok között, hogyan és miért választja az alacsony hűségű vagy a nagy hűségű prototípusokat a jobb tervezés vagy a felhasználói kutatás érdekében, egy jó prototípus-eszköz, mint például a könnyebb és gyorsabb, a Mockplus, gyakran sokat jelent az Ön számára, hogy kiváló web/alkalmazást hozzon létre gyönyörű felületekkel és jó felhasználói élményekkel. Remélem, hogy ez a cikk egyébként inspirálhat.

még ez is tetszhet:

milyen prototípuskészítő eszközökre van szüksége az UX tervezéshez?

milyen előnyei vannak a Prototípuskészítésnek? Hogyan lehet a legtöbbet kihozni belőle?

prototípuskészítő eszközök csapata: Axure VS Mockplus

drótváz vs makett vs prototípus & prototípuskészítő eszközök kiválasztása