Kezdő útmutató a gyors prototípus készítéshez

Minden, amit tudnod kell a gyors prototípus készítésről 7 perc (vagy kevesebb) alatt

Az ötletből termékké válás folyamata rendetlen. Az ötlet prototípusának megtanulása , visszajelzés megszerzése és az iterálás a legkritikusabb képesség, amellyel bárki rendelkeznie kell, aki saját termékeinek építésére vágyik. Ez egyben az UX Designer munkájának egyik legjelentősebb része.

A prototípusok sokféle formában léteznek, a durva vázlattól a papíron át az interaktív szimulációig, amely a végterméknek tűnik. Ez az útmutató teljesen kezdőknek szól, akik meg akarják érteni, mi is a prototípus készítés.

Kitérünk néhány gyors prototípus-készítéssel kapcsolatos kifejezésre, valamint a következőkre:

Mi a gyors prototípus?

A gyors prototípus-készítés egy iteratív folyamat, amelynek segítségével vizualizálják, hogyan fog kinézni egy webhely vagy egy alkalmazás annak érdekében, hogy visszajelzést és érvényesítést szerezzenek a felhasználóktól, az érdekeltektől, a fejlesztőktől és a tervezőktől.

Jól alkalmazva a gyors prototípus-készítés javítja a tervek minőségét azáltal, hogy fokozza a kommunikációt a különböző felek között, és csökkenti annak kockázatát, hogy olyan dolgokat építsen fel, amelyekre senki sem vágyik.

Mi kell a prototípus elkészítéséhez?

A prototípust nem úgy tervezték, hogy a rendszer teljesen működőképes változata legyen, hanem csak a végtermék felhasználói élményének vizualizálására szolgál. Ahogy Daniel Burka, a Google Ventures tervezőpartnere mondja:

Az ideális prototípus a „Goldilocks minőség” legyen. Ha a minőség túl alacsony, az emberek nem fogják elhinni, hogy a prototípus valódi termék. Ha a minőség túl magas, egész éjjel dolgozni fog, és nem fejezi be. Szüksége van Goldilocks minőségre. Nem túl magas, nem túl alacsony, de éppen megfelelő.

Nem csak képernyőket, alkalmazásokat vagy weboldalakat prototípusozhat, hanem szinte bármit. A prototípus készítés kiváló módszer a következők tesztelésére (példák):

  • Új funkciók: Az Instagram-történetek prototípusa az Instagram alkalmazásban (mielőtt elindították volna őket)
  • Változások a munkafolyamatban: A Prototype Medium új kiadói folyamata a fizetett tagságok bevezetése után
  • Új technológia: Készítsen prototípust egy önvezető autóútról!
  • Új felület: Az Apple Watch kezelőfelületének prototípusa (amikor először elindult)

Tehát most megértette, mire szolgál a gyors prototípus-készítés. De hogyan csinálod? Ezt legközelebb kitérjük.

A gyors prototípus-készítés folyamata

A gyors prototípus-készítés három lépésből áll, amelyet annyiszor ismételnek, ahányszor szükséges:

  1. Prototípus: Készítsen vizuális modellt a megoldásról vagy az interfészről.
  2. Áttekintés: Ossza meg a prototípust a felhasználókkal, és értékelje, hogy megfelel-e igényeiknek és elvárásaiknak.
  3. Finomítás: Ezen visszajelzések alapján határozza meg azokat a területeket, amelyeken javítani vagy pontosítani kell.

A prototípus általában a kulcsfontosságú területek nagyon egyszerű felépítésével indul, és minden egyes iterációval bonyolultabbá válik, amint több adatot gyűjt a felhasználói visszajelzésekből.

Mennyit vegyen fel a prototípusába?

Koncentráljon a leggyakrabban használt kritikus funkciókra. A gyors prototípus-készítés lényege annak bemutatása, hogy egy funkció hogyan fog működni, vagy hogyan fog kinézni a tervezés, anélkül, hogy részletesen elkészítené a teljes termék prototípusát. Ne feledje, hogy a Goldilocks minőségre törekszünk !

Egyszerre egy felhasználói folyamat prototípusát készítse el. Ahelyett, hogy képernyőről képernyőre haladna, alapozza meg a prototípusát egy olyan történeten, amely végigvezeti a felhasználót a prototípusra szánt területeken. Így pontosabb visszajelzést kap, mert prototípusa tükrözi a valós élethelyzeteket. Például prototípusozza a „regisztrációs / bejelentkezési / jelszó-visszaállítási” folyamatot.

Ne felejtsen el egy iterációs tervet is szem előtt tartani. Az iterációk megtervezésekor jó ökölszabály, hogy széles körűen kezdjen, majd haladjon a megoldás részletesebb verziója felé. Az iteráció során megnő a prototípusok hűsége , valamint az, hogy mennyit veszel bele.

De várj, mi ez a hűség?

Mit jelent a prototípus hűsége?

A hűség arra utal, hogy egy prototípus mennyire egyezik meg a végtermékkel vagy a megoldással. Nagyon sokféle lehetőség és pontossági fokozat közül választhat, a folyamat szakaszától és a prototípus céljától függően.

Vizuális (vázlatos vagy stílusos)

Az elrendezés és a tervezés a prototípus hűségének legszembetűnőbb aspektusai. Ha egy prototípust a kezdetektől fogva magas szintű vizuális hűséggel állítanak elő, a felhasználók inkább a vizuális, mint a funkcionális részletekre összpontosítanak, ami elvonja a figyelmet a prototípus készítés korai szakaszának elsődleges céljáról.

Funkcionális (statikus vagy interaktív)

A prototípusnak statikusnak kell lennie, vagy teljesen működőképesnek (interaktívnak) kell lennie? Mindkét verziónak vannak előnyei és hátrányai: a statikus prototípusok egyszerűbbek és gyorsabban megvalósíthatók, míg az interaktívak később felhasználhatók a használhatóság tesztelésére és a felhasználói oktatásra.

Tartalom (Lorem ipsum vs. valós tartalom)

A prototípus készítés korai szakaszában a szokásos „lorem ipsum” tartalom hasznos lehet a felhasználó figyelmének elterelésének elkerülése érdekében, így a szövegben bekövetkezett változások kommentálása helyett funkcionális visszajelzésre tudnak összpontosítani.

A prototípus-készítés folyamán azonban értékelje annak szükségességét, hogy a próbabábu szöveget valódi tartalommal cseréljék le, hogy a felhasználók megérezhessék, hogyan befolyásolja a teljes tervezést.

A valódi címkék használata szintén kiváló lehetőség annak tesztelésére, hogy a „másolata” jól működik-e vagy sem. A „Másolás” csak egy divatos kifejezés a képernyőn megjelenő szövegcímkék és információk számára, például a „Közzététel” gomb „Közzététel”, „Közzététel”, „Küldés”, „Kész” vagy valami más hívása.

Milyen hűségszintek léteznek?

  • Low-Fidelity: Az alacsony Fi-módszerek, például a ceruza-papír vázlatok, statikus prototípusokat eredményeznek alacsony vizuális és tartalmi hűséggel, amelyek lehetővé teszik a gyors és egyszerű változtatásokat. Ez arra kényszeríti a felhasználót, hogy összpontosítson a funkcionalitásra és arra, hogy miként fogja használni a rendszert annak kinézete helyett.
  • Közepes hűség: A Visio-hoz hasonló számítógépes alapú eszközök drótvázak és munkafolyamatok formájában állítják elő a közepes hűségű prototípusokat . A hűség ezen szintjét a rendszer viselkedésének bemutatására, a felhasználói igények kielégítésének megállapítására és a felhasználói élmény értékelésére használják.
  • High-Fidelity: A High-Fidelity prototípusok néha annyira reálisak lehetnek, hogy gyakran összetévesztik őket a valódi termékkel. A gyártásuk is sokkal időigényesebb . Az olyan eszközök, mint az InVision, a Sketch, a Figma, az Adobe XD, a Framer és így tovább, lehetővé teszik a nem technikai felhasználók számára, hogy nagy pontosságú prototípusokat készítsenek. Bár ezeket nem lehet felhasználható kódokká alakítani, később nagyon hasznosak lehetnek használhatósági tesztelés vagy felhasználói képzési célokból.

Hogyan választhatja ki, hogy melyik hűségszinten kíván prototípusozni?

Legtöbbször a terveket úgy lehet értékelni, hogy durva vázlattal kezdjük, majd a rendszer összetettségétől és követelményeitől függően magasabb hűségszintekre lépünk.

Előfordulhat, hogy a választást az ügyfél igényei vagy a fókuszterületek vezérlik. Például, ha ki akarja értékelni az interfész változásának vizuális hatását, érdemes egy durva vázlat helyett egy stílusos kialakítást használni. Vagy ha a megoldás üzenetközpontú, úgy dönthet, hogy a valódi tartalmat használja a szokásos „lorem ipsum” helyőrző szöveg helyett.

Hogyan válasszon prototípus-készítő eszközt?

Az Ön igényeitől és megközelítésétől függően sokféle eszköz áll rendelkezésre a prototípus készítéséhez. Az eszköz kiválasztása előtt tegyen fel néhány kérdést:

  • Mennyi időbe telik megtanulni az eszköz használatát?
  • Vajon támogatja prototípusok az igények meg a termék (web, szoftverek, mobilalkalmazásokat egy új technológia, és így tovább)?
  • Az eszköz lehetővé teszi számomra, hogy megosszam másokkal a prototípusaimat, és összegyűjtsem a visszajelzésüket?
  • Mennyire egyszerű változtatni a prototípuson?
  • Használhatok előre definiált sablonokat és sablonokat ezzel az eszközzel?

A bevált gyakorlatok prototípusának elkészítése: tennivalók és nem tennivalók

A következők:

  • Együttműködjön a felhasználókkal és az érdekelt felekkel, hogy minél több visszajelzést kapjon, és bevonja őket a végtermék tulajdonjogába
  • Korán állítsa be az elvárásokat azzal, hogy megbizonyosodjon arról, hogy a felhasználók és az érdekelt felek tudják, hogy a prototípus-készítés egy adott kérdés megválaszolásának módja, és nem jelenti a kész terméket.
  • Tegye valósághűvé nagy hűségét (beleértve a válasz késleltetését is), hogy a felhasználók és az érdekelt felek ne csalódjanak, amikor összehasonlítják a végtermékkel.
  • Sablonok és sablonok mentése a későbbi projektekben történő újrafelhasználáshoz.

Ne tegye:

  • Ne prototípusokat készítsen, amelyek nem lesznek a végtermékben
  • Ne légy perfekcionista. Elég jó a barátod. A gyors prototípus készítés célja, hogy mindenkinek közös alapot biztosítson.
  • Ne prototípusozzon mindent!

Ha kíváncsi arra, hogyan kell tesztelnie a prototípusokat, olvassa el itt a használhatóság tesztelésével kapcsolatos bejegyzésemet :

A nagyszerű UX: Usability Testing mögött jól őrzött titok

Akár csak prototípusa, akár teljes értékű terméke van, nagyon jó ötlet havi futtathatósági teszteket futtatni… medium.freecodecamp.org

Köszönjük, hogy elolvasta ezt a gyors útmutatót. Eredetileg a Commonlounge UX Design tanfolyamának részeként jelent meg, egy olyan platformon, amely olyan tanfolyamokat tartalmaz, amelyekhez hasonló harapásméretű órák vannak a Djangótól a Gépi tanulásig terjedő témákban, amelyek a legtöbb értéket nyújtják az Ön által betöltött idő alatt.

Megtanul valós projekteken dolgozni és visszajelzést kapni az ipari mentoroktól. Itt érdemes megnézni!